Merge pull request 'chore: web page responsive' (#13) from hotfix/responsive into develop

Reviewed-on: #13

assets/css/main.css

@@ -64,7 +64,7 @@
   }
 
   .information-texts {
-    width: 40%;
+    width: 40.5%;
     margin: 0 auto;
     text-align: initial;
   }
@@ -84,9 +84,13 @@
   }
 
   .information-image {
-    width: 16%;
+    width: 17%;
     height: auto;
   }
+
+  .information-image img {
+    width: 100%;
+  }
 }
 
 /*----------*\
@@ -118,7 +122,8 @@
 }
 
 .card-image {
-  width: 29%;
+  width: 34.5%;
+  min-width: 103px;
   height: auto;
 }
 
@@ -139,7 +144,7 @@
   }
 
   .services .card {
-    min-width: 350px;
+    width: 34%;
   }
 }
 
@@ -160,27 +165,32 @@
   transform: translateY(2rem);
 }
 
-.gallery-image-1 {
+.gallery-image,
+.gallery-image img {
   width: 100%;
 }
 
-.gallery-image-2 {
-  width: 100%;
-}
 
 .gallery-image-3 {
-  width: 100%;
   grid-column: 1/2 span;
 }
 
 @media screen and (min-width:1025px) {
+  .gallery {
+    --hs-grid-space: 40px;
+
+    padding: 0 72px;
+  }
+
   .gallery-container {
-    width: 88%;
-    margin: 0 auto;
     grid-template-columns: repeat(3, 1fr);
     transform: translateY(4rem);
   }
 
+  .gallery-image {
+    min-height: 530px;
+  }
+
   .gallery-image-3 {
     grid-column: auto;
   }
@@ -209,15 +219,14 @@
 }
 
 @media screen and (min-width:1025px) {
-  .features-container {
-    flex-direction: row;
-    width: 92%;
-    padding-bottom: 108px;
-    margin: 0 auto;
+  .features {
+    padding: 0 72px;
   }
 
-  .features .card {
-    width: 22.5%;
+
+  .features-container {
+    flex-direction: row;
+    padding-bottom: 108px;
   }
 
   .card-image {
@@ -265,7 +274,7 @@
   }
 
   .blog-article {
-    width: 28%;
+    width: 30.5%;
     margin: 0 auto;
     margin-bottom: 50px;
   }

index.html

@@ -65,11 +65,10 @@
           Nulla suscipit magna dui.
         </p>
       </div>
-      <figure>
+      <figure class="information-image">
         <img
           src="./assets/images/information-image.png"
           alt="três computadores juntos conectados por setas"
-          class="information-image"
         />
       </figure>
     </section>
@@ -105,11 +104,19 @@
 
     <!--=============== Gallery ===============-->
     <div class="gallery bg-clr-gray">
-      <figure class="gallery-container grid-box">
-        <img class="gallery-image gallery-image-1" src="./assets/images/gallery-1.jpg" alt="" />
-        <img class="gallery-image gallery-image-2" src="./assets/images/gallery-2.jpg" alt="" />
-        <img class="gallery-image gallery-image-3" src="./assets/images/gallery-3.jpg" alt="" />
-      </figure>
+      <div class="gallery-container grid-box">
+        <figure class="gallery-image gallery-image-1">
+          <img src="./assets/images/gallery-1.jpg" alt="" />
+        </figure>
+
+        <figure class="gallery-image gallery-image-2">
+          <img src="./assets/images/gallery-2.jpg" alt="" />
+        </figure>
+
+        <figure class="gallery-image gallery-image-3">
+          <img src="./assets/images/gallery-3.jpg" alt="" />
+        </figure>
+      </div>
     </div>
 
     <!--=============== Features ===============-->
@@ -210,7 +217,9 @@
           </a>
         </li>
       </ul>
-      <p class="text-center text-upper clr-gray-100">Copyright © 2020 - Loja Comércio Eletrônico CNPJ: 000.000.000/0001-00</p>
+      <p class="text-center text-upper clr-gray-100">
+        Copyright © 2020 - Loja Comércio Eletrônico CNPJ: 000.000.000/0001-00
+      </p>
     </footer>
   </body>
 </html>