From f625a53ec71da012eba7bab49fafd6c9d6de6594 Mon Sep 17 00:00:00 2001
From: Gabu-Rayon <gibsonmurimi4@gmail.com>
Date: Wed, 8 Feb 2023 11:06:28 +0300
Subject: [PATCH 1/3] changes Imade

---
 index.html |  77 ++++---
 styles.css | 600 ++++++++++++++++++++++++++++-------------------------
 2 files changed, 362 insertions(+), 315 deletions(-)

diff --git a/index.html b/index.html
index b00422d..fb2c09e 100644
--- a/index.html
+++ b/index.html
@@ -5,9 +5,9 @@
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Document</title>
+    <title>Brand Insurance</title>
     <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
-<script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
+    <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
     <link rel="stylesheet" href="styles.css">
 </head>
 
@@ -19,13 +19,14 @@
                     <div class="header-sec1">
                         <ul>
                             <li class="logo">
-                                <h1 style="color: white;">Brand Name</h1>
+                                <h1 style="color: rgb(241, 238, 238);"><ion-icon name='rose-outline'></ion-icon>Brand
+                                    Insurance</h1>
                             </li>
                             <li class="home"><a href="#">Home</a></li>
                             <li><a href="#">Product</a></li>
                             <li><a href="#">Pricing</a></li>
                             <li><a href="#">Contact</a></li>
-                            <li><a href="#" class="login">Login</a></li>
+                            <li><a href="#" class="login">Login<ion-icon name='log-in-outline'></ion-icon></a></li>
                             <li><button class="buttonheader">Become a member &#8594</button></li>
                         </ul>
                     </div>
@@ -53,21 +54,21 @@ <h1>We Ensure A Best Insurance Service <br> <br></h1>
         </div>
         <div class="grids">
             <div class="grid1">
-                <ion-icon class="icon" name="people-outline"></ion-icon>
+                <ion-icon class="icon" name='happy-outline'></ion-icon>
                 <div class="content-grid">
                     <h1>Peace of Mind</h1>
                     <p>the quick fox jumps over the lazy dog</p>
                 </div>
             </div>
             <div class="grid2">
-                    <ion-icon class="icon" icon name="people-outline"></ion-icon>
+                <ion-icon class="icon" name='people-circle-sharp'></ion-icon>
                 <div class="content-grid">
                     <h1>Set For Life</h1>
                     <p>the quick fox jumps over the lazy dog</p>
                 </div>
             </div>
             <div class="grid3">
-            <ion-icon class="icon" name="people-outline"></ion-icon>
+                <ion-icon class="icon" name='albums-outline'></ion-icon>
                 <div class="content-grid">
                     <h1>100% Satisfaction</h1>
                     <p>the quick fox jumps over the lazy dog</p>
@@ -76,14 +77,14 @@ <h1>100% Satisfaction</h1>
         </div>
         <div class="grids2">
             <div class="peace">
-                    <ion-icon class="icons" name="wallet-outline"></ion-icon>
+                <ion-icon class="icons" name="wallet-outline"></ion-icon>
                 <div class="content-grids2">
                     <h1>Peace of Mind</h1>
                     <p>So it really behaves like neither. <br> Now we have given up.</p>
                 </div>
             </div>
             <div class="set">
-                    <ion-icon class="icons" name="bookmarks-outline"></ion-icon>
+                <ion-icon class="icons" name="bookmarks-outline"></ion-icon>
                 <div class="content-grids2">
                     <h1>Set For Life</h1>
                     <p>They were used to create the <br> machines that launched</p>
@@ -93,7 +94,7 @@ <h1>Set For Life</h1>
                 <div class="iconic">
                     <ion-icon class="icons" name="people-outline"></ion-icon>
                 </div>
-                    
+
                 <div class="content-grid2">
                     <h1>100% Satisfaction</h1>
                     <p>So it really behaves like neither. <br> Now we have given up.</p>
@@ -128,7 +129,7 @@ <h1>Industry</h1>
             </div>
             <div class="grid-one">
                 <div class="grid-img">
-                    <img src="/images/user2.png" alt="" >
+                    <img src="/images/user2.png" alt="">
                 </div>
                 <div class="grid-cont">
                     <p>
@@ -202,11 +203,15 @@ <h3>$</h3>
                         </div>
                     </div>
 
-                    <p><ion-icon class="icon_circle" name="checkmark-circle-outline"></ion-icon> Unlimited product updates</p>
-                    <p><ion-icon class="icon_circle" name="checkmark-circle-outline"></ion-icon> Unlimited product updates</p>
-                    <p><ion-icon class="icon_circle" name="checkmark-circle-outline"></ion-icon> Unlimited product updates</p>
+                    <p><ion-icon class="icon_circle" name="checkmark-circle-outline"></ion-icon> Unlimited product
+                        updates</p>
+                    <p><ion-icon class="icon_circle" name="checkmark-circle-outline"></ion-icon> Unlimited product
+                        updates</p>
+                    <p><ion-icon class="icon_circle" name="checkmark-circle-outline"></ion-icon> Unlimited product
+                        updates</p>
                     <p><ion-icon class="icon_circles" name="checkmark-circle-outline"></ion-icon> 1GB cloud storage</p>
-                    <p><ion-icon class="icon_circles" name="checkmark-circle-outline"></ion-icon> Email and community support</p>
+                    <p><ion-icon class="icon_circles" name="checkmark-circle-outline"></ion-icon> Email and community
+                        support</p>
                     <div class="btns"><button
                             style="border-radius: 5px; color: white; height: 30px; width: 120px;background: rgb(0, 157, 255); border: none;">Try
                             for free</button></div>
@@ -225,11 +230,15 @@ <h3>$</h3>
                         </div>
                     </div>
 
-                    <p><ion-icon class="icon_circle" name="checkmark-circle-outline"></ion-icon> Unlimited product updates</p>
-                    <p><ion-icon class="icon_circle" name="checkmark-circle-outline"></ion-icon> Unlimited product updates</p>
-                    <p><ion-icon class="icon_circle" name="checkmark-circle-outline"></ion-icon> Unlimited product updates</p>
+                    <p><ion-icon class="icon_circle" name="checkmark-circle-outline"></ion-icon> Unlimited product
+                        updates</p>
+                    <p><ion-icon class="icon_circle" name="checkmark-circle-outline"></ion-icon> Unlimited product
+                        updates</p>
+                    <p><ion-icon class="icon_circle" name="checkmark-circle-outline"></ion-icon> Unlimited product
+                        updates</p>
                     <p><ion-icon class="icon_circles" name="checkmark-circle-outline"></ion-icon> 1GB cloud storage</p>
-                    <p><ion-icon class="icon_circles" name="checkmark-circle-outline"></ion-icon> Email and community support</p>
+                    <p><ion-icon class="icon_circles" name="checkmark-circle-outline"></ion-icon> Email and community
+                        support</p>
                     <div class="btns"><button
                             style="border-radius: 5px; color: white; height: 30px; width: 120px;background: rgb(0, 157, 255); border: none;">Try
                             for free</button></div>
@@ -246,11 +255,15 @@ <h3>$</h3>
                             <p>Per Month</p>
                         </div>
                     </div>
-                    <p><ion-icon class="icon_circle" name="checkmark-circle-outline"></ion-icon> Unlimited product updates</p>
-                    <p><ion-icon class="icon_circle" name="checkmark-circle-outline"></ion-icon> Unlimited product updates</p>
-                    <p><ion-icon class="icon_circle" name="checkmark-circle-outline"></ion-icon> Unlimited product updates</p>
+                    <p><ion-icon class="icon_circle" name="checkmark-circle-outline"></ion-icon> Unlimited product
+                        updates</p>
+                    <p><ion-icon class="icon_circle" name="checkmark-circle-outline"></ion-icon> Unlimited product
+                        updates</p>
+                    <p><ion-icon class="icon_circle" name="checkmark-circle-outline"></ion-icon> Unlimited product
+                        updates</p>
                     <p><ion-icon class="icon_circles" name="checkmark-circle-outline"></ion-icon> 1GB cloud storage</p>
-                    <p><ion-icon class="icon_circles" name="checkmark-circle-outline"></ion-icon> Email and community support</p>
+                    <p><ion-icon class="icon_circles" name="checkmark-circle-outline"></ion-icon> Email and community
+                        support</p>
                     <div class="btns"><button
                             style="border-radius: 5px; color: white; height: 30px; width: 120px;background: rgb(0, 157, 255); border: none;">Try
                             for free</button></div>
@@ -339,16 +352,16 @@ <h1>Get in Touch</h1>
                 <p><img src="/images/email.png" alt="phone" height="20px" width="20px"> debra.holt@example.com</p>
                 <p></p>
             </div>
+        </div>
+        <div class="footer">
+            <div class="footer-cont">
+                Made With Love By Figmaland All Right Reserved
+            </div>
+            <div class="footer-img">
+                <ion-icon class="footer-icon" name="logo-facebook"></ion-icon>
+                <ion-icon class="footer-icon" name="logo-instagram"></ion-icon>
+                <ion-icon class="footer-icon" name="logo-twitter"></ion-icon>
             </div>
-            <div class="footer">
-                <div class="footer-cont">
-                    Made With Love By Figmaland All Right Reserved
-                </div>
-                <div class="footer-img">
-                    <ion-icon class="footer-icon" name="logo-facebook"></ion-icon>
-                    <ion-icon class="footer-icon" name="logo-instagram"></ion-icon>
-                    <ion-icon class="footer-icon" name="logo-twitter"></ion-icon>
-                </div>
         </div>
 </body>
 
diff --git a/styles.css b/styles.css
index 79b2c6d..c6f5c98 100644
--- a/styles.css
+++ b/styles.css
@@ -1,151 +1,3 @@
-.body {
-  background: rgb(247 247 247);
-}
-
-.content {
-  background: url(/images/hero.png);
-  background-repeat: no-repeat;
-  background-size: 100%;
-  height: 500px;
-}
-
-.satisfaction img {
-  height: 100px;
-}
-
-.grids {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  background: rgb(247, 247, 247);
-}
-
-.grid1 {
-  background: white;
-  padding: 20px;
-  margin: 30px;
-  margin-top: -70px;
-}
-
-.grid1:hover ion-icon {
-  background: rgb(0, 157, 255);
-  color: #fff;
-}
-
-.grid2 {
-  background: white;
-  padding: 20px;
-  margin: 30px;
-  margin-top: -70px;
-}
-
-.grid2:hover {
-  background: rgb(0, 157, 255);
-  color: white;
-}
-
-.grid3 {
-  background: white;
-  padding: 20px;
-  margin: 30px;
-  margin-top: -70px;
-}
-
-.grid3:hover {
-  color: white;
-  background: rgb(0, 157, 255);
-}
-
-.grids2 {
-  display: flex;
-  justify-content: center;
-  margin-top: 100px;
-  align-items: center;
-  text-align: center;
-}
-
-.peace {
-  background: white;
-  padding: 20px;
-  margin: 30px;
-}
-
-.peace:hover {
-  background: rgb(0, 157, 255);
-  color: white;
-  padding: 20px;
-  margin: 30px;
-}
-
-.set {
-  background: white;
-  margin: 30px;
-  padding: 20px;
-}
-
-.set:hover {
-  background: rgb(0, 157, 255);
-  color: white;
-}
-
-.satisfaction {
-  background: white;
-  margin: 30px;
-  padding: 20px;
-}
-
-.satisfaction:hover {
-  background: rgb(0, 157, 255);
-  color: white;
-  margin: 30px;
-  padding: 20px;
-}
-
-.grids3 {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  background: rgb(247 247 247);
-}
-
-.grids4 {
-  display: flex;
-  flex-direction: row;
-  margin-top: 100px;
-  padding: 10px;
-  justify-content: center;
-  background: rgb(247 247 247);
-  width: 100%;
-  justify-content: center;
-  align-items: center;
-  text-align: center;
-}
-
-.grid-one {
-  background: white;
-  margin: 40px;
-  padding: 40px;
-  display: flex;
-  flex-flow: column;
-  justify-content: center;
-  text-align: center;
-  gap: 20px;
-  width: 100%;
-}
-
-
-
-.grid-img img {
-  align-items: center;
-  width: 40%;
-}
-
-.grid-cont {
-  display: inline;
-  padding-top: 70px;
-}
-
 .grids5 {
   display: flex;
   justify-content: space-evenly;
@@ -176,13 +28,13 @@
 .grids8:hover {
   background: rgb(37, 42, 65);
   border: none;
-  color: white;
+  color: #fff;
   margin: 10px;
 }
 
 .grids8 {
   margin-top: 90px;
-  background: white;
+  background: #fff;
   border-radius: 10px;
   padding: 20px;
   line-height: 42px;
@@ -192,7 +44,7 @@
 
 .grids9 {
   margin-top: 90px;
-  background: white;
+  background: #fff;
   border-radius: 10px;
   padding: 20px;
   line-height: 42px;
@@ -204,13 +56,13 @@
 .grids9:hover {
   background: rgb(37, 42, 65);
   border: none;
-  color: white;
+  color: #fff;
   margin: 10px;
 }
 
 .grids10 {
   margin-top: 90px;
-  background: white;
+  background: #fff;
   border-radius: 10px;
   padding: 20px;
   line-height: 42px;
@@ -221,7 +73,7 @@
 .grids10:hover {
   background: rgb(37, 42, 65);
   border: none;
-  color: white;
+  color: #fff;
   margin: 10px;
 }
 
@@ -243,7 +95,7 @@
   display: flex;
   padding: 50px;
   background: rgb(2, 2, 42);
-  color: white;
+  color: #fff;
   margin-top: 50px;
 
   justify-content: space-between;
@@ -254,7 +106,7 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  background: white;
+  background: #fff;
   margin-top: -200px;
   margin-left: 400px;
   margin-bottom: 30px;
@@ -269,7 +121,7 @@
 
 .buttonheader {
   background-color: transparent;
-  color: white;
+  color: #fff;
   padding: 10px;
   border: none;
   border-radius: 10px;
@@ -295,27 +147,27 @@
 
 .buton {
   background: transparent;
-  border: 2px solid white;
+  border: 2px solid #fff;
 }
 
 .buton:hover {
   background: rgb(0, 157, 255);
-  color: white;
+  color: #fff;
 }
 
 .learns {
   background: transparent;
-  border: 2px solid white;
+  border: 2px solid #fff;
   color: #fff;
 }
 
 .learns:hover {
   background: rgb(0, 157, 255);
-  color: white;
+  color: #fff;
 }
 
 .quote-btn button {
-  color: white;
+  color: #fff;
   border-radius: 20px;
   padding: 15px;
   margin: 10px;
@@ -344,7 +196,7 @@
 .grids12 button {
   width: 100%;
   height: 30px;
-  color: white;
+  color: #fff;
   background: rgb(0, 157, 255);
   border: none;
   border-radius: 5px;
@@ -355,7 +207,7 @@
   width: 200px;
   height: 40px;
   padding: 20px;
-  background: white;
+  background: #fff;
   border: none;
   margin-top: 13px;
   float: left;
@@ -426,7 +278,7 @@
   border: none;
   background: rgb(35, 164, 237);
   border-radius: 8px;
-  color: white;
+  color: #fff;
   font-weight: 600;
   font-size: 20px;
 }
@@ -468,8 +320,8 @@
   display: flex;
   justify-content: space-evenly;
   align-items: center;
-  
-  
+
+
 
 }
 
@@ -492,18 +344,18 @@
 
 }
 
-.par h1{
+.par h1 {
   display: flex;
   justify-content: center;
   text-align: center;
-  color: white;
+  color: #fff;
 }
 
 .par1 {
   display: flex;
   justify-content: center;
   text-align: center;
-  color: white;
+  color: #fff;
 }
 
 .home {
@@ -513,13 +365,13 @@
 .login button {
   border: none;
   padding-left: 100px;
-  color: white;
+  color: #fff;
   background-color: transparent;
 }
 
 .login button:hover {
   background: rgb(35, 164, 237);
-  color: white;
+  color: #fff;
   width: 100px;
 }
 
@@ -636,7 +488,8 @@ ul {
   display: flex;
 
 }
-.icon_circle{
+
+.icon_circle {
   height: 20;
   color: green;
 }
@@ -644,7 +497,8 @@ ul {
 .grid-img {
   height: 40px;
 }
-.login{
+
+.login {
   margin-left: 150px;
 }
 
@@ -653,13 +507,14 @@ ul {
   .body {
     background: rgb(247 247 247);
   }
-  .container{
+
+  .container {
     background: rgb(247 247 247);
   }
 
   .content {
-     background: url(/images/hero.png); 
-     background-repeat: no-repeat;
+    background: url(/images/hero.png);
+    background-repeat: no-repeat;
     background-size: 100% 600px;
     height: 600px;
   }
@@ -677,7 +532,7 @@ ul {
   }
 
   .grid1 {
-    background: white;
+    background: #fff;
     padding: 20px;
     margin-top: 50px;
   }
@@ -687,10 +542,12 @@ ul {
     text-align: center;
     display: flex;
   }
-  .par h1{
+
+  .par h1 {
     font-size: 20px;
   }
-  .par p{
+
+  .par p {
     font-size: 22px;
   }
 
@@ -698,7 +555,8 @@ ul {
     background: rgb(0, 157, 255);
     color: #fff;
   }
-  .quote-btn button{
+
+  .quote-btn button {
     height: 45px;
     width: 80px;
     display: flex;
@@ -706,15 +564,16 @@ ul {
     align-items: center;
     justify-content: center;
   }
+
   .grid2 {
-    background: white;
+    background: #fff;
     padding: 20px;
     margin-top: 30px;
   }
 
   .grid2:hover {
     background: rgb(0, 157, 255);
-    color: white;
+    color: #fff;
   }
 
   .grid2 img {
@@ -722,13 +581,13 @@ ul {
   }
 
   .grid3 {
-    background: white;
+    background: #fff;
     padding: 20px;
     margin-top: 30px;
   }
 
   .grid3:hover {
-    color: white;
+    color: #fff;
     background: rgb(0, 157, 255);
   }
 
@@ -742,7 +601,7 @@ ul {
   }
 
   .peace {
-    background: white;
+    background: #fff;
     padding: 20px;
     margin: 30px;
   }
@@ -750,13 +609,13 @@ ul {
 
   .peace:hover {
     background: rgb(0, 157, 255);
-    color: white;
+    color: #fff;
     padding: 20px;
     margin: 30px;
   }
 
   .set {
-    background: white;
+    background: #fff;
     margin: 30px;
     padding: 20px;
   }
@@ -766,7 +625,7 @@ ul {
   }
 
   .satisfaction {
-    background: white;
+    background: #fff;
     margin: 30px;
     padding: 20px;
   }
@@ -808,7 +667,7 @@ ul {
   }
 
   .grid-one {
-    background: white;
+    background: #fff;
     padding: 20px;
     display: flex;
     flex-flow: column;
@@ -866,7 +725,8 @@ ul {
     justify-content: space-evenly;
     align-items: center;
   }
-  .icon_circle{
+
+  .icon_circle {
     height: 20;
     color: green;
   }
@@ -874,13 +734,13 @@ ul {
   .grids8:hover {
     background: rgb(37, 42, 65);
     border: none;
-    color: white;
+    color: #fff;
     margin: 10px;
   }
 
   .grids8 {
     margin-top: 90px;
-    background: white;
+    background: #fff;
     border-radius: 10px;
     padding: 20px;
     line-height: 42px;
@@ -890,7 +750,7 @@ ul {
 
   .grids9 {
     margin-top: 90px;
-    background: white;
+    background: #fff;
     border-radius: 10px;
     padding: 20px;
     line-height: 42px;
@@ -902,13 +762,13 @@ ul {
   .grids9:hover {
     background: rgb(37, 42, 65);
     border: none;
-    color: white;
+    color: #fff;
     margin: 10px;
   }
 
   .grids10 {
     margin-top: 90px;
-    background: white;
+    background: #fff;
     border-radius: 10px;
     padding: 20px;
     line-height: 42px;
@@ -919,7 +779,7 @@ ul {
   .grids10:hover {
     background: rgb(37, 42, 65);
     border: none;
-    color: white;
+    color: #fff;
     margin: 10px;
   }
 
@@ -944,12 +804,13 @@ ul {
     flex-direction: row;
     padding: 25px;
     background: rgb(2, 2, 42);
-    color: white;
+    color: #fff;
     justify-content: center;
     align-items: center;
     width: 100%;
   }
-  .grids11 h1 p{
+
+  .grids11 h1 p {
     margin-left: 20px;
     text-align: center;
     justify-content: center;
@@ -960,7 +821,7 @@ ul {
     display: flex;
     justify-content: center;
     align-items: center;
-    background: white;
+    background: #fff;
     margin-top: 10px;
     margin-left: 25%;
     margin-bottom: 30px;
@@ -971,7 +832,7 @@ ul {
 
   .buttonheader {
     background-color: transparent;
-    color: white;
+    color: #fff;
     padding: 10px;
     border: none;
     border-radius: 10px;
@@ -997,27 +858,27 @@ ul {
 
   .buton {
     background: transparent;
-    border: 2px solid white;
+    border: 2px solid #fff;
   }
 
   .buton:hover {
     background: rgb(0, 157, 255);
-    color: white;
+    color: #fff;
   }
 
   .learns {
     background: transparent;
-    border: 2px solid white;
+    border: 2px solid #fff;
     color: #fff;
   }
 
   .learns:hover {
     background: rgb(0, 157, 255);
-    color: white;
+    color: #fff;
   }
 
   .quote-btn button {
-    color: white;
+    color: #fff;
     border-radius: 20px;
     padding: 15px;
     margin: 10px;
@@ -1048,7 +909,7 @@ ul {
   .grids12 button {
     width: 80%;
     height: 30px;
-    color: white;
+    color: #fff;
     background: rgb(0, 157, 255);
     border: none;
     border-radius: 5px;
@@ -1059,7 +920,7 @@ ul {
     width: 100px;
     height: 30px;
     padding: 10px;
-    background: white;
+    background: #fff;
     border: none;
     margin-top: 10px;
     font-size: 16px;
@@ -1131,7 +992,7 @@ ul {
     border: none;
     background: rgb(35, 164, 237);
     border-radius: 8px;
-    color: white;
+    color: #fff;
     font-weight: 600;
     font-size: 20px;
   }
@@ -1200,7 +1061,7 @@ ul {
     display: flex;
     justify-content: center;
     text-align: center;
-    color: white;
+    color: #fff;
   }
 
   .home {
@@ -1210,13 +1071,13 @@ ul {
   .login button {
     border: none;
     padding-left: 100px;
-    color: white;
+    color: #fff;
     background-color: transparent;
   }
 
   .login button:hover {
     background: rgb(35, 164, 237);
-    color: white;
+    color: #fff;
     width: 100px;
   }
 
@@ -1233,7 +1094,8 @@ ul {
     text-decoration: none;
   }
 
-  ul {    list-style: none;
+  ul {
+    list-style: none;
   }
 
   /* footer */
@@ -1317,48 +1179,58 @@ ul {
     height: 50px;
   }
 }
+
 /* Phone media query */
-@media screen and(max-width: 450px){
-  .nav-toggler{
-      display: flex;
-  }
-  .header .nav{
-      position: absolute;
-      left:0;
-      top:100%;
-      width: 100%;
-      border-top: 1px solid rgba(255,255,255,0.2);
-      visibility: hidden;
-  }
-  .header .nav ul li{
-      display: flex;
-      margin:100px;
-      justify-content: center;
-      align-items: center;
-      text-align: center;
-  }
-  .header #nav-check:checked ~ .nav{
-     opacity: 1;
-     visibility: visible;
-  }
-  .header #nav-check:focus ~ .nav-toggler{
-      box-shadow: 0 0 15px #000000;
-  }
-  .header #nav-check:checked ~ .nav-toggler span{
-      background-color: transparent;
-  }
-  .header #nav-check:checked ~ .nav-toggler span::before{
-      top:0;
-      transform: rotate(45deg);
-  }
-  .header #nav-check:checked ~ .nav-toggler span::after{
-      top:0;
-      transform: rotate(-45deg);
+@media screen and(max-width: 450px) {
+  .nav-toggler {
+    display: flex;
+  }
+
+  .header .nav {
+    position: absolute;
+    left: 0;
+    top: 100%;
+    width: 100%;
+    border-top: 1px solid rgba(255, 255, 255, 0.2);
+    visibility: hidden;
   }
+
+  .header .nav ul li {
+    display: flex;
+    margin: 100px;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+  }
+
+  .header #nav-check:checked~.nav {
+    opacity: 1;
+    visibility: visible;
+  }
+
+  .header #nav-check:focus~.nav-toggler {
+    box-shadow: 0 0 15px #000000;
+  }
+
+  .header #nav-check:checked~.nav-toggler span {
+    background-color: transparent;
+  }
+
+  .header #nav-check:checked~.nav-toggler span::before {
+    top: 0;
+    transform: rotate(45deg);
+  }
+
+  .header #nav-check:checked~.nav-toggler span::after {
+    top: 0;
+    transform: rotate(-45deg);
+  }
+
   .body {
     background: rgb(247 247 247);
   }
-  .container{
+
+  .container {
     background: rgb(247 247 247);
   }
 
@@ -1367,7 +1239,8 @@ ul {
     background-repeat: no-repeat;
     background-size: 100% 1000px;
   }
-  .detail{
+
+  .detail {
     padding: initial;
     justify-content: center;
     align-items: center;
@@ -1384,7 +1257,7 @@ ul {
     
 
   }    */
-  .par h1{
+  .par h1 {
     font-size: 10px;
     justify-content: center;
     display: flex;
@@ -1393,7 +1266,7 @@ ul {
   }
 
   .grid1 {
-    background: white;
+    background: #fff;
     padding: 10px;
     justify-content: center;
   }
@@ -1412,7 +1285,7 @@ ul {
   }
 
   .grid2 {
-    background: white;
+    background: #fff;
     padding: 20px;
     margin: 30px;
     margin-top: -70px;
@@ -1420,7 +1293,7 @@ ul {
 
   .grid2:hover {
     background: rgb(0, 157, 255);
-    color: white;
+    color: #fff;
   }
 
   .grid2 img {
@@ -1428,14 +1301,14 @@ ul {
   }
 
   .grid3 {
-    background: white;
+    background: #fff;
     padding: 20px;
     margin: 30px;
     margin-top: -70px;
   }
 
   .grid3:hover {
-    color: white;
+    color: #fff;
     background: rgb(0, 157, 255);
   }
 
@@ -1449,7 +1322,7 @@ ul {
   }
 
   .peace {
-    background: white;
+    background: #fff;
     padding: 20px;
     margin: 30px;
   }
@@ -1457,13 +1330,13 @@ ul {
 
   .peace:hover {
     background: rgb(0, 157, 255);
-    color: white;
+    color: #fff;
     padding: 20px;
     margin: 30px;
   }
 
   .set {
-    background: white;
+    background: #fff;
     margin: 30px;
     padding: 20px;
   }
@@ -1473,7 +1346,7 @@ ul {
   }
 
   .satisfaction {
-    background: white;
+    background: #fff;
     margin: 30px;
     padding: 20px;
   }
@@ -1515,7 +1388,7 @@ ul {
   }
 
   .grid-one {
-    background: white;
+    background: #fff;
     padding: 20px;
     display: flex;
     flex-flow: column;
@@ -1576,13 +1449,13 @@ ul {
   .grids8:hover {
     background: rgb(37, 42, 65);
     border: none;
-    color: white;
+    color: #fff;
     margin: 10px;
   }
 
   .grids8 {
     margin-top: 90px;
-    background: white;
+    background: #fff;
     border-radius: 10px;
     padding: 20px;
     line-height: 42px;
@@ -1592,7 +1465,7 @@ ul {
 
   .grids9 {
     margin-top: 90px;
-    background: white;
+    background: #fff;
     border-radius: 10px;
     padding: 20px;
     line-height: 42px;
@@ -1604,13 +1477,13 @@ ul {
   .grids9:hover {
     background: rgb(37, 42, 65);
     border: none;
-    color: white;
+    color: #fff;
     margin: 10px;
   }
 
   .grids10 {
     margin-top: 90px;
-    background: white;
+    background: #fff;
     border-radius: 10px;
     padding: 20px;
     line-height: 42px;
@@ -1621,7 +1494,7 @@ ul {
   .grids10:hover {
     background: rgb(37, 42, 65);
     border: none;
-    color: white;
+    color: #fff;
     margin: 10px;
   }
 
@@ -1646,13 +1519,14 @@ ul {
     flex-direction: row;
     padding: 20px;
     background: rgb(2, 2, 42);
-    color: white;
+    color: #fff;
     margin-top: 50px;
     justify-content: center;
     align-items: center;
     width: 80%;
   }
-  .grids11 h1 p{
+
+  .grids11 h1 p {
     margin-left: 20px;
     text-align: center;
     justify-content: center;
@@ -1664,7 +1538,7 @@ ul {
     flex-direction: row;
     justify-content: center;
     align-items: center;
-    background: white;
+    background: #fff;
     margin-top: -100px;
     padding: 20px;
   }
@@ -1675,7 +1549,7 @@ ul {
 
   .buttonheader {
     background-color: transparent;
-    color: white;
+    color: #fff;
     padding: 10px;
     border: none;
     border-radius: 10px;
@@ -1701,27 +1575,27 @@ ul {
 
   .buton {
     background: transparent;
-    border: 2px solid white;
+    border: 2px solid #fff;
   }
 
   .buton:hover {
     background: rgb(0, 157, 255);
-    color: white;
+    color: #fff;
   }
 
   .learns {
     background: transparent;
-    border: 2px solid white;
+    border: 2px solid #fff;
     color: #fff;
   }
 
   .learns:hover {
     background: rgb(0, 157, 255);
-    color: white;
+    color: #fff;
   }
 
   .quote-btn button {
-    color: white;
+    color: #fff;
     border-radius: 20px;
     padding: 15px;
     margin: 10px;
@@ -1752,7 +1626,7 @@ ul {
   .grids12 button {
     width: 100%;
     height: 30px;
-    color: white;
+    color: #fff;
     background: rgb(0, 157, 255);
     border: none;
     border-radius: 5px;
@@ -1763,7 +1637,7 @@ ul {
     width: 100px;
     height: 30px;
     padding: 10px;
-    background: white;
+    background: #fff;
     border: none;
     margin-top: 10px;
     font-size: 16px;
@@ -1835,7 +1709,7 @@ ul {
     border: none;
     background: rgb(35, 164, 237);
     border-radius: 8px;
-    color: white;
+    color: #fff;
     font-weight: 600;
     font-size: 20px;
   }
@@ -1903,7 +1777,7 @@ ul {
   .par {
     display: flex;
     justify-content: center;
-    color: white;
+    color: #fff;
     text-align: center;
     align-items: center;
   }
@@ -1915,13 +1789,13 @@ ul {
   .login button {
     border: none;
     padding-left: 100px;
-    color: white;
+    color: #fff;
     background-color: transparent;
   }
 
   .login button:hover {
     background: rgb(35, 164, 237);
-    color: white;
+    color: #fff;
     width: 100px;
   }
 
@@ -2019,7 +1893,167 @@ ul {
   .grid-img {
     height: 50px;
   }
+
   .detail {
     padding: 5px 150px 10px 150px;
   }
+}
+
+html {
+  scroll-behavior: smooth;
+}
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  scroll-behavior: smooth;
+}
+
+.body {
+  background: rgb(236, 229, 229);
+}
+
+.content {
+  background: url(/images/hero.png);
+  background-repeat: no-repeat;
+  background-size: 100%;
+  height: 500px;
+}
+
+.satisfaction img {
+  height: 100px;
+}
+
+.grids {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: rgb(247, 247, 247);
+}
+
+.grid1 {
+  background: #ffff;
+  padding: 20px;
+  margin: 30px;
+  margin-top: -70px;
+}
+
+.grid1:hover ion-icon {
+  background: rgb(0, 157, 255);
+  color: #fff;
+}
+
+.grid2 {
+  background: #fff;
+  padding: 20px;
+  margin: 30px;
+  margin-top: -70px;
+}
+
+.grid2:hover {
+  background: rgb(0, 157, 255);
+  color: #fff;
+}
+
+.grid3 {
+  background: #fff;
+  padding: 20px;
+  margin: 30px;
+  margin-top: -70px;
+}
+
+.grid3:hover {
+  color: #fff;
+  background: rgb(0, 157, 255);
+}
+
+.grids2 {
+  display: flex;
+  justify-content: center;
+  margin-top: 100px;
+  align-items: center;
+  text-align: center;
+}
+
+.peace {
+  background: #fff;
+  padding: 20px;
+  margin: 30px;
+}
+
+.peace:hover {
+  background: rgb(0, 157, 255);
+  color: #fff;
+  padding: 20px;
+  margin: 30px;
+}
+
+.set {
+  background: #fff;
+  margin: 30px;
+  padding: 20px;
+}
+
+.set:hover {
+  background: rgb(0, 157, 255);
+  color: #fff;
+}
+
+.satisfaction {
+  background: #fff;
+  margin: 30px;
+  padding: 20px;
+}
+
+.satisfaction:hover {
+  background: rgb(0, 157, 255);
+  color: #fff;
+  margin: 30px;
+  padding: 20px;
+}
+
+.grids3 {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  background: rgb(247 247 247);
+}
+
+.grids4 {
+  display: flex;
+  flex-direction: row;
+  margin-top: 100px;
+  padding: 10px;
+  justify-content: center;
+  background: rgb(247 247 247);
+  width: 100%;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+}
+
+.grid-one {
+  background: #fff;
+  margin: 40px;
+  padding: 40px;
+  display: flex;
+  flex-flow: column;
+  justify-content: center;
+  text-align: center;
+  gap: 20px;
+  width: 100%;
+}
+
+
+
+.grid-img img {
+  align-items: center;
+  width: 40%;
+}
+
+.grid-cont {
+  display: inline;
+  padding-top: 70px;
 }
\ No newline at end of file

From 8ddda9a460f8ce15cd839aa14fcebb36a358c963 Mon Sep 17 00:00:00 2001
From: I am M Gibson M <73939430+Gabu-Rayon@users.noreply.github.com>
Date: Wed, 8 Feb 2023 11:09:40 +0300
Subject: [PATCH 2/3] Create README.md

# css-challenge
this is a simple front-end responsive changes I contributed
---
 README.md | 2 ++
 1 file changed, 2 insertions(+)
 create mode 100644 README.md

diff --git a/README.md b/README.md
new file mode 100644
index 0000000..6cf18fe
--- /dev/null
+++ b/README.md
@@ -0,0 +1,2 @@
+# css-challenge
+this is a simple front-end responsive changes I contributed

From 316cbeb8728ce632434a30b87c5c4d0b59cf63e6 Mon Sep 17 00:00:00 2001
From: Gabu-Rayon <gibsonmurimi4@gmail.com>
Date: Wed, 8 Feb 2023 11:14:12 +0300
Subject: [PATCH 3/3] change

---
 styles.css | 317 ++++++++++++++++++++++++++---------------------------
 1 file changed, 158 insertions(+), 159 deletions(-)

diff --git a/styles.css b/styles.css
index c6f5c98..1993873 100644
--- a/styles.css
+++ b/styles.css
@@ -1,3 +1,161 @@
+html {
+  scroll-behavior: smooth;
+}
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  scroll-behavior: smooth;
+}
+
+.body {
+  background: rgb(236, 229, 229);
+}
+
+.content {
+  background: url(/images/hero.png);
+  background-repeat: no-repeat;
+  background-size: 100%;
+  height: 500px;
+}
+
+.satisfaction img {
+  height: 100px;
+}
+
+.grids {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: rgb(247, 247, 247);
+}
+
+.grid1 {
+  background: #ffff;
+  padding: 20px;
+  margin: 30px;
+  margin-top: -70px;
+}
+
+.grid1:hover ion-icon {
+  background: rgb(0, 157, 255);
+  color: #fff;
+}
+
+.grid2 {
+  background: #fff;
+  padding: 20px;
+  margin: 30px;
+  margin-top: -70px;
+}
+
+.grid2:hover {
+  background: rgb(0, 157, 255);
+  color: #fff;
+}
+
+.grid3 {
+  background: #fff;
+  padding: 20px;
+  margin: 30px;
+  margin-top: -70px;
+}
+
+.grid3:hover {
+  color: #fff;
+  background: rgb(0, 157, 255);
+}
+
+.grids2 {
+  display: flex;
+  justify-content: center;
+  margin-top: 100px;
+  align-items: center;
+  text-align: center;
+}
+
+.peace {
+  background: #fff;
+  padding: 20px;
+  margin: 30px;
+}
+
+.peace:hover {
+  background: rgb(0, 157, 255);
+  color: #fff;
+  padding: 20px;
+  margin: 30px;
+}
+
+.set {
+  background: #fff;
+  margin: 30px;
+  padding: 20px;
+}
+
+.set:hover {
+  background: rgb(0, 157, 255);
+  color: #fff;
+}
+
+.satisfaction {
+  background: #fff;
+  margin: 30px;
+  padding: 20px;
+}
+
+.satisfaction:hover {
+  background: rgb(0, 157, 255);
+  color: #fff;
+  margin: 30px;
+  padding: 20px;
+}
+
+.grids3 {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  background: rgb(247 247 247);
+}
+
+.grids4 {
+  display: flex;
+  flex-direction: row;
+  margin-top: 100px;
+  padding: 10px;
+  justify-content: center;
+  background: rgb(247 247 247);
+  width: 100%;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+}
+
+.grid-one {
+  background: #fff;
+  margin: 40px;
+  padding: 40px;
+  display: flex;
+  flex-flow: column;
+  justify-content: center;
+  text-align: center;
+  gap: 20px;
+  width: 100%;
+}
+
+
+
+.grid-img img {
+  align-items: center;
+  width: 40%;
+}
+
+.grid-cont {
+  display: inline;
+  padding-top: 70px;
+}
 .grids5 {
   display: flex;
   justify-content: space-evenly;
@@ -1898,162 +2056,3 @@ ul {
     padding: 5px 150px 10px 150px;
   }
 }
-
-html {
-  scroll-behavior: smooth;
-}
-
-* {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-  scroll-behavior: smooth;
-}
-
-.body {
-  background: rgb(236, 229, 229);
-}
-
-.content {
-  background: url(/images/hero.png);
-  background-repeat: no-repeat;
-  background-size: 100%;
-  height: 500px;
-}
-
-.satisfaction img {
-  height: 100px;
-}
-
-.grids {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  background: rgb(247, 247, 247);
-}
-
-.grid1 {
-  background: #ffff;
-  padding: 20px;
-  margin: 30px;
-  margin-top: -70px;
-}
-
-.grid1:hover ion-icon {
-  background: rgb(0, 157, 255);
-  color: #fff;
-}
-
-.grid2 {
-  background: #fff;
-  padding: 20px;
-  margin: 30px;
-  margin-top: -70px;
-}
-
-.grid2:hover {
-  background: rgb(0, 157, 255);
-  color: #fff;
-}
-
-.grid3 {
-  background: #fff;
-  padding: 20px;
-  margin: 30px;
-  margin-top: -70px;
-}
-
-.grid3:hover {
-  color: #fff;
-  background: rgb(0, 157, 255);
-}
-
-.grids2 {
-  display: flex;
-  justify-content: center;
-  margin-top: 100px;
-  align-items: center;
-  text-align: center;
-}
-
-.peace {
-  background: #fff;
-  padding: 20px;
-  margin: 30px;
-}
-
-.peace:hover {
-  background: rgb(0, 157, 255);
-  color: #fff;
-  padding: 20px;
-  margin: 30px;
-}
-
-.set {
-  background: #fff;
-  margin: 30px;
-  padding: 20px;
-}
-
-.set:hover {
-  background: rgb(0, 157, 255);
-  color: #fff;
-}
-
-.satisfaction {
-  background: #fff;
-  margin: 30px;
-  padding: 20px;
-}
-
-.satisfaction:hover {
-  background: rgb(0, 157, 255);
-  color: #fff;
-  margin: 30px;
-  padding: 20px;
-}
-
-.grids3 {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  background: rgb(247 247 247);
-}
-
-.grids4 {
-  display: flex;
-  flex-direction: row;
-  margin-top: 100px;
-  padding: 10px;
-  justify-content: center;
-  background: rgb(247 247 247);
-  width: 100%;
-  justify-content: center;
-  align-items: center;
-  text-align: center;
-}
-
-.grid-one {
-  background: #fff;
-  margin: 40px;
-  padding: 40px;
-  display: flex;
-  flex-flow: column;
-  justify-content: center;
-  text-align: center;
-  gap: 20px;
-  width: 100%;
-}
-
-
-
-.grid-img img {
-  align-items: center;
-  width: 40%;
-}
-
-.grid-cont {
-  display: inline;
-  padding-top: 70px;
-}
\ No newline at end of file