Adiciona cards templates

index.html

@@ -44,6 +44,36 @@
             </picture>
         </section>
 
+        <article class="container">
+            <div class="card">
+                <picture>
+                    <img class="img_card" src="./assets/img/img_container_1.png" alt="card_decoration 1">
+                    <p class="card_paragraph">
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla
+                        interdum.
+                    </p>
+                </picture>
+            </div>
+            <div class="card">
+                <picture>
+                    <img src="./assets/img/img_container_2.png" alt="card decoration 2">
+                    <p class="card_paragraph">
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla
+                        interdum.
+                    </p>
+                </picture>
+            </div>
+            <div class="card">
+                <picture>
+                    <img src="./assets/img/img_container_3.png" alt="card decoration 3">
+                    <p class="card_paragraph">
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla
+                        interdum.
+                    </p>
+                </picture>
+            </div>
+        </article>
+
     </main>
 
 </body>

style.css

@@ -8,6 +8,7 @@
 
 body {
     font-family: 'Inter', sans-serif;
+
 }
 
 .header_landing {
@@ -55,6 +56,34 @@ body {
     margin-bottom: 76px;
 }
 
+.container {
+    display: flex;
+    margin-top: 178px;
+    gap: 22px;
+    justify-content: center;
+}
+
+.card {
+
+    background-color: #fff;
+    display: flex;
+    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23);
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+    width: 20%;
+    padding: 2rem;
+    margin-bottom: 80px;
+}
+
+.card_paragraph {
+    margin-top: 30px;
+}
+
+.img_card {
+    width: 100px;
+}
+
 
 @media screen and (max-width: 413px) {
     .primary_banner {
@@ -87,4 +116,19 @@ body {
         align-items: center;
     }
 
+}
+
+@media screen and (max-width:1120px) {
+    .container {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+
+    }
+
+    .card {
+        width: 350px;
+        margin: 0 32px 24px;
+    }
 }