From c53905b07c05b85728a724657efbdf74fa822924 Mon Sep 17 00:00:00 2001
From: NihalAli2 <62475392+NihalAli2@users.noreply.github.com>
Date: Sun, 24 May 2020 07:40:00 +0100
Subject: [PATCH 1/3] Week2

---
 week2/2-website/css/style.css | 363 ++++++++++++++++++++++++++++++++--
 week2/2-website/index.html    |  80 +++++++-
 2 files changed, 426 insertions(+), 17 deletions(-)

diff --git a/week2/2-website/css/style.css b/week2/2-website/css/style.css
index 5cb025ce..b39c75ef 100644
--- a/week2/2-website/css/style.css
+++ b/week2/2-website/css/style.css
@@ -1,19 +1,360 @@
 
  /* We are using the 'Roboto' font from Google. This has already been added to your HTML header */
+html {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    font-size: 100%;
+    font: inherit;
+    vertical-align: baseline;
+    box-sizing: border-box;
+}
+
+
+head {
+    display: none;
+    font-size: 100%;
+    font: inherit;
+}
+
 
 body {
-    font-family: 'Roboto', sans-serif;
+    font-family: 'Roboto' , sans-serif;
     -webkit-font-smoothing: antialiased;
-}
+    line-height: 1;
+    margin: 0;
+    padding: 0;
+    bottom: 0;
+    font-size: 100%;
+    font: inherit;
+    vertical-align: baseline;
+    box-sizing: border-box;
+    display: block;
+    }
+
+
+    .top-navigation {
+        background-color: #fff;
+        position: fixed;
+        width: 100%;
+        border-bottom: 1px solid #DDD;
+        z-index:  9999;
+        display: block;
+        margin: 0;
+        padding: 0;
+        border: 0;
+        font-size: 100%;
+        font: inherit;
+        vertical-align: baseline;
+        box-sizing: border-box;
+    }
+
+
+    .top-navigation > .content {
+        height: 4.375rem;
+    }
+
+
+    .content {
+        padding: 0 0.938rem;
+        margin: 0 auto;
+        min-width: 37.5rem;
+        border: 0;
+        font-size: 100%;
+        font: inherit;
+        vertical-align: baseline;
+        box-sizing: border-box;
+    }
+
+    .top-navigation .links {
+        float: right;
+        color: #838994;
+        font-size: 1.04rem;
+        margin-top: 1.7rem;
+        width: 507.016px;
+        height: 16px;
+
+    }
+    ol ul {
+        list-style: none;
+        margin: 0;
+        padding: 0;
+        border: 0;
+        font: inherit;
+        vertical-align: baseline;
+        box-sizing: border-box;
+    }
+    ul {
+        display: block;
+        margin-inline-start: 1em;
+        margin-block-end: 1em;
+        margin-inline-start: 0;
+        margin-inline-end: 0;
+        padding-inline-start: 40px;
+        -webkit-font-smoothing: antialiased;
+    }
+    .top-navigation .links li.active {
+        color: #4c5058;
+        font-weight: 500;
+    }
+    .top-navigation .links li {
+        display: inline-block;
+        margin-left: 1.563rem;
+        margin: 0;
+        padding: 0;
+        border: 0;
+        font-size: 100%;
+        font: inherit;
+        vertical-align: baseline;
+        box-sizing: border-box;
+    }
+    li {
+        text-align: -webkit-match-parent;
+    }
+
+    .top-navigation .logo {
+        height: 4.375rem;
+        margin: 0;
+        padding: 0;
+        border: 0;
+        font-size: 100%;
+        vertical-align: baseline;
+        box-sizing: border-box;
+        width: 26px;
+        height: 70px;
+    }
+
+    .introduction {
+        background-image: url(img/first-background.jpg);
+        background-position: center bottom;
+        background-repeat: no-repeat;
+        background-size: cover;
+        height: 45.938rem;
+        overflow: auto;
+        /*display: block;*/
+        margin: 0;
+        padding: 0;
+        border: 0;
+        font-size: 100%;
+        font: inherit;
+        vertical-align: baseline;
+        box-sizing: border-box;
+    }
+
+    @media (min-width: 48rem) {
+      .content {
+        width: 46rem;
+     }
+    }
+
+        .content {
+            width: 46rem;
+            padding: 0 0.938rem;
+            min-width: 37.5rem;
+            border: 0;
+            font-size: 100%;
+            font: inherit;
+            vertical-align: baseline;
+            box-sizing: border-box;
+        }
+
 
-/**
- * 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'
- */
+    h1 {
+        margin-top: 17.5rem;
+        font-size: 3.125rem;
+        color: #fff;
+        text-align: center;
+        font-weight: 300;
+        margin: 0;
+        padding: 0;
+        border: 0;
+        font: inherit;
+        vertical-align: baseline;
+        box-sizing: border-box;
+    }
+
+
+
+    h3 {
+        display: block;
+        color: #ddd;
+    }
+
+    .introduction .buttons {
+        color: #fff;
+        text-align: center;
+        margin-top: 1.563rem;
+        margin: 0;
+        padding: 0;
+        border: 0;
+        font-size: 100%;
+        font: inherit;
+        vertical-align: baseline;
+        box-sizing: border-box;
+    }
+    button {
+        width: 9.688rem;
+        color: #f15a29;
+        background-color: #f15a29;
+        text-shadow: none;
+        border-style: none;
+        border-radius: 4px;
+        padding: 1erm 1.5rem;
+        color: #fff;
+        font-size: 1.125rem;
+    }
+    .cases {
+        background-color: #fff;
+        overflow: hidden;
+        padding-bottom: 5rem;
+        /*display: block;*/
+        margin: 0;
+        padding: 0;
+        border: 0;
+        font-size: 100%;
+        vertical-align: baseline;
+        box-sizing: border-box;
+    }
+    .cases .content {
+        margin-top: 7.875rem;
+        color: #1d1e21;
+        text-align: center;
+    }
+    .cases h2 {
+        font-size: 2.75rem;
+        margin: 1.625rem 0 3.125rem;
+        font-size: 300;
+        padding: 0;
+        border: 0;
+        font: inherit;
+        vertical-align: baseline;
+        box-sizing: border-box;
+    }
+    h2 {
+        display: block;
+        margin-inline-start: 0.83em;
+        margin-block-end: 0.83em;
+        margin-inline-start: 0px;
+        margin-inline-end: 0px;
+    }
+    .cases .content {
+        color: #1d1e21;
+        text-align: center;
+    }
+    ol ul {
+        list-style: none;
+        margin: 0;
+        padding: 0;
+        border: 0;
+        font-size: 100%;
+        font: inherit;
+        vertical-align: baseline;
+        box-sizing: border-box;
+    }
+    ul {
+        display: block;
+       margin-block-start: 1em;
+       margin-block-end: 1em;
+       margin-inline-start: 40px;
+       margin-inline-end: 0px;
+    }
+    .cases .devices > li {
+        width: 33.3333333%;
+        float: left;
+    }
+    li {
+        display: list-item;
+        text-align: -webkit-match-parent;
+    }
+    ol ul {
+        list-style: none;
+        margin: 0;
+        padding: 0;
+        border: 0;
+        font-size: 100%;
+        font: inherit;
+        vertical-align: baseline;
+        box-sizing: border-box;
+    }
+    ul {
+        display: block;
+        margin-block-start: 1em;
+        margin-block-end: 1em;
+        margin-inline-end: 0px;
+        margin-inline-start: 0px;
+    }
+
+.cases .content {
+    color: #1d1e21;
+    text-align: center;
+}
+img {
+    width: 127px;
+    height: 127px;
+}
+.caption {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    font-size: 100%;
+    font: inherit;
+    vertical-align: baseline;
+    box-sizing: border-box;
+   /* display: block;*/
+}
+.social {
+    background-color: #fff;
+    overflow: auto;
+    padding-bottom: 9.375rem;
+    text-align: center;
+    display: block;
+}
+h5 {
+    display: block;
+    margin-block-start: 1.67em ;
+    margin-block-end: 1.67em;
+    margin-inline-start: 0px;
+    margin-inline-end: 0px;
+}
+.social .icons > li {
+    border-radius: 1.25rem;
+    width: 2.5rem;
+    height: 2.5rem;
+    display: inline-block;
+    margin: 1.25rem 5px;
+    border: 1px solid #eaebec;
+    text-align: center;
+}
+.fa {
+    display: inline-block;
+    font: normal;
+    font-size: inherit;
+    text-rendering: auto;
+    text-align: center;
+}
+.social .twitter {
+    color: #55acee;
+}
+.fa-twitter:before {
+    content: "\f099";
+}
+.social .facebook {
+    color: #4c66a4;
+}
+.fa-facebook:before {
+    content: "\f09a";
+}
+.social .instagram {
+    color: #3f729b;
+}
+.fa-instagram:before {
+    content: "\f16d";
+}
+.social .copy {
+    font-size: 0.9rem;
+    font-weight: 300;
+    color: #838994;
+}
 
 
+    
diff --git a/week2/2-website/index.html b/week2/2-website/index.html
index 876b59d6..1ea06441 100644
--- a/week2/2-website/index.html
+++ b/week2/2-website/index.html
@@ -6,16 +6,84 @@
     <title>Karma</title>
     <link href='//fonts.googleapis.com/css?family=Roboto:400,500,300' rel='stylesheet' type='text/css'>
     <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
-    <link rel="stylesheet" href="css/normalize.css">
+    <link rel="stylesheet" href="style.css">
     <!-- Add a link to your CSS file here (use the line above to guide you) -->
     <link rel="stylesheet" href="css/style.css">
     <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 -->
-
+    <nav class="top-navigation">
+        <div class="content">
+            <ul class="links">
+                <li class="active">Meet Karma</li>
+                <li>How it Works</li>
+                <li>Store</li>
+                <li>Blog</li>
+                <li>Help</li>
+                <li>Login</li>
+            </ul>
+            <img class="logo" src="img/karma-logo.svg" alt="Logo Imge" width="26">
+        </div>
+    </nav>
+    <section class="introduction">
+        <div class="content">
+            <h1>Introducing Karma</h1>
+            <h3>Bring WiFi with you, everywhere you go.</h3>
+            <div class="buttons">
+                <button>Learn More</button>
+            </div>
+        </div>
+    </section>
+    <section class="cases">
+        <div class="content">
+            <h2>Everyone needs a little Karma.</h2>
+            <ul class="devices">
+                <li>
+                    <img width="127" height="127" src="img/icon-devices.svg" alt="Internet for all devices image">
+                    <div class="Caption">
+                        <h3>Internet for all devices</h3>
+                    </div>
+                </li>
+                <li>
+                    <img width="127" height="127" src="img/icon-coffee.svg" alt="Boost your productivity image">
+                    <div class="caption">
+                        <h3>Boost your productivity</h3>
+                    </div>
+                </li>
+                <li>
+                    <img width="127" height="127" src="img/icon-refill.svg" alt="Pay as You Go image">
+                    <div class="caption">
+                        <h3>Pay as You Go</h3>
+                    </div>
+                </li>
+            </ul>
+        </div>
+    </section>
+    <footer class="social">
+        <div class="content">
+            <hr>
+            <h5>Join us on</h5>
+            <ul class="icons">
+                <li class="twitter"> ==$0
+                    <i class="fa fa-twitter">
+                        ::before
+                    </i>
+                </li>
+                <li class="facebook">
+                    <i class="fa fa-facebook">
+                        ::before
+                    </i>
+                </li>
+                <li class="instagram">
+                    <i class="fa fa-insragram">
+                        ::before
+                    </i>
+                </li>
+            </ul>
+            <span class="copy">
+            @Karma Mobility,Inc.
+            </span>
+            </div>
+    </footer>
 </body>
 </html>

From 1b1c81ad7af5139f363faa5f5c2e9a7a4cd323ed Mon Sep 17 00:00:00 2001
From: NihalAli2 <62475392+NihalAli2@users.noreply.github.com>
Date: Fri, 29 May 2020 18:23:57 +0100
Subject: [PATCH 2/3] change css

---
 week2/2-website/css/style.css | 211 +++++++++-------------------------
 1 file changed, 54 insertions(+), 157 deletions(-)

diff --git a/week2/2-website/css/style.css b/week2/2-website/css/style.css
index b39c75ef..19bcf308 100644
--- a/week2/2-website/css/style.css
+++ b/week2/2-website/css/style.css
@@ -1,6 +1,4 @@
-
- /* We are using the 'Roboto' font from Google. This has already been added to your HTML header */
-html {
+* {
     margin: 0;
     padding: 0;
     border: 0;
@@ -10,29 +8,6 @@ html {
     box-sizing: border-box;
 }
 
-
-head {
-    display: none;
-    font-size: 100%;
-    font: inherit;
-}
-
-
-body {
-    font-family: 'Roboto' , sans-serif;
-    -webkit-font-smoothing: antialiased;
-    line-height: 1;
-    margin: 0;
-    padding: 0;
-    bottom: 0;
-    font-size: 100%;
-    font: inherit;
-    vertical-align: baseline;
-    box-sizing: border-box;
-    display: block;
-    }
-
-
     .top-navigation {
         background-color: #fff;
         position: fixed;
@@ -40,13 +15,6 @@ body {
         border-bottom: 1px solid #DDD;
         z-index:  9999;
         display: block;
-        margin: 0;
-        padding: 0;
-        border: 0;
-        font-size: 100%;
-        font: inherit;
-        vertical-align: baseline;
-        box-sizing: border-box;
     }
 
 
@@ -59,11 +27,6 @@ body {
         padding: 0 0.938rem;
         margin: 0 auto;
         min-width: 37.5rem;
-        border: 0;
-        font-size: 100%;
-        font: inherit;
-        vertical-align: baseline;
-        box-sizing: border-box;
     }
 
     .top-navigation .links {
@@ -73,6 +36,7 @@ body {
         margin-top: 1.7rem;
         width: 507.016px;
         height: 16px;
+        align-content: space-between;
 
     }
     ol ul {
@@ -85,7 +49,7 @@ body {
         box-sizing: border-box;
     }
     ul {
-        display: block;
+        display: flex;
         margin-inline-start: 1em;
         margin-block-end: 1em;
         margin-inline-start: 0;
@@ -100,28 +64,17 @@ body {
     .top-navigation .links li {
         display: inline-block;
         margin-left: 1.563rem;
-        margin: 0;
-        padding: 0;
-        border: 0;
-        font-size: 100%;
-        font: inherit;
-        vertical-align: baseline;
-        box-sizing: border-box;
+
     }
     li {
         text-align: -webkit-match-parent;
+        list-style: none;
+        text-align: center;
     }
 
     .top-navigation .logo {
         height: 4.375rem;
-        margin: 0;
-        padding: 0;
-        border: 0;
-        font-size: 100%;
-        vertical-align: baseline;
-        box-sizing: border-box;
-        width: 26px;
-        height: 70px;
+
     }
 
     .introduction {
@@ -131,14 +84,24 @@ body {
         background-size: cover;
         height: 45.938rem;
         overflow: auto;
-        /*display: block;*/
-        margin: 0;
-        padding: 0;
-        border: 0;
-        font-size: 100%;
-        font: inherit;
-        vertical-align: baseline;
-        box-sizing: border-box;
+    }
+    .introduction h1 {
+        margin-top: 17.5rem;
+        font-size: 3.12rem;
+    }
+    .introduction h1, .introduction h3 {
+        color: #fff;
+        text-align: center;
+        font-weight: 300;
+    }
+    .introduction h3 {
+        margin-top: 1.25rem;
+        font-size: 1.56rem;
+    }
+    .introduction .buttons {
+        color: #fff;
+        text-align: center;
+        margin-top: 1.56rem;
     }
 
     @media (min-width: 48rem) {
@@ -151,11 +114,6 @@ body {
             width: 46rem;
             padding: 0 0.938rem;
             min-width: 37.5rem;
-            border: 0;
-            font-size: 100%;
-            font: inherit;
-            vertical-align: baseline;
-            box-sizing: border-box;
         }
 
 
@@ -180,18 +138,7 @@ body {
         color: #ddd;
     }
 
-    .introduction .buttons {
-        color: #fff;
-        text-align: center;
-        margin-top: 1.563rem;
-        margin: 0;
-        padding: 0;
-        border: 0;
-        font-size: 100%;
-        font: inherit;
-        vertical-align: baseline;
-        box-sizing: border-box;
-    }
+
     button {
         width: 9.688rem;
         color: #f15a29;
@@ -207,13 +154,7 @@ body {
         background-color: #fff;
         overflow: hidden;
         padding-bottom: 5rem;
-        /*display: block;*/
-        margin: 0;
-        padding: 0;
-        border: 0;
-        font-size: 100%;
-        vertical-align: baseline;
-        box-sizing: border-box;
+
     }
     .cases .content {
         margin-top: 7.875rem;
@@ -224,70 +165,15 @@ body {
         font-size: 2.75rem;
         margin: 1.625rem 0 3.125rem;
         font-size: 300;
-        padding: 0;
-        border: 0;
-        font: inherit;
-        vertical-align: baseline;
-        box-sizing: border-box;
-    }
-    h2 {
-        display: block;
-        margin-inline-start: 0.83em;
-        margin-block-end: 0.83em;
-        margin-inline-start: 0px;
-        margin-inline-end: 0px;
-    }
-    .cases .content {
-        color: #1d1e21;
-        text-align: center;
-    }
-    ol ul {
-        list-style: none;
-        margin: 0;
-        padding: 0;
-        border: 0;
-        font-size: 100%;
-        font: inherit;
-        vertical-align: baseline;
-        box-sizing: border-box;
-    }
-    ul {
-        display: block;
-       margin-block-start: 1em;
-       margin-block-end: 1em;
-       margin-inline-start: 40px;
-       margin-inline-end: 0px;
     }
+
     .cases .devices > li {
         width: 33.3333333%;
         float: left;
-    }
-    li {
-        display: list-item;
-        text-align: -webkit-match-parent;
-    }
-    ol ul {
-        list-style: none;
-        margin: 0;
-        padding: 0;
-        border: 0;
-        font-size: 100%;
-        font: inherit;
-        vertical-align: baseline;
-        box-sizing: border-box;
-    }
-    ul {
-        display: block;
-        margin-block-start: 1em;
-        margin-block-end: 1em;
-        margin-inline-end: 0px;
-        margin-inline-start: 0px;
+        text-align: center;
+
     }
 
-.cases .content {
-    color: #1d1e21;
-    text-align: center;
-}
 img {
     width: 127px;
     height: 127px;
@@ -302,6 +188,11 @@ img {
     box-sizing: border-box;
    /* display: block;*/
 }
+.cases .devices h3 {
+    font-weight: 400;
+    font-size: 1.156rem;
+    margin: 2.5rem 0px 1.875rem;
+}
 .social {
     background-color: #fff;
     overflow: auto;
@@ -309,12 +200,18 @@ img {
     text-align: center;
     display: block;
 }
+
+.icons {
+    list-style: none;
+    text-align: center;
+}
+
 h5 {
-    display: block;
-    margin-block-start: 1.67em ;
-    margin-block-end: 1.67em;
-    margin-inline-start: 0px;
-    margin-inline-end: 0px;
+    color: black;
+    text-align: center;
+}
+.icons > li:hover {
+    cursor: pointer;
 }
 .social .icons > li {
     border-radius: 1.25rem;
@@ -325,6 +222,9 @@ h5 {
     border: 1px solid #eaebec;
     text-align: center;
 }
+.twitter {
+    color: #55acee;
+}
 .fa {
     display: inline-block;
     font: normal;
@@ -332,18 +232,18 @@ h5 {
     text-rendering: auto;
     text-align: center;
 }
-.social .twitter {
-    color: #55acee;
-}
-.fa-twitter:before {
+
+.fa-twitter {
     content: "\f099";
 }
+
 .social .facebook {
     color: #4c66a4;
 }
-.fa-facebook:before {
+.fa-facebook {
     content: "\f09a";
 }
+
 .social .instagram {
     color: #3f729b;
 }
@@ -355,6 +255,3 @@ h5 {
     font-weight: 300;
     color: #838994;
 }
-
-
-    

From 6897201fda5973a05547e658cbf8b4e3aac0e5a6 Mon Sep 17 00:00:00 2001
From: NihalAli2 <62475392+NihalAli2@users.noreply.github.com>
Date: Mon, 22 Jun 2020 18:03:05 +0100
Subject: [PATCH 3/3] new update

---
 week2/2-website/index.html | 18 +++++-------------
 1 file changed, 5 insertions(+), 13 deletions(-)

diff --git a/week2/2-website/index.html b/week2/2-website/index.html
index 1ea06441..250e3672 100644
--- a/week2/2-website/index.html
+++ b/week2/2-website/index.html
@@ -64,25 +64,17 @@ <h3>Pay as You Go</h3>
             <hr>
             <h5>Join us on</h5>
             <ul class="icons">
-                <li class="twitter"> ==$0
-                    <i class="fa fa-twitter">
-                        ::before
-                    </i>
+                <li class="twitter">
+                    <i class="fa fa-twitter"></i>
                 </li>
                 <li class="facebook">
-                    <i class="fa fa-facebook">
-                        ::before
-                    </i>
+                    <i class="fa fa-facebook"></i>
                 </li>
                 <li class="instagram">
-                    <i class="fa fa-insragram">
-                        ::before
-                    </i>
+                    <i class="fa fa-insragram"></i>
                 </li>
             </ul>
-            <span class="copy">
-            @Karma Mobility,Inc.
-            </span>
+            <span class="copy">@Karma Mobility,Inc.</span>
             </div>
     </footer>
 </body>