From bc421481e31c0d627e2270312488ba658853d102 Mon Sep 17 00:00:00 2001
From: devartes <anacavalcante731@gmail.com>
Date: Fri, 7 Oct 2022 17:37:57 -0300
Subject: [PATCH] adicionando "cards" finais

---
 assets/img/coin-card.svg     |  6 ++++
 assets/img/money-card.svg    |  6 ++++
 assets/img/phone-payment.svg |  6 ++++
 assets/img/website-card.svg  |  7 ++++
 css/layout/main.css          | 67 ++++++++++++++++++++++++++++++++++++
 index.html                   | 65 ++++++++++++++++++++++------------
 6 files changed, 135 insertions(+), 22 deletions(-)
 create mode 100644 assets/img/coin-card.svg
 create mode 100644 assets/img/money-card.svg
 create mode 100644 assets/img/phone-payment.svg
 create mode 100644 assets/img/website-card.svg

diff --git a/assets/img/coin-card.svg b/assets/img/coin-card.svg
new file mode 100644
index 0000000..f2df69f
--- /dev/null
+++ b/assets/img/coin-card.svg
@@ -0,0 +1,6 @@
+<svg width="104" height="97" viewBox="0 0 104 97" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M72.8313 50.0006C83.4667 50.0006 92.0883 41.296 92.0883 30.5584C92.0883 19.8207 83.4667 11.1161 72.8313 11.1161C62.1959 11.1161 53.5742 19.8207 53.5742 30.5584C53.5742 41.296 62.1959 50.0006 72.8313 50.0006Z" fill="#00C8FF"/>
+<path d="M72.8313 61.0748C89.4979 61.0748 103.057 47.3852 103.057 30.5586C103.057 13.7317 89.4979 0.0421219 72.8313 0.0421219C56.1647 0.0421219 42.6055 13.7317 42.6055 30.5586C42.6055 47.3852 56.1647 61.0748 72.8313 61.0748ZM72.8313 4.14368C87.2576 4.14368 98.9946 15.9933 98.9946 30.5586C98.9946 45.1236 87.2578 56.9732 72.8313 56.9732C58.4049 56.9732 46.668 45.1236 46.668 30.5586C46.668 15.9933 58.4047 4.14368 72.8313 4.14368Z" fill="black"/>
+<path d="M69.42 35.6797C68.7161 34.7976 67.4377 34.6588 66.5638 35.3692C65.6902 36.0798 65.5527 37.3707 66.2563 38.2528C67.3761 39.6561 68.9814 40.4535 70.5804 40.8355C70.6655 41.889 71.5394 42.7171 72.6048 42.7171C73.6198 42.7171 74.4609 41.9655 74.6118 40.9834C77.4727 40.4678 79.4801 38.5448 79.8094 35.9268C80.1921 32.8857 78.2382 29.9693 75.0581 28.8343C74.9133 28.7827 74.7727 28.7322 74.636 28.6828V24.7318C74.8052 24.8407 74.9314 24.9596 75.0114 25.0744C75.6553 26.0016 76.9222 26.2262 77.8409 25.5752C78.7592 24.9247 78.9813 23.6457 78.3367 22.7185C77.598 21.6552 76.3077 20.753 74.6348 20.3814C74.5986 19.2808 73.7037 18.3998 72.6048 18.3998C71.4829 18.3998 70.5735 19.3179 70.5735 20.4505V20.5192C70.4488 20.5523 70.3233 20.5877 70.1969 20.6263C68.0645 21.275 66.4554 23.36 66.2837 25.6971C66.1131 28.0196 67.3306 30.0341 69.5404 31.0861C69.7813 31.2009 70.1333 31.3511 70.5733 31.528V36.5274C70.1075 36.3158 69.7029 36.0342 69.42 35.6797ZM75.7792 35.41C75.7036 36.0106 75.3008 36.4694 74.636 36.7413V33.1789C75.5283 33.8118 75.8676 34.7086 75.7792 35.41ZM70.3354 26.0004C70.3547 25.7358 70.4417 25.4737 70.5737 25.2449V26.8486C70.3899 26.608 70.3113 26.3267 70.3354 26.0004Z" fill="white"/>
+<path d="M103.992 69.7967C103.885 67.3073 102.741 65.1667 100.772 63.7695C97.5268 61.4667 93.1466 61.8666 90.3563 64.72C90.2669 64.8115 90.1861 64.9112 90.1152 65.018L85.659 71.721C84.4114 68.748 81.5128 66.6595 78.1452 66.6595L46.0856 66.6377H46.0842C45.5979 66.6377 45.1281 66.8137 44.7596 67.1338L36.728 74.1099H30.8669V72.3075C30.8669 71.1749 29.9573 70.2567 28.8356 70.2567H19.892V69.9762C19.892 68.8435 18.9824 67.9254 17.8608 67.9254H2.03125C0.909391 67.9254 0 68.8435 0 69.9762V94.0273C0 95.16 0.909391 96.0781 2.03125 96.0781H17.8608C18.9824 96.0781 19.892 95.16 19.892 94.0273V93.7468H28.8354C29.9571 93.7468 30.8667 92.8286 30.8667 91.696V89.8023H37.6017L43.6861 96.3142C44.0702 96.7251 44.6048 96.9577 45.1636 96.9577C45.1732 96.9577 45.1827 96.9577 45.1923 96.9575L87.1404 96.3634C87.7949 96.3541 88.4049 96.0271 88.7788 95.4848L102.107 76.1615C102.115 76.1494 102.124 76.1371 102.132 76.125C103.422 74.1655 104.083 71.9181 103.992 69.7967ZM15.8295 91.9766H4.0625V72.027H15.8295V91.9766ZM26.8042 89.6454H19.892V74.3583H26.8042V89.6454ZM98.7604 73.8364L86.0409 92.2772L46.0285 92.8438L39.9559 86.3445C39.572 85.9337 39.0376 85.701 38.4784 85.701H30.8669V78.2115H37.4816C37.9679 78.2115 38.4378 78.0355 38.8062 77.7154L46.8372 70.7399L78.1438 70.7612C80.4081 70.7612 82.2502 72.6553 82.2502 74.9836C82.2502 77.3116 80.4082 79.2055 78.1438 79.2055C78.1385 79.2055 78.1332 79.2057 78.128 79.2057H60.6105C60.0531 79.2057 59.5201 79.437 59.1364 79.8456L54.863 84.3962C54.0912 85.2182 54.1255 86.5161 54.9396 87.2954C55.3325 87.6714 55.835 87.858 56.3367 87.858C56.8748 87.858 57.4119 87.6435 57.8112 87.2181L61.4837 83.3073L81.7651 83.3081H81.7657C82.4426 83.3081 83.0751 82.9677 83.4523 82.4002L93.3713 67.4806C94.7653 66.1689 96.8681 66.0122 98.4362 67.1254C100.553 68.6272 100.202 71.6342 98.7604 73.8364Z" fill="black"/>
+</svg>
diff --git a/assets/img/money-card.svg b/assets/img/money-card.svg
new file mode 100644
index 0000000..9eec130
--- /dev/null
+++ b/assets/img/money-card.svg
@@ -0,0 +1,6 @@
+<svg width="104" height="72" viewBox="0 0 104 72" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M103.987 6.50758C103.985 3.10361 101.215 0.333186 97.8102 0.331764L15.7284 0.323639H15.7255C14.077 0.323639 12.5271 0.965514 11.3616 2.13105C10.1954 3.29719 9.55357 4.84784 9.55418 6.49742L9.5552 10.032L6.17418 10.0316H6.17134C4.52278 10.0316 2.97273 10.6735 1.8074 11.839C0.641262 13.0055 -0.000612756 14.5562 -3.38121e-06 16.2058L0.0134029 65.4924C0.0146216 68.8964 2.78504 71.6668 6.18982 71.6682L88.2716 71.6762H88.2745C89.923 71.6762 91.4729 71.0343 92.6384 69.8688C93.8045 68.7026 94.4464 67.152 94.4458 65.5024L94.4448 61.9678L97.8258 61.968H97.8287C99.4772 61.968 101.027 61.3261 102.193 60.1606C103.359 58.9945 104.001 57.4438 104 55.7942L103.987 6.50758ZM89.7656 66.9962C89.3673 67.3945 88.8377 67.6137 88.2743 67.6137C88.2737 67.6135 88.273 67.6135 88.2726 67.6137L6.19084 67.6057C5.02511 67.6051 4.07631 66.6565 4.0759 65.491L4.0625 16.2044C4.06229 15.6405 4.28167 15.1103 4.68 14.7118C5.07832 14.3135 5.60787 14.0943 6.17215 14.0943H6.17317L88.2548 14.1022C89.4205 14.1028 90.3693 15.0516 90.3697 16.2169L90.3831 65.5036C90.3833 66.0675 90.1641 66.5976 89.7656 66.9962ZM99.32 57.288C98.9217 57.6863 98.3921 57.9055 97.8278 57.9055H97.8268L94.4436 57.9053L94.4322 16.2157C94.431 12.8118 91.6604 10.0411 88.2558 10.0399L13.6177 10.0326L13.6167 6.4962C13.6165 5.93233 13.8359 5.40217 14.2342 5.00364C14.6325 4.60531 15.1621 4.38614 15.7263 4.38614H15.7272L97.8089 4.39406C98.9747 4.39467 99.9235 5.34326 99.9239 6.5088L99.9375 55.7954C99.9377 56.3593 99.7183 56.8895 99.32 57.288Z" fill="black"/>
+<path d="M78.2518 60.5467C78.2508 57.7487 80.5181 55.4814 83.3159 55.4826L83.3104 26.2304C80.5124 26.2294 78.2432 23.9603 78.2422 21.1623H16.1941C16.1951 23.9603 13.9278 26.2276 11.13 26.2264L11.1354 55.4786C13.9335 55.4796 16.2026 57.7487 16.2036 60.5467H78.2518Z" fill="#00C8FF"/>
+<path d="M72.2577 38.9496H65.6194C64.4975 38.9496 63.5881 39.8592 63.5881 40.9808C63.5881 42.1025 64.4975 43.0121 65.6194 43.0121H72.2577C73.3796 43.0121 74.289 42.1025 74.289 40.9808C74.289 39.859 73.3796 38.9496 72.2577 38.9496Z" fill="white"/>
+<path d="M29.1089 38.9496H22.4706C21.3487 38.9496 20.4393 39.8592 20.4393 40.9808C20.4393 42.1025 21.3487 43.0121 22.4706 43.0121H29.1089C30.2308 43.0121 31.1402 42.1025 31.1402 40.9808C31.1402 39.859 30.2308 38.9496 29.1089 38.9496Z" fill="white"/>
+</svg>
diff --git a/assets/img/phone-payment.svg b/assets/img/phone-payment.svg
new file mode 100644
index 0000000..be408ca
--- /dev/null
+++ b/assets/img/phone-payment.svg
@@ -0,0 +1,6 @@
+<svg width="87" height="105" viewBox="0 0 87 105" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M63.2769 70.4631C62.5896 70.4631 61.9093 70.4327 61.2373 70.3736V84.3177H4.69736V17.4957H61.2373V28.7839C61.9093 28.7248 62.5896 28.6944 63.2769 28.6944C63.9642 28.6944 64.6444 28.7248 65.3165 28.7839V10.063C65.3165 4.6532 60.8987 0.251953 55.4685 0.251953H10.4662C5.03594 0.251953 0.618164 4.6532 0.618164 10.063V94.85C0.618164 100.27 5.02757 104.679 10.4476 104.679H55.4871C60.9071 104.679 65.3165 100.27 65.3165 94.85V70.3736C64.6447 70.4329 63.9642 70.4631 63.2769 70.4631ZM4.69736 10.063C4.69736 6.90227 7.28521 4.33115 10.4662 4.33115H55.4685C58.6495 4.33115 61.2373 6.90227 61.2373 10.063V13.4165H4.69736V10.063ZM61.2373 94.85C61.2373 98.0208 58.6578 100.6 55.4871 100.6H10.4476C7.27705 100.6 4.69736 98.0208 4.69736 94.85V88.3969H61.2373V94.85Z" fill="black"/>
+<path d="M31.6077 96.5382H34.327C35.4535 96.5382 36.3666 95.6249 36.3666 94.4986C36.3666 93.3721 35.4535 92.459 34.327 92.459H31.6077C30.4812 92.459 29.5681 93.3721 29.5681 94.4986C29.5681 95.6249 30.4812 96.5382 31.6077 96.5382Z" fill="black"/>
+<path d="M63.2768 26.6548C50.6162 26.6548 40.353 36.9182 40.353 49.5788C40.353 54.605 41.9706 59.2531 44.7134 63.0314L40.353 71.8072L53.0236 70.0874C56.1089 71.6328 59.5913 72.5027 63.2768 72.5027C75.9374 72.5027 86.2009 62.2393 86.2009 49.5788C86.2009 36.9184 75.9374 26.6548 63.2768 26.6548Z" fill="#00C8FF"/>
+<path d="M65.4642 55.5124H65.3165V47.983H65.4642C66.5906 47.983 67.5038 47.0697 67.5038 45.9434C67.5038 44.8171 66.5906 43.9038 65.4642 43.9038H61.0898C59.9634 43.9038 59.0502 44.8171 59.0502 45.9434C59.0502 47.0697 59.9634 47.983 61.0898 47.983H61.2375V55.5124H61.0898C59.9634 55.5124 59.0502 56.4257 59.0502 57.552C59.0502 58.6782 59.9634 59.5916 61.0898 59.5916H65.4642C66.5906 59.5916 67.5038 58.6782 67.5038 57.552C67.5038 56.4257 66.5906 55.5124 65.4642 55.5124Z" fill="white"/>
+</svg>
diff --git a/assets/img/website-card.svg b/assets/img/website-card.svg
new file mode 100644
index 0000000..aec80a4
--- /dev/null
+++ b/assets/img/website-card.svg
@@ -0,0 +1,7 @@
+<svg width="104" height="86" viewBox="0 0 104 86" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M45.8327 53.512V34.6035C45.8327 33.4816 44.9233 32.5722 43.8015 32.5722H38.1581V31.5101C38.1581 27.7803 35.1077 24.7456 31.3585 24.7456C27.6092 24.7456 24.559 27.7801 24.559 31.5101V32.5722H18.95C17.8281 32.5722 16.9187 33.4816 16.9187 34.6035V53.512C16.9187 57.0242 19.7761 59.8816 23.2883 59.8816H39.4633C42.9754 59.8816 45.8327 57.0242 45.8327 53.512ZM28.6217 31.5103C28.6217 30.0204 29.8496 28.8083 31.3587 28.8083C32.8679 28.8083 34.0958 30.0204 34.0958 31.5103V32.5724H28.6217V31.5103ZM20.9812 53.512V36.6347H24.5592V38.67C24.5592 39.7917 25.4686 40.7013 26.5905 40.7013C27.7124 40.7013 28.6217 39.7917 28.6217 38.67V36.6347H34.0958V38.67C34.0958 39.7917 35.0052 40.7013 36.127 40.7013C37.2489 40.7013 38.1583 39.7917 38.1583 38.67V36.6347H41.7704V53.512C41.7704 54.7841 40.7355 55.8191 39.4635 55.8191H23.2883C22.0161 55.8191 20.9812 54.7841 20.9812 53.512Z" fill="black"/>
+<path d="M101.969 66.9619H100.063V8.3906C100.063 3.82678 96.3499 0.113861 91.7861 0.113861H12.2139C7.65009 0.113861 3.93717 3.82678 3.93717 8.3906V66.9619H2.03125C0.909391 66.9619 0 67.8715 0 68.9931V76.5912C0 81.7165 4.16955 85.8862 9.2948 85.8862H94.705C99.8302 85.8862 104 81.7167 104 76.5912V68.9931C104 67.8713 103.091 66.9619 101.969 66.9619ZM12.2139 4.17636H91.7861C94.1098 4.17636 96.0003 6.06684 96.0003 8.3906V14.0448H7.99967V8.3906C7.99967 6.06684 9.89016 4.17636 12.2139 4.17636ZM7.99967 18.1073H96.0003V66.9619H66.7028C65.5809 66.9619 64.6715 67.8715 64.6715 68.9931C64.6715 70.2905 63.6161 71.3459 62.3187 71.3459H41.6812C40.3839 71.3459 39.3285 70.2905 39.3285 68.9931C39.3285 67.8715 38.4191 66.9619 37.2972 66.9619H7.99967V18.1073ZM99.9375 76.5912C99.9375 79.4764 97.5902 81.8237 94.7052 81.8237H9.2948C6.40961 81.8237 4.0625 79.4764 4.0625 76.5912V71.0244H35.5954C36.4471 73.5691 38.8533 75.4084 41.681 75.4084H62.3187C65.1465 75.4084 67.5529 73.5691 68.4044 71.0244H99.9375V76.5912Z" fill="black"/>
+<path d="M50.859 10.902H53.1409C54.2628 10.902 55.1722 9.99244 55.1722 8.87079C55.1722 7.74913 54.2628 6.83954 53.1409 6.83954H50.859C49.7371 6.83954 48.8278 7.74913 48.8278 8.87079C48.8278 9.99244 49.7371 10.902 50.859 10.902Z" fill="black"/>
+<path d="M55.3624 46.2268H87.9032V56.4397H55.3624V46.2268Z" fill="#00C8FF"/>
+<path d="M55.3624 28.4569H87.9032V38.6698H55.3624V28.4569Z" fill="#00C8FF"/>
+</svg>
diff --git a/css/layout/main.css b/css/layout/main.css
index de9e04b..d0e7f88 100644
--- a/css/layout/main.css
+++ b/css/layout/main.css
@@ -67,6 +67,47 @@
 
 }
 
+.grid-container {
+    width: 100%;
+    height: 750px;
+    background: linear-gradient(180deg, #00C8FF 0%, #15ACD6 100%);
+    top: 142px;
+    position: relative;
+}
+
+.grid-container-content {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 20px;
+    max-width: 884px;
+    justify-content: space-around;
+    margin: auto;
+    top: -60px;
+    position: relative;
+}
+
+.grid-one, .grid-two, .grid-three, .grid-four {
+    width: 432px;
+    height: 332px;
+    background: #FFFFFF;
+    box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.15);
+}
+
+.grid-one, .grid-two, .grid-three, .grid-four {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    margin: auto;
+}
+
+.grid-one p, .grid-two p, .grid-three p, .grid-four p {
+    width: 367px;
+    text-align: center;
+    margin-top: 14px;
+    margin-bottom: 66px;
+}
+
 @media screen and (max-width: 415px) {
     .main_banner_desktop {
         display: none;
@@ -112,6 +153,32 @@
     .banner-desktop {
         display: none;
     }
+
+    .grid-container-content {
+        grid-template-columns: repeat(1, 1fr);
+        gap: 20px;
+    }
+
+    .grid-one, .grid-two, .grid-three, .grid-four {
+        width: 368px;
+        height: 332px;
+    }
+
+
+    .grid-one p, .grid-two p, .grid-three p, .grid-four p {
+        padding: 0 33px;
+        font-weight: 400;
+        font-size: 14px;
+        line-height: 24px;
+        text-align: center;     
+        color: #000000;
+    }
+
+    .grid-container {
+        height: 1394px;
+    }
+
+
 }
 
 @media screen and (min-width: 415px) {
diff --git a/index.html b/index.html
index 8d59ae6..3fb9de1 100644
--- a/index.html
+++ b/index.html
@@ -30,35 +30,56 @@
             <img src="./assets/img/Rectangle-9-desktop.webp" alt="Imagem Notebook Desktop" class="main_banner_desktop">
             <img src="./assets/img/Rectangle-9-mobile.webp" alt="Imagem Notebook Mobile" class="main_banner_mobile">
         </section>
-    </main>
-    <section class="first-content-information">
+        <section class="first-content-information">
         <div class="first-content-text">
             <h2>Lorem ipsum</h2>
             <h1>dolor sit amet</h1>
             <p>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/img/fxemoji_threenetworkedcomputers.png" alt="imagem ilustrativa de 3 computadores" class="three-computers">
-    </section>
-    <section class="first-content-card">
-        <div class="content-card-container">
-            <div class="first-card">
-                <img src="./assets/img/Marketplace.svg" alt="ícone mercado">
-                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </p>
+        </section>
+        <section class="first-content-card">
+            <div class="content-card-container">
+                <div class="first-card">
+                    <img src="./assets/img/Marketplace.svg" alt="ícone mercado">
+                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </p>
+                </div>
+                <div class="second-card">
+                    <img src="./assets/img/Payment.svg" alt="ícone de bolsa com um escudo e ícone de confirmação">
+                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </p>
+                </div>
+                <div class="three-card">
+                    <img src="./assets/img/coin 1.svg" alt="ícone de uma mão aberta com um símbolo de dólar em cima">
+                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </p>
+                </div>
             </div>
-            <div class="second-card">
-                <img src="./assets/img/Payment.svg" alt="ícone de bolsa com um escudo e ícone de confirmação">
-                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </p>
+            
+        </section>
+        <section class="banner-container">
+            <img src="./assets/img/Rectangle 13 desktop.png" alt="banner desktop" class="banner-desktop">
+            <img src="./assets/img/Rectangle 13 mobile.png" alt="banner mobile" class="banner-mobile">
+        </section>
+        <section class="grid-container">
+            <div class="grid-container-content">
+                <div class="grid-one">
+                    <img src="./assets/img/money-card.svg">
+                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </p>
+                </div>
+                <div class="grid-two">
+                    <img src="./assets/img/website-card.svg">
+                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </p>
+                </div>
+                <div class="grid-three">
+                    <img src="./assets/img/coin-card.svg">
+                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </p>
+                </div>
+                <div class="grid-four">
+                    <img src="./assets/img/phone-payment.svg">
+                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </p>
+                </div>   
             </div>
-            <div class="three-card">
-                <img src="./assets/img/coin 1.svg" alt="ícone de uma mão aberta com um símbolo de dólar em cima">
-                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </p>
-            </div>
-        </div>
-        
-    </section>
-    <section class="banner-container">
-        <img src="./assets/img/Rectangle 13 desktop.png" alt="banner desktop" class="banner-desktop">
-        <img src="./assets/img/Rectangle 13 mobile.png" alt="banner mobile" class="banner-mobile">
-    </section>
+        </section>
+    </main>
+    
 </body>
 </html>
\ No newline at end of file