Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Revert "Revamp the About Us Page for Better User Engagement" #203

Merged
merged 1 commit into from
Oct 5, 2024
Merged

Revert "Revamp the About Us Page for Better User Engagement" #203

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
242 changes: 242 additions & 0 deletions about.html
View file
Open in desktop
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 removed img/Animated Explainer Video for Cab Services - Vfx Pro - Vfx Pro (1080p, h264, youtube).mp4
View file
Open in desktop
Binary file not shown.
28 changes: 1 addition & 27 deletions index.html
View file
Open in desktop
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
View file
Open in desktop
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
Loading