add section

87vinay · Aug 27, 2024 · 07419a5 · 07419a5
1 parent 24d3b21
commit 07419a5
Show file tree

Hide file tree

Showing 4 changed files with 129 additions and 8 deletions.
diff --git a/images/nike-football-samall.jpg b/images/nike-football-samall.jpg
diff --git a/images/nike-football.jpg b/images/nike-football.jpg
diff --git a/index.html b/index.html
@@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -9,12 +10,13 @@
   <link href="https://cdn.jsdelivr.net/npm/remixicon@4.2.0/fonts/remixicon.css" rel="stylesheet" />
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
 </head>
+
 <body>
   <div id="preloader">
     <div id="nike-logo"></div>
     <div id="loading-bar"></div>
   </div>
-  
+
   <div class="cursor">
     <span class="cursor-text">Shop Now</span>
   </div>
@@ -189,6 +191,7 @@ <h1>TATUM 2</h1>
       <a href="#" class="imgheadingbutton">Shop</a>
     </div>
   </div>
+
   <div id="scroll-animate">
     <div id="move">
       <div class="marque">
@@ -269,6 +272,20 @@ <h2 class="h2 seection-tittle">Always Iconic</h2>
       </ul>
   </section>
 
+  <section class="latest-section">
+    <div class="heading">
+      <h2>The Latest</h2>
+    </div>
+    <div class="content">
+      <div class="image-container">
+        <img id="latest-img" src="images/nike-football.jpg" alt="img">
+      </div>
+      <p class="subheading">New From Nike Football</p>
+      <p class="title">2024/25 Liverpool F.C. Away <span>Kit</span></p>
+      <p class="description">Bringing back iconic tones of teal</p>
+    </div>
+  </section>
+
   <div class="slider-container">
     <p class="icons-of-air-txt">Shop by Sport</p>
     <div class="slider-wrapper">

diff --git a/style.css b/style.css
@@ -24,7 +24,7 @@ li {
   left: 0;
   width: 100%;
   height: 100%;
-  background-color: #fff; 
+  background-color: #fff;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -33,7 +33,7 @@ li {
 #nike-logo {
   width: 140px;
   height: 140px;
-  background-image: url('/images/Logo_nike_principal.jpg');
+  background-image: url("/images/Logo_nike_principal.jpg");
   background-size: cover;
   background-position: center;
 }
@@ -86,9 +86,6 @@ li {
 }
 header {
   width: 100%;
-  position: sticky;
-  top: 0;
-  z-index: 100;
   background-color: #f5f5f5;
   display: flex;
   align-items: center;
@@ -633,7 +630,6 @@ video {
     margin: 8px;
   }
 }
-
 .img-heading {
   margin-top: 5px;
   text-align: center;
@@ -761,6 +757,114 @@ video {
   flex-wrap: wrap;
   justify-content: center;
 }
+latest-section {
+  margin-top: 1rem;
+}
+.latest-section .heading h2 {
+  font-weight: 600;
+  margin-bottom: 25px;
+  margin-left: 70px;
+}
+.latest-section .image-container {
+  margin: 0 auto;
+  padding: 0 5px;
+  max-width: 90%;
+}
+.latest-section img {
+  width: 100%;
+  display: block;
+}
+.latest-section .content {
+  text-align: center;
+}
+.latest-section .subheading,
+.latest-section .title,
+.latest-section .description {
+  margin: 10px 0;
+}
+.latest-section .subheading {
+  margin-top: 30px;
+  font-weight: 600;
+  font-size: larger;
+}
+.title {
+  font-weight: 800;
+  font-size: 3.8rem;
+  text-transform: uppercase;
+  color: #111111;
+  letter-spacing: -3px;
+  font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
+}
+.title span {
+  display: block;
+  font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
+}
+.description {
+  font-weight: 600;
+  font-size: larger;
+}
+@media (max-width: 1024px) {
+  .title {
+    font-size: 3rem;
+    font-weight: 800;
+    font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
+  }
+  .subheading {
+    font-size: 1.6rem;
+    font-weight: 600;
+  }
+  .description {
+    font-size: 1.4rem;
+  }
+}
+@media (max-width: 768px) {
+  #latest-img {
+    content: url("/images/nike-football-samall.jpg");
+    padding: 8px;
+  }
+  .latest-section .subheading,
+  .latest-section .title,
+  .latest-section .description {
+    margin: 5px 0;
+  }
+  .title {
+    font-size: 2.5rem;
+    font-weight: 800;
+    font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
+  }
+  .subheading {
+    font-size: 1.5rem;
+  }
+  .description {
+    font-size: 1.3rem;
+  }
+}
+@media (max-width: 500px) {
+  .title {
+    font-size: 2rem;
+    font-weight: 800;
+    font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
+  }
+  .latest-section .subheading,
+  .latest-section .title,
+  .latest-section .description {
+    margin: 2px 0; 
+  }
+  .subheading {
+    font-size: 1.4rem;
+    font-weight: 600;
+  }
+  .description {
+    font-size: 1.2rem;
+  }
+  .latest-section .heading h2 {
+    margin-left: 20px;
+    margin-bottom: 8px;
+  }
+  .latest-section .image-container {
+    max-width: 100%;
+  }
+}
 .section-container {
   margin: 65px;
   text-align: center;
@@ -943,6 +1047,6 @@ footer {
     margin-top: 10px;
   }
   .social-media i {
-    margin-bottom: 5px; /* Add margin between social media icons */
+    margin-bottom: 5px;
   }
 }