commit

Adibab · Adibab · commit fc922445a416 · 2022-07-25T14:14:50.000+01:00
diff --git a/css/style.css b/css/style.css
@@ -74,27 +74,48 @@ ul{display: flex;
  /* body second section */
  #second-one-headline{
     border: 1px solid black;
-    height: 50vh; 
+    height: 45vh; 
 
  }
  #second-one-headline, p{
    text-align: center;
    font-size: 1rem;
    font-weight: normal;
+    
  } 
  /* body- second section - article  */
  #second-one-description{
     display: flex;
     flex-direction:row;
-    justify-content: space-between;
+    justify-content: center;
+    gap: 20px;
     padding-top:2%;
     padding-left: 5%;
     padding-right: 5%;
+    border-bottom: 1px solid lightgrey;
  }
  .secondOneArticle{
     border: 1px solid black;
-    height:10%;
-    width: 30%;
+    height: 10%;
+    width: 15%;
+    margin-bottom: 2%;
+    font-size: 10px;
  }
+/* footer */
+
+
+.footer-icon{
+    height: 5%;
+    width: 5%;
+    display: block;
+    
+}
+#footer{
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+
+
+}
 
 
diff --git a/index.html b/index.html
@@ -1,23 +1,25 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     <title>Karma</title>
     <link href='https://fonts.googleapis.com/css?family=Roboto:400,500,300' rel='stylesheet' type='text/css'>
     <link rel="stylesheet" href="css/normalize.css">
     <link rel="stylesheet" href="css/style.css">
-    <link rel="shortcut icon" type="image/x-icon"  href="favicon.ico">
+    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
 </head>
+
 <body>
 
     <!-- Add your HTML markup here -->
     <!-- Remember: Use semantic HTML tags like <header>, <main>, <nav>, <footer>, <section> etc -->
     <!-- All the images you need are in the 'img' folder -->
 
 
-    <header> 
-        <img id="karmalogo" src="img/karma-logo.svg" alt="karma-logo"> 
+    <header>
+        <img id="karmalogo" src="img/karma-logo.svg" alt="karma-logo">
         <nav>
             <ul>
                 <li>Meet Karma</a></li>
@@ -32,38 +34,46 @@
 
     <main>
         <section id="firstOne">
-            <article> 
+            <article>
                 <h1>Introducing Karma</h1>
                 <h2>Bring WiFi with you, everywhere you go</h2>
                 <button id="submit-btn" name="submit"> Learn More </button>
             </article>
         </section>
 
-        <section id="second-one-headline"> 
-            <h2> Everyone needs a little Karma </h2>
-       
-        <section id="second-one-description"> 
-            <article class="secondOneArticle">
-             <img src="img/icon-devices.svg" alt="icon-devices">
-             <p> Internet for all icon-devices</p>    
-            </article>
+        <section id="second-one-headline">
+            <p> Everyone needs a little Karma </p>
+
+            <section id="second-one-description">
+                <article class="secondOneArticle">
+                    <img src="img/icon-devices.svg" alt="icon-devices">
+                    <p> Internet for all icon-devices</p>
+                </article>
+
+                <article class="secondOneArticle">
+                    <img src="img/icon-coffee.svg" alt="icon-coffee">
+                    <p> Boost your productivity</p>
+                </article>
+                <article class="secondOneArticle">
+                    <img src="img/icon-refill.svg" alt="icon-refills">
+                    <p> Pay as you go</p>
+                </article>
+            </section>
 
-            <article class="secondOneArticle"> 
-                <img src="img/icon-coffee.svg" alt="icon-coffee">
-                <p> Boost your productivity</p> 
-            </article>
-            <article class="secondOneArticle">
-                <img src="img/icon-refill.svg" alt="icon-refills">
-                <p> PAy as you go</p>  
-            </article>
-        
-        </section>
         </section>
+
         <footer>
-            <p> Join us on</p>
-            <img src="" alt="twitter">
-            <img src="" alt="facebook">
-            <img src="" alt="instagram">
+            <div> 
+                <p> Join us on</p>
+                
+                <div id="footer">
+                    <img class="footer-icon"src="img/twitter-icon.svg" alt="twitter">
+                    <img class="footer-icon"src="img/facebook-icon.svg" alt="facebook">
+                    <img class="footer-icon"src="img/instagram-icon.svg" alt="instagram">
+                </div>
+            </div>
+            
+           
             <p>@Karma Mobility Inc.</p>
         </footer>
 
@@ -76,4 +86,5 @@ <h2> Everyone needs a little Karma </h2>
     </main>
 
 </body>
-</html>
+
+</html>
