From d90a80935b90e09fc736c5a365d05af7ac9a5352 Mon Sep 17 00:00:00 2001
From: bahador <noor.bahadory786@gmail.com>
Date: Thu, 20 Jul 2023 12:10:59 +0100
Subject: [PATCH 01/10] new coment added

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

diff --git a/index.html b/index.html
index 3e742ef04..f9f0c5745 100755
--- a/index.html
+++ b/index.html
@@ -14,6 +14,7 @@
     <!-- 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 -->
+    <!-- write a new line for practise -->
 
 </body>
 </html>

From 9386e284f30f8ccd26134f768ce1febee7fd0247 Mon Sep 17 00:00:00 2001
From: bahador <noor.bahadory786@gmail.com>
Date: Thu, 20 Jul 2023 12:15:53 +0100
Subject: [PATCH 02/10] removed new line

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

diff --git a/index.html b/index.html
index f9f0c5745..7a7d7bf9d 100755
--- a/index.html
+++ b/index.html
@@ -14,7 +14,7 @@
     <!-- 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 -->
-    <!-- write a new line for practise -->
+   
 
 </body>
 </html>

From c8f3436d8d4d543e590833094addc40f03de384f Mon Sep 17 00:00:00 2001
From: bahador <noor.bahadory786@gmail.com>
Date: Mon, 24 Jul 2023 16:58:17 +0100
Subject: [PATCH 03/10] added nave bar

 working on hero section is continue
---
 css/style.css | 49 +++++++++++++++++++++++++++++++++++++++++++++++++
 index.html    | 26 ++++++++++++++++++++++++++
 2 files changed, 75 insertions(+)

diff --git a/css/style.css b/css/style.css
index 5cb025cef..070e83e21 100755
--- a/css/style.css
+++ b/css/style.css
@@ -4,6 +4,10 @@
 body {
     font-family: 'Roboto', sans-serif;
     -webkit-font-smoothing: antialiased;
+    background-image: url("img/first-background.jpg");
+    text-align: center;
+    color:aliceblue;
+    
 }
 
 /**
@@ -15,5 +19,50 @@ body {
  * 
  * - When using Flexbox, remember the items you want to move around need to be inside a parent container set to 'display: flex'
  */
+/* .grid-for-nav {
+    display: grid;
+    grid-template-columns: repeat(2, 50%);
+    align-items: center;
+    width: 86%;
+    margin: 0 auto;
+}
+.flex-nav {
+    display: flex;
+    gap: 6%;
+    justify-content: end;
+    font-size: 0.9rem;
+    width: 98%;
+} */
+.nav-bar-grid {
+    display: grid;
+    grid-template-columns: repeat(2, 50%);
+    align-items: center;
+    width: 86%;
+    margin: 0 auto;
+    padding-top: 0.75rem;
+    padding-bottom: 0.50rem;
+}
+
+.nav-bar {
+    display: flex;
+    justify-content: end;
+    gap: 6%;
+    width: 98%;
+    font-size: 0.9rem;
+}
+
+a {
+    text-decoration: none;
+    color: black;
+}
+
+/* Hero section */
+.background-img {
+    background-image: url("/HTML-CSS-Module-Project/img/first-background.jpg");
+    height: 110vh;
+    width: 100%;
+    background-size: cover;
+   
+}
 
 
diff --git a/index.html b/index.html
index 7a7d7bf9d..d291e4e37 100755
--- a/index.html
+++ b/index.html
@@ -14,6 +14,32 @@
     <!-- 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 -->
+    
+<div class="nav-bar-grid">
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 144 216" width="48px" height="48px">
+	<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="nav-bar">
+       <a href="#">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>
+    </div>
+
+    <!-- hero section -->
+
+    <div class="background-img">
+          <div class="hero-flex">
+               <h1>Introducing Karma</h1>
+              <h1>Bring WiFi With you,everywhere you go.</h1>
+                <button class="btn">Learn more</button>
+         </div>
+    
+    </div>
    
 
 </body>

From a6269df00f69f2c5e6b53e6e9ec1ff8943812f61 Mon Sep 17 00:00:00 2001
From: bahador <noor.bahadory786@gmail.com>
Date: Mon, 24 Jul 2023 21:39:46 +0100
Subject: [PATCH 04/10] added btn

some style and HTML
---
 css/style.css | 49 ++++++++++++++++++++++++++++++++-----------------
 index.html    | 12 +++++++-----
 2 files changed, 39 insertions(+), 22 deletions(-)

diff --git a/css/style.css b/css/style.css
index 070e83e21..5de795234 100755
--- a/css/style.css
+++ b/css/style.css
@@ -5,8 +5,8 @@ body {
     font-family: 'Roboto', sans-serif;
     -webkit-font-smoothing: antialiased;
     background-image: url("img/first-background.jpg");
-    text-align: center;
-    color:aliceblue;
+  
+   
     
 }
 
@@ -19,20 +19,9 @@ body {
  * 
  * - When using Flexbox, remember the items you want to move around need to be inside a parent container set to 'display: flex'
  */
-/* .grid-for-nav {
-    display: grid;
-    grid-template-columns: repeat(2, 50%);
-    align-items: center;
-    width: 86%;
-    margin: 0 auto;
-}
-.flex-nav {
-    display: flex;
-    gap: 6%;
-    justify-content: end;
-    font-size: 0.9rem;
-    width: 98%;
-} */
+
+
+
 .nav-bar-grid {
     display: grid;
     grid-template-columns: repeat(2, 50%);
@@ -40,7 +29,7 @@ body {
     width: 86%;
     margin: 0 auto;
     padding-top: 0.75rem;
-    padding-bottom: 0.50rem;
+    padding-bottom: 0.30rem;
 }
 
 .nav-bar {
@@ -62,7 +51,33 @@ a {
     height: 110vh;
     width: 100%;
     background-size: cover;
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    align-items: center;
+    color: white;
    
 }
 
 
+.all-text {
+   text-align: center;
+    font-weight: 1000;
+
+}
+.interoducin {
+    color:aqua;
+    
+}
+
+
+.btn {
+    margin-top: 10%;
+    padding: 16px 32px;
+    border-radius: 8px;
+    background-color: #F15B2A;
+    border: none;
+    font-size: 1.6vw;
+    font-weight: 100;
+   
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index d291e4e37..8453e6dc2 100755
--- a/index.html
+++ b/index.html
@@ -33,13 +33,15 @@
     <!-- hero section -->
 
     <div class="background-img">
-          <div class="hero-flex">
-               <h1>Introducing Karma</h1>
-              <h1>Bring WiFi With you,everywhere you go.</h1>
-                <button class="btn">Learn more</button>
-         </div>
+         <div class="all-text">
+          <span class="interoducin">Introducing Karma</span>
+          <p>Bring WiFi with you, everywhere you go.</p>
+          
+    </div>
     
+       <button class="btn">Learn More</button>
     </div>
+    
    
 
 </body>

From 68ce85e0ed37b108fc1fa11dcfc7aa2e2d336607 Mon Sep 17 00:00:00 2001
From: bahador <noor.bahadory786@gmail.com>
Date: Tue, 25 Jul 2023 01:59:06 +0100
Subject: [PATCH 05/10] added SVG VECTOR ICONS ALONG WITH TEXT UNDERNEATH THEM

---
 css/style.css | 43 ++++++++++++++++++++++++++++++++++++++++---
 index.html    | 30 ++++++++++++++++++++++++++++--
 2 files changed, 68 insertions(+), 5 deletions(-)

diff --git a/css/style.css b/css/style.css
index 5de795234..217a6b746 100755
--- a/css/style.css
+++ b/css/style.css
@@ -38,6 +38,7 @@ body {
     gap: 6%;
     width: 98%;
     font-size: 0.9rem;
+    padding-top: 3px;
 }
 
 a {
@@ -45,11 +46,17 @@ a {
     color: black;
 }
 
+a:hover {
+color: #F15B2A;
+}
+
+
 /* Hero section */
 .background-img {
     background-image: url("/HTML-CSS-Module-Project/img/first-background.jpg");
     height: 110vh;
     width: 100%;
+    background-position: center;
     background-size: cover;
     display: flex;
     justify-content: center;
@@ -57,7 +64,7 @@ a {
     align-items: center;
     color: white;
    
-}
+} 
 
 
 .all-text {
@@ -66,13 +73,22 @@ a {
 
 }
 .interoducin {
-    color:aqua;
+    color:aliceblue;
+    font-size: 4.6vw;
+    font-weight: 100;
     
 }
 
+.interoducin-2 {
+    color: white;
+    font-size: 2.5vw;
+    font-weight: 100;
+
+}
+
 
 .btn {
-    margin-top: 10%;
+    margin-top: 4%;
     padding: 16px 32px;
     border-radius: 8px;
     background-color: #F15B2A;
@@ -80,4 +96,25 @@ a {
     font-size: 1.6vw;
     font-weight: 100;
    
+}
+h1 {
+    text-align: center;
+    font-size: 3.8vw ;
+    font-weight: 300;
+   padding-top: 80px;
+}
+
+.devices-coffee-refill-section {
+    display: flex;
+    justify-content: space-evenly;
+}
+ 
+.icons-discraption {
+    display: flex;
+    justify-content: space-evenly;
+    font-size: 150%;
+}
+.icons-discraption {
+    margin-left: 30px;
+
 }
\ No newline at end of file
diff --git a/index.html b/index.html
index 8453e6dc2..4d44a4369 100755
--- a/index.html
+++ b/index.html
@@ -35,13 +35,39 @@
     <div class="background-img">
          <div class="all-text">
           <span class="interoducin">Introducing Karma</span>
-          <p>Bring WiFi with you, everywhere you go.</p>
+          <p class="interoducin-2">Bring WiFi with you, everywhere you go.</p>
           
     </div>
     
        <button class="btn">Learn More</button>
     </div>
-    
+
+   <h1>Everyone needs a little Karma.</h1> 
+
+<div class="devices-coffee-refill-section">
+
+     <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128" width="8rem">
+	 <path fill="#F05A29"
+		d="M122 66.463h-1.106v-48.41c0-3.033-2.468-5.5-5.5-5.5H13.521a5.506 5.506 0 00-5.5 5.5v38.126h-2.02a5.506 5.506 0 00-5.5 5.5v51.996c0 3.032 2.467 5.5 5.5 5.5h35.546c3.033 0 5.5-2.468 5.5-5.5V90.627H57.69v10.04h-5.422a1.5 1.5 0 100 3H81.5a1.5 1.5 0 000-3h-5.421v-10.04h23.944v16.562c0 3.032 2.468 5.5 5.5 5.5H122c3.032 0 5.5-2.468 5.5-5.5V71.963c0-3.033-2.468-5.5-5.5-5.5zm-77.953 47.212c0 1.379-1.122 2.5-2.5 2.5H6.001a2.503 2.503 0 01-2.5-2.5v-4.286h40.546v4.286zm0-7.286H3.501v-44.71c0-1.378 1.122-2.5 2.5-2.5l35.546-.001c1.378 0 2.5 1.122 2.5 2.5v44.711zm29.032-5.722h-12.39v-10.04h12.39v10.04zm-26.032-13.04v-9.548h52.976v9.548H47.047zm52.976-15.664v3.116H47.047V61.678c0-3.033-2.467-5.5-5.5-5.5l-30.525.001V18.053c0-1.378 1.122-2.5 2.5-2.5h101.873c1.379 0 2.5 1.122 2.5 2.5v48.41h-12.371a5.507 5.507 0 00-5.501 5.5zm24.477 35.226c0 1.379-1.121 2.5-2.5 2.5h-16.477a2.502 2.502 0 01-2.5-2.5v-4.08H124.5v4.08zm0-7.08h-21.477V71.963c0-1.379 1.121-2.5 2.5-2.5H122c1.379 0 2.5 1.121 2.5 2.5v28.146z" />
+	 </svg>
+
+       <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128" width="8rem">
+            <path fill="#F05A29"
+                d="M117.37 60.607h-7.385v-8.1a1.5 1.5 0 00-1.5-1.5H2a1.5 1.5 0 00-1.5 1.5v16.639c0 30.186 24.558 54.744 54.742 54.744 26.217 0 48.178-18.529 53.502-43.176v.146h8.626c5.586 0 10.13-4.542 10.13-10.125 0-5.585-4.544-10.128-10.13-10.128zm-62.128 60.284c-27.676 0-50.344-21.843-51.678-49.195H106.92c-1.333 27.352-24.001 49.195-51.678 49.195zm51.743-52.196H3.5V54.008h103.485v14.687zm10.385 9.165h-8.086c.456-2.839.701-5.748.701-8.714v-5.539h7.385c3.932 0 7.13 3.197 7.13 7.128 0 3.929-3.198 7.125-7.13 7.125zM30.883 41.137c-5.583 0-10.126-4.543-10.126-10.127 0-5.583 4.543-10.125 10.126-10.125 3.93 0 7.127-3.198 7.127-7.128a7.135 7.135 0 00-7.127-7.127 1.5 1.5 0 110-3c5.584 0 10.127 4.543 10.127 10.127 0 5.584-4.543 10.128-10.127 10.128-3.93 0-7.126 3.196-7.126 7.125 0 3.93 3.196 7.127 7.126 7.127a1.5 1.5 0 110 3zM56.767 41.137c-5.584 0-10.128-4.543-10.129-10.126.001-5.583 4.545-10.125 10.129-10.125 3.928 0 7.124-3.198 7.124-7.128s-3.196-7.127-7.124-7.127a1.5 1.5 0 110-3c5.582 0 10.124 4.543 10.124 10.127 0 5.584-4.542 10.128-10.124 10.128-3.93 0-7.128 3.196-7.129 7.125.001 3.929 3.199 7.126 7.129 7.126a1.5 1.5 0 110 3zM82.646 41.137c-5.583 0-10.126-4.543-10.127-10.126.001-5.583 4.544-10.125 10.127-10.125 3.931 0 7.128-3.198 7.128-7.128s-3.197-7.127-7.128-7.127a1.5 1.5 0 110-3c5.585 0 10.128 4.543 10.128 10.127 0 5.584-4.543 10.128-10.128 10.128-3.929 0-7.126 3.196-7.127 7.125.001 3.929 3.198 7.126 7.127 7.126a1.5 1.5 0 110 3z" />
+        </svg>
+      <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128" width="8rem">
+                <path fill="#F05A29"
+                    d="M52.154 51.104H12.621a1.5 1.5 0 01-1.5-1.5v-30.5a1.5 1.5 0 011.5-1.5h39.533a1.5 1.5 0 011.5 1.5v30.5a1.5 1.5 0 01-1.5 1.5zm-38.033-3h36.533v-27.5H14.121v27.5z" />
+                <path fill="#F05A29"
+                    d="M126.654 50.874a11.336 11.336 0 00-8.061-3.34h-.001a11.324 11.324 0 00-8.059 3.34l-3.285 3.327a6.904 6.904 0 00-3.873-1.187c-3.885 0-7.045 3.198-7.045 7.129 0 .31.026.615.064.915-2.691 2.086-4.43 5.344-4.43 9.004 0 6.287 5.114 11.402 11.4 11.402 10.093 0 18.305 8.212 18.305 18.305 0 10.314-8.392 18.705-18.697 18.705a18.57 18.57 0 01-13.189-5.561 18.584 18.584 0 01-5.395-13.263 1.499 1.499 0 00-.179-.721l-.208-.386V59.451c0-6.289-5.116-11.404-11.404-11.404h-8.401V14.026c0-4.136-3.364-7.5-7.5-7.5H8.406c-4.136 0-7.5 3.364-7.5 7.5V118.92a1.5 1.5 0 001.5 1.5h60.29a1.5 1.5 0 001.5-1.5V51.047h8.401c4.634 0 8.404 3.77 8.404 8.404v39.471c0 .248.062.492.179.711l.209.388a21.552 21.552 0 006.259 15c4.073 4.126 9.51 6.418 15.315 6.453 11.969 0 21.706-9.737 21.706-21.705 0-11.747-9.558-21.305-21.305-21.305-4.632 0-8.4-3.77-8.4-8.402 0-2.346.968-4.469 2.522-5.994 1.261 1.949 3.427 3.241 5.888 3.241 3.874 0 7.026-3.215 7.026-7.166a7.145 7.145 0 00-1.077-3.775l3.331-3.373a8.334 8.334 0 015.937-2.461c2.243 0 4.353.875 5.941 2.462a1.5 1.5 0 002.122-2.122zM8.406 9.526h48.29c2.482 0 4.5 2.019 4.5 4.5V117.42H3.906V14.026c0-2.481 2.019-4.5 4.5-4.5zm94.969 54.783c-2.23 0-4.045-1.869-4.045-4.166 0-2.277 1.814-4.129 4.045-4.129 2.22 0 4.026 1.852 4.026 4.129 0 2.297-1.806 4.166-4.026 4.166z" />
+       </svg>
+      
+</div>
+ <div class="icons-discraption">
+         <p>Internet for all devices </p>
+         <p>Boost your productivity </p>
+         <p>Pay as You Go </p>
+       </div>
    
 
 </body>

From 06680d3b749fa58d10eb061612c7f45be212cad5 Mon Sep 17 00:00:00 2001
From: bahador <noor.bahadory786@gmail.com>
Date: Tue, 25 Jul 2023 15:10:11 +0100
Subject: [PATCH 06/10] added new section

log and socila media adede
---
 css/style.css | 49 +++++++++++++++++++++++++++++++++++++------
 index.html    | 58 ++++++++++++++++++++++++++++++++++++++++++++++-----
 2 files changed, 96 insertions(+), 11 deletions(-)

diff --git a/css/style.css b/css/style.css
index 217a6b746..543c948a7 100755
--- a/css/style.css
+++ b/css/style.css
@@ -72,14 +72,14 @@ color: #F15B2A;
     font-weight: 1000;
 
 }
-.interoducin {
-    color:aliceblue;
+.introduction {
+    color:rgb(255, 240, 247);
     font-size: 4.6vw;
     font-weight: 100;
     
 }
 
-.interoducin-2 {
+.introduction-2 {
     color: white;
     font-size: 2.5vw;
     font-weight: 100;
@@ -109,12 +109,49 @@ h1 {
     justify-content: space-evenly;
 }
  
-.icons-discraption {
+.icons-description {
     display: flex;
     justify-content: space-evenly;
     font-size: 150%;
+    font-weight:
 }
-.icons-discraption {
+.icons-description {
     margin-left: 30px;
-
+   
+}
+.boost-your- {
+    margin-right: 30px;
+}
+.line {
+            width: 84%;
+            margin: 0 auto;
+            background-color: #b4bcc36a;
+            height: 0.1vw;
+            margin-top: 5rem;
+        
+}
+.join-us {
+    text-align: center;
+}
+.media-logo {
+    display: flex;
+    justify-content: center;
+    gap: 12px;
+   
+}
+.logo-s {
+        display: flex;
+            align-items: center;
+            justify-content: center;
+            border: 0.1vw solid #d0d7dd6a;
+            padding: 0.6rem 0.7rem;
+            border-radius: 112%;
+            transition: border 1.2s
+       
+}
+.kar-Mobility {
+    text-align: center;
+    padding-top: 1rem;
+    padding-bottom:5rem ;
+    color: #868e96;
 }
\ No newline at end of file
diff --git a/index.html b/index.html
index 4d44a4369..d66aff7a6 100755
--- a/index.html
+++ b/index.html
@@ -34,8 +34,8 @@
 
     <div class="background-img">
          <div class="all-text">
-          <span class="interoducin">Introducing Karma</span>
-          <p class="interoducin-2">Bring WiFi with you, everywhere you go.</p>
+          <span class="introduction">Introducing Karma</span>
+          <p class="introduction-2">Bring WiFi with you, everywhere you go.</p>
           
     </div>
     
@@ -63,11 +63,59 @@ <h1>Everyone needs a little Karma.</h1>
        </svg>
       
 </div>
- <div class="icons-discraption">
+ <div class="icons-description">
          <p>Internet for all devices </p>
-         <p>Boost your productivity </p>
-         <p>Pay as You Go </p>
+         <p class="boost-your-">Boost your productivity </p>
+         <p class="boost-your-">Pay as You Go &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </p>
        </div>
+
+       <div class="line"></div>
+       <p class="join-us">Join us on</p>
+
+       <!-- media part -->
+<div class="media-logo">
+
+    <div class="logo-s">
+
+       <svg class="logos" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2500 2500" width="18px" height="18px">
+  <defs>
+    <radialGradient id="a" cx="332.14" cy="2511.81" r="3263.54" gradientUnits="userSpaceOnUse">
+      <stop offset=".09" stop-color="#fa8f21" />
+      <stop offset=".78" stop-color="#d82d7e" />
+    </radialGradient>
+    <radialGradient id="b" cx="1516.14" cy="2623.81" r="2572.12" gradientUnits="userSpaceOnUse">
+      <stop offset=".64" stop-color="#8c3aaa" stop-opacity="0" />
+      <stop offset="1" stop-color="#8c3aaa" />
+    </radialGradient>
+  </defs>
+
+  <path
+    d="M833.4 1250c0-230.11 186.49-416.7 416.6-416.7s416.7 186.59 416.7 416.7-186.59 416.7-416.7 416.7-416.6-186.59-416.6-416.7m-225.26 0c0 354.5 287.36 641.86 641.86 641.86s641.86-287.36 641.86-641.86S1604.5 608.14 1250 608.14 608.14 895.5 608.14 1250m1159.13-667.31a150 150 0 10150.06-149.94h-.06a150.07 150.07 0 00-150 149.94M745 2267.47c-121.87-5.55-188.11-25.85-232.13-43-58.36-22.72-100-49.78-143.78-93.5s-70.88-85.32-93.5-143.68c-17.16-44-37.46-110.26-43-232.13-6.06-131.76-7.27-171.34-7.27-505.15s1.31-373.28 7.27-505.15c5.55-121.87 26-188 43-232.13 22.72-58.36 49.78-100 93.5-143.78s85.32-70.88 143.78-93.5c44-17.16 110.26-37.46 232.13-43 131.76-6.06 171.34-7.27 505-7.27s373.28 1.31 505.15 7.27c121.87 5.55 188 26 232.13 43 58.36 22.62 100 49.78 143.78 93.5s70.78 85.42 93.5 143.78c17.16 44 37.46 110.26 43 232.13 6.06 131.87 7.27 171.34 7.27 505.15s-1.21 373.28-7.27 505.15c-5.55 121.87-25.95 188.11-43 232.13-22.72 58.36-49.78 100-93.5 143.68s-85.42 70.78-143.78 93.5c-44 17.16-110.26 37.46-232.13 43-131.76 6.06-171.34 7.27-505.15 7.27s-373.28-1.21-505-7.27M734.65 7.57c-133.07 6.06-224 27.16-303.41 58.06C349 97.54 279.38 140.35 209.81 209.81S97.54 349 65.63 431.24c-30.9 79.46-52 170.34-58.06 303.41C1.41 867.93 0 910.54 0 1250s1.41 382.07 7.57 515.35c6.06 133.08 27.16 223.95 58.06 303.41 31.91 82.19 74.62 152 144.18 221.43S349 2402.37 431.24 2434.37c79.56 30.9 170.34 52 303.41 58.06C868 2498.49 910.54 2500 1250 2500s382.07-1.41 515.35-7.57c133.08-6.06 223.95-27.16 303.41-58.06 82.19-32 151.86-74.72 221.43-144.18s112.18-139.24 144.18-221.43c30.9-79.46 52.1-170.34 58.06-303.41 6.06-133.38 7.47-175.89 7.47-515.35s-1.41-382.07-7.47-515.35c-6.06-133.08-27.16-224-58.06-303.41-32-82.19-74.72-151.86-144.18-221.43S2150.95 97.54 2068.86 65.63c-79.56-30.9-170.44-52.1-303.41-58.06C1632.17 1.51 1589.56 0 1250.1 0S868 1.41 734.65 7.57"
+    fill="url(#a)" />
+  <path
+    d="M833.4 1250c0-230.11 186.49-416.7 416.6-416.7s416.7 186.59 416.7 416.7-186.59 416.7-416.7 416.7-416.6-186.59-416.6-416.7m-225.26 0c0 354.5 287.36 641.86 641.86 641.86s641.86-287.36 641.86-641.86S1604.5 608.14 1250 608.14 608.14 895.5 608.14 1250m1159.13-667.31a150 150 0 10150.06-149.94h-.06a150.07 150.07 0 00-150 149.94M745 2267.47c-121.87-5.55-188.11-25.85-232.13-43-58.36-22.72-100-49.78-143.78-93.5s-70.88-85.32-93.5-143.68c-17.16-44-37.46-110.26-43-232.13-6.06-131.76-7.27-171.34-7.27-505.15s1.31-373.28 7.27-505.15c5.55-121.87 26-188 43-232.13 22.72-58.36 49.78-100 93.5-143.78s85.32-70.88 143.78-93.5c44-17.16 110.26-37.46 232.13-43 131.76-6.06 171.34-7.27 505-7.27s373.28 1.31 505.15 7.27c121.87 5.55 188 26 232.13 43 58.36 22.62 100 49.78 143.78 93.5s70.78 85.42 93.5 143.78c17.16 44 37.46 110.26 43 232.13 6.06 131.87 7.27 171.34 7.27 505.15s-1.21 373.28-7.27 505.15c-5.55 121.87-25.95 188.11-43 232.13-22.72 58.36-49.78 100-93.5 143.68s-85.42 70.78-143.78 93.5c-44 17.16-110.26 37.46-232.13 43-131.76 6.06-171.34 7.27-505.15 7.27s-373.28-1.21-505-7.27M734.65 7.57c-133.07 6.06-224 27.16-303.41 58.06C349 97.54 279.38 140.35 209.81 209.81S97.54 349 65.63 431.24c-30.9 79.46-52 170.34-58.06 303.41C1.41 867.93 0 910.54 0 1250s1.41 382.07 7.57 515.35c6.06 133.08 27.16 223.95 58.06 303.41 31.91 82.19 74.62 152 144.18 221.43S349 2402.37 431.24 2434.37c79.56 30.9 170.34 52 303.41 58.06C868 2498.49 910.54 2500 1250 2500s382.07-1.41 515.35-7.57c133.08-6.06 223.95-27.16 303.41-58.06 82.19-32 151.86-74.72 221.43-144.18s112.18-139.24 144.18-221.43c30.9-79.46 52.1-170.34 58.06-303.41 6.06-133.38 7.47-175.89 7.47-515.35s-1.41-382.07-7.47-515.35c-6.06-133.08-27.16-224-58.06-303.41-32-82.19-74.72-151.86-144.18-221.43S2150.95 97.54 2068.86 65.63c-79.56-30.9-170.44-52.1-303.41-58.06C1632.17 1.51 1589.56 0 1250.1 0S868 1.41 734.65 7.57"
+    fill="url(#b)" />
+</svg>
+
+    </div>
+    
+     <div class="logo-s">
+
+<svg class="logos" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 144 216" width="18px" height="18px">
+	<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>
+     </div>
+     <div class="logo-s">
+<svg class="logos" xmlns="http://www.w3.org/2000/svg" width="18px" height="18px" viewBox="0 0 50 50">
+  <path
+    d="M50.063 10.438a20.57 20.57 0 01-5.91 1.62 10.309 10.309 0 004.523-5.687 20.648 20.648 0 01-6.531 2.492 10.258 10.258 0 00-7.504-3.246c-5.68 0-10.286 4.602-10.286 10.281 0 .805.094 1.59.27 2.344-8.547-.43-16.121-4.523-21.195-10.746a10.243 10.243 0 00-1.39 5.172c0 3.566 1.812 6.715 4.573 8.562a10.274 10.274 0 01-4.66-1.289v.13c0 4.984 3.547 9.136 8.246 10.085a10.29 10.29 0 01-4.644.172c1.312 4.082 5.11 7.063 9.605 7.145A20.613 20.613 0 012.39 41.87c-.831 0-1.648-.047-2.449-.144a29.053 29.053 0 0015.762 4.62c18.914 0 29.258-15.667 29.258-29.253 0-.446-.012-.895-.027-1.332a20.904 20.904 0 005.129-5.325zm0 0"
+    fill="#3498db" /></svg>
+     </div>
+
+</div>
+<div class="kar-Mobility">© karma Mobility,inc</div>
+
    
 
 </body>

From 52ca0889711d631900fc5786d0061743b5bacbb3 Mon Sep 17 00:00:00 2001
From: bahador <noor.bahadory786@gmail.com>
Date: Wed, 26 Jul 2023 16:28:36 +0100
Subject: [PATCH 07/10] added new file

for writing css gird in a separate flle
---
 index.html       | 6 ++++++
 level-2/grid.css | 9 +++++++++
 2 files changed, 15 insertions(+)
 create mode 100644 level-2/grid.css

diff --git a/index.html b/index.html
index d66aff7a6..3d464d6d4 100755
--- a/index.html
+++ b/index.html
@@ -7,6 +7,7 @@
     <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="stylesheet" href="/HTML-CSS-Module-Project/level-2/">
     <link rel="shortcut icon" type="image/x-icon"  href="favicon.ico">
 </head>
 <body>
@@ -69,6 +70,11 @@ <h1>Everyone needs a little Karma.</h1>
          <p class="boost-your-">Pay as You Go &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </p>
        </div>
 
+    <!-- part 2 -->
+    <div class="grid-continer">
+      <img src="/HTML-CSS-Module-Project/level-2/homepage-feature.png" alt="picture of a woman smiling while watching on her ipad" class="img-part-2"/>
+      <div class="title-2">"Wherever I am, I just don't worry about my connection anymore!"</div>
+</div>
        <div class="line"></div>
        <p class="join-us">Join us on</p>
 
diff --git a/level-2/grid.css b/level-2/grid.css
new file mode 100644
index 000000000..e20f12c02
--- /dev/null
+++ b/level-2/grid.css
@@ -0,0 +1,9 @@
+.grid-continer {
+    display: grid;
+        grid-template-columns: 1fr 1fr ;
+        grid-template-rows: 50px 50px;
+        
+}
+.grid-continer {
+    background-color: aqua;git
+}
\ No newline at end of file

From 496c530b6328710c6b8eb62949bcf659c5fab7a6 Mon Sep 17 00:00:00 2001
From: bahador <noor.bahadory786@gmail.com>
Date: Wed, 26 Jul 2023 16:49:20 +0100
Subject: [PATCH 08/10] started-part-2

---
 css/style.css    | 11 +++++++++++
 index.html       |  4 ++--
 level-2/grid.css | 15 ++++++++-------
 3 files changed, 21 insertions(+), 9 deletions(-)

diff --git a/css/style.css b/css/style.css
index 543c948a7..d8248700a 100755
--- a/css/style.css
+++ b/css/style.css
@@ -154,4 +154,15 @@ h1 {
     padding-top: 1rem;
     padding-bottom:5rem ;
     color: #868e96;
+}
+
+.container {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    background-color: #FCEFEB;
+
+}
+
+.title-2 {
+    color: red;
 }
\ No newline at end of file
diff --git a/index.html b/index.html
index 3d464d6d4..a988dcd37 100755
--- a/index.html
+++ b/index.html
@@ -71,8 +71,8 @@ <h1>Everyone needs a little Karma.</h1>
        </div>
 
     <!-- part 2 -->
-    <div class="grid-continer">
-      <img src="/HTML-CSS-Module-Project/level-2/homepage-feature.png" alt="picture of a woman smiling while watching on her ipad" class="img-part-2"/>
+    <div class="container">
+      <img src="/HTML-CSS-Module-Project/level-2/homepage-feature.png" alt="picture of a woman smiling while watching on her ipad" class="img-part-2" />
       <div class="title-2">"Wherever I am, I just don't worry about my connection anymore!"</div>
 </div>
        <div class="line"></div>
diff --git a/level-2/grid.css b/level-2/grid.css
index e20f12c02..e383b8106 100644
--- a/level-2/grid.css
+++ b/level-2/grid.css
@@ -1,9 +1,10 @@
-.grid-continer {
-    display: grid;
-        grid-template-columns: 1fr 1fr ;
-        grid-template-rows: 50px 50px;
+.container {
+        display: grid;
+            grid-template-columns: auto 1fr;
+            background-color: #FCEFEB;
+            justify-items: center;
         
 }
-.grid-continer {
-    background-color: aqua;git
-}
\ No newline at end of file
+.title-2 {
+    color: greenyellow;
+}

From bc1a798ee3742c119342c0a4b89293f9c8cc8ce2 Mon Sep 17 00:00:00 2001
From: bahador <noor.bahadory786@gmail.com>
Date: Sat, 29 Jul 2023 20:02:51 +0100
Subject: [PATCH 09/10] added new code

working on part-2
---
 css/style.css    | 43 +++++++++++++++++++++++++++++++++++++------
 index.html       |  8 ++++++--
 level-2/grid.css |  8 ++++++--
 3 files changed, 49 insertions(+), 10 deletions(-)

diff --git a/css/style.css b/css/style.css
index d8248700a..01c1c68fd 100755
--- a/css/style.css
+++ b/css/style.css
@@ -69,7 +69,7 @@ color: #F15B2A;
 
 .all-text {
    text-align: center;
-    font-weight: 1000;
+    font-weight: ;
 
 }
 .introduction {
@@ -127,7 +127,7 @@ h1 {
             margin: 0 auto;
             background-color: #b4bcc36a;
             height: 0.1vw;
-            margin-top: 5rem;
+            margin-top: 6rem;
         
 }
 .join-us {
@@ -140,7 +140,7 @@ h1 {
    
 }
 .logo-s {
-        display: flex;
+            display: flex;
             align-items: center;
             justify-content: center;
             border: 0.1vw solid #d0d7dd6a;
@@ -157,12 +157,43 @@ h1 {
 }
 
 .container {
-    display: grid;
+    display: flex;
+    align-items:center;
+    background-color: #F15B2A;
+    margin-top: 10%;
+    /* display: grid;
     grid-template-columns: 1fr 1fr;
-    background-color: #FCEFEB;
+    background-color: #FCEFEB; */
 
+}
+.btn-text-wraper {
+    display: flex;
+    justify-content: space-between;
+    flex-direction: column ;
+    
 }
 
 .title-2 {
-    color: red;
+    color: white;
+    margin: 
+    font-size: 30px;
+    padding-bottom: 1x;
+  
+}
+ .btn-2 {
+    padding: 1%;
+    margin-left: 37%;
+    margin-right: 37%;
+    margin-bottom: 0%;
+    /* margin: 4%;
+    padding: 16px 32px;
+    border-radius: 8px;
+    background-color: #b5f12a;
+    border: none;
+    font-size: 1.6vw;
+    font-weight: 100;  */
+}
+
+.homepage-feature {
+    padding: 0% 15% 0% %;
 }
\ No newline at end of file
diff --git a/index.html b/index.html
index a988dcd37..a54c33169 100755
--- a/index.html
+++ b/index.html
@@ -72,8 +72,12 @@ <h1>Everyone needs a little Karma.</h1>
 
     <!-- part 2 -->
     <div class="container">
-      <img src="/HTML-CSS-Module-Project/level-2/homepage-feature.png" alt="picture of a woman smiling while watching on her ipad" class="img-part-2" />
-      <div class="title-2">"Wherever I am, I just don't worry about my connection anymore!"</div>
+      <img class="homepage-feature" src="/HTML-CSS-Module-Project/level-2/homepage-feature.png" alt="picture of a woman smiling while watching on her ipad" class="img-part-2" />
+     <div class="btn-text-wraper">
+         <div class="title-2">"Wherever I am, I just don't worry about my connection &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; anymore!"</div>
+         <button class="btn-2">Get Karma Today</button>
+      </div>
+
 </div>
        <div class="line"></div>
        <p class="join-us">Join us on</p>
diff --git a/level-2/grid.css b/level-2/grid.css
index e383b8106..248b60afb 100644
--- a/level-2/grid.css
+++ b/level-2/grid.css
@@ -1,10 +1,14 @@
-.container {
+/* .container {
         display: grid;
             grid-template-columns: auto 1fr;
             background-color: #FCEFEB;
             justify-items: center;
         
 }
+.homepage-feature {
+    padding: 0% 10% 0% 20%;
+}
+
 .title-2 {
     color: greenyellow;
-}
+} */

From 6079f6ea4de01b656e96111e3d75e73ef5d8e371 Mon Sep 17 00:00:00 2001
From: bahador <noor.bahadory786@gmail.com>
Date: Sat, 19 Aug 2023 10:58:28 +0100
Subject: [PATCH 10/10] added part-2

imag, text & btn added with css style
---
 css/style.css | 70 ++++++++++++++++++++++++++++++++++-----------------
 index.html    | 22 ++++++++++------
 2 files changed, 62 insertions(+), 30 deletions(-)

diff --git a/css/style.css b/css/style.css
index 01c1c68fd..2aab21de1 100755
--- a/css/style.css
+++ b/css/style.css
@@ -166,34 +166,58 @@ h1 {
     background-color: #FCEFEB; */
 
 }
-.btn-text-wraper {
+.grid-for-extended {
+    display: grid;
+    grid-template-columns: auto 1fr;
+    background-color: #fcefeb;
+    justify-items: center;
+}
+
+.text--ext:after,
+.text--ext:before {
+    color: #f15b2a;
+}
+
+.text--ext:before {
+    content: open-quote;
+    font-size: 130%;
+}
+
+.text--ext:after {
+    content: close-quote;
+    font-size: 130%;
+}
+
+.text--ext {
+    font-size: 2.4em;
+    text-align: center;
+    color: #495057;
+}
+
+.flex-text-btn {
     display: flex;
-    justify-content: space-between;
-    flex-direction: column ;
-    
+    flex-direction: column;
+    width: 60%;
+    padding-top: 10%;
 }
 
-.title-2 {
+.get-karma-today {
+    margin: 1.6rem auto;
     color: white;
-    margin: 
-    font-size: 30px;
-    padding-bottom: 1x;
-  
-}
- .btn-2 {
-    padding: 1%;
-    margin-left: 37%;
-    margin-right: 37%;
-    margin-bottom: 0%;
-    /* margin: 4%;
-    padding: 16px 32px;
+    padding: 1rem 2rem;
     border-radius: 8px;
-    background-color: #b5f12a;
-    border: none;
+    text-align: center;
     font-size: 1.6vw;
-    font-weight: 100;  */
+    font-weight: 100;
+    transition: background-color 1.2s;
+}
+
+.get-karma-today:hover,
+.get-karma-today:active {
+    background-color: #f56e45;
 }
 
-.homepage-feature {
-    padding: 0% 15% 0% %;
-}
\ No newline at end of file
+
+
+
+ 
\ No newline at end of file
diff --git a/index.html b/index.html
index a54c33169..e48739e80 100755
--- a/index.html
+++ b/index.html
@@ -71,14 +71,22 @@ <h1>Everyone needs a little Karma.</h1>
        </div>
 
     <!-- part 2 -->
-    <div class="container">
-      <img class="homepage-feature" src="/HTML-CSS-Module-Project/level-2/homepage-feature.png" alt="picture of a woman smiling while watching on her ipad" class="img-part-2" />
-     <div class="btn-text-wraper">
-         <div class="title-2">"Wherever I am, I just don't worry about my connection &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; anymore!"</div>
-         <button class="btn-2">Get Karma Today</button>
+   <div class="grid-for-extended">
+      <img
+        src="/HTML-CSS-Module-Project/level-2/homepage-feature.png"
+        alt="picture of a woman smiling while on her laptop"
+        class="img-homepage-feature"
+      />
+      <div class="flex-text-btn">
+        <div class="text--ext">
+          <i
+            >&nbsp;Wherever I am, I just don't worry about my connection
+            anymore!&nbsp;</i
+          >
+        </div>
+        <a href="#" class="get-karma-today btn">Get Karma today</a>
       </div>
-
-</div>
+    </div>
        <div class="line"></div>
        <p class="join-us">Join us on</p>