CodeYourFuture · TresorBipa · Jun 17, 2022 · Jun 17, 2022 · Jun 17, 2022 · Jun 17, 2022
diff --git a/css/style.css b/css/style.css
@@ -1,10 +1,152 @@
 
- /* We are using the 'Roboto' font from Google. This has already been added to your HTML header */
 
-body {
+
+ /* We are using the 'Roboto' font from Google. This has already been added to your HTML header */
+ body {
     font-family: 'Roboto', sans-serif;
     -webkit-font-smoothing: antialiased;
 }
+/**
+ * Add your custom styles below
+ * 
+ * Remember: 
+ * - Be organised, use comments and separate your styles into meaningful chunks
+ *    for example: General styles, Navigation styles, Hero styles, Footer etc.
+ * 
+ * - When using Flexbox, remember the items you want to move around need to be inside a parent container set to 'display: flex'
+ */
+
+@media screen and (max-width: 820px) {
+    header {
+        margin: 0;
+        height: 50px;
+    }
+
+    header img {
+        height: 70%;
+        float: left;
+        margin: 5px;
+    }
+    header img:first-child {
+        display: block;
+    }
+    header nav ul{
+        display: none;        
+    }
+
+    section div {
+        font-size: medium;
+        width: 20%;
+        display: inline-table;
+        flex-direction: row;
+        padding: 5%;
+    }  
+}
+@media screen and (min-width: 820px) {
+    header {
+        margin: 0 100px;
+        height: 50px;
+    }
+
+    header img {
+        height: 70%;
+        float: left;
+        margin: 5px;
+    }
+
+    header img:first-child {
+        display: none;
+    }    
+    header nav ul{
+        list-style-type: none;
+        margin: 0;
+        padding: 0;
+        overflow: hidden;
+    }
+
+    header ul li {
+        float: right;
+        padding: 20px;
+        color: rgb(43, 43, 43);
+    }
+
+    header li a {
+        display: block;
+        color: gray;
+        text-decoration: none;    
+    }
+
+    header li a:hover {
+        color: orange;
+    }
+    section div {
+        font-size: medium;
+        width: 13%;
+        display: inline-table;
+        flex-direction: row;
+        padding: 5%;
+    }  
+
+ }
+
+ @media screen and (max-width: 500px) {
+    section div {
+        font-size: 16px;
+        width: 180px;
+        margin: auto;
+    }  
+
+ }
+main {
+    display: block;
+    background-image: url("../img/first-background.jpg");
+    background-repeat: no-repeat;
+    background-position-x: center;
+    background-size: cover;
+    color: white;
+    text-align: center;
+    font-size: x-large;
+    padding: 12rem 0 8rem;
+    height: 200px;
+}
+main p:first-child {
+    font-size: 40px;
+    margin: 0;
+}
+
+main button {
+    background-color: coral;
+    border-block-style: none;
+    border-radius: 4px;
+    padding: 1.2rem 2rem;
+    margin: 20px;
+    font-size: large;
+}
+
+section {
+    display: block;
+    text-align: center;
+    font-size: xx-large;
+    margin: 5% 5% 0;
+}
+
+footer {
+    margin: 0 10%;
+    text-align: center;
+}
+footer hr {
+    height: 1px; 
+    border: none;
+    background-color: rgb(208, 208, 253);
+}
+footer img {
+    width: 20px;
+    padding: 10px;
+}
+footer p:last-child {
+    color: rgb(141, 141, 241);
+} 
+
 
 /**
  * Add your custom styles below
@@ -17,3 +159,4 @@ body {
  */
 
 
+
diff --git a/index.html b/index.html
@@ -10,10 +10,47 @@
     <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 src="img/menu-hamburger.svg">
+        <img src="img/karma-logo.svg">
+        <nav>
+        <ul> 
+            <li><a href="#Login">Login</a></li>
+            <li><a href="#Help">Help</a></li>
+            <li><a href="#Blog">Blog</a></li>
+            <li><a href="#Store">Store</a></li>
+            <li><a href="#HowitWorks">How it Works</a></li>
+            <li>Meet Karma</li>
+        </ul>
+        </nav>
+    </header>
+    <main>
+        <p>Introducing Karma</p>
+        <p>Bring WiFi with you, everywhere you go.</p>
+        <button>Learn More</button>
+    </main>    
+    <section>
+        <p>Everyone needs a little Karma.</p>
+        <div>
+            <img src="img/icon-devices.svg">
+            <p>Internet for all devices</p>
+        </div>
+        <div>
+            <img src="img/icon-coffee.svg">
+            <p>Boost your productivity</p>
+        </div>
+        <div>
+            <img src="img/icon-refill.svg">
+            <p>Pay as You Go</p>
+        </div>
+    </section>
+    <footer>
+        <hr>
+        <p>Join us on</p>
+        <img src="img/twitter-icon.svg">
+        <img src="img/facebook-icon.svg">
+        <img src="img/instagram-icon.svg">
+        <p>@Karma Mobility, Inc.</p>
+    </footer>
 </body>
-</html>
+</html>