From d1befba0cb8c8483a1e1624e119a54e1d212e191 Mon Sep 17 00:00:00 2001
From: PatOn <mahomed2278@gmail.com>
Date: Mon, 16 Nov 2020 17:11:34 +0000
Subject: [PATCH 1/5] HTML Base

Base HTML - DONE
HTML - fixed imports - missing "http:"
CSS - to control size of the pictures
CSS - background-image - uploaded
---
 css/style.css |  9 +++++++++
 index.html    | 55 ++++++++++++++++++++++++++++++++++++++++++++++++---
 2 files changed, 61 insertions(+), 3 deletions(-)

diff --git a/css/style.css b/css/style.css
index 5cb025cef..f7b9107a8 100755
--- a/css/style.css
+++ b/css/style.css
@@ -17,3 +17,12 @@ body {
  */
 
 
+/* Temporrary */
+
+img {
+    width: 5%;
+}
+
+.first-section {
+    background-image: url(../img/first-background.jpg);
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index 876b59d64..6f7239cb7 100755
--- a/index.html
+++ b/index.html
@@ -4,9 +4,9 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     <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 href='http://fonts.googleapis.com/css?family=Roboto:400,500,300' rel='stylesheet' type='text/css'>
+    <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
+    <!-- <link rel="stylesheet" href="css/normalize.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">
@@ -16,6 +16,55 @@
     <!-- 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>
+            <ul>
+                <li>How it works</li>
+                <li>Store</li>
+                <li>Blog</li>
+                <li>Help</li>
+                <li>Login</li>
+            </ul>
+            <img src="img/karma-logo.svg" alt="">
+        </nav>
+
+        <main>
+            
+            <section class="first-section">
+                <!-- TODO: -->
+                <!-- Picture -> css background -> easiest solution -->
+                <h1>Introduction Karma</h1>
+                <h2>Bring WiFi with You, everywhere You go.</h2>
+                <button>Learn More</button>
+            </section>
+
+            <section>
+                <h2>Everyone needs a little Karma</h2>
+
+                <img src="img/icon-devices.svg" alt="">
+                <h3>Internet for all devices</h3>
+
+                <img src="img/icon-coffee.svg" alt="">
+                <h3>Boos Your Productivity</h3>
+
+                <img src="img/icon-refill.svg" alt="">
+                <h3>Pay as You go</h3>
+
+            </section>
+
+            <footer>
+                <h4>Join us on</h4>
+                
+                <!-- TODO: icons
+                Twitter
+                Facebook
+                Instagram -->
+
+                <p>© Karma Mobility, Inc.</p>
+            </footer>
+
+
+        </main>
+
 
 </body>
 </html>

From 5148b0cb434a9c32b363b476d8c2321b0b45e35e Mon Sep 17 00:00:00 2001
From: PatOn <mahomed2278@gmail.com>
Date: Mon, 16 Nov 2020 18:27:28 +0000
Subject: [PATCH 2/5] HTML + CSS Improvement

HTML - changes added <div>s
CSS :
<nav> need small improvement
.first-section - button need improvements
.second-section - poor condition
<footer> progress 0%
---
 css/style.css | 83 +++++++++++++++++++++++++++++++++++++++++++++++-
 index.html    | 87 +++++++++++++++++++++++++++++----------------------
 2 files changed, 131 insertions(+), 39 deletions(-)

diff --git a/css/style.css b/css/style.css
index f7b9107a8..1d3703981 100755
--- a/css/style.css
+++ b/css/style.css
@@ -4,6 +4,7 @@
 body {
     font-family: 'Roboto', sans-serif;
     -webkit-font-smoothing: antialiased;
+    margin: 0;
 }
 
 /**
@@ -13,7 +14,7 @@ body {
  * - 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'
+ * - When using Flexbox, remember    the items you want to move around need to be inside a parent container set to 'display: flex'
  */
 
 
@@ -23,6 +24,86 @@ img {
     width: 5%;
 }
 
+
+/* NAV */
+
+nav{
+    position: fixed;
+    background-color: white;
+    width: 100%;
+    margin: 0 0 0 10;
+}
+.logo-nav {
+    display: inline-block;
+    width: 2%;
+    padding: 1rem 1rem 1rem 5rem;
+}
+
+.menu {
+    list-style-type: none;
+    display: flex;
+    align-items: right;
+    float: right;
+    padding-right: 5rem;
+}
+
+.menu li {
+    display: inline;
+    padding: 1rem 1rem 1rem 1rem;
+}
+
+
+
+/* MAIN */
+
+/* First section */
+
 .first-section {
     background-image: url(../img/first-background.jpg);
+    background-position: center;
+    background-size: cover;
+    height: 40rem;
+    padding-top: 25rem;
+}
+
+
+.first-section h1{  
+    margin: 15rem, 0, 0, 0,;
+    text-align: center;
+    font-size: 3rem;
+}
+
+.first-section h2{  
+    text-align: center;
+    font-size: 1.5rem;
+}
+
+.first-section .button-first {
+    /* display: inline-block;
+    justify-content: center;
+    align-items: center; */
+    /* display: inline-block; */
+    margin: auto;
+    /* width:  */
+}
+
+
+/* Change it in to children and eddit h1 h2 */
+.white-font {
+    color: aliceblue;
+}
+
+
+/* second section */
+/* .second-section {
+
+} */
+
+.list-of-pictures {
+    list-style-type: none;
+
+}
+.list-of-pictures li {
+    display: inline-block;
+    width: 32%;
 }
\ No newline at end of file
diff --git a/index.html b/index.html
index 6f7239cb7..30c174ddb 100755
--- a/index.html
+++ b/index.html
@@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
@@ -9,62 +10,72 @@
     <!-- <link rel="stylesheet" href="css/normalize.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">
+    <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>
-            <ul>
-                <li>How it works</li>
-                <li>Store</li>
-                <li>Blog</li>
-                <li>Help</li>
-                <li>Login</li>
-            </ul>
-            <img src="img/karma-logo.svg" alt="">
-        </nav>
-
-        <main>
-            
-            <section class="first-section">
-                <!-- TODO: -->
-                <!-- Picture -> css background -> easiest solution -->
-                <h1>Introduction Karma</h1>
-                <h2>Bring WiFi with You, everywhere You go.</h2>
-                <button>Learn More</button>
-            </section>
+    <nav>
+        <img class="logo-nav" src="img/karma-logo.svg" alt="">
+        <ul class="menu">
+            <li>Meet Karma</li>
+            <li>How it works</li>
+            <li>Store</li>
+            <li>Blog</li>
+            <li>Help</li>
+            <li>Login</li>
+        </ul>
 
-            <section>
-                <h2>Everyone needs a little Karma</h2>
+    </nav>
 
-                <img src="img/icon-devices.svg" alt="">
-                <h3>Internet for all devices</h3>
+    <main>
 
-                <img src="img/icon-coffee.svg" alt="">
-                <h3>Boos Your Productivity</h3>
+        <section class="first-section">
+            <!-- TODO: -->
+            <!-- Picture -> css background -> easiest solution -->
+            <h1 class="white-font">Introduction Karma</h1>
+            <h2 class="white-font">Bring WiFi with You, everywhere You go.</h2>
+            <div class="button-first">
+                <button>Learn More</button>
+            </div>
+        </section>
 
-                <img src="img/icon-refill.svg" alt="">
-                <h3>Pay as You go</h3>
+        <section class="second-section">
+            <h2>Everyone needs a little Karma</h2>
+            <ul class=list-of-pictures>
+                <li>
+                    <img src="img/icon-devices.svg" alt="">
+                    <div><h3>Internet for all devices</h3></div>
+                </li>
+                <li>
+                    <img src="img/icon-coffee.svg" alt="">
+                    <div><h3>Boos Your Productivity</h3></div>
+                </li>
+                <li>
+                    <img src="img/icon-refill.svg" alt="">
+                    <div><h3>Pay as You go</h3></div>
+                </li>
+            </ul>
+        </section>
 
-            </section>
+        <footer>
+            <h4>Join us on</h4>
 
-            <footer>
-                <h4>Join us on</h4>
-                
-                <!-- TODO: icons
+            <!-- TODO: icons
                 Twitter
                 Facebook
                 Instagram -->
 
-                <p>© Karma Mobility, Inc.</p>
-            </footer>
+            <p>© Karma Mobility, Inc.</p>
+        </footer>
 
 
-        </main>
+    </main>
 
 
 </body>
-</html>
+
+</html>
\ No newline at end of file

From fc0abb6936c8dc57692ba0fbba42889a0e3a098a Mon Sep 17 00:00:00 2001
From: PatOn <mahomed2278@gmail.com>
Date: Tue, 17 Nov 2020 16:38:40 +0000
Subject: [PATCH 3/5] Almost complete

html - alll fine
CSS - not exactly what I wanted, but close enough to original
---
 css/style.css | 162 +++++++++++++++++++++++++++++++++++++++++---------
 index.html    |  63 +++++++++++++-------
 2 files changed, 175 insertions(+), 50 deletions(-)

diff --git a/css/style.css b/css/style.css
index 1d3703981..404af4333 100755
--- a/css/style.css
+++ b/css/style.css
@@ -5,8 +5,11 @@ body {
     font-family: 'Roboto', sans-serif;
     -webkit-font-smoothing: antialiased;
     margin: 0;
+    padding: 0;
+
 }
 
+
 /**
  * Add your custom styles below
  * 
@@ -20,36 +23,54 @@ body {
 
 /* Temporrary */
 
-img {
+/* img {
     width: 5%;
-}
+} */
 
 
-/* NAV */
+/* Header */
+header {
+    position: fixed;
+    width: 100%;
+}
 
 nav{
-    position: fixed;
+    /* position: inline-block;; */
     background-color: white;
     width: 100%;
     margin: 0 0 0 10;
+    display: block;
 }
 .logo-nav {
-    display: inline-block;
-    width: 2%;
-    padding: 1rem 1rem 1rem 5rem;
+    /* display: inline-block; */
+    width: 1.5%;
+    padding: 1rem 1rem 1rem 20rem;
 }
 
 .menu {
     list-style-type: none;
-    display: flex;
-    align-items: right;
+    /* display: inline; */
+    /* align-items: right; */
     float: right;
-    padding-right: 5rem;
+    padding-right: 20rem;
+    display: block;
 }
 
 .menu li {
-    display: inline;
+    display: inline-block;
     padding: 1rem 1rem 1rem 1rem;
+    font-weight: normal;
+    font-style: normal;
+    color: grey;
+}
+
+.menu li:hover{
+    color: black;
+    cursor: pointer;
+}
+
+.menu li:first-child {
+    font-weight: bold;
 }
 
 
@@ -60,50 +81,137 @@ nav{
 
 .first-section {
     background-image: url(../img/first-background.jpg);
-    background-position: center;
+    background-position: center bottom;
     background-size: cover;
-    height: 40rem;
-    padding-top: 25rem;
+    background-repeat: no-repeat;
+    height: 25rem;
+    padding-top: 15rem; /* Generally I have no idea */
 }
 
 
 .first-section h1{  
-    margin: 15rem, 0, 0, 0,;
+    margin-top: 12rem 0 0 0;  /*Generally I have no idea  */
     text-align: center;
     font-size: 3rem;
+    font-weight: normal;
+    font-style: normal;
 }
 
 .first-section h2{  
     text-align: center;
     font-size: 1.5rem;
+    font-weight: normal;
+    font-style: normal;
 }
 
-.first-section .button-first {
-    /* display: inline-block;
-    justify-content: center;
-    align-items: center; */
-    /* display: inline-block; */
+.button-first {
     margin: auto;
-    /* width:  */
+    text-align: center;
 }
 
 
-/* Change it in to children and eddit h1 h2 */
+/* Change it in to children and eddit h1 h2? */
 .white-font {
-    color: aliceblue;
+    color: white;
 }
 
+/* I coopied it from page: button + button:hover */
+button {
+    width: 9.688rem;
+    background-color: #f15a29;
+    border-color: #f15a29;
+    text-shadow: none;
+    border-style: none;
+    border-radius: 4px;
+    padding: 1rem 1.5rem;
+    color: white;
+    font-size: 1.125rem;
+}
+button:hover {
+    background-color: #d9400e;
+    border-color: #cf3d0e;
+    cursor: pointer;
+}
 
 /* second section */
-/* .second-section {
-
-} */
+.second-section img {
+    width: 25%;
+}
+.second-section h2{
+    text-align: center;
+    padding: 5rem 0 5rem 0;
+    font-size: 2.75rem;
+    font-style: normal;
+    font-weight: normal;
+}
 
 .list-of-pictures {
     list-style-type: none;
+    text-align: center;
 
 }
 .list-of-pictures li {
     display: inline-block;
-    width: 32%;
+    width: 30%;
+    
+}
+
+h3 {
+    font-weight: normal;
+    font-style: normal;
+}
+
+/* hr */
+hr{
+    border-top: #eaebec 1px solid;
+    padding:0;
+    margin:0;
+    width: 85%;
+    height: 0;
+    margin: auto;
+}
+
+/* footer */
+h4 {
+    font-weight: normal;
+    font-style: normal;
+}
+
+footer{
+    width: 100%;
+    padding-bottom: 10rem;
+}
+
+.manipulator{
+    display: inline-block;
+    width: 100%;
+}
+
+footer h4, p {
+    text-align: center;
+    font-weight: normal;
+    font-style: normal;
+}
+
+.icons {
+    list-style-type: none;
+    text-align: center;
+    padding: 0; /* small horrible stubborn value!*/ 
+}
+
+.icons > li {
+    display: inline-block;
+    text-align: center;
+    padding: 0.50rem;
+ }
+
+/*Easy edition of color's icons - nice */ 
+.icons .twitter {
+    color: #55acee;
+}
+.icons .facebook {
+    color: #4c66a4;
+}
+.icons .instagram {
+    color: #3f729b;
 }
\ No newline at end of file
diff --git a/index.html b/index.html
index 30c174ddb..87a70ece7 100755
--- a/index.html
+++ b/index.html
@@ -18,24 +18,24 @@
     <!-- 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>
-        <img class="logo-nav" src="img/karma-logo.svg" alt="">
-        <ul class="menu">
-            <li>Meet Karma</li>
-            <li>How it works</li>
-            <li>Store</li>
-            <li>Blog</li>
-            <li>Help</li>
-            <li>Login</li>
-        </ul>
-
-    </nav>
+    <header>
+        <nav>
+            <img class="logo-nav" src="img/karma-logo.svg" alt="">
+            <ul class="menu">
+                <li>Meet Karma</li>
+                <li>How it works</li>
+                <li>Store</li>
+                <li>Blog</li>
+                <li>Help</li>
+                <li>Login</li>
+            </ul>
+
+        </nav>
+    </header>
 
     <main>
 
         <section class="first-section">
-            <!-- TODO: -->
-            <!-- Picture -> css background -> easiest solution -->
             <h1 class="white-font">Introduction Karma</h1>
             <h2 class="white-font">Bring WiFi with You, everywhere You go.</h2>
             <div class="button-first">
@@ -48,28 +48,45 @@ <h2>Everyone needs a little Karma</h2>
             <ul class=list-of-pictures>
                 <li>
                     <img src="img/icon-devices.svg" alt="">
-                    <div><h3>Internet for all devices</h3></div>
+                    <div>
+                        <h3>Internet for all devices</h3>
+                    </div>
                 </li>
                 <li>
                     <img src="img/icon-coffee.svg" alt="">
-                    <div><h3>Boos Your Productivity</h3></div>
+                    <div>
+                        <h3>Boos Your Productivity</h3>
+                    </div>
                 </li>
                 <li>
                     <img src="img/icon-refill.svg" alt="">
-                    <div><h3>Pay as You go</h3></div>
+                    <div>
+                        <h3>Pay as You go</h3>
+                    </div>
                 </li>
             </ul>
         </section>
 
+        <hr>
+
         <footer>
-            <h4>Join us on</h4>
+            <div class="manipulator">
+                <h4>Join us on</h4>
 
-            <!-- TODO: icons
-                Twitter
-                Facebook
-                Instagram -->
+                <ul class="icons">
+                    <li class="twitter">
+                        <i class="fa fa-twitter"></i>
+                    </li>
+                    <li class="facebook">
+                        <i class="fa fa-facebook"></i>
+                    </li>
+                    <li class="instagram">
+                        <i class="fa fa-instagram"></i>
+                    </li>
+                </ul>
 
-            <p>© Karma Mobility, Inc.</p>
+                <p>© Karma Mobility, Inc.</p>
+            </div>
         </footer>
 
 

From c8342486b8253e5dd7ecb218b700737e0b5b8946 Mon Sep 17 00:00:00 2001
From: PatOn <mahomed2278@gmail.com>
Date: Tue, 17 Nov 2020 17:07:59 +0000
Subject: [PATCH 4/5] Update style.css

CSS center upgrade
---
 css/style.css | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/css/style.css b/css/style.css
index 404af4333..dd9070f42 100755
--- a/css/style.css
+++ b/css/style.css
@@ -85,7 +85,8 @@ nav{
     background-size: cover;
     background-repeat: no-repeat;
     height: 25rem;
-    padding-top: 15rem; /* Generally I have no idea */
+    padding-top: 12rem; /* Generally I have no idea */
+    padding-bottom: 8rem;
 }
 
 

From 38f966b12736d1a41f2c934dcb80b48449417925 Mon Sep 17 00:00:00 2001
From: PatOn <mahomed2278@gmail.com>
Date: Tue, 17 Nov 2020 17:16:32 +0000
Subject: [PATCH 5/5] introduction -> introducing

spelling
---
 index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/index.html b/index.html
index 87a70ece7..0f0ffc9ee 100755
--- a/index.html
+++ b/index.html
@@ -36,7 +36,7 @@
     <main>
 
         <section class="first-section">
-            <h1 class="white-font">Introduction Karma</h1>
+            <h1 class="white-font">Introducing Karma</h1>
             <h2 class="white-font">Bring WiFi with You, everywhere You go.</h2>
             <div class="button-first">
                 <button>Learn More</button>