-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
0 parents
commit 05794f6
Showing
9 changed files
with
222 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,63 @@ | ||
.section { | ||
height: 100vh; | ||
padding: 70px 0 0 0; | ||
text-align: center; | ||
} | ||
.carousel-item { | ||
max-height: 100vh; | ||
} | ||
.carousel-item::after { | ||
content:""; | ||
position:absolute; | ||
top:0; | ||
bottom:0; | ||
left:0; | ||
right:0; | ||
background:rgba(10,41,73,0.3); | ||
} | ||
#services { | ||
background-color: #001F3F; | ||
color: #FFFFFF; | ||
} | ||
|
||
#quote { | ||
background-color: #001F3F; /*0A2949*/ | ||
color: #FFFFFF; | ||
} | ||
|
||
#branches { | ||
background-color: #001F3F; | ||
color: #FFFFFF; | ||
} | ||
footer { | ||
background-color: #0A2949; | ||
} | ||
.navbar-nav .nav-link { | ||
transition: color 0.3s ease; | ||
color: #FFFFFF; /* Set font color to white */ | ||
font-weight: bold; /* Make font bold */ | ||
} | ||
|
||
.navbar-nav .nav-link:hover { | ||
border-radius: 5px; | ||
background-color: #0A2949; /* Change background color to black on hover */ | ||
color: #ffffff; | ||
} | ||
.card { | ||
background-color: #0A2949; | ||
color: #FFFFFF; | ||
border: 1px solid #0A2949; | ||
transition: transform 0.3s ease; | ||
} | ||
|
||
.card:hover { | ||
transform: translateY(-5px); | ||
} | ||
|
||
.card-title { | ||
color: #FFFFFF; | ||
} | ||
|
||
.card-text { | ||
color: #CCCCCC; | ||
} |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,159 @@ | ||
<!DOCTYPE html> | ||
<html lang="en"> | ||
<head> | ||
<meta charset="UTF-8"> | ||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
<title>Car Rentals</title> | ||
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> | ||
<link rel="stylesheet" type="text/css" href="design.css"> | ||
</head> | ||
<body data-bs-spy="scroll" data-bs-target="#navbarContent" data-bs-offset="0"> | ||
|
||
<!-- Navigation Bar --> | ||
<nav class="navbar py-4 fs-5 navbar-expand-lg navbar-dark fixed-top"> | ||
<div class="container-fluid"> | ||
<a class="navbar-brand fs-2" href="#">Lorem Rentals</a> | ||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> | ||
<span class="navbar-toggler-icon"></span> | ||
</button> | ||
<div class="collapse navbar-collapse" id="navbarContent"> | ||
<ul class="navbar-nav ms-auto"> | ||
<li class="nav-item"> | ||
<a class="nav-link active" href="#home">Home</a> | ||
</li> | ||
<li class="nav-item"> | ||
<a class="nav-link" href="#services">Services</a> | ||
</li> | ||
<li class="nav-item"> | ||
<a class="nav-link" href="#quote">Get Quote</a> | ||
</li> | ||
<li class="nav-item"> | ||
<a class="nav-link" href="#branches">Branches</a> | ||
</li> | ||
</ul> | ||
</div> | ||
</div> | ||
</nav> | ||
|
||
<!-- Carousel --> | ||
<div id="home"> | ||
<div id="pics" class="carousel slide" data-bs-ride="carousel"> | ||
<div class="carousel-indicators"> | ||
<button type="button" data-bs-target="#pics" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button> | ||
<button type="button" data-bs-target="#pics" data-bs-slide-to="1" aria-label="Slide 2"></button> | ||
</div> | ||
<div class="carousel-inner"> | ||
<div class="carousel-item active"> | ||
<img src="img/image1.jpg" class="d-block w-100" alt="1"> | ||
<div class="carousel-caption d-none d-md-block"> | ||
<h5>Fully Equipped</h5> | ||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> | ||
</div> | ||
<div class="dark-overlay"></div> | ||
</div> | ||
<div class="carousel-item"> | ||
<img src="img/image2.jpg" class="d-block w-100" alt="2"> | ||
<div class="carousel-caption d-none d-md-block"> | ||
<h5>Choose from many options</h5> | ||
<p>Amet tellus cras adipiscing enim eu turpis egestas pretium.</p> | ||
</div> | ||
</div> | ||
</div> | ||
<button class="carousel-control-prev" type="button" data-bs-target="#pics" data-bs-slide="prev"> | ||
<span class="carousel-control-prev-icon" aria-hidden="true"></span> | ||
<span class="visually-hidden">Previous</span> | ||
</button> | ||
<button class="carousel-control-next" type="button" data-bs-target="#pics" data-bs-slide="next"> | ||
<span class="carousel-control-next-icon" aria-hidden="true"></span> | ||
<span class="visually-hidden">Next</span> | ||
</button> | ||
</div> | ||
</div> | ||
|
||
<!-- SERVICES --> | ||
<div id="services" class="section"> | ||
<h2>Services</h2> | ||
<div class="container"> | ||
<div class="row"> | ||
<!-- Service Card 1 --> | ||
<div class="col-md-6 col-lg-3 mb-4"> | ||
<div class="card"> | ||
<img src="img/service1.jpg" class="card-img-top" alt="Service 1 Image"> | ||
<div class="card-body"> | ||
<h5 class="card-title">Service 1</h5> | ||
<p class="card-text">Description of Service 1.</p> | ||
<a href="#" class="btn btn-primary">Learn More</a> | ||
<a href="#" class="btn btn-success">Purchase</a> | ||
</div> | ||
</div> | ||
</div> | ||
|
||
<!-- Service Card 2 --> | ||
<div class="col-md-6 col-lg-3 mb-4"> | ||
<div class="card"> | ||
<img src="img/service2.jpg" class="card-img-top" alt="Service 2 Image"> | ||
<div class="card-body"> | ||
<h5 class="card-title">Service 2</h5> | ||
<p class="card-text">Description of Service 2.</p> | ||
<a href="#" class="btn btn-primary">Learn More</a> | ||
<a href="#" class="btn btn-success">Purchase</a> | ||
</div> | ||
</div> | ||
</div> | ||
|
||
<!-- Service Card 3 --> | ||
<div class="col-md-6 col-lg-3 mb-4"> | ||
<div class="card"> | ||
<img src="img/service3.jpg" class="card-img-top" alt="Service 3 Image"> | ||
<div class="card-body"> | ||
<h5 class="card-title">Service 3</h5> | ||
<p class="card-text">Description of Service 3.</p> | ||
<a href="#" class="btn btn-primary">Learn More</a> | ||
<a href="#" class="btn btn-success">Purchase</a> | ||
</div> | ||
</div> | ||
</div> | ||
|
||
<!-- Service Card 4 --> | ||
<div class="col-md-6 col-lg-3 mb-4"> | ||
<div class="card"> | ||
<img src="img/service4.jpg" class="card-img-top" alt="Service 4 Image"> | ||
<div class="card-body"> | ||
<h5 class="card-title">Service 4</h5> | ||
<p class="card-text">Description of Service 4.</p> | ||
<a href="#" class="btn btn-primary">Learn More</a> | ||
<a href="#" class="btn btn-success">Purchase</a> | ||
</div> | ||
</div> | ||
</div> | ||
</div> | ||
</div> | ||
</div> | ||
|
||
|
||
<!-- QUOTES --> | ||
<div id="quote" class="section"> | ||
<h2>Get A Quote</h2> | ||
</div> | ||
|
||
<!-- BRANCHES --> | ||
<div id="branches" class="section"> | ||
<h2>Branches</h2> | ||
</div> | ||
|
||
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script> | ||
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script> | ||
</body> | ||
<footer class="py-3" style="background-color: #0A2949; color: #F0F0F0;"> | ||
<ul class="nav justify-content-center pb-3 mb-3"> | ||
<li class="nav-item"><a href="#home" class="nav-link px-2" style="color: #F0F0F0;">Home</a></li> | ||
<li class="nav-item"><a href="#services" class="nav-link px-2" style="color: #F0F0F0;">Services</a></li> | ||
<li class="nav-item"><a href="#quote" class="nav-link px-2" style="color: #F0F0F0;">Get Quote</a></li> | ||
<li class="nav-item"><a href="#branches" class="nav-link px-2" style="color: #F0F0F0;">Branches</a></li> | ||
<li class="nav-item"><a href="#" class="nav-link px-2" style="color: #F0F0F0;">Employment</a></li> | ||
</ul> | ||
<p class="text-center">© 2024 Lorem Ipsum</p> | ||
</footer> | ||
|
||
</footer> | ||
</html> |
Empty file.