diff --git a/design.css b/design.css
new file mode 100644
index 0000000..f3f0950
--- /dev/null
+++ b/design.css
@@ -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;
+}
\ No newline at end of file
diff --git a/img/image1.jpg b/img/image1.jpg
new file mode 100644
index 0000000..caac758
Binary files /dev/null and b/img/image1.jpg differ
diff --git a/img/image2.jpg b/img/image2.jpg
new file mode 100644
index 0000000..14a327c
Binary files /dev/null and b/img/image2.jpg differ
diff --git a/img/service1.jpg b/img/service1.jpg
new file mode 100644
index 0000000..82d901e
Binary files /dev/null and b/img/service1.jpg differ
diff --git a/img/service2.jpg b/img/service2.jpg
new file mode 100644
index 0000000..8c31540
Binary files /dev/null and b/img/service2.jpg differ
diff --git a/img/service3.jpg b/img/service3.jpg
new file mode 100644
index 0000000..9dfd219
Binary files /dev/null and b/img/service3.jpg differ
diff --git a/img/service4.jpg b/img/service4.jpg
new file mode 100644
index 0000000..e4c85de
Binary files /dev/null and b/img/service4.jpg differ
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..92dacb5
--- /dev/null
+++ b/index.html
@@ -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/bootstrap@5.3.3/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/core@2.11.8/dist/umd/popper.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/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>
diff --git a/main.js b/main.js
new file mode 100644
index 0000000..e69de29
