done working on the footer

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

Hide file tree

Showing 4 changed files with 97 additions and 38 deletions.
diff --git a/insure-landing-page-master/css/main.css b/insure-landing-page-master/css/main.css
@@ -604,6 +604,10 @@ video {
   right: 5rem;
 }
 
+.left-0 {
+  left: 0px;
+}
+
 .mx-auto {
   margin-left: auto;
   margin-right: auto;
@@ -628,6 +632,10 @@ video {
   margin-bottom: 5rem;
 }
 
+.ml-auto {
+  margin-left: auto;
+}
+
 .mt-20 {
   margin-top: 5rem;
 }
@@ -656,10 +664,30 @@ video {
   display: none;
 }
 
+.h-1\/2 {
+  height: 50%;
+}
+
+.h-5\/6 {
+  height: 83.333333%;
+}
+
+.h-4\/6 {
+  height: 66.666667%;
+}
+
+.h-4 {
+  height: 1rem;
+}
+
 .w-32 {
   width: 8rem;
 }
 
+.w-full {
+  width: 100%;
+}
+
 .max-w-32 {
   max-width: 8rem;
 }
@@ -668,10 +696,18 @@ video {
   max-width: 10rem;
 }
 
+.basis-1\/2 {
+  flex-basis: 50%;
+}
+
 .grid-cols-4 {
   grid-template-columns: repeat(4, minmax(0, 1fr));
 }
 
+.flex-row {
+  flex-direction: row;
+}
+
 .items-center {
   align-items: center;
 }
@@ -680,6 +716,10 @@ video {
   justify-content: space-between;
 }
 
+.gap-3 {
+  gap: 0.75rem;
+}
+
 .gap-7 {
   gap: 1.75rem;
 }
@@ -758,38 +798,34 @@ 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;
-}
-
-.pt-5 {
-  padding-top: 1.25rem;
+.px-40 {
+  padding-left: 10rem;
+  padding-right: 10rem;
 }
 
-.pt-9 {
-  padding-top: 2.25rem;
+.pb-2 {
+  padding-bottom: 0.5rem;
 }
 
 .pb-5 {
   padding-bottom: 1.25rem;
 }
 
-.pb-3 {
-  padding-bottom: 0.75rem;
+.pl-10 {
+  padding-left: 2.5rem;
 }
 
-.pb-2 {
-  padding-bottom: 0.5rem;
+.pt-5 {
+  padding-top: 1.25rem;
+}
+
+.pt-9 {
+  padding-top: 2.25rem;
 }
 
 .text-center {
@@ -835,10 +871,6 @@ video {
   font-weight: 600;
 }
 
-.font-medium {
-  font-weight: 500;
-}
-
 .uppercase {
   text-transform: uppercase;
 }
@@ -866,16 +898,6 @@ 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;
 }
@@ -927,6 +949,22 @@ video {
     top: 50%;
   }
 
+  .lg\:top-5 {
+    top: 1.25rem;
+  }
+
+  .lg\:-top-0 {
+    top: -0px;
+  }
+
+  .lg\:-top-0\.5 {
+    top: -0.125rem;
+  }
+
+  .lg\:-top-10 {
+    top: -2.5rem;
+  }
+
   .lg\:flex {
     display: flex;
   }
@@ -943,6 +981,10 @@ video {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 
+  .lg\:grid-cols-4 {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+
   .lg\:px-60 {
     padding-left: 15rem;
     padding-right: 15rem;
@@ -953,6 +995,11 @@ video {
     padding-bottom: 1.5rem;
   }
 
+  .lg\:px-40 {
+    padding-left: 10rem;
+    padding-right: 10rem;
+  }
+
   .lg\:pt-20 {
     padding-top: 5rem;
   }

diff --git a/insure-landing-page-master/index.html b/insure-landing-page-master/index.html
@@ -160,9 +160,9 @@ <h3 class="font-serif text-3xl text-wrap font-bold my-5">
         class="container mx-auto text-veryLightGray bg-darkViolet px-5 py-12 grid items-center gap-7 text-center lg:w-8/12 lg:grid-cols-2 relative my-20"
       >
         <h1
-          class="font-serif text-5xl text-wrap font-bold pt-5 mt-5 text-start"
+          class="font-serif text-5xl text-wrap font-bold pt-5 mt-5 text-start pl-10"
         >
-          Find out more about how we work
+          Find out more <br />about how we work
         </h1>
         <a
           href="#"
@@ -183,12 +183,24 @@ <h3 class="font-serif text-3xl text-wrap font-bold my-5">
         </picture>
       </section>
     </main>
-    <footer class="container mx-auto text-xs">
-      <div class="flex">
-        <div class="">
+    <footer class="container mx-auto text-xs relative">
+      <picture>
+        <source
+          media="(min-width: 768px)"
+          srcset="./images/bg-pattern-footer-desktop.svg"
+          alt="bg-pattern-how-we-work-desktop"
+        />
+        <img
+          src="./images/bg-pattern-how-we-work-mobile.svg"
+          alt="bg-pattern-how-we-work-mobile"
+          class="w-full absolute left-0 lg:w-auto lg:-top-10 h-4/6"
+        />
+      </picture>
+      <div class="flex flex-row px-60 pb-5">
+        <div class="basis-1/2">
           <img src="./images/logo.svg" alt="insure logo" />
         </div>
-        <div class="">
+        <div class="grid grid-cols-4 gap-3 ml-auto">
           <img src="./images/icon-facebook.svg" alt="facebook icon" />
           <img src="./images/icon-twitter.svg" alt="twitter icon" />
           <img src="./images/icon-pinterest.svg" alt="pinterest icon" />
@@ -197,7 +209,7 @@ <h3 class="font-serif text-3xl text-wrap font-bold my-5">
       </div>
       <hr />
       <div
-        class="container mx-auto grid grid-cols-4 px-60 py-7 uppercase font-sans-serif"
+        class="container mx-auto grid lg:grid-cols-4 lg:px-60 py-7 uppercase font-sans-serif"
       >
         <div class="">
           <ul>

diff --git a/insure-landing-page-master/screenshot b/insure-landing-page-master/screenshot
diff --git a/insure-landing-page-master/screenshot/laptopLarge.png b/insure-landing-page-master/screenshot/laptopLarge.png