add

rahulkumarparida · Oct 21, 2024 · 9f5c514 · 9f5c514
commit 9f5c514
Show file tree

Hide file tree

Showing 8 changed files with 309 additions and 0 deletions.
diff --git a/images/car-1.jpeg b/images/car-1.jpeg
diff --git a/images/car-2.jpeg b/images/car-2.jpeg
diff --git a/images/car-3.jpeg b/images/car-3.jpeg
diff --git a/images/car-4.jpeg b/images/car-4.jpeg
diff --git a/images/icons8-audi-100.png b/images/icons8-audi-100.png
diff --git a/index.html b/index.html
@@ -0,0 +1,126 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Multiple on click</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <header> 
+    <nav class="navbar">
+        <div class="logoContent">
+         <img src="/images/icons8-audi-100.png" alt="">
+        </div>
+        <div class="links">
+            <a href="">Home</a>
+            <a href="">About Us</a>
+            <a href="">Products</a>
+            <a href="">Contact Us</a>
+
+        </div>
+    </nav>
+
+    </header>
+    <section class="section" id="sliders">
+        <img src="/images/car-1.jpeg" alt="" class="slide">
+        <img src="/images/car-2.jpeg" alt="" class="slide">
+        <img src="/images/car-3.jpeg" alt="" class="slide">
+        <img src="/images/car-4.jpeg" alt="" class="slide">
+
+    </section>
+    <div class="models">
+
+        <div class="model one">
+        <h1>Audi Q3</h1>
+        </div>
+
+      <div class="model two">
+        <h1>Audi S8</h1>
+      </div>
+      <div class="model three">
+        <h1>Audi RS 7</h1>
+      </div>
+
+    </div>
+    <div class="performance">
+        <ul class="spec-box">
+          <li class="hp"><p>HorsePower</p> <h1>444<p>HP</p>
+          </h1></li>
+          <div class="line"></div>
+          <li class="trq">
+            <p>Torque</p>
+            <h1>442
+            <p>lb-ft</p></h1>
+          </li>
+          <div class="line"></div>
+          <li class="spd">
+        <p>0-60mph</p>
+        <h1>3.7
+        <p>sec</p></h1>
+          </li>
+        </ul>
+        </div>
+
+
+        <footer class="foot">
+            <div class="end">
+              <ul class="explore">
+                <h3>Explore</h3>
+                <li>Models</li>
+              <li>Audi Sport</li>
+              <li>What is e-tron®</li>
+              <li>SUV Models</li>
+              <li>Audi Experience</li>
+              <li>Inclusion & Diversity</li>
+              <li>Electric Models</li>
+              <li>Inside Audi</li>
+              <li>Subscribe to model updates</li>
+              </ul>
+              <ul class="shop">
+                <h3>Shop</h3>
+               <li> Special Offers</li>
+              <li>Find a dealer</li>
+              <li>New inventory</li>
+              <li>Pre-owned inventory</li>
+              <li>Certified pre-owned</li>
+              </ul>
+              <ul class="buy">
+                <h3>Buy</h3>
+                <li>Contact dealer</li>
+                <li>Trade-in value</li>
+                <li>Leasing</li>
+                <li>Financing</li>
+                <li>Apply for financing</li>
+              </ul>
+              <ul class="own">
+                <h3>Owner</h3>
+                <li>myAudi</li>
+                <li>About myAudi</li>
+                <li>Audi Financial Services</li>
+                <li>Audi collection store</li>
+                <li>Accessories</li>
+                <li>Audi connect</li>
+               <li> Service and Parts</li>
+                <li>Roadside Assistance</li>
+               <li> In-Use Verification Program</li>
+
+              </ul>
+              <ul class="support">
+                <h3>Support</h3>
+               <li> Contact Us</li>
+              <li>Help</li>
+              <li>About Audi</li>
+              <li>Careers</li>
+              <li>Newsroom</li>
+              <li>Emissions Modification Lookup</li>
+              <li>Accessibility</li>
+              <li>Recalls</li>
+              <li>INDUSTRY GUIDANCE FOR EMERGENCY RESPONDERS</li>
+              </ul>
+            </div>
+
+             </footer>
+    <script src="/script.js"></script>
+</body>
+</html>
diff --git a/script.js b/script.js
@@ -0,0 +1,10 @@
+
+
+// slider
+const slides = document.querySelectorAll(".slide");
+var counter = 0;
+slides.forEach(
+    (slide,index)=>{
+        slide.style.left=`${index*100}%`
+    }
+)
diff --git a/style.css b/style.css
@@ -0,0 +1,173 @@
+*{
+    margin: 0;
+    padding: 0;
+}
+
+body{
+    background-color:rgb(20, 19, 19);
+}
+/* navbar section */
+nav{
+    padding: 0 15px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.links>a{
+    text-decoration: none;
+    color: rgb(255, 255, 255);
+
+    padding: 0 50px;
+    transition: 0.2s ease-in-out;
+}
+.links>a:hover{
+
+    box-shadow: 8px 4px 1px rgb(24, 224, 227);
+    border-radius: 5px;
+}
+
+/* slider css */
+#sliders{
+    width: 100%;
+    height: 500px;
+    margin: auto;
+    box-shadow: 0 0 3px black;
+    position: relative;
+
+}
+.slide{
+    height: 100%;
+    width: 100%;
+    object-fit: cover;
+    position: absolute;
+    animation:sliding 16s 1.5s infinite ;
+}
+
+@keyframes sliding{
+    0%{
+        transform: translateX(-0%);
+    }
+    15%{
+        transform: translateX(-100%);
+    }
+    30%{
+        transform: translateX(-200%);
+    }
+    45%{
+        transform: translateX(-300%);
+    }
+    60%{
+        transform: translateX(-200%);
+    }
+    75%{
+        transform: translateX(-100%);
+    }
+    100%{
+        transform: translateX(-0%);
+    }
+}
+/* slider css end */
+
+.models{
+    padding: 60px 0;
+    display: flex;
+    justify-content: space-evenly;
+    align-items: center;
+}
+.one , .two ,.three{
+
+  height: 70vh;
+  width: 20%;
+
+
+}
+.one{
+  background: no-repeat;
+background-image:url(https://i.pinimg.com/564x/d4/bb/69/d4bb697a2941b08ff749fef2f58c51b9.jpg) ;
+background-size:100% 90% ;
+}
+.two{
+  background: no-repeat;
+background-image:url(https://i.pinimg.com/564x/ad/93/be/ad93bef33e4630742f13a92005409140.jpg);
+background-size:100% 90% ;
+}
+.three{
+  background: no-repeat;
+background-image:url(https://i.pinimg.com/564x/08/ae/2f/08ae2fa3f4aa5f7aedd374107a49757d.jpg);
+background-size:100% 90% ;
+}
+.models h1 {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-decoration: none;
+  font-family: "Pacifico", cursive;
+  font-weight: 400;
+  color: white;
+}
+.models a{
+  text-decoration: none;
+
+}
+
+.performance{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+     }
+     .spec-box{
+
+    display: flex;
+    justify-content: space-evenly;
+
+     }
+    .hp , .trq , .spd{
+      color:rgb(246, 246, 246);
+    list-style: none;
+
+    height:30rem;
+    width: 25rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    }
+    .spec-box p{
+      font-size: 1.5rem;
+    }
+    .spec-box h1{
+      font-size: 4rem;
+      display: flex;
+      gap: 1rem
+      ;
+    }
+    .line{
+      height: 70vh;
+      width: 0px;
+      border: 1px solid rgb(22, 203, 219);
+    }
+
+    /* footer */
+    footer{
+        bottom: 0rem;
+        background-color: rgb(11, 11, 11);
+          height: 60vh;
+          display: flex;
+          flex-wrap: wrap;
+          justify-content: space-evenly;
+          align-items: center;
+          color: white;
+        }
+       .end{
+        display: flex;
+        justify-content: space-around;
+        align-items: flex-start;
+       }
+       .end>ul{
+        padding: 0 40px;
+       }
+       li{
+       list-style: none;
+       padding: 8px;
+       }