Merge pull request 'feat: create information section and responsive' (#4) from feature/information into develop

Reviewed-on: #4

assets/css/main.css

@@ -26,11 +26,78 @@
   height: auto;
 }
 
+/*-------------*\
+=  INFORMATION  =
+\*-------------*/
+.information {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  gap: 64px;
+  padding: 74px 1.875rem 90px;
+}
+
+.information-texts {
+  text-align: center;
+}
+
+.information-subtitle {
+  font-weight: 400;
+  line-height: 24px;
+}
+
+.information-title {
+  font-weight: 500;
+  line-height: 48px;
+}
+
+.information-description {
+  line-height: 24px;
+}
+
+
+@media screen and (min-width:1025px) {
+  .information {
+    padding: 74px 0 157px;
+    gap: 74px;
+  }
+
+  .information-texts {
+    width: 40%;
+    margin: 0 auto;
+    text-align: initial;
+  }
+
+  .information-title,
+  .information-subtitle {
+    text-align: center;
+  }
+
+  .information-title {
+    font-size: 200%;
+    margin-bottom: 28px;
+  }
+
+  .information-subtitle {
+    line-height: 32px;
+  }
+
+  .information-image {
+    width: 16%;
+    height: auto;
+  }
+}
+
 /*CUBE CSS styles*/
 
 /*-------*\
 =  UTILS  =
 \*-------*/
+.text-upper {
+  text-transform: uppercase;
+}
+
 .bg-clr-black {
   background-color: var(--bg-clr-black);
 }

index.html

@@ -55,6 +55,22 @@
     </figure>
 
     <!--=============== Information ===============-->
+    <section class="information">
+      <div class="information-texts">
+        <h2 class="information-subtitle text-upper">Lorem ipusm</h2>
+        <h1 class="information-title text-upper">Dolor sit amet</h1>
+        <p class="information-description">
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui
+          fringilla interdum. Curabitur ut tortor sed lacus egestas vulputate vel sit amet velit.
+          Nulla suscipit magna dui.
+        </p>
+      </div>
+      <img
+        src="./assets/images/information-image.png"
+        alt="três computadores juntos conectados por setas"
+        class="information-image"
+      />
+    </section>
 
     <!--=============== Services ===============-->