container-down is done

nsaimk · nsaimk · commit 788a06466b9f · 2023-02-12T19:27:39.000Z
diff --git a/css/style.css b/css/style.css
@@ -27,14 +27,15 @@ body {
 }
 
 .nav-list {
-    color: rgb(160, 158, 158);
   display: flex;
   list-style: none;
   justify-content: space-between;
   border: 2px solid grey;
   width: 500px;
 }
-
+.nav-item{
+    color: grey;
+}
 /* END of HEADER style */
 
 /* MAIN style */
@@ -72,13 +73,27 @@ body {
 
 .main-container-down {
   align-content: center;
+  height: 500px;
+}
+.down-h1{
+    margin-top: 150px;
+    margin-bottom: 80px;
+}
+.icons{
+    display: flex;
+    justify-content: center;
+    gap: 140px;
+    margin: 0 100px 100px 100px;
+}
+.line{
+    border-bottom: 2px solid grey;
+    margin-left: 275px;
+    margin-right: 280px;
 }
-
 /* END of MAIN style */
 
 /* FOOTER style */
 .footer {
-  border-top: 3px solid grey;
   text-align: center;
 }
 .social-media-icons {
diff --git a/index.html b/index.html
@@ -25,12 +25,14 @@
       <img src="./img/karma-logo.svg" alt="" style="height: 50px" />
       <nav>
         <ul class="nav-list">
-          <li><a href="#"><strong>Meet Karma</strong></a></li>
-          <li><a href="#">How it Works</a></li>
-          <li><a href="#">Store</a></li>
-          <li><a href="#">Blog</a></li>
-          <li><a href="#">Help</a></li>
-          <li><a href="#">Login</a></li>
+          <li class="nav-item">
+            <a href="#"><strong>Meet Karma</strong></a>
+          </li>
+          <li class="nav-item"><a href="#">How it Works</a></li>
+          <li class="nav-item"><a href="#">Store</a></li>
+          <li class="nav-item"><a href="#">Blog</a></li>
+          <li class="nav-item"><a href="#">Help</a></li>
+          <li class="nav-item"><a href="#">Login</a></li>
         </ul>
       </nav>
     </header>
@@ -43,11 +45,23 @@ <h2>Bring WiFi with you, everywhere you go.</h2>
       </div>
       <!--  -->
       <div class="main-containe-down">
-        <h2>Everyone needs a little Karma.</h2>
-        <p>Internet for all devices</p>
-        <p>Boost your productivity</p>
-        <p>Pay as You Go</p>
+        <h1 class="down-h1">Everyone needs a little Karma.</h1>
+        <div class="icons">
+          <div class="icon-1">
+            <img src="./img/icon-devices.svg" alt="" width="130px" />
+            <p>Internet for all devices</p>
+          </div>
+          <div class="icon-2">
+            <img src="./img/icon-coffee.svg" alt="" width="130px" />
+            <p>Boost your productivity</p>
+          </div>
+          <div class="icon-3">
+            <img src="./img/icon-refill.svg" alt="" width="130px" />
+            <p>Pay as You Go</p>
+          </div>
+        </div>
       </div>
+      <div class="line"></div>
     </main>
     <!-- FOOTER -->
     <footer class="footer">
