From f486becc5cedc68d58426e400d3690534752531b Mon Sep 17 00:00:00 2001
From: Omer249a <omer249aa@gmail.com>
Date: Wed, 9 Jun 2021 15:32:13 +0100
Subject: [PATCH] karma page

---
 css/style.css | 205 ++++++++++++++++++++++++++++++++++++++++++++++++++
 index.html    |  53 +++++++++++++
 2 files changed, 258 insertions(+)

diff --git a/css/style.css b/css/style.css
index 5cb025cef..daa5e500c 100755
--- a/css/style.css
+++ b/css/style.css
@@ -16,4 +16,209 @@ body {
  * - When using Flexbox, remember the items you want to move around need to be inside a parent container set to 'display: flex'
  */
 
+body {
+  font-family: "Roboto", sans-serif;
+  -webkit-font-smoothing: antialiased;
+  font-size: 16px;
+}
+/* Header Section */
+header {
+  display: flex;
+  justify-content: space-evenly;
+  align-items: center;
+}
+header img {
+  height: 2.4rem;
+  padding: 1rem 0 1rem 2rem;
+}
+
+/* Navigation Section */
+
+nav ul {
+  display: flex;
+  justify-content: space-evenly;
+  list-style: none;
+  width: 34rem;
+}
+
+nav ul a {
+  text-decoration: none;
+  color: #9c9fa7;
+}
+
+nav ul a:hover {
+  color: #ffe70e;
+}
+li:first-child a {
+  color: rgb(117, 114, 114);
+  font-weight: 500;
+}
+
+/* Main Content Section */
+.hero {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  background-image: url("../img/first-background.jpg");
+  width: 73rem;
+  height: 76vh;
+  margin: 0 auto;
+  background-position-x: -202px;
+  background-position-y: -26px;
+  background-repeat: no-repeat;
+}
+.hero h1,
+h2 {
+  color: white;
+  font-weight: 100;
+  margin: 0;
+}
+.hero h1 {
+  font-size: 3.5rem;
+}
+.hero h2 {
+  letter-spacing: 2px;
+  padding: 1rem 0 3.5rem 0;
+}
+.hero button {
+  background-color: #e0633a;
+  color: rgb(255, 255, 255);
+  padding: 0.8rem 1.2rem;
+  border-radius: 5%;
+  border: none;
+}
+/* Features Icon Section */
+.features {
+  width: 44rem;
+  margin: 0 auto;
+  padding-top: 5rem;
+  box-shadow: 0px 1px 0px #eae5e5;
+}
+.features h2 {
+  color: black;
+  text-align: center;
+  font-weight: 300;
+  font-size: 1.8rem;
+  padding-bottom: 2rem;
+}
+.icon-container {
+  display: flex;
+}
+.icons {
+  padding: 0 2rem;
+}
+.icons p {
+  width: 11.5rem;
+}
+.features img {
+  width: 10rem;
+  height: 6rem;
+}
 
+/* Footer Section */
+footer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+footer section {
+  display: flex;
+}
+footer img {
+  height: 1.6rem;
+  padding: 0.3rem 0;
+  border-radius: 100%;
+}
+footer h3 {
+  font-size: 1rem;
+  font-weight: 400;
+}
+footer small {
+  padding: 1rem;
+  color: #9c9fa7;
+}
+
+/* Media Queries */
+@media screen and (max-width: 375px) {
+  main {
+    display: flex;
+    flex-direction: column;
+  }
+  header {
+    width: 100vh;
+  }
+  header nav ul {
+    overflow: hidden;
+    height:0;
+  }
+  header nav ul.open {
+    height: auto;
+    font-size: 1.8rem;
+    margin-top: 3rem;
+    display: flex;
+    flex-direction: column;
+    border-bottom: 1px solid grey;
+    border-top: 1px solid grey;
+  }
+  header nav ul li {
+    display: block;
+    width: 100%;
+    margin:0;
+  }
+  header nav ul li a {
+    display: block;
+    padding: 10px;
+    margin:0;
+  }
+  header img{
+    height: 3.4rem;
+    padding: 2rem 0 1rem 4rem;
+  }
+  .hero {
+    width: 46rem;
+    height: 116vh;
+
+    background-position: center;
+  }
+  .icon-container {
+    flex-direction: column;
+    align-items: center;
+  }
+  .features {
+    width: 46rem;
+  }
+  .features h2{
+      font-size: 3.6rem;
+  }
+  footer {
+    width: 50rem;
+    height: 4vh;
+  }
+  .icons img{
+      width: 21.7rem;
+      height: 7rem;
+  }
+  .icons p{
+      font-size: 2rem;
+      width: 21rem;
+      text-align: center;
+  }
+  .burger-nav {
+    display: block;
+    height: 40px;
+    width: 100%;
+    background: url("../img/menu-hamburger.svg") no-repeat 98% center;
+    background-size: 2.5rem;
+    cursor: pointer;
+  }
+  footer h3{
+      font-size: 1.2rem;
+  }
+  footer img{
+    height: 2.4rem;
+  }
+  footer small{
+      font-size: 1.2rem;
+  }
+}
diff --git a/index.html b/index.html
index 3e742ef04..0137bd2dd 100755
--- a/index.html
+++ b/index.html
@@ -15,5 +15,58 @@
     <!-- 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/karma-logo.svg" alt="Logo of the website" />
+        <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>
+            <a class="burger-nav" id="burger-btn"></a>
+
+        </nav>
+    </header>
+    <main>
+        <!-- Background will be added in css -->
+        <section class="hero">
+            <h1>Introducing Karma</h1>
+            <h2>Bring WiFi with you, everywhere you go.</h2>
+            <button>Learn More</button>
+        </section>
+        <section class="features">
+            <h2>Everyone needs a little Karma.</h2>
+            <section class="icon-container">
+                <section class="icons">
+                    <img src="img/icon-devices.svg" alt="Image 
+                of different internet devices" />
+                    <p>Internet for all devices</p>
+                </section>
+                <section class="icons">
+                    <img src="img/icon-coffee.svg" alt="Image of a coffee cup" />
+                    <p>Boost your productivity</p>
+                </section>
+                <section class="icons">
+                    <img src="img/icon-refill.svg" alt="Gas refill tank image" />
+                    <p>Pay as You Go</p>
+                </section>
+            </section>
+        </section>
+    </main>
+    <footer>
+        <h3>Join us on</h3>
+        <section>
+            <img src="img/twitter-icon.svg" alt="twitter icon"/>
+            <img src="img/facebook-icon.svg" alt="facebook icon" />
+            <img src="img/instagram-icon.svg" alt="instagram icon" />
+        </section>
+
+        <small>&copy; Karma Mobility, Inc.</small>
+    </footer>
+
 </body>
 </html>