Merge pull request 'feat: created and responsive services section' (#5) from feature/services into develop

Reviewed-on: #5

assets/css/main.css

@@ -89,15 +89,90 @@
   }
 }
 
+/*----------*\
+=  SERVICES  =
+\*----------*/
+.services {
+  padding-bottom: 90px;
+}
+
+.services-container {
+  --hs-flex-space: 20px;
+  --hs-flow-space: 28px;
+
+  padding: 0 26px;
+}
+
+.services-container,
+.card {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.card {
+  width: 100%;
+  flex-direction: column;
+  min-height: 288px;
+  padding: 36px 26px 28px;
+}
+
+.card-image {
+  width: 29%;
+  height: auto;
+}
+
+@media screen and (max-width: 1024px) {
+  .services-container {
+    flex-direction: column;
+  }
+}
+
+@media screen and (min-width:1025px) {
+  .services {
+    width: 55%;
+    margin: 0 auto;
+  }
+
+  .card {
+    max-width: 350px;
+  }
+}
+
 /*CUBE CSS styles*/
 
+/*-------------*\
+=  COMPOSITION  =
+\*-------------*/
+.flow *+* {
+  margin-top: var(--hs-flow-space);
+}
+
+.flex-box {
+  display: flex;
+  gap: var(--hs-flex-space);
+}
+
 /*-------*\
 =  UTILS  =
 \*-------*/
+.center {
+  align-items: center;
+  justify-content: center;
+}
+
 .text-upper {
   text-transform: uppercase;
 }
 
+.text-center {
+  text-align: center;
+}
+
+.box-shadow {
+  box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23);
+}
+
 .bg-clr-black {
   background-color: var(--bg-clr-black);
 }

index.html

@@ -73,6 +73,33 @@
     </section>
 
     <!--=============== Services ===============-->
+    <section class="services">
+      <div class="services-container flex-box">
+        <figure class="card flow box-shadow">
+          <img src="./assets/images/shop.svg" alt="" class="card-image" />
+          <figcaption class="card-description text-center">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui
+            fringilla interdum.
+          </figcaption>
+        </figure>
+
+        <figure class="card flow box-shadow">
+          <img src="./assets/images/shopping-bag.svg" alt="" class="card-image" />
+          <figcaption class="card-description text-center">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui
+            fringilla interdum.
+          </figcaption>
+        </figure>
+
+        <figure class="card flow box-shadow">
+          <img src="./assets/images/handle-coin.svg" alt="" class="card-image" />
+          <figcaption class="card-description text-center">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui
+            fringilla interdum.
+          </figcaption>
+        </figure>
+      </div>
+    </section>
 
     <!--=============== Gallery ===============-->