CodeYourFuture · Ekremteke · Jul 26, 2022 · Jul 26, 2022 · Jul 26, 2022 · Jul 26, 2022
diff --git a/css/style.css b/css/style.css
@@ -1,11 +1,231 @@
 
  /* We are using the 'Roboto' font from Google. This has already been added to your HTML header */
 
-body {
+ body {
     font-family: 'Roboto', sans-serif;
     -webkit-font-smoothing: antialiased;
+    background-color: white;
+
 }
 
+#logo {
+    position:absolute;
+    left: 2%;
+    height: 30px;
+    width: 30px;
+    margin-top: 10px;
+    margin-left: 25px;
+}
+.navmenu {
+    float: right;
+    display:flex;
+    justify-content:space-between;
+    margin-right: 10%;
+    white-space: nowrap;
+}
+.karma {
+    color: black;
+    margin-right: 5%;
+
+}
+.stnd {
+    color: darkolivegreen;
+    margin-right: 5%;
+}
+.store {
+text-decoration: none;
+color: #F15B2A;
+margin-right: 7px;
+}
+#background-img {
+    width: 100%;
+    left: 0%;
+    top: 20px;
+}
+.container {
+position: relative;
+text-align: center;
+color: white;
+white-space: nowrap;
+}
+.over {
+    position: absolute;
+    top: 45%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    white-space: nowrap;
+
+}
+.over1 {
+    font-size: 40px;
+    white-space: nowrap;
+}
+.over2 {
+    font-size: 30px;
+    white-space: nowrap;
+}
+.over3 {
+background-color: #F15B2A;
+padding: 3% 5% 3% 5%;
+border-radius: 5px;
+white-space: nowrap;
+}
+.container2{
+color: black;
+white-space: nowrap;
+}
+.s1{
+    font-size: 40px;
+    text-align: center;
+    white-space: nowrap;
+}
+.icons {
+    display: flex;
+    text-align: center;
+    justify-content:space-between;
+    margin: 0% 20% 0% 20%;
+}
+.icon {
+    width: 15%;
+
+}
+.underIcon {
+    font-size: 20px;
+}
+.underIcons {
+    text-align: center;
+    display: flex;
+    justify-content:space-between;
+    margin: 0% 20% 0% 17%;
+    white-space: nowrap;
+}
+footer {
+    align-items: center;
+    text-align: center;
+    font-size: small;
+    white-space: nowrap;
+    border-top: rgb(195, 195, 195) solid ;
+   margin-left: 10%;
+   margin-right: 10%;
+}
+.join {
+    color: black;
+    white-space: nowrap;
+}
+.socials {
+    display: flex;
+    text-align: center;
+    justify-content:space-between;
+    margin: 0% 45% 0% 45%;
+    white-space: nowrap;
+}
+.social {
+    width: 10px;
+
+}
+.end {
+    font-size: medium;
+    color: darkgray;
+    white-space: nowrap;
+}
+
+.features_1{
+    margin-top: 10%;
+    display: grid;
+    grid-template-areas: "features_img features_boxes features_boxes";
+
+}
+.features_boxes {
+    background-color: rgb(255, 243, 221);
+    flex-direction: column;
+    display: flex;
+align-items: center;
+flex-wrap: wrap;
+width: 100%;
+justify-content: center;
+
+}
+.features_img{
+min-width: 100%;
+}
+.mark {
+    color: orange;
+}
+
+.wherever {
+    color: gray;
+    font-weight:100;
+    font-style: italic;
+    margin-left: 25%;
+    align-items: center;
+    margin-right: 25%;
+    text-align: center;
+}
+.over4 {
+    background-color: #F15B2A;
+padding: 3% 5% 3% 5%;
+border-radius: 5px;
+border: 0cm;
+color: white;
+}
+
+#header_store{
+display: grid;
+background-color:rgb(245, 245, 245);
+height: fit-content;
+border-bottom: rgb(195, 195, 195) solid ;
+
+}
+.img_str {
+width: 100%;
+height: 100%;
+}
+.grid2{
+   padding-left: 5%;
+   padding-right: 5%;
+}
+.main_design {
+    display: grid;
+    width: 100%;
+    grid-template-columns: 50% 50%;
+    align-items: center;
+    align-content: center;
+    justify-content: center;
+    color: black;
+}
+.orange_type {
+    color: rgb(255, 115, 0);
+    text-align: left;
+
+}
+.que {
+    display: flex;
+}
+.margin_box {
+    margin-bottom: 30px;
+}
+.titles {
+    font-weight: bold;
+}
+.left_margin {
+    margin-left: 30px;
+}
+#default_value {
+    font-style: italic;
+
+}
+
+.button_align {
+    display: flex;
+    justify-content: center;
+}
+.terms{
+    color: rgb(255, 115, 0);
+    text-decoration: underline;
+}
+
+
+
 /**
  * Add your custom styles below
  * 

diff --git a/img/facebook-icon.svg b/img/facebook-icon.svg
diff --git a/img/instagram-icon.svg b/img/instagram-icon.svg
diff --git a/img/twitter-icon.svg b/img/twitter-icon.svg
diff --git a/index.html b/index.html
@@ -1,19 +1,110 @@
 <!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>
+    <header>
+        <svg id="logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 144 216">
+            <path fill="#F15B2A"
+                d="M126.1 212.9c4.1 4.1 10.7 4.1 14.8 0 4.1-4.1 4.1-10.7 0-14.8l-28.6-28.6 18.1-18.1c8.4-8.4 13.6-20 13.6-32.9C144 92.8 123.2 72 97.5 72S51 92.8 51 118.5c0 12.8 5.2 24.5 13.6 32.9l18.1 18.1-18.1 18.1c-4.6 4.6-11 7.5-18.1 7.5-14.1 0-25.6-11.5-25.6-25.6v-159C20.9 4.7 16.2 0 10.5 0 4.7 0 0 4.7 0 10.5v159C0 195.2 20.8 216 46.5 216c12.8 0 24.5-5.2 32.9-13.6l18.1-18.1 28.6 28.6zm-46.7-76.3c-4.6-4.6-7.5-11-7.5-18.1 0-14.1 11.5-25.6 25.6-25.6 14.1 0 25.6 11.5 25.6 25.6 0 7.1-2.9 13.5-7.5 18.1l-18.1 18.1-18.1-18.1z" />
+        </svg>
+        <nav class="navmenu">
+            <p class="karma">Meet Karma</p>
+            <p class="stnd"> How It Works</p>
+            <p> <a class="store" href="store.html">Store</a></p>
+            <p class="stnd">Blog</p>
+            <p class="stnd">Help</p>
+            <p class="stnd">Login</p>
+        </nav>
+        <br>
+    </header>
+    <br>
+    <main>
+        <br>
+        <div class="container">
+            <img id="background-img" src="img/first-background.jpg" alt="background">
+            <div class="over">
+                <div class="over1">Introducing Karma</div>
+                <br>
+                <div class="over2">Bring WiFi with you, everywhere you go.</div>
+                <br>
+                <br>
+                <button class="over3">Learn More</button>
+            </div>
+        </div>
+        <br>
+        <br>
+        <br>
+        <section class="container2">
+            <p class="s1">Everyone needs a little Karma.</p>
+            <br>
+            <div class="icons">
+                <div class="icon">
+                    <img src="img/icon-devices.svg" alt="devices">
+                </div>
+                <div class="icon">
+                    <img src="img/icon-coffee.svg" alt="coffee">
+                </div>
+                <div class="icon">
+                    <img src="img/icon-refill.svg" alt="refill">
+                </div>
+            </div>
+            <br>
+            <div class="underIcons">
+                <div class="underIcon">Internet for all devices</div>
+                <div class="underIcon">Boost your productivity</div>
+                <div class="underIcon">Pay as You Go</div>
+            </div>
+        </section>
+        <section class="features_1">
+            <div class="features_img">
+                <img src="level-2/homepage-feature.png">
+            </div>
+            <div class="features_boxes">
+                <h2 class="wherever"><span class="mark">" </span>Wherever I am, I just don't worry about my connection
+                    anymore<span class="mark"> "</span></h2><br><br>
+                <button class="over4">Get Karma today</button>
+            </div>
+        </section>
+        <br>
+        <br>
+        <br>
+        <footer>
+            <br>
+            <br>
+            <br>
+            <p class="join">Join us on</p>
+            <br>
+            <div class="socials">
+                <div class="social">
+                    <img src="img/twitter-icon.svg" alt="twitter">
+                </div>
+                <div class="social">
+                    <img src="img/facebook-icon.svg" alt="facebook">
+                </div>
+                <div class="social">
+                    <img src="img/instagram-icon.svg" alt="instagram">
+                </div>
+            </div>
+            <br>
+            <p class="end">© Karma Mobility, Inc.</p>
+        </footer>
 
+
+    </main>
     <!-- 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 -->
 
 </body>
-</html>
+
+</html>