From cf8f012a35231f1ae9c8f54f80cf8d19c96d86e4 Mon Sep 17 00:00:00 2001
From: Ulrich <uernstzen2298@gmail.com>
Date: Thu, 10 Dec 2020 00:37:21 +0200
Subject: [PATCH] South Africa - Ulrich Ernstzen

---
 css/style.css | 211 ++++++++++++++++++++++++++++++++++++++++++++++++++
 index.html    |  48 ++++++++++++
 2 files changed, 259 insertions(+)

diff --git a/css/style.css b/css/style.css
index 5cb025cef..c7eebc5c3 100755
--- a/css/style.css
+++ b/css/style.css
@@ -16,4 +16,215 @@ body {
  * - When using Flexbox, remember the items you want to move around need to be inside a parent container set to 'display: flex'
  */
 
+/* --------------------header style starts------------------------ */
+header{
+    width: 100%;
+    display: inline-block;
+}
+
+.logo{
+    width: 50px;
+    height: 50px;
+    margin: 1vw 0vw 1.5vw 8vw;
+}
+
+nav{
+    display: flex;
+    justify-content: flex-end;
+    font-size: 17px;
+    margin: -57px 90px 20px 0vw;
+    padding-bottom: 5px;
+}
+
+.menu-hamburger{
+    display: none;
+}
+
+a{
+    display: block;
+    text-decoration: none;
+    display: flex;
+    color: grey;
+    margin-left: 20px;
+}
+
+a:hover{
+    color: #F15B2A;
+    transition: 0.3s;
+}
+
+.karma{
+    font-weight: 600;
+}
+/* --------------------header style ends------------------------ */
+
+/* --------------------hero-img style starts------------------------ */
+.hero-img{
+    background-image: url(/img/first-background.jpg);
+    background-size: cover;
+    background-repeat: no-repeat;
+    height: 54vw;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.Introducing{
+    text-align: center;
+}
+
+h1{
+    font-size: 5vw;
+    color: white;
+    font-weight: 100;
+    margin-bottom: 2vw;
+}
+
+.intro-p{
+    color: white;
+    font-size: 2vw;
+    font-weight: 100;
+}
+
+button{
+    background-color: #F15B2A;
+    padding: 1vw 2vw 1vw 2vw;
+    margin-top: 2vw;
+    border-radius: 10px;
+    border: 3px solid black;
+    color: white;
+}
+
+button:hover{
+    background-color: white;
+    transition: 0.3s;
+    color: #F15B2A;
+    border: 3px solid #F15B2A;
+}
+/* --------------------hero-img style ends------------------------ */
+
+h2{
+    text-align: center;
+    font-size: 3vw;
+    font-weight: 100;
+    margin-top: 10vw;
+    margin-bottom: 3vw;
+}
+
+/* --------------------Features style starts------------------------ */
+.sec-feature{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-right: 5vw;
+}
+
+.features{
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+
+#middle-feature{
+    margin: 0vw 7vw 0vw 7vw;
+}
+
+.icons{
+    width: 12vw;
+}
+
+.icon-p{
+    font-size: 1.7vw;
+    font-weight: 600;
+}
+/* --------------------Features style ends------------------------ */
+
+/* --------------------footer style starts------------------------ */
+footer{
+    margin: 6vw 7vw 0vw 7vw;
+    padding: 1vw 0vw 0vw 0vw;
+    border-top: 0.01px solid lightgrey;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+
+.media-icon{
+    width: 20px;
+    padding: 10px;
+    border-radius: 20px;
+    border: 0.1px solid lightgrey;
+}
+
+h4{
+    font-weight: 100;
+    color: lightgrey;
+}
+/* --------------------Footer style ends------------------------ */
+
+/* --------------------@media------------------------ */
+@media (min-width: 280px) and (max-width: 760px){
+    .logo{
+        width: 5vw;
+    }
+
+    nav{
+        display: none;
+    }
+
+    .menu-hamburger{
+        display: block;
+        float: right;
+        padding: 0px;
+        margin: 29px 30px 0px 0px;
+    }
+    
+    .Introducing{
+        margin: 0vw 20vw 0vw 20vw;
+    }
+
+    .intro-p{
+        font-size: 3.5vw;
+    }
+
+    button{
+        border-radius: 2px;
+        border: 0px solid black;
+    }
+
+    h1{
+        font-size: 8vw;
+    }
+
+    h2{
+        font-size: 8vw;
+    }
+
+    .sec-feature{
+        display: flex;
+        flex-direction: column;
+        margin-right: 0vw;
+    }
+
+    .features{
+        margin: 50px 0px 50px 0px;
+    }
+
+    .icons{
+        width: 30vw;
+    }
+
+    .icon-p{
+        font-size: 4vw; 
+    }
+
+    footer{
+        padding-bottom: 30px;
+    }
+}
+
+
+
 
diff --git a/index.html b/index.html
index 876b59d64..987e86dfc 100755
--- a/index.html
+++ b/index.html
@@ -16,6 +16,54 @@
     <!-- 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 class="links">
+            <a href="#" class="karma">Meet Karma</a>
+            <a href="#">How it Works</a>
+            <a href="#">Store</a>
+            <a href="#">Blog</a>
+            <a href="#">Help</a>
+            <a href="#">Login</a>
+        </nav>
+        <img src="img/menu-hamburger.svg" class="menu-hamburger" style="cursor:pointer;">
+    </header>
 
+    <Section class="hero-img">
+        <div class="Introducing">
+            <h1>Introducing Karma</h1>
+            <p class="intro-p">Bring WiFi with you, everywhere you go.</p>
+            <button>Learn More</button>
+        </div>
+    </Section>
+
+    <h2>Everyone needs a little Karma.</h2>
+
+    <section class="sec-feature">
+        <div class="features">
+            <img class="icons" src="img/icon-devices.svg" alt="devices logo">
+            <p class="icon-p">Internet for all devices</p>
+        </div>
+
+        <div class="features" id="middle-feature">
+            <img class="icons" src="img/icon-coffee.svg" alt="coffee logo">
+            <p class="icon-p">Boost your productivity</p>
+        </div>
+
+        <div class="features">
+            <img class="icons" src="img/icon-refill.svg" alt="refill logo">
+            <p class="icon-p">Pay as You Go</p>
+        </div>
+    </section>
+
+    <footer>
+        <h3>Join us on</h3>
+        <div class="media-group">
+            <img class="media-icon" src="img/twitter-icon.svg" alt="twitter">
+            <img class="media-icon" src="img/facebook-icon.svg" alt="facebook">
+            <img class="media-icon" src="img/instagram-icon.svg" alt="instagram">
+        </div>
+        <h4>&copy; Karma Mobility, Inc</h4>
+    </footer>
 </body>
 </html>