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

Reviewed-on: #9

assets/css/main.css

@@ -226,6 +226,60 @@
   }
 }
 
+/*------*\
+=  BLOG  =
+\*------*/
+.blog {
+  width: 100%;
+}
+
+.blog-images-image {
+  width: 100%;
+  margin-bottom: 50px;
+}
+
+.blog-article {
+  padding: 0 24px;
+}
+
+.blog-title {
+  font-weight: 500;
+  font-size: 24px;
+}
+
+@media screen and (min-width: 1025px) {
+  .blog {
+    padding-bottom: 116px;
+  }
+
+  .blog-title {
+    font-size: 32px;
+  }
+
+  .blog-images-image {
+    margin: 0;
+  }
+
+  .blog .flex-box[data-type="reversed"] {
+    flex-direction: column;
+  }
+
+  .blog-article {
+    width: 28%;
+    margin: 0 auto;
+    margin-bottom: 50px;
+  }
+
+  .blog-description {
+    line-height: 24px;
+  }
+
+  .blog-images {
+    width: 71%;
+    height: auto;
+    margin: 0 auto;
+  }
+}
 
 /*CUBE CSS styles*/
 
@@ -246,6 +300,10 @@
   gap: var(--hs-flex-space);
 }
 
+.flex-box[data-type="reversed"] {
+  flex-direction: column-reverse;
+}
+
 /*-------*\
 =  UTILS  =
 \*-------*/

index.html

@@ -122,7 +122,11 @@
           </figcaption>
         </figure>
         <figure class="card flow box-shadow">
-          <img class="card-image" src="./assets/images/handle-coin.svg" alt="Mão estendida com uma moeda" />
+          <img
+            class="card-image"
+            src="./assets/images/handle-coin.svg"
+            alt="Mão estendida com uma moeda"
+          />
           <figcaption class="card-description text-center">
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui
             fringilla interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras
@@ -130,7 +134,11 @@
           </figcaption>
         </figure>
         <figure class="card flow box-shadow">
-          <img class="card-image" src="./assets/images/laptop.svg" alt="Um laptop aberto em umas de suas páginas do seu ecommerce" />
+          <img
+            class="card-image"
+            src="./assets/images/laptop.svg"
+            alt="Um laptop aberto em umas de suas páginas do seu ecommerce"
+          />
           <figcaption class="card-description text-center">
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui
             fringilla interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras
@@ -138,7 +146,11 @@
           </figcaption>
         </figure>
         <figure class="card flow box-shadow">
-          <img class="card-image" src="./assets/images/phone-notificated.svg" alt="Um celular que contém suas notificações" />
+          <img
+            class="card-image"
+            src="./assets/images/phone-notificated.svg"
+            alt="Um celular que contém suas notificações"
+          />
           <figcaption class="card-description text-center">
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui
             fringilla interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras
@@ -150,6 +162,33 @@
 
     <!--=============== Blog ===============-->
 
+    <section class="blog">
+      <div class="blog-container flex-box" data-type="reversed">
+        <article class="blog-article flow">
+          <h2 class="blog-title text-center">Lorem ipsum dolor sit amet</h2>
+          <p class="blog-description text-center">
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vulputate sapien non
+            libero faucibus interdum. In eget tincidunt ipsum. Quisque a tellus at lectus blandit
+            tempor. Ut tristique auctor mi eget hendrerit. Curabitur venenatis felis vitae sagittis
+            venenatis. Donec finibus turpis vitae lectus interdum rutrum vitae sed augue.
+          </p>
+        </article>
+
+        <figure class="blog-images">
+          <img
+            class="blog-images-image image-desktop"
+            src="./assets/images/blog-desktop.jpg"
+            alt="fundo borado com um oculos em destaque refletindo uma tela de programação"
+          />
+          <img
+            class="blog-images-image image-mobile"
+            src="./assets/images/blog-mobile.jpg"
+            alt="fundo borado com um oculos em destaque refletindo uma tela de programação"
+          />
+        </figure>
+      </div>
+    </section>
+
     <!--=============== Footer ===============-->
   </body>
 </html>