currently working on the footer

Ehmkayel · Apr 17, 2024 · d7eb645 · d7eb645
1 parent a0db865
commit d7eb645
Show file tree

Hide file tree

Showing 2 changed files with 86 additions and 76 deletions.
diff --git a/insure-landing-page-master/css/main.css b/insure-landing-page-master/css/main.css
@@ -592,51 +592,28 @@ video {
   position: relative;
 }
 
-.right-0 {
-  right: 0px;
-}
-
-.bottom-0 {
-  bottom: 0px;
-}
-
-.right-10 {
-  right: 2.5rem;
-}
-
-.right-2 {
-  right: 0.5rem;
-}
-
-.bottom-4 {
-  bottom: 1rem;
-}
-
-.right-4 {
-  right: 1rem;
-}
-
-.bottom-5 {
-  bottom: 1.25rem;
+.bottom-20 {
+  bottom: 5rem;
 }
 
-.right-5 {
-  right: 1.25rem;
+.right-0 {
+  right: 0px;
 }
 
 .right-20 {
   right: 5rem;
 }
 
-.bottom-20 {
-  bottom: 5rem;
-}
-
 .mx-auto {
   margin-left: auto;
   margin-right: auto;
 }
 
+.my-20 {
+  margin-top: 5rem;
+  margin-bottom: 5rem;
+}
+
 .my-4 {
   margin-top: 1rem;
   margin-bottom: 1rem;
@@ -647,11 +624,6 @@ video {
   margin-bottom: 1.25rem;
 }
 
-.my-20 {
-  margin-top: 5rem;
-  margin-bottom: 5rem;
-}
-
 .mb-20 {
   margin-bottom: 5rem;
 }
@@ -668,10 +640,6 @@ video {
   margin-top: 14rem;
 }
 
-.mr-20 {
-  margin-right: 5rem;
-}
-
 .inline-block {
   display: inline-block;
 }
@@ -700,6 +668,10 @@ video {
   max-width: 10rem;
 }
 
+.grid-cols-4 {
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+}
+
 .items-center {
   align-items: center;
 }
@@ -732,22 +704,18 @@ video {
   border-width: 2px;
 }
 
-.border-t-2 {
-  border-top-width: 2px;
-}
-
 .border-t-4 {
   border-top-width: 4px;
 }
 
-.border-darkGrayishViolet {
+.border-black {
   --tw-border-opacity: 1;
-  border-color: hsl(273 4% 51% / var(--tw-border-opacity));
+  border-color: rgb(0 0 0 / var(--tw-border-opacity));
 }
 
-.border-black {
+.border-darkGrayishViolet {
   --tw-border-opacity: 1;
-  border-color: rgb(0 0 0 / var(--tw-border-opacity));
+  border-color: hsl(273 4% 51% / var(--tw-border-opacity));
 }
 
 .bg-darkViolet {
@@ -790,6 +758,16 @@ video {
   padding-bottom: 1.5rem;
 }
 
+.py-10 {
+  padding-top: 2.5rem;
+  padding-bottom: 2.5rem;
+}
+
+.py-7 {
+  padding-top: 1.75rem;
+  padding-bottom: 1.75rem;
+}
+
 .pl-10 {
   padding-left: 2.5rem;
 }
@@ -802,6 +780,18 @@ video {
   padding-top: 2.25rem;
 }
 
+.pb-5 {
+  padding-bottom: 1.25rem;
+}
+
+.pb-3 {
+  padding-bottom: 0.75rem;
+}
+
+.pb-2 {
+  padding-bottom: 0.5rem;
+}
+
 .text-center {
   text-align: center;
 }
@@ -841,6 +831,14 @@ video {
   font-weight: 400;
 }
 
+.font-semibold {
+  font-weight: 600;
+}
+
+.font-medium {
+  font-weight: 500;
+}
+
 .uppercase {
   text-transform: uppercase;
 }
@@ -868,6 +866,16 @@ video {
   color: hsl(0 0% 98% / var(--tw-text-opacity));
 }
 
+.text-slate-400 {
+  --tw-text-opacity: 1;
+  color: rgb(148 163 184 / var(--tw-text-opacity));
+}
+
+.text-slate-300 {
+  --tw-text-opacity: 1;
+  color: rgb(203 213 225 / var(--tw-text-opacity));
+}
+
 .opacity-70 {
   opacity: 0.7;
 }
@@ -903,10 +911,6 @@ video {
 }
 
 @media (min-width: 900px) {
-  .lg\:static {
-    position: static;
-  }
-
   .lg\:absolute {
     position: absolute;
   }
@@ -923,10 +927,6 @@ video {
     top: 50%;
   }
 
-  .lg\:right-auto {
-    right: auto;
-  }
-
   .lg\:flex {
     display: flex;
   }

diff --git a/insure-landing-page-master/index.html b/insure-landing-page-master/index.html
@@ -196,40 +196,50 @@ <h3 class="font-serif text-3xl text-wrap font-bold my-5">
         </div>
       </div>
       <hr />
-      <div class="flex">
+      <div
+        class="container mx-auto grid grid-cols-4 px-60 py-7 uppercase font-sans-serif"
+      >
         <div class="">
           <ul>
-            <li><a href="#">Our company</a></li>
-            <li><a href="#">How we work</a></li>
-            <li><a href="#">Why Insure?</a></li>
-            <li><a href="#">View plans</a></li>
-            <li><a href="#">Reviews</a></li>
+            <li class="pb-5"><a href="#">Our company</a></li>
+            <li class="pb-2 font-semibold">
+              <a href="#">How we work</a>
+            </li>
+            <li class="pb-2 font-semibold">
+              <a href="#">Why Insure?</a>
+            </li>
+            <li class="pb-2 font-semibold">
+              <a href="#">View plans</a>
+            </li>
+            <li class="pb-2 font-semibold">
+              <a href="#">Reviews</a>
+            </li>
           </ul>
         </div>
         <div class="">
           <ul>
-            <li><a href="#">Help me</a></li>
-            <li><a href="#">FAQ </a></li>
-            <li><a href="#">Terms of use</a></li>
-            <li><a href="#">Privacy policy</a></li>
-            <li><a href="#">Cookies</a></li>
+            <li class="pb-5"><a href="#">Help me</a></li>
+            <li class="pb-2 font-semibold"><a href="#">FAQ </a></li>
+            <li class="pb-2 font-semibold"><a href="#">Terms of use</a></li>
+            <li class="pb-2 font-semibold"><a href="#">Privacy policy</a></li>
+            <li class="pb-2 font-semibold"><a href="#">Cookies</a></li>
           </ul>
         </div>
         <div class="">
           <ul>
-            <li><a href="#">Contact</a></li>
-            <li><a href="#">Sales</a></li>
-            <li><a href="#">Support</a></li>
-            <li><a href="#">Live Chat</a></li>
+            <li class="pb-5"><a href="#">Contact</a></li>
+            <li class="pb-2 font-semibold"><a href="#">Sales</a></li>
+            <li class="pb-2 font-semibold"><a href="#">Support</a></li>
+            <li class="pb-2 font-semibold"><a href="#">Live Chat</a></li>
           </ul>
         </div>
 
         <div class="">
           <ul>
-            <li><a href="#">Others</a></li>
-            <li><a href="#">Careers</a></li>
-            <li><a href="#">Press</a></li>
-            <li><a href="#">Licenses</a></li>
+            <li class="pb-5"><a href="#">Others</a></li>
+            <li class="pb-2 font-semibold"><a href="#">Careers</a></li>
+            <li class="pb-2 font-semibold"><a href="#">Press</a></li>
+            <li class="pb-2 font-semibold"><a href="#">Licenses</a></li>
           </ul>
         </div>
       </div>