Merge pull request 'adicionando os três primeiros "cards"' (#1) from improvement into main

Reviewed-on: #1

assets/img/Marketplace.svg

@@ -0,0 +1,6 @@
+<svg width="104" height="82" viewBox="0 0 104 82" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M73.8313 43.6077H96.5312V64.8331H73.8313V43.6077Z" fill="#00C8FF"/>
+<path d="M7.79743 43.6077H30.4974V64.8331H7.79743V43.6077Z" fill="#00C8FF"/>
+<path d="M41.5493 43.6077H62.7793V78.3419H41.5493V43.6077Z" fill="#00C8FF"/>
+<path d="M95.8333 0.349976H8.49535C4.30542 0.349976 0.896729 3.75887 0.896729 7.9486V22.5697C0.896729 26.2557 2.85952 29.4918 5.79479 31.288V79.0041C5.79479 80.1102 6.69137 81.0067 7.79743 81.0067H96.5312C97.6373 81.0067 98.5339 80.1102 98.5339 79.0041V31.288C101.469 29.4918 103.432 26.2557 103.432 22.5697V7.9486C103.432 3.75887 100.023 0.349976 95.8333 0.349976ZM83.005 22.5697C83.005 25.9928 80.2201 28.7777 76.7968 28.7777C73.3735 28.7777 70.5886 25.9928 70.5886 22.5697V4.35526H83.005V22.5697ZM66.5833 22.5697C66.5833 25.9928 63.7985 28.7777 60.3752 28.7777C56.9518 28.7777 54.167 25.9928 54.167 22.5697V4.35526H66.5833V22.5697ZM50.1617 22.5697C50.1617 25.9928 47.3768 28.7777 43.9535 28.7777C40.5302 28.7777 37.7453 25.9928 37.7453 22.5697V4.35526H50.1617V22.5697ZM33.74 22.5697C33.74 25.9928 30.9552 28.7777 27.5319 28.7777C24.1085 28.7777 21.3237 25.9928 21.3237 22.5697V4.35526H33.74V22.5697ZM4.90201 7.9486C4.90201 5.96718 6.51414 4.35526 8.49535 4.35526H17.3184V22.5697C17.3184 25.9928 14.5335 28.7777 11.1102 28.7777C7.68688 28.7777 4.90201 25.9928 4.90201 22.5697V7.9486ZM94.5286 77.0015H9.80007V32.6994C10.229 32.7545 10.6664 32.7831 11.1102 32.7831C14.4714 32.7831 17.4588 31.151 19.321 28.6377C21.1833 31.151 24.1706 32.7831 27.5319 32.7831C30.8931 32.7831 33.8804 31.151 35.7427 28.6377C37.6049 31.151 40.5923 32.7831 43.9535 32.7831C47.3147 32.7831 50.3021 31.151 52.1643 28.6377C54.0266 31.151 57.0139 32.7831 60.3752 32.7831C63.7364 32.7831 66.7237 31.151 68.586 28.6377C70.4482 31.151 73.4356 32.7831 76.7968 32.7831C80.1581 32.7831 83.1454 31.151 85.0076 28.6377C86.8699 31.151 89.8572 32.7831 93.2185 32.7831C93.6623 32.7831 94.0996 32.7547 94.5286 32.6994V77.0015ZM99.4267 22.5697C99.4267 25.9928 96.6418 28.7777 93.2185 28.7777C89.7952 28.7777 87.0103 25.9928 87.0103 22.5697V4.35526H95.8333C97.8147 4.35526 99.4267 5.96718 99.4267 7.9486V22.5697Z" fill="black"/>
+</svg>

assets/img/Payment.svg

@@ -0,0 +1,5 @@
+<svg width="100" height="103" viewBox="0 0 100 103" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M62.7912 95.3056H17.2303V26.7631H27.9V37.1243C27.9 38.2353 28.7919 39.136 29.8922 39.136C30.9923 39.136 31.8844 38.2353 31.8844 37.1243V26.7631H59.2063V37.1243C59.2063 38.2353 60.0984 39.136 61.1985 39.136C62.2985 39.136 63.1906 38.2353 63.1906 37.1243V26.7631H73.5273V48.0779H77.5117V24.7514C77.5117 23.6403 76.6196 22.7397 75.5195 22.7397H63.1906V17.7287C63.1906 7.95313 55.2751 0 45.5454 0C43.3154 0 41.1806 0.417834 39.2145 1.17967C37.2484 0.417834 35.1135 0 32.8835 0C23.1537 0 15.2381 7.95313 15.2381 17.7287V22.7395H2.90924C1.80915 22.7395 0.917053 23.6401 0.917053 24.7512V89.7613C0.917053 95.0368 5.17416 99.3288 10.4068 99.3288H68.8044C66.8365 98.2564 64.7517 96.925 62.7912 95.3056ZM45.5454 4.02344C53.0781 4.02344 59.2063 10.1717 59.2063 17.7287V22.7395H50.5287V17.7287C50.5287 12.2528 48.045 7.34901 44.1501 4.09425C44.6089 4.04758 45.0745 4.02344 45.5454 4.02344ZM39.2145 5.58614C43.5682 7.8801 46.5445 12.4624 46.5445 17.7289V22.7397H31.8844V17.7287C31.8844 12.4622 34.8607 7.8801 39.2145 5.58614ZM19.2225 17.7287C19.2225 10.1717 25.3508 4.02344 32.8835 4.02344C33.3544 4.02344 33.8198 4.04738 34.2786 4.09445C30.3837 7.34901 27.8998 12.253 27.8998 17.7289V22.7397H19.2223V17.7287H19.2225ZM13.2459 95.3056H10.4068C7.37114 95.3056 4.90143 92.8185 4.90143 89.7615V26.7631H13.2459V95.3056Z" fill="black"/>
+<path d="M92.7992 54.7374C86.7766 54.7374 81.582 51.191 79.165 46.0659H72.082C69.6651 51.1908 64.4705 54.7374 58.4479 54.7374C56.2051 54.7374 54.0772 54.2452 52.1641 53.3634V78.4196C52.1641 96.7462 75.6235 103 75.6235 103C75.6235 103 99.0829 96.7462 99.0829 78.4196V53.3634C97.1698 54.2452 95.0418 54.7374 92.7992 54.7374Z" fill="#00C8FF"/>
+<path d="M74.8532 81.6053C74.328 81.6053 73.8228 81.3957 73.4487 81.0201L69.1193 76.673C68.3389 75.8894 68.3353 74.6158 69.1113 73.828C69.8868 73.04 71.1483 73.0364 71.9286 73.82L74.7249 76.6275L81.99 67.9301C82.6996 67.0807 83.9563 66.9733 84.7972 67.6895C85.6383 68.4058 85.7451 69.675 85.0354 70.5244L76.3762 80.891C76.0172 81.3207 75.4968 81.579 74.9406 81.6035C74.9113 81.6047 74.8825 81.6053 74.8532 81.6053Z" fill="white"/>
+</svg>

assets/img/coin 1.svg

@@ -0,0 +1,6 @@
+<svg width="102" height="103" viewBox="0 0 102 103" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M71.4307 52.9719C81.8615 52.9719 90.3174 44.4332 90.3174 33.9C90.3174 23.3669 81.8615 14.8281 71.4307 14.8281C60.9998 14.8281 52.5439 23.3669 52.5439 33.9C52.5439 44.4332 60.9998 52.9719 71.4307 52.9719Z" fill="#00C8FF"/>
+<path d="M71.4307 63.8352C87.7768 63.8352 101.075 50.4064 101.075 33.9003C101.075 17.3939 87.7768 3.96509 71.4307 3.96509C55.0846 3.96509 41.7861 17.3939 41.7861 33.9003C41.7861 50.4064 55.0846 63.8352 71.4307 63.8352ZM71.4307 7.98853C85.5796 7.98853 97.0909 19.6124 97.0909 33.9003C97.0909 48.1879 85.5798 59.8118 71.4307 59.8118C57.2818 59.8118 45.7705 48.1879 45.7705 33.9003C45.7705 19.6124 57.2816 7.98853 71.4307 7.98853Z" fill="black"/>
+<path d="M68.085 38.9238C67.3947 38.0585 66.1408 37.9223 65.2837 38.6192C64.4269 39.3163 64.292 40.5826 64.9821 41.4479C66.0804 42.8245 67.6548 43.6067 69.2231 43.9814C69.3066 45.0149 70.1636 45.8272 71.2085 45.8272C72.204 45.8272 73.029 45.0899 73.177 44.1265C75.9828 43.6207 77.9517 41.7343 78.2746 39.1662C78.6499 36.183 76.7336 33.3221 73.6147 32.2089C73.4726 32.1582 73.3348 32.1087 73.2007 32.0602V28.1844C73.3666 28.2912 73.4904 28.4079 73.5689 28.5206C74.2004 29.4301 75.4429 29.6503 76.344 29.0118C77.2446 28.3737 77.4624 27.119 76.8303 26.2095C76.1057 25.1664 74.8403 24.2815 73.1995 23.9169C73.164 22.8373 72.2863 21.973 71.2085 21.973C70.1082 21.973 69.2163 22.8737 69.2163 23.9847V24.0521C69.094 24.0845 68.9709 24.1193 68.847 24.1571C66.7556 24.7935 65.1774 26.8388 65.009 29.1313C64.8417 31.4096 66.0358 33.3857 68.2031 34.4177C68.4394 34.5304 68.7846 34.6776 69.2161 34.8512V39.7554C68.7593 39.5478 68.3625 39.2716 68.085 38.9238ZM74.3219 38.6592C74.2478 39.2485 73.8527 39.6985 73.2007 39.9652V36.4707C74.0759 37.0915 74.4086 37.9712 74.3219 38.6592ZM68.9828 29.4289C69.0018 29.1693 69.087 28.9122 69.2165 28.6877V30.2609C69.0362 30.0249 68.9591 29.7489 68.9828 29.4289Z" fill="white"/>
+<path d="M101.992 72.3911C101.887 69.9491 100.766 67.8492 98.8342 66.4786C95.6513 64.2197 91.3553 64.612 88.6187 67.4111C88.531 67.5008 88.4517 67.5986 88.3822 67.7034L84.0117 74.2787C82.7881 71.3623 79.9453 69.3136 76.6424 69.3136L45.1993 69.2922H45.198C44.721 69.2922 44.2602 69.4648 43.8988 69.7789L36.0217 76.6221H30.2733V74.854C30.2733 73.743 29.3812 72.8423 28.2811 72.8423H19.5095V72.5671C19.5095 71.456 18.6174 70.5554 17.5173 70.5554H1.99219C0.891902 70.5554 0 71.456 0 72.5671V96.1601C0 97.2712 0.891902 98.1719 1.99219 98.1719H17.5173C18.6174 98.1719 19.5095 97.2712 19.5095 96.1601V95.8849H28.2809C29.381 95.8849 30.2731 94.9843 30.2731 93.8732V92.0156H36.8786L42.846 98.4034C43.2227 98.8066 43.747 99.0347 44.2951 99.0347C44.3045 99.0347 44.3138 99.0347 44.3232 99.0345L85.4646 98.4517C86.1065 98.4426 86.7048 98.1218 87.0715 97.5899L100.143 78.6347C100.152 78.6228 100.16 78.6107 100.168 78.5988C101.433 76.6766 102.081 74.472 101.992 72.3911ZM15.5251 94.1484H3.98438V74.5788H15.5251V94.1484ZM26.2887 91.8617H19.5095V76.8657H26.2887V91.8617ZM96.8612 76.3538L84.3863 94.4433L45.1434 94.9992L39.1875 88.6236C38.811 88.2207 38.2869 87.9924 37.7384 87.9924H30.2733V80.6456H36.7608C37.2378 80.6456 37.6986 80.473 38.0599 80.1589L45.9365 73.3163L76.6411 73.3372C78.8617 73.3372 80.6685 75.1952 80.6685 77.4791C80.6685 79.7628 78.8619 81.6206 76.6411 81.6206C76.6359 81.6206 76.6307 81.6208 76.6255 81.6208H59.4449C58.8982 81.6208 58.3755 81.8478 57.9992 82.2485L53.808 86.7125C53.051 87.5188 53.0846 88.792 53.8831 89.5565C54.2684 89.9252 54.7612 90.1083 55.2533 90.1083C55.7811 90.1083 56.3078 89.8979 56.6995 89.4806L60.3013 85.6443L80.1927 85.6451H80.1933C80.8571 85.6451 81.4775 85.3111 81.8474 84.7545L91.5757 70.119C92.9429 68.8324 95.0052 68.6787 96.5432 69.7706C98.6193 71.2438 98.275 74.1936 96.8612 76.3538Z" fill="black"/>
+</svg>

css/layout/main.css

@@ -11,6 +11,7 @@
     align-items: center;
     position: relative;
     margin-top: 80px;
+    margin-bottom: 95px;
 }
 
 .three-computers {
@@ -24,6 +25,41 @@
     max-width: 766px;
 }
 
+.content-card-container {
+    max-width: 1092px;
+    height: 435px;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    position: relative;
+    margin: auto;
+}
+
+.first-content-card {
+    width: 100%;
+    height: 435px;
+    background: #F0F0F0;
+
+}
+
+.first-card, .second-card, .three-card {
+    width: 350.33px;
+    height: 287.95px;
+    background: #FFFFFF;
+    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    margin: auto;
+}
+
+.first-card p, .second-card p, .three-card p {
+    width: 299px;
+    text-align: center;
+    margin: 27px 0;
+}
+
 @media screen and (max-width: 415px) {
     .main_banner_desktop {
         display: none;
@@ -34,17 +70,36 @@
         margin-top: 84px;
         padding-left: 31px;
         padding-right: 29px;
+        margin-bottom: 158px;
     }
 
     .three-computers {
         width: 239px;
         height: 239px;
-        margin-top: 67px;
+        margin-top: 137px;
         margin-left: 0;
+        position: relative;
     }
 
     .first-content-text {
         max-width: 357px;
+
+    }
+
+    .first-content-card {
+        width: auto;
+        height: 966px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+
+    .content-card-container {
+        width: auto;
+        height: 894px;
+        flex-direction: column;
+        justify-content: space-around;
+
     }
 }
 

index.html

@@ -39,5 +39,22 @@
         </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>
+            </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>
+        
+    </section>
 </body>
 </html>