tiago.trevisani/challenge-landing-page-tiago.trevisani
0
0
Fork 0
forked from M3-Academy/challenge-landing-page
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(cards-segundo):criado segundo cards para desktop

Browse Source
This commit is contained in:
Tiago Trevisani 2022-10-13 19:02:24 -04:00
parent 16dcdbec6e
commit 1854cf9e05
8 changed files with 98 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
.DS_Store vendored
View File

Binary file not shown.

BIN
assets/.DS_Store vendored
View File

Binary file not shown.

14
assets/imagens/card-dinheiro.svg Normal file
View File

@ -0,0 +1,14 @@
<svg width="104" height="104" viewBox="0 0 104 104" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_59_990)">
<path d="M103.987 22.5075C103.985 19.1036 101.215 16.3332 97.8102 16.3317L15.7284 16.3236H15.7255C14.077 16.3236 12.5271 16.9655 11.3616 18.131C10.1955 19.2972 9.55358 20.8478 9.55419 22.4974L9.5552 26.032L6.17419 26.0316H6.17134C4.52278 26.0316 2.97273 26.6734 1.80741 27.839C0.641266 29.0055 -0.000608942 30.5562 4.33492e-07 32.2057L0.0134067 81.4924C0.0146254 84.8964 2.78505 87.6668 6.18983 87.6682L88.2716 87.6761H88.2745C89.923 87.6761 91.4729 87.0343 92.6384 85.8687C93.8046 84.7026 94.4464 83.1519 94.4458 81.5024L94.4448 77.9678L97.8258 77.968H97.8287C99.4772 77.968 101.027 77.3261 102.193 76.1606C103.359 74.9944 104.001 73.4438 104 71.7942L103.987 22.5075ZM89.7656 82.9961C89.3673 83.3945 88.8377 83.6136 88.2743 83.6136C88.2737 83.6134 88.273 83.6134 88.2726 83.6136L6.19084 83.6057C5.02511 83.6051 4.07631 82.6565 4.07591 81.491L4.0625 32.2043C4.0623 31.6405 4.28167 31.1103 4.68 30.7118C5.07833 30.3134 5.60788 30.0943 6.17216 30.0943H6.17317L88.2548 30.1022C89.4205 30.1028 90.3693 31.0516 90.3697 32.2169L90.3831 81.5036C90.3833 82.0674 90.1641 82.5976 89.7656 82.9961ZM99.32 73.288C98.9217 73.6863 98.3921 73.9055 97.8279 73.9055H97.8268L94.4436 73.9053L94.4322 32.2157C94.431 28.8117 91.6604 26.0411 88.2558 26.0399L13.6177 26.0326L13.6167 22.4962C13.6165 21.9323 13.8359 21.4021 14.2342 21.0036C14.6325 20.6053 15.1621 20.3861 15.7263 20.3861H15.7272L97.809 20.394C98.9747 20.3946 99.9235 21.3432 99.9239 22.5088L99.9375 71.7954C99.9377 72.3593 99.7183 72.8895 99.32 73.288Z" fill="black"/>
<path d="M78.2518 76.5467C78.2508 73.7487 80.518 71.4814 83.3159 71.4826L83.3104 42.2304C80.5124 42.2294 78.2432 39.9603 78.2422 37.1622H16.1941C16.1951 39.9603 13.9278 42.2276 11.1299 42.2263L11.1354 71.4785C13.9335 71.4796 16.2026 73.7487 16.2036 76.5467H78.2518Z" fill="#0336DB"/>
<path d="M72.2577 54.9495H65.6194C64.4975 54.9495 63.5881 55.8591 63.5881 56.9808C63.5881 58.1024 64.4975 59.012 65.6194 59.012H72.2577C73.3796 59.012 74.289 58.1024 74.289 56.9808C74.289 55.8589 73.3796 54.9495 72.2577 54.9495Z" fill="white"/>
<path d="M29.1089 54.9495H22.4706C21.3487 54.9495 20.4393 55.8591 20.4393 56.9808C20.4393 58.1024 21.3487 59.012 22.4706 59.012H29.1089C30.2308 59.012 31.1401 58.1024 31.1401 56.9808C31.1401 55.8589 30.2308 54.9495 29.1089 54.9495Z" fill="white"/>
<path d="M51.7563 60.5843C52.5408 60.5843 53.1161 60.7407 53.4821 61.0535C53.8482 61.3664 54.0313 61.8357 54.0313 62.4614C54.0313 63.7475 53.2729 64.3906 51.7563 64.3906H42.6828C41.1662 64.3906 40.4079 63.7475 40.4079 62.4614C40.4079 61.8357 40.5909 61.3664 40.957 61.0535C41.3231 60.7407 41.8983 60.5843 42.6828 60.5843H44.8008V51.1726L42.7089 52.3979C42.4126 52.5717 42.1075 52.6587 41.7937 52.6587C41.3056 52.6587 40.8872 52.4501 40.5386 52.0329C40.1899 51.5984 40.0156 51.1205 40.0156 50.599C40.0156 49.8864 40.3207 49.3476 40.9308 48.9826L45.1146 46.558C45.8816 46.1235 46.6051 45.9062 47.2849 45.9062C47.9822 45.9062 48.5401 46.1148 48.9584 46.532C49.3942 46.9491 49.6121 47.514 49.6121 48.2266V60.5843H51.7563Z" fill="white"/>
</g>
<defs>
<clipPath id="clip0_59_990">
<rect width="104" height="104" fill="white"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.2 KiB

6
assets/imagens/card-fone.svg Normal file
View File

@ -0,0 +1,6 @@
<svg width="86" height="104" viewBox="0 0 86 104" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M62.8503 69.9238C62.1676 69.9238 61.492 69.8935 60.8245 69.8346V83.7216H4.66959V17.1732H60.8245V28.4152C61.492 28.3563 62.1676 28.326 62.8503 28.326C63.5329 28.326 64.2085 28.3563 64.876 28.4152V9.77092C64.876 4.38323 60.4883 0 55.095 0H10.3991C5.00586 0 0.618164 4.38323 0.618164 9.77092V94.2108C0.618164 99.6086 4.99755 104 10.3807 104H55.1135C60.4966 104 64.876 99.6086 64.876 94.2108V69.8346C64.2087 69.8937 63.5329 69.9238 62.8503 69.9238ZM4.66959 9.77092C4.66959 6.62309 7.23981 4.0625 10.3991 4.0625H55.095C58.2543 4.0625 60.8245 6.62309 60.8245 9.77092V13.1107H4.66959V9.77092ZM60.8245 94.2108C60.8245 97.3686 58.2626 99.9375 55.1135 99.9375H10.3807C7.23171 99.9375 4.66959 97.3686 4.66959 94.2108V87.7841H60.8245V94.2108Z" fill="black"/>
<path d="M31.3966 95.8921H34.0975C35.2163 95.8921 36.1232 94.9825 36.1232 93.8608C36.1232 92.739 35.2163 91.8296 34.0975 91.8296H31.3966C30.2778 91.8296 29.3709 92.739 29.3709 93.8608C29.3709 94.9825 30.2778 95.8921 31.3966 95.8921Z" fill="black"/>
<path d="M62.8502 26.2947C50.2758 26.2947 40.0824 36.5162 40.0824 49.125C40.0824 54.1306 41.689 58.7596 44.4132 62.5225L40.0824 71.2623L52.6667 69.5496C55.731 71.0887 59.1897 71.955 62.8502 71.955C75.4246 71.955 85.6182 61.7335 85.6182 49.125C85.6182 36.5164 75.4246 26.2947 62.8502 26.2947Z" fill="#0336DB"/>
<path d="M65.0226 55.0342H64.8759V47.5356H65.0226C66.1414 47.5356 67.0483 46.6261 67.0483 45.5044C67.0483 44.3827 66.1414 43.4731 65.0226 43.4731H60.6781C59.5593 43.4731 58.6523 44.3827 58.6523 45.5044C58.6523 46.6261 59.5593 47.5356 60.6781 47.5356H60.8247V55.0342H60.6781C59.5593 55.0342 58.6523 55.9438 58.6523 57.0655C58.6523 58.1871 59.5593 59.0967 60.6781 59.0967H65.0226C66.1414 59.0967 67.0483 58.1871 67.0483 57.0655C67.0483 55.9438 66.1414 55.0342 65.0226 55.0342Z" fill="white"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

6
assets/imagens/card-mao.svg Normal file
View File

@ -0,0 +1,6 @@
<svg width="104" height="105" viewBox="0 0 104 105" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M72.8313 54.9584C83.4667 54.9584 92.0883 46.2539 92.0883 35.5162C92.0883 24.7786 83.4667 16.074 72.8313 16.074C62.1959 16.074 53.5742 24.7786 53.5742 35.5162C53.5742 46.2539 62.1959 54.9584 72.8313 54.9584Z" fill="#0336DB"/>
<path d="M72.8313 66.0327C89.4979 66.0327 103.057 52.3431 103.057 35.5164C103.057 18.6896 89.4979 5 72.8313 5C56.1647 5 42.6055 18.6896 42.6055 35.5164C42.6055 52.3431 56.1647 66.0327 72.8313 66.0327ZM72.8313 9.10156C87.2576 9.10156 98.9946 20.9512 98.9946 35.5164C98.9946 50.0815 87.2578 61.9311 72.8313 61.9311C58.4049 61.9311 46.668 50.0815 46.668 35.5164C46.668 20.9512 58.4047 9.10156 72.8313 9.10156Z" fill="black"/>
<path d="M69.42 40.6376C68.7161 39.7555 67.4377 39.6167 66.5638 40.3271C65.6902 41.0377 65.5527 42.3286 66.2563 43.2107C67.3761 44.614 68.9814 45.4114 70.5804 45.7934C70.6655 46.8469 71.5394 47.675 72.6048 47.675C73.6198 47.675 74.4609 46.9234 74.6118 45.9413C77.4727 45.4257 79.4801 43.5027 79.8094 40.8847C80.1921 37.8436 78.2382 34.9272 75.0581 33.7922C74.9133 33.7406 74.7727 33.6901 74.636 33.6407V29.6897C74.8052 29.7986 74.9314 29.9175 75.0114 30.0323C75.6553 30.9595 76.9222 31.1841 77.8409 30.5331C78.7593 29.8826 78.9813 28.6036 78.3367 27.6764C77.598 26.6131 76.3077 25.7109 74.6348 25.3393C74.5986 24.2387 73.7037 23.3577 72.6048 23.3577C71.4829 23.3577 70.5735 24.2758 70.5735 25.4084V25.4771C70.4488 25.5102 70.3233 25.5456 70.1969 25.5842C68.0645 26.2329 66.4554 28.3179 66.2837 30.655C66.1131 32.9775 67.3306 34.992 69.5404 36.044C69.7813 36.1589 70.1333 36.309 70.5733 36.4859V41.4853C70.1075 41.2737 69.7029 40.9921 69.42 40.6376ZM75.7792 40.3679C75.7036 40.9685 75.3008 41.4273 74.636 41.6992V38.1368C75.5283 38.7697 75.8676 39.6665 75.7792 40.3679ZM70.3355 30.9583C70.3548 30.6937 70.4417 30.4316 70.5737 30.2028V31.8065C70.3899 31.5659 70.3113 31.2846 70.3355 30.9583Z" fill="white"/>
<path d="M103.992 74.7546C103.885 72.2652 102.741 70.1246 100.772 68.7274C97.5268 66.4246 93.1466 66.8245 90.3563 69.6779C90.2669 69.7694 90.1861 69.8691 90.1152 69.9759L85.659 76.6789C84.4114 73.7059 81.5128 71.6173 78.1452 71.6173L46.0856 71.5956H46.0842C45.5979 71.5956 45.1281 71.7716 44.7596 72.0917L36.728 79.0678H30.8669V77.2654C30.8669 76.1328 29.9573 75.2146 28.8356 75.2146H19.892V74.9341C19.892 73.8014 18.9824 72.8833 17.8608 72.8833H2.03125C0.909391 72.8833 0 73.8014 0 74.9341V98.9852C0 100.118 0.909391 101.036 2.03125 101.036H17.8608C18.9824 101.036 19.892 100.118 19.892 98.9852V98.7047H28.8354C29.9571 98.7047 30.8667 97.7865 30.8667 96.6539V94.7602H37.6017L43.6861 101.272C44.0702 101.683 44.6048 101.916 45.1636 101.916C45.1732 101.916 45.1827 101.916 45.1923 101.915L87.1404 101.321C87.7949 101.312 88.4049 100.985 88.7788 100.443L102.107 81.1194C102.115 81.1073 102.124 81.095 102.132 81.0829C103.422 79.1234 104.083 76.876 103.992 74.7546ZM15.8295 96.9344H4.0625V76.9849H15.8295V96.9344ZM26.8042 94.6033H19.892V79.3162H26.8042V94.6033ZM98.7604 78.7943L86.0409 97.2351L46.0285 97.8017L39.9559 91.3024C39.572 90.8916 39.0376 90.6588 38.4784 90.6588H30.8669V83.1694H37.4816C37.9679 83.1694 38.4378 82.9934 38.8062 82.6733L46.8372 75.6978L78.1438 75.7191C80.4081 75.7191 82.2502 77.6132 82.2502 79.9415C82.2502 82.2695 80.4082 84.1634 78.1438 84.1634C78.1385 84.1634 78.1332 84.1636 78.128 84.1636H60.6105C60.0531 84.1636 59.5201 84.3949 59.1364 84.8035L54.863 89.3541C54.0912 90.1761 54.1255 91.474 54.9396 92.2533C55.3325 92.6292 55.835 92.8159 56.3367 92.8159C56.8748 92.8159 57.4119 92.6014 57.8112 92.176L61.4837 88.2652L81.7651 88.266H81.7657C82.4426 88.266 83.0751 87.9256 83.4523 87.3581L93.3713 72.4385C94.7653 71.1268 96.8681 70.9701 98.4362 72.0833C100.553 73.5851 100.202 76.5921 98.7604 78.7943Z" fill="black"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.7 KiB

14
assets/imagens/card-pasta.svg Normal file
View File

@ -0,0 +1,14 @@
<svg width="104" height="104" viewBox="0 0 104 104" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_59_1008)">
<path d="M45.8327 62.512V43.6035C45.8327 42.4816 44.9233 41.5722 43.8015 41.5722H38.1581V40.5101C38.1581 36.7803 35.1077 33.7456 31.3585 33.7456C27.6092 33.7456 24.559 36.7801 24.559 40.5101V41.5722H18.95C17.8281 41.5722 16.9187 42.4816 16.9187 43.6035V62.512C16.9187 66.0242 19.7761 68.8816 23.2883 68.8816H39.4633C42.9754 68.8816 45.8327 66.0242 45.8327 62.512V62.512ZM28.6217 40.5103C28.6217 39.0204 29.8496 37.8083 31.3587 37.8083C32.8679 37.8083 34.0958 39.0204 34.0958 40.5103V41.5724H28.6217V40.5103ZM20.9812 62.512V45.6347H24.5592V47.67C24.5592 48.7917 25.4686 49.7013 26.5905 49.7013C27.7124 49.7013 28.6217 48.7917 28.6217 47.67V45.6347H34.0958V47.67C34.0958 48.7917 35.0052 49.7013 36.127 49.7013C37.2489 49.7013 38.1583 48.7917 38.1583 47.67V45.6347H41.7704V62.512C41.7704 63.7841 40.7355 64.8191 39.4635 64.8191H23.2883C22.0161 64.8191 20.9812 63.7841 20.9812 62.512Z" fill="black"/>
<path d="M101.969 75.9619H100.063V17.3906C100.063 12.8268 96.3499 9.11383 91.7861 9.11383H12.2139C7.65009 9.11383 3.93717 12.8268 3.93717 17.3906V75.9619H2.03125C0.909391 75.9619 0 76.8715 0 77.9931V85.5912C0 90.7165 4.16955 94.8862 9.2948 94.8862H94.705C99.8302 94.8862 104 90.7167 104 85.5912V77.9931C104 76.8713 103.091 75.9619 101.969 75.9619ZM12.2139 13.1763H91.7861C94.1098 13.1763 96.0003 15.0668 96.0003 17.3906V23.0448H7.99967V17.3906C7.99967 15.0668 9.89016 13.1763 12.2139 13.1763V13.1763ZM7.99967 27.1073H96.0003V75.9619H66.7028C65.5809 75.9619 64.6715 76.8715 64.6715 77.9931C64.6715 79.2905 63.6161 80.3459 62.3187 80.3459H41.6812C40.3839 80.3459 39.3285 79.2905 39.3285 77.9931C39.3285 76.8715 38.4191 75.9619 37.2972 75.9619H7.99967V27.1073ZM99.9375 85.5912C99.9375 88.4764 97.5902 90.8237 94.7052 90.8237H9.2948C6.40961 90.8237 4.0625 88.4764 4.0625 85.5912V80.0244H35.5954C36.4471 82.5691 38.8533 84.4084 41.681 84.4084H62.3187C65.1465 84.4084 67.5529 82.5691 68.4044 80.0244H99.9375V85.5912Z" fill="black"/>
<path d="M50.859 19.902H53.1409C54.2628 19.902 55.1722 18.9924 55.1722 17.8708C55.1722 16.7491 54.2628 15.8395 53.1409 15.8395H50.859C49.7372 15.8395 48.8278 16.7491 48.8278 17.8708C48.8278 18.9924 49.7372 19.902 50.859 19.902Z" fill="black"/>
<path d="M55.3624 55.2268H87.9032V65.4397H55.3624V55.2268Z" fill="#0336DB"/>
<path d="M55.3624 37.4568H87.9032V47.6698H55.3624V37.4568Z" fill="#0336DB"/>
</g>
<defs>
<clipPath id="clip0_59_1008">
<rect width="104" height="104" fill="white"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.5 KiB

24
index.html
View File

@ -66,6 +66,30 @@
</div>
</div>
</div>
<div class="cards-segundo-conteiner">
<figure class="cards-segundo">
<img class="cards-segundo-img" src="./assets/imagens/card-dinheiro.svg" alt="nota1">
<figcaption class="cards-segundo-texto">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. </figcaption>
</figure>
<figure class="cards-segundo">
<img class="cards-segundo-img" src="./assets/imagens/card-mao.svg" alt="mao$">
<figcaption class="cards-segundo-texto">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. </figcaption>
</figure>
<figure class="cards-segundo">
<img class="cards-segundo-img" src="./assets/imagens/card-pasta.svg" alt="pasta">
<figcaption class="cards-segundo-texto">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. </figcaption>
</figure>
<figure class="cards-segundo">
<img class="cards-segundo-img" src="./assets/imagens/card-fone.svg" alt="telefone">
<figcaption class="cards-segundo-texto">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. </figcaption>
</figure>
</div>
</main>
</body>

34
styles/main.css
View File

@ -118,6 +118,35 @@
width: 29%;
}
.cards-segundo-conteiner {
display: flex;
justify-content: center;
align-items: center;
gap: 21px;
margin: 129px 72px 108px;
}
.cards-segundo {
background: #FFFFFF;
box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.15);
width: 26%;
padding: 35px 32px 15px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 16px;
}
.cards-segundo-texto {
font-weight: 400;
font-size: 16px;
line-height: 24px;
margin-bottom: 65px;
}
@media (min-width: 2500px){
.texto-principal h2{
font-size: 64px;
@ -137,6 +166,11 @@
line-height: 48px;
}
.cards-segundo-texto {
font-weight: 400;
font-size: 32px;
line-height: 48px;
}
}
@media (max-width: 1024px) {