commit 2, jun 11

about.html

@@ -427,13 +427,14 @@
             </div>
             <div id="accordion" class="mt-lg-4">
                 <div class="card-q ">
-                    <div class="card-header py-md-3 pl-lg-4 d-flex flex-row justify-content-between align-items-center" id="headingOne">
+                    <div class="card-header p-0 pl-lg-4 d-flex flex-row justify-content-between align-items-center" id="headingOne">
-                        <h5 class="h5-button mb-0 " data-toggle="collapse" data-target="#collapseOne"
+                        <h5 class="h5-button mb-0 d-md-flex justify-content-md-between" data-toggle="collapse" data-target="#collapseOne"
                             aria-expanded="true" aria-controls="collapseOne">
                             Q: How big the scale of the company needs to be that you will work with it? Do you
                             accept requests from SMBs or only from big corporations?
+                            <!-- <i class="fa-solid fa-circle-plus d-none d-md-flex"></i> -->
                         </h5>
-                        <i class="fa-solid fa-circle-plus d-none d-md-flex"></i>
+                        
                     </div>
                     <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
                         <div class="card-body">
@@ -446,14 +447,14 @@
                     </div>
                 </div>
                 <div class="card-q">
-                    <div class="card-header py-md-3 pl-lg-4  d-flex flex-row justify-content-between" id="headingTwo">
+                    <div class="card-header p-0 pl-lg-4  d-flex flex-row justify-content-between" id="headingTwo">
-                        <h5 class="h5-button mb-0" class="question-btn btn btn-link collapsed" data-toggle="collapse"
+                        <h5 class="h5-button mb-0 d-md-flex justify-content-md-between" class="question-btn btn btn-link collapsed" data-toggle="collapse"
                             data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
 
                             Q: Do you offer not US based, overseas consulting management?
-
+                            <!-- <i class="fa-solid fa-circle-plus d-none d-md-flex "></i> -->
                         </h5>
-                        <i class="fa-solid fa-circle-plus d-none d-md-flex "></i>
+                        
                     </div>
                     <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
                         <div class="card-body">
@@ -465,12 +466,12 @@
                     </div>
                 </div>
                 <div class="card-q">
-                    <div class="card-header py-md-3  pl-lg-4  d-flex flex-row justify-content-between" id="headingThree">
+                    <div class="card-header  p-0 pl-lg-4  d-flex flex-row justify-content-between" id="headingThree">
-                        <h5 class="h5-button mb-0" lass="question-btn btn btn-link collapsed" data-toggle="collapse"
+                        <h5 class="h5-button mb-0 d-md-flex justify-content-md-between" lass="question-btn btn btn-link collapsed" data-toggle="collapse"
                             data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                             Q: Do you work in Tax management optimization field?
+                            <!-- <i class="fa-solid fa-circle-plus d-none d-md-flex"></i> -->
                         </h5>
-                        <i class="fa-solid fa-circle-plus d-none d-md-flex"></i>
                     </div>
                     <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordion">
                         <div class="card-body">

style/about_us/_sixth-part-au.scss

@@ -6,6 +6,7 @@
         padding: 0 3px;
 
     }
+
     .h5-button {
         cursor: pointer;
         text-align: start;
@@ -17,12 +18,15 @@
         font-family: Merriweather, serif;
         letter-spacing: 0px;
         text-decoration: none !important;
-        padding: 0px !important ;
+        background-color: #15c1cb;
+        padding: 15px;
+
     }
+
     .card-header {
-        background-color: #333333;
+        background-color: inherit;
+        border-bottom: none;
         text-decoration: none;
-        color: white;
         margin-bottom: 2px;
 
     }
@@ -36,6 +40,7 @@
         letter-spacing: 0px;
         margin: 50px 0;
     }
+
     .A {
         color: #15c1cb;
 
@@ -43,16 +48,12 @@
     }
 
 
-    // .card-q{
+    .card-q {
-    //     .card-header{
+        .collapsed {
+            background-color: #333333;
         
-    //         transition: background-color 1s ease;
+        }
-
+    }
-    //     }
-    //     .collapsed {
-    //         background-color: #15c1cb;
-    //       }
-    // }
 
 }
 
@@ -64,6 +65,24 @@
             font-size: 25px;
             color: white;
         }
+
+        .h5-button {
+            width: 100%;
+            
+        }
+        .h5-button::after {
+            content: "\00a0 \00a0 \00a0 \00a0 \00a0 \00a0 \00a0 ";
+            color: white;
+            background-repeat: no-repeat;
+            background-position: center;
+            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='25' height='25' color='white' fill='currentColor' class='bi bi-plus-circle' viewBox='0 0 16 16'%3E%3Cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16'/%3E%3Cpath d='M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4'/%3E%3C/svg%3E");        
+        }
+        
+
+        .h5-button:not(.collapsed)::after{
+            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='25' height='25' color='white' fill='currentColor' class='bi bi-dash-circle' viewBox='0 0 16 16'%3E%3Cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16'/%3E%3Cpath d='M4 8a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7A.5.5 0 0 1 4 8'/%3E%3C/svg%3E");
+        }
+
     }
 
 

style/style.css

@@ -1405,12 +1405,13 @@ footer .footer-copyright a:hover {
   font-family: Merriweather, serif;
   letter-spacing: 0px;
   text-decoration: none !important;
-  padding: 0px !important;
+  background-color: #15c1cb;
+  padding: 15px;
 }
 .sixth-part-au .card-header {
-  background-color: #333333;
+  background-color: inherit;
+  border-bottom: none;
   text-decoration: none;
-  color: white;
   margin-bottom: 2px;
 }
 .sixth-part-au .card-body {
@@ -1425,6 +1426,9 @@ footer .footer-copyright a:hover {
 .sixth-part-au .A {
   color: #15c1cb;
 }
+.sixth-part-au .card-q .collapsed {
+  background-color: #333333;
+}
 
 @media only screen and (min-width: 768px) {
   .card-header i {
@@ -1432,6 +1436,19 @@ footer .footer-copyright a:hover {
     font-size: 25px;
     color: white;
   }
+  .card-header .h5-button {
+    width: 100%;
+  }
+  .card-header .h5-button::after {
+    content: "       ";
+    color: white;
+    background-repeat: no-repeat;
+    background-position: center;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='25' height='25' color='white' fill='currentColor' class='bi bi-plus-circle' viewBox='0 0 16 16'%3E%3Cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16'/%3E%3Cpath d='M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4'/%3E%3C/svg%3E");
+  }
+  .card-header .h5-button:not(.collapsed)::after {
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='25' height='25' color='white' fill='currentColor' class='bi bi-dash-circle' viewBox='0 0 16 16'%3E%3Cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16'/%3E%3Cpath d='M4 8a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7A.5.5 0 0 1 4 8'/%3E%3C/svg%3E");
+  }
 }
 @media only screen and (min-width: 992px) {
   .card-q {