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

Jump to bottom

docs: [#234] - Adding documentation on the home page #478

Merged
merged 1 commit into from
Oct 22, 2024
Merged

docs: [#234] - Adding documentation on the home page #478

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
74 changes: 71 additions & 3 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -470,8 +470,68 @@
font-size: 0.9rem;
}
}
</style>
</head>
/* General Container Styling */
/* General Container Styling */
.home .container {
position: relative; /* To position the text overlay relative to the container */
}

/* Image Container */
.image-container {
position: relative;
width: 100%;
}

.image-container img {
width: 100%;
height: auto;
border-radius: 20px;
}

/* Text Overlay Styling */
.text-overlay {
position: absolute;
top: 30%;
left: 5%;
width: 40%; /* Adjust width of the text block */
transform: translateY(-20%);
color: #333; /* Adjust text color to fit the background */
}

.text-overlay h2 {
font-size: 36px;
font-weight: bold;
margin-bottom: 20px;
color: #e63946; /* Optional color for the header */
}

.text-overlay p {
margin-bottom: 20px;
font-size: 18px;
line-height: 1.6;
color: #555;
}

/* Responsive for Smaller Screens */
@media (max-width: 768px) {
.text-overlay {
width: 90%; /* Wider text block for smaller screens */
left: 5%;
top: 30%; /* Adjust the positioning for mobile */
}

.text-overlay h2 {
font-size: 28px;
}

.text-overlay p {
font-size: 16px;
}

}

</style>
</head>

<body>
<!-- Header -->
Expand Down Expand Up @@ -499,8 +559,16 @@
<h1><br>Want to <span>Share</span> or <span>Rent</span> <br>a cab.</h1>
<p>Wherever you're going,there's a carpool that will<br>
get you there for less.</p>
<div class="carweb">
<div class="container">
<div class="carweb">
<img src="Car Website – [email protected]" alt="">
</div>
<div class="text-overlay">
<h2>Your Trusted </h2>
<h2>Cab Rental Service</h2>
<p>Our cab rental service is designed to provide you with a seamless, safe, and comfortable travel experience. Whether you're heading to a business meeting, exploring the city, or need a reliable ride to the airport, we've got you covered with our fleet of modern, well-maintained vehicles.</p>
<p>Our mission is to provide safe, reliable, and affordable transportation solutions that cater to individual and corporate needs. We prioritize customer satisfaction and strive to set the benchmark for cab rental services.</p>
</div>
</div>
</div>
<!-- <div class="form-container">
Expand Down
5 changes: 5 additions & 0 deletions style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1247,6 +1247,11 @@ footer p {
background: rgb(0, 0, 0);
}

.dark-mode .text-overlay p{
color: white;
background: rgb(0, 0, 0);
}

.dark-mode .navbar::after {
color: #ffffff;
background: white;
Expand Down
Loading