From fc0ce231193dd27f5841d9fcf15042e4eaef6102 Mon Sep 17 00:00:00 2001
From: Muhammad Sohan Mollah <sohansourab@gmail.com>
Date: Sun, 17 Mar 2024 15:33:35 +0600
Subject: [PATCH] footer responsive

---
 .DS_Store            | Bin 6148 -> 6148 bytes
 assets/css/style.css |  25 +++++++++++++++++++++--
 index.html           |  47 ++++++++++++++++++++++++++-----------------
 3 files changed, 52 insertions(+), 20 deletions(-)

diff --git a/.DS_Store b/.DS_Store
index 46b24b1f61322cf737c069826d9bb28c246fdebe..5cd2505b0cc1815f231ce89a7b911c92ab1414e1 100644
GIT binary patch
delta 68
zcmZoMXffCj%*42TatKqQns{}!nW2t?nPIJtLbai>xuuSRg`r7pEhmSlvc7dte0EN5
YUVi7~w@mVkU7LBCf3a+4<@nDJ0IbIpkpKVy

delta 70
zcmZoMXffCj%*42JatKqQhGccMp^<@(f{}qmt&T#qp|OFbj)J*~No_4Bhp4i?bx?eE
aPHtX)_vF`1@{B#3xtV{lY-Z>9%MSp|CKT}i

diff --git a/assets/css/style.css b/assets/css/style.css
index 5ecd7df..a65062b 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -801,7 +801,10 @@ img {
     flex-direction: column;
   }
   .evolution .count {
-    flex-direction: column;
+    flex-wrap: wrap;
+  }
+  .evolution .count .one {
+    width: 48%;
   }
   nav .left {
     width: 120px;
@@ -850,12 +853,14 @@ img {
     font-size: 16px;
   }
   .service .service_slider .topbar button {
-    padding: 1px 21px;
+    padding: 5px 14px;
     font-size: 10px;
   }
   .service .service_slider .topbar {
     padding: 0px 0px;
     display: flex;
+    width: 100%;
+    justify-content: space-between;
   }
   .service .service_slider .inner_part {
     padding-top: 40px;
@@ -882,6 +887,22 @@ img {
   .clients .clients_logo {
     padding: 40px 35px;
     width: 100%;
+    margin-bottom: 30px;
+  }
+  .clients .clients_p {
+    font-size: 18px;
+  }
+  .slider-item {
+    flex-direction: column;
+  }
+  .satisfaction .main .img {
+    width: 23%;
+  }
+  .contact .main .left .top h3 {
+    font-size: 17px;
+  }
+  .footer .main ul li {
+    font-size: 13px;
   }
 }
 
diff --git a/index.html b/index.html
index e059c56..ec0d952 100644
--- a/index.html
+++ b/index.html
@@ -8,6 +8,8 @@
 
     <link rel="icon" type="image/png" href="assets/images/Cutplix Logo Icon png.png">
     <!-- Include Bootstrap CSS -->
+    <link href="https://stackpath.bootstrapcdn.com/bootstrap/5.1.3/css/bootstrap.min.css" rel="stylesheet">
+
     <link href="assets/css/bootstrap.min.css" rel="stylesheet">
     <link href="assets/css/all.min.css" rel="stylesheet">
     <link rel="stylesheet" href="assets/css/style.css">
@@ -349,23 +351,23 @@ <h4>460$<br><span class="fs-6">total amount</span></h5>
     <div id="clients" class="clients section-padding">
         <div class="container">
             <div class="row">
-                <div class="col-lg-6">
+                <div class="col-lg-6 col-sm-12 col-12 order-xs-2">
                     <div class="row clients_logo">
-                        <div class="col-lg-6"><img class="w-100"
+                        <div class="col-lg-6 col-6"><img class="w-100"
                                 src="assets/images/clients/Screenshot at Oct 25 04-13-48.png" alt="" srcset=""></div>
-                        <div class="col-lg-6"><img class="w-100"
+                        <div class="col-lg-6 col-6"><img class="w-100"
                                 src="assets/images/clients/Screenshot at Oct 25 04-13-48.png" alt="" srcset=""></div>
-                        <div class="col-lg-6"><img class="w-100 pt-5"
+                        <div class="col-lg-6 col-6"><img class="w-100 pt-5"
                                 src="assets/images/clients/Screenshot at Oct 25 04-13-48.png" alt="" srcset=""></div>
-                        <div class="col-lg-6"><img class="w-100 pt-5"
+                        <div class="col-lg-6 col-6"><img class="w-100 pt-5"
                                 src="assets/images/clients/Screenshot at Oct 25 04-13-48.png" alt="" srcset=""></div>
-                        <div class="col-lg-6"><img class="w-100 pt-5"
+                        <div class="col-lg-6 col-6"><img class="w-100 pt-5"
                                 src="assets/images/clients/Screenshot at Oct 25 04-13-48.png" alt="" srcset=""></div>
-                        <div class="col-lg-6"><img class="w-100 pt-5"
+                        <div class="col-lg-6 col-6"><img class="w-100 pt-5"
                                 src="assets/images/clients/Screenshot at Oct 25 04-13-48.png" alt="" srcset=""></div>
                     </div>
                 </div>
-                <div class="col-lg-6 d-flex align-items-center">
+                <div class="col-lg-6 col-sm-6 d-flex align-items-center order-xs-1">
                     <div class="content">
                         <h2 class="common-heading">Clients Who Trust Us</h2>
                         <p class="clients_p pe-5 pt-4">Discover how our valued clients' experiences exemplify our
@@ -504,12 +506,12 @@ <h2 class="common-heading">Say Hello!</h2>
                 </div>
                 <div class="main">
                     <div class="row">
-                        <div class="col-lg-4">
+                        <div class="col-lg-4 col-sm-12 col-12">
                             <div class="content">
                                 <div class="left">
                                     <div class="top">
-                                        <h3 class="pt-5 ps-5">How to Reach Us</h3>
-                                        <p class="pb-5 ps-5">Contacting Cutplix: Easy and Convenient</p>
+                                        <h3 class="pt-5 ps-5 ps-xs-0">How to Reach Us</h3>
+                                        <p class="pb-5 pb-xs-0 ps-5">Contacting Cutplix: Easy and Convenient</p>
                                     </div>
                                     <div class="middle">
                                         <ul class="ps-5">
@@ -528,7 +530,7 @@ <h3 class="pt-5 ps-5">How to Reach Us</h3>
                                 </div>
                             </div>
                         </div>
-                        <div class="col-lg-8">
+                        <div class="col-lg-8 col-sm-12 col-12">
                             <div class="right">
                                 <div class="form">
                                     <form action="">
@@ -603,7 +605,7 @@ <h3 class="pt-5 ps-5">How to Reach Us</h3>
         <div class="container">
             <div class="main">
                 <div class="row">
-                    <div class="col-lg-3">
+                    <div class="col-lg-3 col-12">
                         <ul>
                             <li class="pb-4"><b>Reach Us</b></li>
                             <li><i class="fa-solid fa-phone-volume pe-3"></i>+1012 3456 789</li>
@@ -612,8 +614,8 @@ <h3 class="pt-5 ps-5">How to Reach Us</h3>
                                     class="ms-4"> Uttara,Dhaka, Bangladesh</span></li>
                         </ul>
                     </div>
-                    <div class="col-lg-3">
-                        <ul>
+                    <div class="col-lg-3 col-6">
+                        <ul class="mt-5 mt-md-0">
                             <li class="pb-4"><b>Company</b></li>
                             <li class="pb-3">Services</li>
                             <li class="pb-3">Portfolio</li>
@@ -621,8 +623,8 @@ <h3 class="pt-5 ps-5">How to Reach Us</h3>
                             <li class="pb-3">Learn</li>
                         </ul>
                     </div>
-                    <div class="col-lg-3">
-                        <ul>
+                    <div class="col-lg-3 col-6">
+                        <ul class="mt-5 mt-md-0">
                             <li class="pb-4"><b>Legal</b></li>
                             <li class="pb-3">Privacy Policy</li>
                             <li class="pb-3">Terms and Services</li>
@@ -630,7 +632,7 @@ <h3 class="pt-5 ps-5">How to Reach Us</h3>
                             <li class="pb-3">Refund Policy</li>
                         </ul>
                     </div>
-                    <div class="col-lg-3">
+                    <div class="col-lg-3 col-12">
                         <div class="content">
                             <h3 class="pb-2">Join Our Newsletter</h3>
                             <form action="">
@@ -683,6 +685,15 @@ <h3 class="pb-2">Join Our Newsletter</h3>
 
     <!-- Include Bootstrap JavaScript at the end of the body tag to ensure proper functionality -->
     <script src="assets/js/jquery-1.12.4.min.js"></script>
+    <!-- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
+        integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
+        crossorigin="anonymous"></script> -->
+    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"
+        integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p"
+        crossorigin="anonymous"></script>
+    <!-- Bootstrap JavaScript (Popper.js is required for dropdowns) -->
+    <script src="https://stackpath.bootstrapcdn.com/bootstrap/5.1.3/js/bootstrap.bundle.min.js"></script>
+
     <script src="assets/js/bootstrap.min.js"></script>
     <script src="assets/js/index.js"></script>
 </body>