CodeYourFuture · Benjamin-GitHub · Jul 15, 2021 · Jul 16, 2021 · Jul 16, 2021 · Jul 16, 2021
diff --git a/css/style.css b/css/style.css
@@ -1,19 +1,192 @@
-
- /* We are using the 'Roboto' font from Google. This has already been added to your HTML header */
+/* 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;
+  font-family: "Roboto", sans-serif;
+  -webkit-font-smoothing: antialiased;
+}
+
+ /* Header */
+
+header {
+  display: flex;
+}
+
+nav ul {
+  list-style-type: none;
+  display: flex;
+  justify-content: flex-end;
+  width: 50em;
+}
+
+ul li {
+  padding: 1em 1rem;
+  font-weight: bold;
+  cursor: auto;
 }
 
-/**
- * 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'
- */
+li :focus, 
+li :hover {
+  color: coral;
+}
+
+.logo {
+  height: 3rem;
+  width: 3rem;
+  padding: 1rem 2rem 1rem 5rem;
+}
+
+ /* Main Section */
+ /* Article Part */
+
+.hero {
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  align-items: center;
+  background-image: url("/img/first-background.jpg");
+  background-size: cover;
+  padding: 12rem; 
+}
+
+.hero h1 {
+  color: white;
+  font-weight: 200;
+  font-size: 300%;
+}
+
+.hero p {
+  color: white;
+  font-weight: 100;
+  font-size: 150%;
+}
+
+.hero button {
+  background-color: coral;
+  color: cornsilk;
+  border: none;
+  border-radius: 5px;
+  padding: 0.8rem 2rem;
+}
+
+ /* Section Part */
+
+section h2 {
+  text-align: center;
+  color: black;
+  font-weight: 150;
+  font-size: 200%;
+}
+
+.icons {
+  display: flex;
+  flex-flow: row;
+   align-items: center;
+  padding: 2rem 0 2rem 0;
+  justify-content: space-around;
+}
+
+.icon {
+  max-width: 6rem;
+
+}
+
+.caption {
+  margin-bottom: 2.4rem;
+  font-size: 1.2rem;
+}
+
+ /* Footer */
+
+footer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.social-media {
+  display: flex;
+}
+
+.social-media img {
+  width: 0.8rem;
+  padding: 0.5rem;
+}
+
+footer h4 {
+  font-weight: 400;
+}
+
+footer p {
+  font-size: 0.9rem;
+  color: #a8a8a8;
+}
+
+/* Media query Part */
+
+@media screen and (min-width: 700px) {
+
+  /* Header */
+
+  header {
+    align-items: center;
+  }
+
+  .logo {
+    padding-left: 1.5rem;
+  }
+
+  ul {
+    flex-direction: row;
+    justify-content: space-between;
+
+  }
+
+    /* Main */
+    /* Article Part */
+
+  .hero {
+    background-position: center;
+  }
+
+  .hero h1{
+    font-size: 2.6rem;
+  }
+
+  .hero p {
+    font-size: 1.3rem;
+  }
+
+  .hero button {
+    font-size: 1rem;
+    padding: 0.8rem 2rem;
+  }
+
+    /* section Part */
+
+  .icons {
+    flex-direction: row;
+    display: flex;
+    justify-content: space-around;
+    align-items: flex-end;
+    padding-top: 2em;
+  }
+
+  .caption {
+    font-size: 1.3rem;
+  }
+
+  .icon img {
+    max-width: 5rem;
+  }
+
+    /* Footer */
+
+  footer h4 {
+    padding-bottom: 3rem;
+  }
 
+  footer p {
+    font-size: 0.5rem;
+  }
 
+}
diff --git a/index.html b/index.html
@@ -10,10 +10,75 @@
     <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 class="logo" src="img/karma-logo.svg" alt="Karma Logo"/>
+        <nav>
+            <ul>
+                <li><a href="#">Meet Karma</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>
+            </ul>
+        </nav>
+    </header>
+    <main>
+        <article class="hero">
+            <h1>Introduction Karma</h1>
+            <p>Bring WiFi with you, everywhere you go.</p>
+            <button>Learn more</button>
+        </article>
+        <section>
+            <h2>Everyone needs a little Karma</h2>
+            <div class="icons">
+                <div class="icon">
+                    <img
+                        src="img/icon-devices.svg"
+                        alt="Devices"
+                    />
+                    <p class="caption">Internet for all devices</p>
+                </div>
+                <div class="icon">
+                    <img
+                        src="img/icon-coffee.svg" 
+                        alt="Coffee"
+                    />
+                    <p class="caption">Boost your productivity</p>
+                </div>
+                <div class="icon">
+                    <img 
+                        src="img/icon-refill.svg" 
+                        alt="Refill"
+                    />
+                    <p class="caption">Pay as You Go</p>
+                </div>
+            </div>
+        </section>
+    </main>
+    <footer>
+        <h4>Join us on</h4>
+        <div class="social-media">
+            <a class= "link" href="https://twitter.com" target="_blank">
+                <img 
+                    src="img/twitter-icon.svg" 
+                    alt="Twitter"
+                />
+            </a>
+            <a class="link" href="https://en-gb.facebook.com/" target="_blank">
+                <img 
+                    src="img/facebook-icon.svg" 
+                    alt="Facebook"
+                />
+            </a>
+            <a class="link" href="https://www.instagram.com/" target="_blank">
+                <img 
+                    src="img/instagram-icon.svg" 
+                    alt="Instagram"
+                />
+            </a>
+        </div>
+        <p>&copy Karma Mobility, Inc.</p>
+    </footer>
 </body>
 </html>