Skip to content

Commit

Permalink
Merge pull request #203 from 07sumit1002/revert-195-main
Browse files Browse the repository at this point in the history
Revert "Revamp the About Us Page for Better User Engagement"
  • Loading branch information
07sumit1002 authored Oct 5, 2024
2 parents 810b530 + e20d76b commit dc52100
Show file tree
Hide file tree
Showing 4 changed files with 243 additions and 69 deletions.
242 changes: 242 additions & 0 deletions about.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,242 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>About Us - CabRental</title>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/boxicons@latest/css/boxicons.min.css"
/>
<style>
body {
font-family: "Poppins", sans-serif;
margin: 0;
padding: 0;
background-color: #f9f9f9;
color: #333;
line-height: 1.6;
}

.navbar {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #fff;
padding: 20px;
position: sticky;
top: 0;
z-index: 1000;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.navbar .logo {
font-size: 1.8em;
font-weight: bold;
color: #000000;
}

.navbar ul {
display: flex;
list-style: none;
margin: 0;
padding: 0;
}

.navbar ul li {
margin: 0 15px;
}

.navbar ul li a {
color: #fff;
background-color: #b5b1a8;
text-decoration: none;
padding: 10px 20px;
border-radius: 5px;
transition: background-color 0.3s, transform 0.3s;
}

.navbar ul li a:hover {
background-color: #444444;
transform: scale(1.1);
}

.hero {
height: 60vh;
background: url("https://imgs.search.brave.com/-7bIPp-CEYjwrZR7VQetEh1seZnEwsW4eGvZMhzZtj4/rs:fit:860:0:0/g:ce/aHR0cHM6Ly9pbWcu/ZnJlZXBpay5jb20v/ZnJlZS1waG90by9j/bG9zZS11cC1tZXRh/bGxpYy1jYXJfMjMt/MjE1MTExMzIwNi5q/cGc_c2l6ZT02MjYm/ZXh0PWpwZw")
no-repeat center center/cover;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
text-align: center;
position: relative;
box-shadow: inset 0 0 10px #000;
}

.hero::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
}

.hero h1 {
font-size: 4em;
margin: 0;
position: relative;
z-index: 1;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7);
}

.container {
max-width: 1200px;
margin: 0 auto;
padding: 40px 20px;
}

h2 {
color: #333;
margin-bottom: 20px;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

p {
color: #555;
margin-bottom: 20px;
}

ul {
list-style: none;
padding: 0;
}

.values-principles ul li {
background: linear-gradient(145deg, #b8e7af, hsl(129, 28%, 73%));
margin: 10px 0;
padding: 15px 20px;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1),
inset 0 1px 3px rgba(255, 255, 255, 0.1);
transition: transform 0.3s, box-shadow 0.3s;
}

ul li:hover {
transform: translateY(-5px);
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2),
inset 0 1px 3px rgba(255, 255, 255, 0.3);
}

.section-img {
margin: 40px 0;
text-align: center;
}

.section-img img {
max-width: 100%;
height: auto;
border-radius: 10px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
transition: transform 0.3s, box-shadow 0.3s;
}

.section-img img:hover {
transform: scale(1.05);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

.highlight {
color: #d32f2f;
font-weight: bold;
}
</style>
</head>
<body>
<!-- Navbar -->
<nav class="navbar">
<div class="logo">CabRental</div>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="#company-overview">Company Overview</a></li>
<li><a href="#mission-vision">Mission & Vision</a></li>
<li><a href="#values-principles">Values & Principles</a></li>
</ul>
</nav>

<!-- Hero Section -->
<section class="hero">
<h1>About Us</h1>
</section>

<div class="container">
<!-- Company Overview -->
<section id="company-overview" class="company-overview">
<h2>Company Overview</h2>
<div class="section-img">
<img
src="https://imgs.search.brave.com/cxDCWs1zA6VHwGveT0ZH011wctKwB8Cea4MgWnqGOIo/rs:fit:860:0:0/g:ce/aHR0cHM6Ly9pbWcu/ZnJlZXBpay5jb20v/cHJlbWl1bS1waG90/by9mZXJyYXJpLWNh/ci1iYWNrZ3JvdW5k/XzY2MzEwMi0zMDIu/anBnP3NpemU9NjI2/JmV4dD1qcGc"
alt="Company Overview Image"
/>
</div>
<p>
Founded in 2024, <span class="highlight">Premium Cab Rentals</span> is
dedicated to providing top-notch cab rental services with a focus on
reliability, comfort, and customer satisfaction.
</p>
<p>
Our mission is to make transportation easy and accessible for
everyone, offering a range of services tailored to meet diverse needs.
</p>
</section>

<!-- Mission and Vision -->
<section id="mission-vision" class="mission-vision">
<h2>Mission and Vision</h2>
<div class="section-img">
<img
src="https://imgs.search.brave.com/2CAFCbM6U5I6Q03dK-bC8qqqyb_mjrDxo4YGu4-zCnk/rs:fit:500:0:0/g:ce/aHR0cHM6Ly9pbWFn/ZXMuZnJlZWltYWdl/cy5jb20vaW1hZ2Vz/L2xhcmdlLXByZXZp/ZXdzLzMxOC9pbi10/aGUtY2FyLTEtMTQ5/NTA3MC5qcGc_Zm10"
alt="Mission and Vision Image"
/>
</div>
<p>
<strong>Mission:</strong> To provide reliable and affordable cab
rental services while ensuring exceptional customer experience.
</p>
<p>
<strong>Vision:</strong> To be the leading cab rental company known
for innovation, sustainability, and outstanding service.
</p>
</section>

<!-- Values and Principles -->
<section id="values-principles" class="values-principles">
<h2>Values and Principles</h2>
<ul>
<li>
<strong>Customer First:</strong> We prioritize our customers' needs
and strive to exceed their expectations.
</li>
<li>
<strong>Integrity:</strong> We operate with honesty and transparency
in all our dealings.
</li>
<li>
<strong>Safety:</strong> We ensure the highest safety standards for
our customers and drivers.
</li>
<li>
<strong>Innovation:</strong> We continuously seek innovative
solutions to enhance our services.
</li>
<li>
<strong>Sustainability:</strong> We are committed to sustainable
practices and reducing our environmental impact.
</li>
</ul>
</section>
</div>
</body>
</html>
Binary file not shown.
28 changes: 1 addition & 27 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@
<li><a href="index.html">Home</a></li>
<li><a href="ride.html">Ride</a></li>
<li><a href="serv.html">Services</a></li>
<li><a href="#about">About</a></li>
<li><a href="about.html">About</a></li>
<li><a href="review.html">Reviews</a></li>
<li><a href="contactus.html">Contact</a></li>
</ul>
Expand Down Expand Up @@ -69,32 +69,6 @@ <h1><br>Want to <span>Share</span> or <span>Rent</span> <br>a cab.</h1>
</form>
</div> -->

<!-- about section starts -->

<section class="about" id="about">

<div class="row">

<div class="video-container">
<video src="img/Animated Explainer Video for Cab Services - Vfx Pro - Vfx Pro (1080p, h264, youtube).mp4" loop autoplay muted></video>
</div>

<div class="content">
<h3>Company Overview</h3>
<p>Founded in 2024, <span class="highlight">Premium Cab Rentals</span> is
dedicated to providing top-notch cab rental services with a focus on
reliability, comfort, and customer satisfaction.</p>
<p>Our mission is to make transportation easy and accessible for
everyone, offering a range of services tailored to meet diverse needs.</p>
<a href="#" class="btn">Learn more</a>
</div>

</div>

</section>

<!-- about section ends -->

<div class="booking-form">
<div class="form-group">
<label for="fullName">Full Name</label>
Expand Down
42 changes: 0 additions & 42 deletions style.css
Original file line number Diff line number Diff line change
Expand Up @@ -20,48 +20,6 @@
--gradient: linear-gradient(#fe5b3d, #ffac38);
}

.about .row{
display: flex;
align-items: center;
gap: 8rem;
padding: 2rem 0;
padding-bottom: 3rem;
}

.about .row .video-container{
flex: 1 1 40rem;
position: relative;
}

.about .row .video-container video{
width: 100%;
border: 1.5rem solid #fff;
border-radius: 0.5rem;
box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.1);
height: auto;
object-fit: cover;
}

.about .row .content{
flex:1 1 40rem;
}

.about .row .content h3{
font-size: 3rem;
color: #333;
}

.about .row .content .text-wrapper {
display: flex; /* Use flexbox for text */
gap: 1rem; /* Space between paragraphs */
}

.about .row .content .text-wrapper p {
font-size: 1.5rem; /* Adjust paragraph size as needed */
color: #999;
line-height: 1.5;
}

/*Custom Scroll Bar */
html::-webkit-scrollbar {
width: 0.5rem;
Expand Down

0 comments on commit dc52100

Please sign in to comment.