fix: solve style and fixing code

muhammadranju · Aug 27, 2024 · 17d9aa8 · 17d9aa8
1 parent 68a1736
commit 17d9aa8
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 27 deletions.
diff --git a/assets/img2.png b/assets/img2.png
diff --git a/assets/img3.png b/assets/img3.png
diff --git a/assets/img5.png b/assets/img5.png
diff --git a/index.html b/index.html
@@ -385,12 +385,12 @@ <h1 class="lg:text-6xl text-4xl font-extrabold text-darkColor_1">
           </div>
 
           <div
-            class="grid lg:grid-cols-4 md:grid-cols-2 grid-cols-1 gap-4 grid- mt-10"
+            class="grid lg:grid-cols-12 md:grid-cols-2 grid-cols-1 gap-4 mt-10"
           >
             <div
-              class="lg:col-span-3 md:col-span-4 bg-white flex flex-col md:flex-row lg:flex-row gap-x-6 border rounded-2xl p-5 lg:space-y-0 space-y-4"
+              class="lg:col-span-8 bg-white flex flex-col md:flex-row lg:flex-row gap-x-6 border rounded-2xl p-5 lg:space-y-0 space-y-4"
             >
-              <img src="./assets/img1.png" class="w-f" alt="" />
+              <img src="./assets/img1.png" class="" alt="" />
               <div class="space-y-7 flex flex-col justify-center">
                 <h3 class="font-extrabold text-2xl">Commercial Spaces</h3>
                 <p class="lg:w-4/5">
@@ -410,47 +410,51 @@ <h3 class="font-extrabold text-2xl">Commercial Spaces</h3>
               </div>
             </div>
             <div
-              class="lg:col-span-2 flex bg-white justify-center items-center border rounded-2xl p-5"
+              class="lg:col-span-4 flex bg-white justify-center items-center border rounded-2xl p-5"
             >
               <img src="./assets/img2.png" class="w-full" alt="" />
             </div>
             <div
-              class="lg:col-span-2 bg-white lg:row-start-2 lg:hidden flex justify-center items-center border rounded-2xl p-5 w-full"
+              class="bg-white lg:hidden flex justify-center items-center border rounded-2xl p-5 w-full"
             >
               <img src="./assets/img5.png" class="w-full" alt="" />
             </div>
+
             <div
-              class="lg:row-start-2 flex bg-white order-1 lg:order-none justify-center items-center border rounded-2xl p-5"
+              class="lg:col-span-3 lg:flex hidden bg-white justify-center items-center border rounded-2xl p-5"
             >
               <img src="./assets/img3.png" class="w-full" alt="" />
             </div>
 
-            <div class="lg:col-span-2 lg:row-start-2">
-              <div
-                class="flex bg-white flex-col lg:flex-row gap-x-6 lg:space-y-0 space-y-4 border rounded-2xl p-5"
-              >
-                <img src="./assets/img4.png" class="w-full" alt="" />
-                <div class="space-y-7 flex flex-col py-3 justify-center">
-                  <h3 class="font-extrabold text-2xl">Residential Designs</h3>
-                  <p>
-                    We specialize in crafting homes that combine rustic textures
-                    with sleek lines, creating modern barn houses that feel cozy
-                    yet refined.
-                  </p>
-                  <div class="font-extrabold text-xl w-full">
-                    View Details
+            <div
+              class="lg:col-span-6 bg-white flex flex-col md:flex-row lg:flex-row gap-x-6 border rounded-2xl p-5 lg:space-y-0 space-y-4"
+            >
+              <img src="./assets/img4.png" class="" alt="" />
+              <div class="space-y-7 flex flex-col justify-center">
+                <h3 class="font-extrabold text-2xl">Commercial Spaces</h3>
+                <p class="lg:w-4/5">
+                  From rustic-themed cafes to modern offices with a
+                  barn-inspired aesthetic, our commercial spaces make an
+                  unforgettable impression.
+                </p>
+                <div class="font-extrabold text-xl lg:w-fit w-full">
+                  View Details
 
-                    <span
-                      class="bg-primary border py-[3px] px-[8px] text-darkColor_1 rounded-full"
-                    >
-                      <i class="fa-solid fa-arrow-right -rotate-45"></i>
-                    </span>
-                  </div>
+                  <span
+                    class="bg-primary border py-[3px] px-[8px] text-darkColor_1 rounded-full"
+                  >
+                    <i class="fa-solid fa-arrow-right -rotate-45"></i>
+                  </span>
                 </div>
               </div>
             </div>
             <div
-              class="lg:col-span-2 bg-white lg:row-start-2 order-2 lg:order-none flex justify-center items-center border rounded-2xl p-5 w-full"
+              class="lg:col-span-3 flex bg-white lg:hidden justify-center items-center border rounded-2xl p-5"
+            >
+              <img src="./assets/img3.png" class="w-full" alt="" />
+            </div>
+            <div
+              class="lg:col-span-3 bg-white flex justify-center items-center border rounded-2xl p-5 w-full"
             >
               <img src="./assets/img5.png" class="w-full" alt="" />
             </div>