Merge pull request 'feat: added services section and responsive cards' (#1) from feature/services-section into develop

Reviewed-on: #1

assets/css/styles.css

@@ -1,8 +1,12 @@
+/*=         =*\
+= PAGE HEADER =
+\*=         =*/
+
 .page-header {
-  width: 100%;
   display: flex;
-  justify-content: center;
   align-items: center;
+  justify-content: center;
+  width: 100%;
   padding: 28px 0 29px 0;
 }
 
@@ -10,17 +14,22 @@
   display: block;
 }
 
+
+/*= SECTION =*\
+= INFORMATION =
+\*=         =*/
+
 .information {
-  max-width: 1215px;
-  margin: 0 auto;
-  padding: 5.25rem 1.625rem 5.875rem 2rem;
   display: flex;
   align-items: center;
   justify-content: center;
+  max-width: 1215px;
+  margin: 0 auto;
+  padding: 5.25rem 1.625rem 5.875rem 2rem;
 }
 
-.information {
-  --grid-space: 5.4375rem 7.75rem;
+.information-container {
+  --hs-grid-space: 5.4375rem 7.75rem;
 }
 
 .information-subtitle {
@@ -28,21 +37,68 @@
 }
 
 .information-title {
-  font-weight: 500;
   margin-bottom: 19px;
+  font-weight: 500;
+}
+
+.information-image {
+  width: 239px;
+  height: 239px;
+}
+
+/*= SECTION  =*\
+=   SERVICES   =
+\*=          =*/
+
+.services {
+  padding: 2.5rem 2rem;
+}
+
+.services-container {
+  --hs-flow-space: 37px;
+
+  max-width: 1090px;
+  margin: 0 auto;
+}
+
+.services-card {
+  padding: 2.5rem 1.625rem 1.625rem;
+  box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23);
+}
+
+
+/*=         =*\
+= COMPOSITION =
+\*=         =*/
+.sm-wrapper {
+  display: flex;
+  gap: var(--hs-grid-space);
+}
+
+.flow *+* {
+  margin-top: var(--hs-flow-space);
+}
+
+.grid-col-md-3 {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: var(--hs-grid-space);
 }
 
 /*=   =*\
 = UTILS =
 \*=   =*/
-.sm-wrapper {
+
+.box-center-column {
   display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
 }
 
 .center {
   align-items: center;
   justify-content: center;
-  gap: var(--grid-space);
 }
 
 .text-upper {
@@ -57,6 +113,14 @@
   background-color: var(--bg-clr-black);
 }
 
+.bg-white {
+  background-color: var(--bg-clr-white);
+}
+
+.bg-gray-50 {
+  background-color: var(--bg-clr-gray-50);
+}
+
 .bg-blue-gradient-180 {
   background-color: var(--gradient-blue-180);
 }
@@ -67,10 +131,16 @@
   }
 }
 
+@media screen and (max-width:1024px) {
+  .grid-col-md-3 {
+    grid-template-columns: 1fr;
+  }
+}
+
 
 @media screen and (min-width: 769px) {
   .information {
-    padding: 5rem 0 5.875px 0;
+    padding: 5rem 0 5.875rem 0;
   }
 
   .information-title {
@@ -80,6 +150,16 @@
   .information-subtitle {
     font-size: 2rem;
   }
+
+
+
+  .services-container {
+    --hs-flow-space: 26px;
+  }
+
+  .services {
+    padding: 4.625rem 2rem;
+  }
 }
 
 @media screen and (max-width: 414px) {
@@ -101,4 +181,9 @@
   .hero-image-mobile {
     display: none;
   }
+
+  .information-image {
+    width: 315px;
+    height: 315px;
+  }
 }

index.html

@@ -39,6 +39,37 @@
           <img class="information-image" src="./assets/images/feature-1.png" alt="" />
         </div>
       </section>
+
+      <section class="services bg-gray-50">
+        <div class="services-container grid-col-md-3">
+          <article class="services-card flow box-center-column bg-white">
+            <img src="./assets/images/shop.svg" alt="" />
+
+            <p class="text-center">
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui
+              fringilla interdum.
+            </p>
+          </article>
+
+          <article class="services-card flow box-center-column bg-white">
+            <img src="./assets/images/shopping-bag.svg" alt="" />
+
+            <p class="text-center">
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui
+              fringilla interdum.
+            </p>
+          </article>
+
+          <article class="services-card flow box-center-column bg-white">
+            <img src="./assets/images/handle-coin.svg" alt="" />
+
+            <p class="text-center">
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui
+              fringilla interdum.
+            </p>
+          </article>
+        </div>
+      </section>
     </main>
   </body>
 </html>