forked from M3-Academy/challenge-landing-page
Merge pull request 'Entrega do Desafio' (#1) from feature into main
Reviewed-on: #1
This commit is contained in:
commit
7578d08521
BIN
assets/imgs/banner-final.png
Normal file
BIN
assets/imgs/banner-final.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 247 KiB |
BIN
assets/imgs/card-1.png
Normal file
BIN
assets/imgs/card-1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 234 KiB |
BIN
assets/imgs/card-2.png
Normal file
BIN
assets/imgs/card-2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 215 KiB |
BIN
assets/imgs/card-3.png
Normal file
BIN
assets/imgs/card-3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 318 KiB |
BIN
assets/imgs/header-background.jpeg
Normal file
BIN
assets/imgs/header-background.jpeg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 856 KiB |
9
assets/svg/Logo-M3Academy.svg
Normal file
9
assets/svg/Logo-M3Academy.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 19 KiB |
15
assets/svg/computers.svg
Normal file
15
assets/svg/computers.svg
Normal file
@ -0,0 +1,15 @@
|
|||||||
|
<svg width="315" height="315" viewBox="0 0 315 315" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<g clip-path="url(#clip0_59_1030)">
|
||||||
|
<path d="M167.851 110.208H147.149V75.6683H167.851V110.208ZM266.492 275.752H245.79V310.292H266.492V275.752ZM69.2096 275.752H48.5082V310.292H69.2096V275.752Z" fill="#ADB8BC"/>
|
||||||
|
<path d="M113.111 102.856H201.889C203.304 102.856 204.662 103.418 205.663 104.419C206.663 105.42 207.226 106.777 207.226 108.193V110.076C207.226 111.492 206.663 112.849 205.663 113.85C204.662 114.851 203.304 115.413 201.889 115.413H113.111C111.696 115.413 110.338 114.851 109.337 113.85C108.337 112.849 107.774 111.492 107.774 110.076V108.193C107.774 106.777 108.337 105.42 109.337 104.419C110.338 103.418 111.696 102.856 113.111 102.856ZM98.6411 3.68033V89.2582C98.6411 90.2343 99.0289 91.1704 99.7191 91.8606C100.409 92.5508 101.345 92.9385 102.321 92.9385H212.679C213.162 92.9385 213.64 92.8433 214.087 92.6584C214.533 92.4734 214.939 92.2023 215.281 91.8606C215.623 91.5188 215.894 91.1131 216.079 90.6666C216.264 90.2201 216.359 89.7415 216.359 89.2582V3.68033C216.359 3.19702 216.264 2.71845 216.079 2.27193C215.894 1.82541 215.623 1.41969 215.281 1.07794C214.939 0.736194 214.533 0.465103 214.087 0.280149C213.64 0.0951946 213.162 0 212.679 0L102.321 0C101.345 0 100.409 0.387748 99.7191 1.07794C99.0289 1.76814 98.6411 2.70425 98.6411 3.68033ZM206.415 308.276V310.16C206.415 311.575 206.978 312.933 207.978 313.933C208.979 314.934 210.337 315.496 211.752 315.496H300.53C301.946 315.496 303.303 314.934 304.304 313.933C305.305 312.933 305.867 311.575 305.867 310.16V308.276C305.867 306.861 305.305 305.503 304.304 304.503C303.303 303.502 301.946 302.94 300.53 302.94H211.752C210.337 302.94 208.979 303.502 207.978 304.503C206.978 305.503 206.415 306.861 206.415 308.276ZM197.282 203.764V289.342C197.282 289.825 197.377 290.304 197.562 290.75C197.747 291.197 198.018 291.602 198.36 291.944C198.702 292.286 199.108 292.557 199.554 292.742C200.001 292.927 200.479 293.022 200.963 293.022H311.32C312.296 293.022 313.232 292.634 313.922 291.944C314.612 291.254 315 290.318 315 289.342V203.764C315 203.28 314.905 202.802 314.72 202.355C314.535 201.909 314.264 201.503 313.922 201.161C313.58 200.82 313.175 200.549 312.728 200.364C312.282 200.179 311.803 200.083 311.32 200.083H200.963C200.479 200.083 200.001 200.179 199.554 200.364C199.108 200.549 198.702 200.82 198.36 201.161C198.018 201.503 197.747 201.909 197.562 202.355C197.377 202.802 197.282 203.28 197.282 203.764ZM9.13315 308.276V310.16C9.13315 311.575 9.6954 312.933 10.6962 313.933C11.697 314.934 13.0544 315.496 14.4697 315.496H103.248C103.949 315.496 104.643 315.358 105.29 315.09C105.938 314.822 106.526 314.429 107.022 313.933C107.517 313.438 107.91 312.85 108.178 312.202C108.447 311.555 108.585 310.861 108.585 310.16V308.276C108.585 306.861 108.022 305.503 107.022 304.503C106.021 303.502 104.663 302.94 103.248 302.94H14.4697C13.0544 302.94 11.697 303.502 10.6962 304.503C9.6954 305.503 9.13315 306.861 9.13315 308.276ZM0 203.764V289.342C0 290.318 0.387748 291.254 1.07794 291.944C1.76814 292.634 2.70425 293.022 3.68033 293.022H114.037C115.013 293.022 115.95 292.634 116.64 291.944C117.33 291.254 117.718 290.318 117.718 289.342V203.764C117.718 203.28 117.623 202.802 117.438 202.355C117.253 201.909 116.982 201.503 116.64 201.161C116.298 200.82 115.892 200.549 115.446 200.364C114.999 200.179 114.521 200.083 114.037 200.083H3.68033C3.19702 200.083 2.71845 200.179 2.27193 200.364C1.82541 200.549 1.41969 200.82 1.07794 201.161C0.736194 201.503 0.465103 201.909 0.280149 202.355C0.0951946 202.802 0 203.28 0 203.764H0Z" fill="#C5CFD1"/>
|
||||||
|
<path d="M113.04 11.7024H201.959C202.443 11.7024 202.921 11.7976 203.368 11.9825C203.814 12.1675 204.22 12.4386 204.562 12.7803C204.903 13.1221 205.175 13.5278 205.359 13.9743C205.544 14.4208 205.64 14.8994 205.64 15.3827V77.5552C205.64 78.0385 205.544 78.5171 205.359 78.9636C205.175 79.4102 204.903 79.8159 204.562 80.1576C204.22 80.4994 203.814 80.7705 203.368 80.9554C202.921 81.1404 202.443 81.2356 201.959 81.2356H113.04C112.064 81.2356 111.128 80.8478 110.438 80.1576C109.748 79.4674 109.36 78.5313 109.36 77.5552V15.3827C109.36 14.4067 109.748 13.4707 110.438 12.7805C111.128 12.0904 112.064 11.7026 113.04 11.7024ZM208.002 215.466V277.639C208.002 278.615 208.389 279.551 209.079 280.241C209.77 280.931 210.706 281.319 211.682 281.319H300.601C301.577 281.319 302.513 280.931 303.203 280.241C303.894 279.551 304.281 278.615 304.281 277.639V215.466C304.281 214.49 303.894 213.554 303.203 212.864C302.513 212.174 301.577 211.786 300.601 211.786H211.682C211.199 211.786 210.72 211.881 210.273 212.066C209.827 212.251 209.421 212.522 209.079 212.864C208.738 213.206 208.467 213.611 208.282 214.058C208.097 214.504 208.002 214.983 208.002 215.466ZM10.7186 215.466V277.639C10.7186 278.615 11.1064 279.551 11.7966 280.241C12.4868 280.931 13.4229 281.319 14.3989 281.319H103.318C104.294 281.319 105.23 280.931 105.921 280.241C106.611 279.551 106.998 278.615 106.998 277.639V215.466C106.998 214.49 106.611 213.554 105.921 212.864C105.23 212.174 104.294 211.786 103.318 211.786H14.3989C13.4229 211.786 12.4869 212.174 11.7967 212.864C11.1066 213.554 10.7188 214.49 10.7186 215.466Z" fill="#0336DB"/>
|
||||||
|
<path d="M199.856 87.0871C199.856 87.9222 199.524 88.7231 198.934 89.3136C198.343 89.9041 197.542 90.2358 196.707 90.2358C195.872 90.2358 195.071 89.9041 194.481 89.3136C193.89 88.7231 193.558 87.9222 193.558 87.0871C193.558 86.252 193.89 85.4511 194.481 84.8605C195.071 84.27 195.872 83.9383 196.707 83.9383C197.542 83.9383 198.343 84.27 198.934 84.8605C199.524 85.4511 199.856 86.252 199.856 87.0871ZM295.349 284.022C294.514 284.022 293.713 284.354 293.122 284.944C292.532 285.535 292.2 286.335 292.2 287.171C292.2 288.006 292.532 288.807 293.122 289.397C293.713 289.988 294.514 290.319 295.349 290.319C296.184 290.319 296.985 289.988 297.575 289.397C298.166 288.807 298.498 288.006 298.498 287.171C298.498 286.335 298.166 285.535 297.575 284.944C296.985 284.354 296.184 284.022 295.349 284.022ZM98.0659 284.022C97.2308 284.022 96.4299 284.354 95.8394 284.944C95.2489 285.535 94.9171 286.335 94.9171 287.171C94.9171 288.006 95.2489 288.807 95.8394 289.397C96.4299 289.988 97.2308 290.319 98.0659 290.319C98.901 290.319 99.7019 289.988 100.292 289.397C100.883 288.807 101.215 288.006 101.215 287.171C101.215 286.335 100.883 285.535 100.292 284.944C99.7019 284.354 98.901 284.022 98.0659 284.022Z" fill="#F9F9F7"/>
|
||||||
|
<path d="M178.115 87.087C178.115 86.4714 178.36 85.881 178.795 85.4456C179.23 85.0103 179.821 84.7657 180.437 84.7657H187.64C188.256 84.7657 188.846 85.0103 189.282 85.4456C189.717 85.881 189.962 86.4714 189.962 87.087C189.962 87.7027 189.717 88.2931 189.282 88.7284C188.846 89.1637 188.256 89.4083 187.64 89.4083H180.436C180.131 89.4083 179.829 89.3483 179.548 89.2316C179.266 89.1149 179.01 88.9439 178.795 88.7284C178.579 88.5128 178.408 88.2569 178.292 87.9753C178.175 87.6937 178.115 87.3918 178.115 87.087ZM279.078 289.492H286.282C286.897 289.492 287.488 289.247 287.923 288.812C288.358 288.377 288.603 287.786 288.603 287.17C288.603 286.555 288.358 285.964 287.923 285.529C287.488 285.094 286.897 284.849 286.282 284.849H279.078C278.462 284.849 277.872 285.094 277.436 285.529C277.001 285.964 276.756 286.555 276.756 287.17C276.756 287.786 277.001 288.377 277.436 288.812C277.872 289.247 278.462 289.492 279.078 289.492ZM81.7948 289.492H88.9986C89.6142 289.492 90.2046 289.247 90.64 288.812C91.0753 288.377 91.3199 287.786 91.3199 287.17C91.3199 286.555 91.0753 285.964 90.64 285.529C90.2046 285.094 89.6142 284.849 88.9986 284.849H81.7948C81.1884 284.863 80.6116 285.114 80.1876 285.548C79.7637 285.981 79.5263 286.564 79.5263 287.17C79.5263 287.777 79.7637 288.359 80.1876 288.793C80.6116 289.227 81.1884 289.478 81.7948 289.492Z" fill="black"/>
|
||||||
|
<path d="M283.294 170.712L260.456 166.091C259.193 165.835 258.723 164.276 259.634 163.364L265.22 157.779L248.536 141.095L242.951 146.681C242.039 147.592 240.48 147.122 240.224 145.859L235.603 123.021C235.373 121.888 236.374 120.887 237.507 121.117L260.344 125.739C261.607 125.994 262.078 127.553 261.166 128.465L255.581 134.05L272.265 150.734L277.85 145.149C278.761 144.237 280.321 144.707 280.576 145.971L285.198 168.808C285.428 169.941 284.427 170.941 283.294 170.712ZM191.223 225.783L171.753 212.902C170.679 212.189 169.19 212.96 169.19 214.249V222.1H145.811V214.249C145.811 212.96 144.322 212.189 143.248 212.902L123.804 225.783C122.841 226.422 122.827 227.837 123.791 228.476L143.254 241.357C144.328 242.07 145.811 241.299 145.811 240.01V231.943H169.189V240.01C169.189 241.299 170.678 242.07 171.753 241.357L191.196 228.476C192.16 227.837 192.187 226.422 191.223 225.783ZM76.2275 121.116L53.39 125.737C52.127 125.993 51.6563 127.552 52.5681 128.463L58.1532 134.049L41.4693 150.732L35.8842 145.147C34.973 144.236 33.4134 144.706 33.1581 145.969L28.5364 168.807C28.3069 169.94 29.3073 170.94 30.4406 170.711L53.2781 166.089C54.5411 165.833 55.0118 164.274 54.1 163.363L48.5149 157.778L65.1989 141.094L70.784 146.679C71.6951 147.59 73.2547 147.12 73.5101 145.857L78.1317 123.02C78.3612 121.887 77.3608 120.887 76.2275 121.116Z" fill="black"/>
|
||||||
|
</g>
|
||||||
|
<defs>
|
||||||
|
<clipPath id="clip0_59_1030">
|
||||||
|
<rect width="315" height="315" fill="white"/>
|
||||||
|
</clipPath>
|
||||||
|
</defs>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 9.0 KiB |
3
assets/svg/facebook.svg
Normal file
3
assets/svg/facebook.svg
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M17.9993 0.0049936L14.887 0C11.3905 0 9.13087 2.31828 9.13087 5.90643V8.62969H6.00163C5.73123 8.62969 5.51226 8.84891 5.51226 9.11932V13.065C5.51226 13.3354 5.73148 13.5544 6.00163 13.5544H9.13087V23.5106C9.13087 23.781 9.34984 24 9.62025 24H13.703C13.9734 24 14.1924 23.7808 14.1924 23.5106V13.5544H17.8512C18.1216 13.5544 18.3406 13.3354 18.3406 13.065L18.3421 9.11932C18.3421 8.98948 18.2904 8.86514 18.1988 8.77326C18.1071 8.68138 17.9823 8.62969 17.8525 8.62969H14.1924V6.32115C14.1924 5.21157 14.4568 4.64829 15.9022 4.64829L17.9988 4.64755C18.2689 4.64755 18.4879 4.42833 18.4879 4.15817V0.494367C18.4879 0.224462 18.2692 0.00549296 17.9993 0.0049936Z" fill="white"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 787 B |
14
assets/svg/four-cards-laptop.svg
Normal file
14
assets/svg/four-cards-laptop.svg
Normal 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.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.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>
|
||||||
|
After Width: | Height: | Size: 2.5 KiB |
14
assets/svg/four-cards-money.svg
Normal file
14
assets/svg/four-cards-money.svg
Normal 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>
|
||||||
|
After Width: | Height: | Size: 3.2 KiB |
6
assets/svg/four-cards-payment.svg
Normal file
6
assets/svg/four-cards-payment.svg
Normal 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.0005C83.4667 54.0005 92.0883 45.296 92.0883 34.5583C92.0883 23.8207 83.4667 15.1161 72.8313 15.1161C62.1959 15.1161 53.5742 23.8207 53.5742 34.5583C53.5742 45.296 62.1959 54.0005 72.8313 54.0005Z" fill="#0336DB"/>
|
||||||
|
<path d="M72.8313 65.0748C89.4979 65.0748 103.057 51.3852 103.057 34.5586C103.057 17.7317 89.4979 4.04211 72.8313 4.04211C56.1647 4.04211 42.6055 17.7317 42.6055 34.5586C42.6055 51.3852 56.1647 65.0748 72.8313 65.0748ZM72.8313 8.14368C87.2576 8.14368 98.9946 19.9933 98.9946 34.5586C98.9946 49.1236 87.2578 60.9732 72.8313 60.9732C58.4049 60.9732 46.668 49.1236 46.668 34.5586C46.668 19.9933 58.4047 8.14368 72.8313 8.14368Z" fill="black"/>
|
||||||
|
<path d="M69.42 39.6797C68.7161 38.7976 67.4377 38.6588 66.5638 39.3692C65.6902 40.0798 65.5527 41.3707 66.2563 42.2528C67.3761 43.6561 68.9814 44.4535 70.5804 44.8355C70.6655 45.889 71.5394 46.7171 72.6048 46.7171C73.6198 46.7171 74.4609 45.9655 74.6118 44.9834C77.4727 44.4678 79.4801 42.5448 79.8094 39.9268C80.1921 36.8857 78.2382 33.9693 75.0581 32.8344C74.9133 32.7827 74.7727 32.7322 74.636 32.6828V28.7318C74.8052 28.8407 74.9314 28.9596 75.0114 29.0745C75.6553 30.0016 76.9222 30.2262 77.8409 29.5753C78.7593 28.9248 78.9813 27.6457 78.3367 26.7185C77.598 25.6552 76.3077 24.7531 74.6348 24.3815C74.5986 23.2808 73.7037 22.3998 72.6048 22.3998C71.4829 22.3998 70.5735 23.3179 70.5735 24.4506V24.5193C70.4488 24.5523 70.3233 24.5878 70.1969 24.6263C68.0645 25.275 66.4554 27.36 66.2837 29.6971C66.1131 32.0196 67.3306 34.0341 69.5404 35.0861C69.7813 35.201 70.1333 35.3511 70.5733 35.5281V40.5275C70.1075 40.3158 69.7029 40.0342 69.42 39.6797ZM75.7792 39.41C75.7036 40.0107 75.3008 40.4694 74.636 40.7414V37.1789C75.5283 37.8118 75.8676 38.7086 75.7792 39.41ZM70.3355 30.0004C70.3548 29.7358 70.4417 29.4737 70.5737 29.2449V30.8486C70.3899 30.608 70.3113 30.3267 70.3355 30.0004Z" fill="white"/>
|
||||||
|
<path d="M103.992 73.7967C103.885 71.3073 102.741 69.1667 100.772 67.7695C97.5268 65.4667 93.1466 65.8666 90.3563 68.72C90.2669 68.8115 90.1861 68.9112 90.1152 69.018L85.659 75.721C84.4114 72.748 81.5128 70.6595 78.1452 70.6595L46.0856 70.6377H46.0842C45.5979 70.6377 45.1281 70.8137 44.7596 71.1338L36.728 78.1099H30.8669V76.3075C30.8669 75.1749 29.9573 74.2567 28.8356 74.2567H19.892V73.9762C19.892 72.8435 18.9824 71.9254 17.8608 71.9254H2.03125C0.909391 71.9254 0 72.8435 0 73.9762V98.0273C0 99.16 0.909391 100.078 2.03125 100.078H17.8608C18.9824 100.078 19.892 99.16 19.892 98.0273V97.7468H28.8354C29.9571 97.7468 30.8667 96.8287 30.8667 95.696V93.8023H37.6017L43.6861 100.314C44.0702 100.725 44.6048 100.958 45.1636 100.958C45.1732 100.958 45.1827 100.958 45.1923 100.957L87.1404 100.363C87.7949 100.354 88.4049 100.027 88.7788 99.4848L102.107 80.1616C102.115 80.1495 102.124 80.1371 102.132 80.125C103.422 78.1655 104.083 75.9181 103.992 73.7967ZM15.8295 95.9766H4.0625V76.027H15.8295V95.9766ZM26.8042 93.6454H19.892V78.3583H26.8042V93.6454ZM98.7604 77.8364L86.0409 96.2772L46.0285 96.8438L39.9559 90.3445C39.572 89.9337 39.0376 89.701 38.4784 89.701H30.8669V82.2115H37.4816C37.9679 82.2115 38.4378 82.0356 38.8062 81.7154L46.8372 74.7399L78.1438 74.7612C80.4081 74.7612 82.2502 76.6553 82.2502 78.9836C82.2502 81.3116 80.4082 83.2055 78.1438 83.2055C78.1385 83.2055 78.1332 83.2057 78.128 83.2057H60.6105C60.0531 83.2057 59.5201 83.4371 59.1364 83.8456L54.863 88.3963C54.0912 89.2182 54.1255 90.5162 54.9396 91.2955C55.3325 91.6714 55.835 91.858 56.3367 91.858C56.8748 91.858 57.4119 91.6435 57.8112 91.2181L61.4837 87.3073L81.7651 87.3081H81.7657C82.4426 87.3081 83.0751 86.9677 83.4523 86.4002L93.3713 71.4806C94.7653 70.1689 96.8681 70.0122 98.4362 71.1254C100.553 72.6272 100.202 75.6342 98.7604 77.8364Z" fill="black"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 3.7 KiB |
6
assets/svg/four-cards-phone.svg
Normal file
6
assets/svg/four-cards-phone.svg
Normal 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>
|
||||||
|
After Width: | Height: | Size: 1.9 KiB |
5
assets/svg/handbag.svg
Normal file
5
assets/svg/handbag.svg
Normal file
@ -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.1984 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.1805 0.417834 39.2145 1.17967C37.2484 0.417834 35.1135 0 32.8835 0C23.1536 0 15.2381 7.95313 15.2381 17.7287V22.7395H2.90923C1.80914 22.7395 0.917042 23.6401 0.917042 24.7512V89.7613C0.917042 95.0368 5.17415 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.37113 95.3056 4.90142 92.8185 4.90142 89.7615V26.7631H13.2459V95.3056Z" fill="black"/>
|
||||||
|
<path d="M92.7992 54.7375C86.7766 54.7375 81.5819 51.191 79.165 46.0659H72.082C69.6651 51.1908 64.4705 54.7375 58.4479 54.7375C56.2051 54.7375 54.0772 54.2452 52.1641 53.3635V78.4196C52.1641 96.7462 75.6235 103 75.6235 103C75.6235 103 99.0829 96.7462 99.0829 78.4196V53.3635C97.1698 54.2452 95.0418 54.7375 92.7992 54.7375Z" fill="#0336DB"/>
|
||||||
|
<path d="M74.8531 81.6054C74.328 81.6054 73.8228 81.3957 73.4487 81.0201L69.1192 76.673C68.3389 75.8895 68.3353 74.6158 69.1113 73.828C69.8868 73.0401 71.1483 73.0364 71.9286 73.82L74.7249 76.6276L81.99 67.9301C82.6996 67.0807 83.9563 66.9733 84.7972 67.6895C85.6383 68.4059 85.745 69.6751 85.0354 70.5244L76.3762 80.891C76.0172 81.3207 75.4968 81.579 74.9406 81.6035C74.9113 81.6047 74.8824 81.6054 74.8531 81.6054Z" fill="white"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 2.2 KiB |
5
assets/svg/instagram.svg
Normal file
5
assets/svg/instagram.svg
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M17.3766 0H6.62295C2.97106 0 0 3.095 0 6.89906V18.1008C0 21.905 2.97106 24.9999 6.62295 24.9999H17.3766C21.0288 24.9999 23.9999 21.9049 23.9999 18.1008V6.89906C24 3.095 21.0288 0 17.3766 0ZM21.8706 18.1008C21.8706 20.6819 19.8547 22.7817 17.3768 22.7817H6.62295C4.1452 22.7819 2.12938 20.6819 2.12938 18.1008V6.89906C2.12938 4.31806 4.1452 2.21811 6.62295 2.21811H17.3766C19.8545 2.21811 21.8705 4.31806 21.8705 6.89906V18.1008H21.8706Z" fill="white"/>
|
||||||
|
<path d="M11.9999 6.05847C8.58992 6.05847 5.81576 8.94822 5.81576 12.5003C5.81576 16.0522 8.58992 18.9418 11.9999 18.9418C15.4099 18.9418 18.1841 16.0522 18.1841 12.5003C18.1841 8.94822 15.4099 6.05847 11.9999 6.05847ZM11.9999 16.7236C9.7642 16.7236 7.94514 14.829 7.94514 12.5002C7.94514 10.1711 9.76406 8.27643 11.9999 8.27643C14.2358 8.27643 16.0547 10.1711 16.0547 12.5002C16.0547 14.829 14.2356 16.7236 11.9999 16.7236Z" fill="white"/>
|
||||||
|
<path d="M18.4435 4.17761C18.0333 4.17761 17.6303 4.35062 17.3405 4.65377C17.0494 4.95543 16.882 5.37539 16.882 5.80422C16.882 6.23173 17.0495 6.65154 17.3405 6.95468C17.6301 7.25635 18.0333 7.43084 18.4435 7.43084C18.8552 7.43084 19.2569 7.25635 19.548 6.95468C19.839 6.65154 20.0051 6.23158 20.0051 5.80422C20.0051 5.37539 19.839 4.95543 19.548 4.65377C19.2584 4.35062 18.8552 4.17761 18.4435 4.17761Z" fill="white"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.4 KiB |
6
assets/svg/marketplace.svg
Normal file
6
assets/svg/marketplace.svg
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
<svg width="103" height="83" viewBox="0 0 103 83" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M73.2652 44.4426H96.068V65.7642H73.2652V44.4426Z" fill="#0336DB"/>
|
||||||
|
<path d="M6.93198 44.4426H29.7348V65.7642H6.93198V44.4426Z" fill="#0336DB"/>
|
||||||
|
<path d="M40.8369 44.4426H62.1631V79.3342H40.8369V44.4426Z" fill="#0336DB"/>
|
||||||
|
<path d="M95.3669 0.9888H7.63306C3.42415 0.9888 0 4.41315 0 8.62186V23.3092C0 27.012 1.97169 30.2627 4.92026 32.067V79.9995C4.92026 81.1105 5.82091 82.0112 6.93198 82.0112H96.068C97.1791 82.0112 98.0797 81.1105 98.0797 79.9995V32.067C101.028 30.2627 103 27.012 103 23.3092V8.62186C103 4.41315 99.5757 0.9888 95.3669 0.9888ZM82.4805 23.3092C82.4805 26.7479 79.683 29.5453 76.2441 29.5453C72.8053 29.5453 70.0078 26.7479 70.0078 23.3092V5.01224H82.4805V23.3092ZM65.9844 23.3092C65.9844 26.7479 63.1869 29.5453 59.748 29.5453C56.3092 29.5453 53.5117 26.7479 53.5117 23.3092V5.01224H65.9844V23.3092ZM49.4883 23.3092C49.4883 26.7479 46.6908 29.5453 43.252 29.5453C39.8131 29.5453 37.0156 26.7479 37.0156 23.3092V5.01224H49.4883V23.3092ZM32.9922 23.3092C32.9922 26.7479 30.1947 29.5453 26.7559 29.5453C23.317 29.5453 20.5195 26.7479 20.5195 23.3092V5.01224H32.9922V23.3092ZM4.02344 8.62186C4.02344 6.63147 5.64287 5.01224 7.63306 5.01224H16.4961V23.3092C16.4961 26.7479 13.6986 29.5453 10.2598 29.5453C6.82093 29.5453 4.02344 26.7479 4.02344 23.3092V8.62186ZM94.0563 77.9877H8.9437V33.4849C9.37461 33.5402 9.81397 33.569 10.2598 33.569C13.6362 33.569 16.6371 31.9294 18.5078 29.4047C20.3785 31.9294 23.3794 33.569 26.7559 33.569C30.1323 33.569 33.1332 31.9294 35.0039 29.4047C36.8746 31.9294 39.8755 33.569 43.252 33.569C46.6284 33.569 49.6293 31.9294 51.5 29.4047C53.3707 31.9294 56.3716 33.569 59.748 33.569C63.1245 33.569 66.1254 31.9294 67.9961 29.4047C69.8668 31.9294 72.8677 33.569 76.2441 33.569C79.6206 33.569 82.6215 31.9294 84.4922 29.4047C86.3629 31.9294 89.3638 33.569 92.7402 33.569C93.186 33.569 93.6254 33.5404 94.0563 33.4849V77.9877ZM98.9766 23.3092C98.9766 26.7479 96.1791 29.5453 92.7402 29.5453C89.3014 29.5453 86.5039 26.7479 86.5039 23.3092V5.01224H95.3669C97.3573 5.01224 98.9766 6.63147 98.9766 8.62186V23.3092Z" fill="black"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 2.1 KiB |
6
assets/svg/payment.svg
Normal file
6
assets/svg/payment.svg
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
<svg width="102" height="97" viewBox="0 0 102 97" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M71.4307 49.972C81.8615 49.972 90.3174 41.4332 90.3174 30.9001C90.3174 20.367 81.8615 11.8282 71.4307 11.8282C60.9998 11.8282 52.5439 20.367 52.5439 30.9001C52.5439 41.4332 60.9998 49.972 71.4307 49.972Z" fill="#0336DB"/>
|
||||||
|
<path d="M71.4307 60.8353C87.7768 60.8353 101.075 47.4065 101.075 30.9003C101.075 14.3939 87.7768 0.965118 71.4307 0.965118C55.0846 0.965118 41.7861 14.3939 41.7861 30.9003C41.7861 47.4065 55.0846 60.8353 71.4307 60.8353ZM71.4307 4.98856C85.5796 4.98856 97.0909 16.6125 97.0909 30.9003C97.0909 45.1879 85.5798 56.8118 71.4307 56.8118C57.2818 56.8118 45.7705 45.1879 45.7705 30.9003C45.7705 16.6125 57.2816 4.98856 71.4307 4.98856Z" fill="black"/>
|
||||||
|
<path d="M68.085 35.9238C67.3947 35.0586 66.1408 34.9224 65.2837 35.6193C64.4269 36.3163 64.292 37.5827 64.9821 38.4479C66.0804 39.8246 67.6548 40.6067 69.2231 40.9815C69.3066 42.0149 70.1636 42.8272 71.2085 42.8272C72.204 42.8272 73.029 42.09 73.177 41.1265C75.9828 40.6208 77.9517 38.7344 78.2746 36.1662C78.6499 33.1831 76.7336 30.3222 73.6147 29.2089C73.4726 29.1582 73.3348 29.1087 73.2007 29.0602V25.1845C73.3666 25.2913 73.4904 25.408 73.5689 25.5206C74.2004 26.4301 75.4429 26.6504 76.344 26.0119C77.2446 25.3738 77.4624 24.1191 76.8303 23.2096C76.1057 22.1665 74.8403 21.2815 73.1995 20.917C73.164 19.8373 72.2863 18.9731 71.2085 18.9731C70.1082 18.9731 69.2163 19.8737 69.2163 20.9848V21.0522C69.094 21.0846 68.9709 21.1194 68.847 21.1572C66.7556 21.7935 65.1774 23.8388 65.009 26.1314C64.8417 28.4097 66.0358 30.3858 68.2031 31.4178C68.4394 31.5304 68.7846 31.6777 69.2161 31.8513V36.7555C68.7593 36.5479 68.3625 36.2717 68.085 35.9238ZM74.3219 35.6593C74.2478 36.2485 73.8527 36.6985 73.2007 36.9653V33.4707C74.0759 34.0916 74.4086 34.9713 74.3219 35.6593ZM68.9828 26.4289C69.0018 26.1694 69.087 25.9123 69.2165 25.6878V27.261C69.0362 27.025 68.9591 26.749 68.9828 26.4289Z" fill="white"/>
|
||||||
|
<path d="M101.992 69.3911C101.887 66.9491 100.766 64.8492 98.8342 63.4786C95.6513 61.2197 91.3553 61.612 88.6187 64.4111C88.531 64.5008 88.4517 64.5986 88.3822 64.7034L84.0117 71.2787C82.7881 68.3623 79.9453 66.3136 76.6424 66.3136L45.1993 66.2922H45.198C44.721 66.2922 44.2602 66.4648 43.8988 66.7789L36.0217 73.6221H30.2733V71.854C30.2733 70.743 29.3812 69.8423 28.2811 69.8423H19.5095V69.5671C19.5095 68.456 18.6174 67.5554 17.5173 67.5554H1.99219C0.891902 67.5554 0 68.456 0 69.5671V93.1601C0 94.2712 0.891902 95.1719 1.99219 95.1719H17.5173C18.6174 95.1719 19.5095 94.2712 19.5095 93.1601V92.8849H28.2809C29.381 92.8849 30.2731 91.9843 30.2731 90.8732V89.0156H36.8786L42.846 95.4034C43.2227 95.8066 43.747 96.0347 44.2951 96.0347C44.3045 96.0347 44.3138 96.0347 44.3232 96.0345L85.4646 95.4517C86.1065 95.4426 86.7048 95.1218 87.0715 94.5899L100.143 75.6347C100.152 75.6228 100.16 75.6107 100.168 75.5988C101.433 73.6766 102.081 71.472 101.992 69.3911ZM15.5251 91.1484H3.98438V71.5788H15.5251V91.1484ZM26.2887 88.8617H19.5095V73.8657H26.2887V88.8617ZM96.8612 73.3538L84.3863 91.4433L45.1434 91.9992L39.1875 85.6236C38.811 85.2207 38.2869 84.9924 37.7384 84.9924H30.2733V77.6456H36.7608C37.2378 77.6456 37.6986 77.473 38.0599 77.1589L45.9365 70.3163L76.6411 70.3372C78.8617 70.3372 80.6685 72.1952 80.6685 74.4791C80.6685 76.7628 78.8619 78.6206 76.6411 78.6206C76.6359 78.6206 76.6307 78.6208 76.6255 78.6208H59.4449C58.8982 78.6208 58.3755 78.8478 57.9992 79.2485L53.808 83.7125C53.051 84.5188 53.0846 85.792 53.8831 86.5565C54.2684 86.9252 54.7612 87.1083 55.2533 87.1083C55.7811 87.1083 56.3078 86.8979 56.6995 86.4806L60.3013 82.6443L80.1927 82.6451H80.1933C80.8571 82.6451 81.4775 82.3111 81.8474 81.7545L91.5757 67.119C92.9429 65.8324 95.0052 65.6787 96.5432 66.7706C98.6193 68.2438 98.275 71.1936 96.8612 73.3538Z" fill="black"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 3.7 KiB |
3
assets/svg/youtube.svg
Normal file
3
assets/svg/youtube.svg
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M22.98 5.34C22.329 4.182 21.6225 3.969 20.184 3.888C18.747 3.7905 15.1335 3.75 12.003 3.75C8.8665 3.75 5.2515 3.7905 3.816 3.8865C2.3805 3.969 1.6725 4.1805 1.0155 5.34C0.345 6.4965 0 8.4885 0 11.9955C0 11.9985 0 12 0 12C0 12.003 0 12.0045 0 12.0045V12.0075C0 15.4995 0.345 17.5065 1.0155 18.651C1.6725 19.809 2.379 20.019 3.8145 20.1165C5.2515 20.2005 8.8665 20.25 12.003 20.25C15.1335 20.25 18.747 20.2005 20.1855 20.118C21.624 20.0205 22.3305 19.8105 22.9815 18.6525C23.658 17.508 24 15.501 24 12.009C24 12.009 24 12.0045 24 12.0015C24 12.0015 24 11.9985 24 11.997C24 8.4885 23.658 6.4965 22.98 5.34ZM9 16.5V7.5L16.5 12L9 16.5Z" fill="white"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 759 B |
144
index.html
Normal file
144
index.html
Normal file
@ -0,0 +1,144 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="pt-br">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<link rel="stylesheet" href="./styles/header.css" class="css">
|
||||||
|
<link rel="stylesheet" href="./styles/main.css" class="css">
|
||||||
|
<link rel="stylesheet" href="./styles/footer.css" class="css">
|
||||||
|
<link rel="stylesheet" href="./styles/reset.css" class="css">
|
||||||
|
|
||||||
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500&display=swap" rel="stylesheet">
|
||||||
|
|
||||||
|
<title>Primeiro desafio M3 Academy</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<a href="/">
|
||||||
|
<img src="./assets/svg/Logo-M3Academy.svg" alt="logo m3 academy">
|
||||||
|
</a>
|
||||||
|
</header>
|
||||||
|
<main>
|
||||||
|
<div class="background-main">
|
||||||
|
<figure>
|
||||||
|
<img src="./assets/imgs/header-background.jpeg" alt="background com uma imagem de notebook mostrando código de programação">
|
||||||
|
</figure>
|
||||||
|
</div>
|
||||||
|
<section class="first-section">
|
||||||
|
<h2>Lorem ipsum</h2>
|
||||||
|
<h1>dolor sit amet</h1>
|
||||||
|
<figure>
|
||||||
|
<figcaption>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.</figcaption>
|
||||||
|
<img src="./assets/svg/computers.svg" alt="imagem ilustrativa de computadores">
|
||||||
|
</figure>
|
||||||
|
</section>
|
||||||
|
<div class="first-content-card">
|
||||||
|
<div class="content-card-container">
|
||||||
|
<div class="first-card">
|
||||||
|
<figure>
|
||||||
|
<img src="./assets/svg/marketplace.svg" alt="ícone mercado">
|
||||||
|
<figcaption>
|
||||||
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
|
||||||
|
</figcaption>
|
||||||
|
</figure>
|
||||||
|
</div>
|
||||||
|
<div class="second-card">
|
||||||
|
<figure>
|
||||||
|
<img src="./assets/svg/handbag.svg" alt="ícone de bolsa com um escudo e ícone de confirmação">
|
||||||
|
<figcaption>
|
||||||
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
|
||||||
|
</figcaption>
|
||||||
|
</figure>
|
||||||
|
</div>
|
||||||
|
<div class="three-card">
|
||||||
|
<figure>
|
||||||
|
<img src="./assets/svg/payment.svg" alt="ícone de uma mão aberta com um símbolo de dólar em cima">
|
||||||
|
<figcaption>
|
||||||
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
|
||||||
|
</figcaption>
|
||||||
|
</figure>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="cards-macbook">
|
||||||
|
<div class="cards-macbook-container">
|
||||||
|
<div class="first-card-macbook">
|
||||||
|
<figure>
|
||||||
|
<img src="./assets/imgs/card-1.png" alt="imagem de frente de um macbook">
|
||||||
|
</figure>
|
||||||
|
</div>
|
||||||
|
<div class="second-card-macbook">
|
||||||
|
<figure>
|
||||||
|
<img src="./assets/imgs/card-2.png" alt="imagem vista de cima de um macbook ">
|
||||||
|
</figure>
|
||||||
|
</div>
|
||||||
|
<div class="third-card-macbook">
|
||||||
|
<figure>
|
||||||
|
<img src="./assets/imgs/card-3.png" alt="imagem vista de perto e de lado de um macbook">
|
||||||
|
</figure>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="bottom-cards">
|
||||||
|
<div class="bottom-cards-container">
|
||||||
|
<div class="first-bottom-card">
|
||||||
|
<figure>
|
||||||
|
<img src="./assets/svg/four-cards-money.svg" alt="ícone mercado">
|
||||||
|
<figcaption>
|
||||||
|
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>
|
||||||
|
<div class="second-bottom-card">
|
||||||
|
<figure>
|
||||||
|
<img src="./assets/svg/four-cards-payment.svg" alt="ícone de bolsa com um escudo e ícone de confirmação">
|
||||||
|
<figcaption>
|
||||||
|
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>
|
||||||
|
<div class="three-bottom-card">
|
||||||
|
<figure>
|
||||||
|
<img src="./assets/svg/four-cards-laptop.svg" alt="ícone de uma mão aberta com um símbolo de dólar em cima">
|
||||||
|
<figcaption>
|
||||||
|
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>
|
||||||
|
<div class="four-bottom-card">
|
||||||
|
<figure>
|
||||||
|
<img src="./assets/svg/four-cards-phone.svg" alt="ícone de uma mão aberta com um símbolo de dólar em cima">
|
||||||
|
<figcaption>
|
||||||
|
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>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<section class="banner-final">
|
||||||
|
<figure>
|
||||||
|
<div class="banner-final-text">
|
||||||
|
<h3>Lorem ipsum dolor sit amet</h3>
|
||||||
|
<figcaption>
|
||||||
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vulputate sapien non libero faucibus interdum. In eget tincidunt ipsum.
|
||||||
|
Quisque a tellus at lectus blandit tempor. Ut tristique auctor mi eget hendrerit. Curabitur venenatis felis vitae sagittis venenatis.
|
||||||
|
Donec finibus turpis vitae lectus interdum rutrum vitae sed augue.
|
||||||
|
</figcaption>
|
||||||
|
</div>
|
||||||
|
<img src="./assets/imgs/banner-final.png" alt="banner com uma imagem de um óculos em frente a um notebook">
|
||||||
|
</figure>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
<footer>
|
||||||
|
<div class="social-media">
|
||||||
|
<a href="/"><img src="./assets/svg/instagram.svg" alt="ícone instagram"></a>
|
||||||
|
<a href="/"><img src="./assets/svg/facebook.svg" alt="ícone facebook"></a>
|
||||||
|
<a href="/"><img src="./assets/svg/youtube.svg" alt="ícone youtube"></a>
|
||||||
|
</div>
|
||||||
|
<span>Copyright © 2020 - Loja Comércio Eletrônico CNPJ: 000.000.000/0001-00</span>
|
||||||
|
</footer>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
54
styles/footer.css
Normal file
54
styles/footer.css
Normal file
@ -0,0 +1,54 @@
|
|||||||
|
footer{
|
||||||
|
width: 100%;
|
||||||
|
height: 128px;
|
||||||
|
bottom: 0;
|
||||||
|
background: #000000;
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer .social-media{
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
width: 104px;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer span{
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 10px;
|
||||||
|
line-height: 12px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
color: #BDBDBD;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 1025px){
|
||||||
|
footer span{
|
||||||
|
width: 261px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (min-width: 2500px){
|
||||||
|
footer{
|
||||||
|
height: 256px;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer .social-media{
|
||||||
|
margin-bottom: 32px;
|
||||||
|
width: 208px;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer .social-media a img{
|
||||||
|
width: 48px;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer span{
|
||||||
|
font-size: 20px;
|
||||||
|
line-height: 24px;
|
||||||
|
}
|
||||||
|
}
|
||||||
24
styles/header.css
Normal file
24
styles/header.css
Normal file
@ -0,0 +1,24 @@
|
|||||||
|
header{
|
||||||
|
width: 100%;
|
||||||
|
height: 101px;
|
||||||
|
left: 0;
|
||||||
|
top: 0px;
|
||||||
|
background: #000000;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
header a img{
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (min-width: 2500px){
|
||||||
|
header{
|
||||||
|
height: 202px;
|
||||||
|
}
|
||||||
|
|
||||||
|
header a img{
|
||||||
|
width: 452px;
|
||||||
|
}
|
||||||
|
}
|
||||||
576
styles/main.css
Normal file
576
styles/main.css
Normal file
@ -0,0 +1,576 @@
|
|||||||
|
/* primeiro background */
|
||||||
|
.background-main figure img{
|
||||||
|
width: 100%;
|
||||||
|
height: 700px;
|
||||||
|
top: 0;
|
||||||
|
max-height: 700px;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* primeira seção com imagem e texto */
|
||||||
|
.first-section{
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
flex-direction: column;
|
||||||
|
margin-top: 73px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.first-section h2{
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 32px;
|
||||||
|
line-height: 39px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
color: #000000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.first-section h1{
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 48px;
|
||||||
|
line-height: 58px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
color: #000000;
|
||||||
|
margin-bottom: 28px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.first-section figure{
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.first-section figcaption{
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 24px;
|
||||||
|
color: #000000;
|
||||||
|
max-width: 766px;
|
||||||
|
margin-bottom: 73px;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
/* primeiros cards */
|
||||||
|
.first-content-card{
|
||||||
|
margin-top: 179px;
|
||||||
|
margin-bottom: 62px;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content-card-container{
|
||||||
|
max-width: 1092px;
|
||||||
|
width: 100%;
|
||||||
|
height: 350px;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(3, 1fr);
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
gap: 21px;
|
||||||
|
position: relative;
|
||||||
|
margin: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.first-card figure,.second-card figure,.three-card figure{
|
||||||
|
width: 100%;
|
||||||
|
max-width: 350px;
|
||||||
|
height: 287.68px;
|
||||||
|
background: #FFFFFF;
|
||||||
|
box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23);
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
align-items: center;
|
||||||
|
flex-direction: column;
|
||||||
|
margin: 0px auto;
|
||||||
|
padding: 27px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.first-card figcaption,.second-card figcaption,.three-card figcaption{
|
||||||
|
max-width: 299px;
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
text-align: center;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 24px;
|
||||||
|
text-align: center;
|
||||||
|
color: #000000;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* cards com imagem de macbook */
|
||||||
|
.cards-macbook{
|
||||||
|
width: 100%;
|
||||||
|
height: 530px;
|
||||||
|
background: #E0E0E0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cards-macbook-container{
|
||||||
|
max-width: 1776px;
|
||||||
|
width: 100%;
|
||||||
|
height: 530px;
|
||||||
|
display: grid;
|
||||||
|
grid-template-areas:
|
||||||
|
"A B C";
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
gap: 39px;
|
||||||
|
position: relative;
|
||||||
|
margin: auto;
|
||||||
|
top: 62px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.first-card-macbook figure img,.second-card-macbook figure img,.third-card-macbook figure img{
|
||||||
|
max-width: 566px;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* área final com 4 cards */
|
||||||
|
.bottom-cards{
|
||||||
|
margin-top: 191px;
|
||||||
|
margin-bottom: 108px;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bottom-cards-container{
|
||||||
|
max-width: 1776px;
|
||||||
|
width: 100%;
|
||||||
|
height: 332px;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(4, 1fr);
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
gap: 16px;
|
||||||
|
position: relative;
|
||||||
|
margin: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.first-bottom-card figure,.second-bottom-card figure,.three-bottom-card figure,.four-bottom-card figure{
|
||||||
|
width: 100%;
|
||||||
|
max-width: 432px;
|
||||||
|
height: 332px;
|
||||||
|
background: #FFFFFF;
|
||||||
|
box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.15);
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
align-items: center;
|
||||||
|
flex-direction: column;
|
||||||
|
margin: 0px auto;
|
||||||
|
padding: 27px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.first-bottom-card figcaption,.second-bottom-card figcaption,.three-bottom-card figcaption,.four-bottom-card figcaption{
|
||||||
|
max-width: 367px;
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
text-align: center;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 24px;
|
||||||
|
text-align: center;
|
||||||
|
color: #000000;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* seção final com título, texto e imagem */
|
||||||
|
.banner-final{
|
||||||
|
width: 100%;
|
||||||
|
padding: 36px 7% 116px 7%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.banner-final figure{
|
||||||
|
max-width: 1360px;
|
||||||
|
height: 484px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
flex-direction: column;
|
||||||
|
position: relative;
|
||||||
|
margin: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.banner-final figure img{
|
||||||
|
width: 100%;
|
||||||
|
height: 276px;
|
||||||
|
object-fit: cover;
|
||||||
|
object-position: 25% 55%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.banner-final figure .banner-final-text h3{
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 32px;
|
||||||
|
line-height: 39px;
|
||||||
|
text-align: center;
|
||||||
|
color: #000000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.banner-final .banner-final-text figcaption{
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 24px;
|
||||||
|
text-align: center;
|
||||||
|
color: #000000;
|
||||||
|
margin-bottom: 50px;
|
||||||
|
max-width: 550px;
|
||||||
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 1025px){
|
||||||
|
.background-main figure img{
|
||||||
|
height: 100%;
|
||||||
|
min-height: 598px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.first-section{
|
||||||
|
padding: 0 28px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.first-section h2{
|
||||||
|
font-size: 20px;
|
||||||
|
line-height: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.first-section h1{
|
||||||
|
font-size: 28px;
|
||||||
|
line-height: 34px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.first-section figure img{
|
||||||
|
width: 100%;
|
||||||
|
max-width: 239px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.first-section figcaption{
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.first-content-card{
|
||||||
|
margin-top: 91px;
|
||||||
|
width: 100%;
|
||||||
|
max-width: 1092px;
|
||||||
|
height: 966px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content-card-container{
|
||||||
|
width: 100%;
|
||||||
|
height: 894px;
|
||||||
|
grid-template-columns: repeat(1, 1fr);
|
||||||
|
justify-content: space-around;
|
||||||
|
margin: 0 23px;
|
||||||
|
gap: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cards-macbook{
|
||||||
|
grid-gap: 10px;
|
||||||
|
justify-items: center;
|
||||||
|
align-items: center;
|
||||||
|
width: 100%;
|
||||||
|
height: 574px;
|
||||||
|
margin: auto;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cards-macbook-container{
|
||||||
|
display: grid;
|
||||||
|
grid-auto-flow: column;
|
||||||
|
grid-template-areas:
|
||||||
|
"A B"
|
||||||
|
"C C";
|
||||||
|
column-gap: 14px;
|
||||||
|
row-gap: 24px;
|
||||||
|
justify-items: center;
|
||||||
|
align-items: center;
|
||||||
|
margin: auto;
|
||||||
|
position: relative;
|
||||||
|
padding: 0 23px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.first-card-macbook{
|
||||||
|
grid-area: A;
|
||||||
|
max-width: 177px;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.first-card-macbook figure img{
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.second-card-macbook {
|
||||||
|
grid-area: B;
|
||||||
|
max-width: 177px;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.second-card-macbook figure img{
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.third-card-macbook{
|
||||||
|
grid-area: C;
|
||||||
|
max-width: 368px;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.third-card-macbook figure img{
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bottom-cards{
|
||||||
|
margin-top: 80px;
|
||||||
|
width: 100%;
|
||||||
|
max-height: 1376px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bottom-cards-container{
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
grid-template-columns: repeat(1, 1fr);
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
flex-direction: column;
|
||||||
|
padding: 0 23px;
|
||||||
|
gap: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.first-bottom-card figure img,.second-bottom-card figure img,.three-bottom-card figure img,.four-bottom-card figure img{
|
||||||
|
margin-bottom: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.banner-final {
|
||||||
|
width: 100%;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.banner-final figure{
|
||||||
|
max-width: 414px;
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
flex-direction: column-reverse;
|
||||||
|
position: relative;
|
||||||
|
margin: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.banner-final figure img{
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
margin-bottom: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.banner-final-text{
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.banner-final figure .banner-final-text h3{
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 24px;
|
||||||
|
line-height: 29px;
|
||||||
|
margin-bottom: 9px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.banner-final .banner-final-text figcaption{
|
||||||
|
margin-bottom: 87px;
|
||||||
|
max-width: 350px;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 281px){
|
||||||
|
.cards-macbook {
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cards-macbook-container{
|
||||||
|
height: auto;
|
||||||
|
top: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.first-bottom-card figure,.second-bottom-card figure,.three-bottom-card figure, .four-bottom-card figure{
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bottom-cards{
|
||||||
|
max-height: 1640px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.banner-final .banner-final-text figcaption{
|
||||||
|
margin-bottom: 87px;
|
||||||
|
padding: 0 32px 0 32px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (min-width: 2500px){
|
||||||
|
.background-main figure img {
|
||||||
|
height: 70%;
|
||||||
|
max-height: 700px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.first-section h2{
|
||||||
|
font-size: 64px;
|
||||||
|
line-height: 78px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.first-section h1{
|
||||||
|
font-size: 96px;
|
||||||
|
line-height: 116px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.first-section figcaption{
|
||||||
|
font-size: 32px;
|
||||||
|
line-height: 48px;
|
||||||
|
max-width: 55%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.first-section figure img{
|
||||||
|
width: 16%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.first-content-card {
|
||||||
|
margin-top: 358px;
|
||||||
|
margin-bottom: 124px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content-card-container{
|
||||||
|
width: 100%;
|
||||||
|
max-width: 60%;
|
||||||
|
height: 574px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 42px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.first-card figure,.second-card figure,.three-card figure{
|
||||||
|
width: 650px;
|
||||||
|
height: 574px;
|
||||||
|
max-width: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.first-card figure img,.second-card figure img,.three-card figure img{
|
||||||
|
width: 100%;
|
||||||
|
max-width: 25%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.first-card figcaption,.second-card figcaption,.three-card figcaption{
|
||||||
|
max-width: 90%;
|
||||||
|
font-size: 32px;
|
||||||
|
line-height: 48px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cards-macbook{
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cards-macbook-container{
|
||||||
|
max-width: none;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
top: 124px;
|
||||||
|
padding: 0 72px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.first-card-macbook figure img,.second-card-macbook figure img,.third-card-macbook figure img{
|
||||||
|
max-width: 754px;
|
||||||
|
height: 706px;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.bottom-cards{
|
||||||
|
margin-top: 382px;
|
||||||
|
margin-bottom: 216px;
|
||||||
|
max-width: none;
|
||||||
|
width: 100%;
|
||||||
|
height: 664px;
|
||||||
|
padding: 0 72px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bottom-cards-container{
|
||||||
|
max-width: none;
|
||||||
|
width: 100%;
|
||||||
|
height: 664px;
|
||||||
|
gap: 32px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
position: relative;
|
||||||
|
margin: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.first-bottom-card ,.second-bottom-card ,.three-bottom-card ,.four-bottom-card{
|
||||||
|
width: 100%;
|
||||||
|
max-width: 840px;
|
||||||
|
height: 664px;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.first-bottom-card figure,.second-bottom-card figure,.three-bottom-card figure,.four-bottom-card figure{
|
||||||
|
width: 100%;
|
||||||
|
max-width: 840px;
|
||||||
|
height: 664px;
|
||||||
|
padding: 27px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.first-bottom-card figure img,.second-bottom-card figure img,.three-bottom-card figure img,.four-bottom-card figure img{
|
||||||
|
width: 100%;
|
||||||
|
max-width: 25%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.first-bottom-card figcaption,.second-bottom-card figcaption,.three-bottom-card figcaption,.four-bottom-card figcaption{
|
||||||
|
max-width: 734px;
|
||||||
|
width: 100%;
|
||||||
|
font-size: 32px;
|
||||||
|
line-height: 48px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.banner-final{
|
||||||
|
padding: 144px 14% 464px 14%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.banner-final figure{
|
||||||
|
max-width: 2720px;
|
||||||
|
height: 484px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.banner-final figure img{
|
||||||
|
width: 100%;
|
||||||
|
height: 484px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.banner-final figure .banner-final-text h3{
|
||||||
|
font-size: 64px;
|
||||||
|
line-height: 78px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.banner-final .banner-final-text figcaption{
|
||||||
|
font-size: 32px;
|
||||||
|
line-height: 48px;
|
||||||
|
margin-bottom: 100px;
|
||||||
|
max-width: 1100px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (min-width: 3500px){
|
||||||
|
.background-main figure img{
|
||||||
|
height: 100%;
|
||||||
|
max-height: 1400px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.first-card-macbook figure img, .second-card-macbook figure img, .third-card-macbook figure img{
|
||||||
|
max-width: 1132px;
|
||||||
|
height: 1060px;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
186
styles/reset.css
Normal file
186
styles/reset.css
Normal file
@ -0,0 +1,186 @@
|
|||||||
|
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
font-family: 'Inter', sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
line-height: 1.15;
|
||||||
|
-webkit-text-size-adjust: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
bottom: 0;
|
||||||
|
width: auto;
|
||||||
|
height: auto;
|
||||||
|
background: #E5E5E5;
|
||||||
|
}
|
||||||
|
|
||||||
|
main {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
hr {
|
||||||
|
box-sizing: content-box;
|
||||||
|
height: 0;
|
||||||
|
overflow: visible;
|
||||||
|
}
|
||||||
|
|
||||||
|
pre {
|
||||||
|
font-family: monospace, monospace;
|
||||||
|
font-size: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
abbr[title] {
|
||||||
|
border-bottom: none;
|
||||||
|
text-decoration: underline;
|
||||||
|
text-decoration: underline dotted;
|
||||||
|
}
|
||||||
|
|
||||||
|
b,
|
||||||
|
strong {
|
||||||
|
font-weight: bolder;
|
||||||
|
}
|
||||||
|
|
||||||
|
code,
|
||||||
|
kbd,
|
||||||
|
samp {
|
||||||
|
font-family: monospace, monospace;
|
||||||
|
font-size: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
small {
|
||||||
|
font-size: 80%;
|
||||||
|
}
|
||||||
|
|
||||||
|
sub,
|
||||||
|
sup {
|
||||||
|
font-size: 75%;
|
||||||
|
line-height: 0;
|
||||||
|
position: relative;
|
||||||
|
vertical-align: baseline;
|
||||||
|
}
|
||||||
|
|
||||||
|
sub {
|
||||||
|
bottom: -0.25em;
|
||||||
|
}
|
||||||
|
|
||||||
|
sup {
|
||||||
|
top: -0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
border-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
button,
|
||||||
|
input,
|
||||||
|
optgroup,
|
||||||
|
select,
|
||||||
|
textarea {
|
||||||
|
font-family: inherit;
|
||||||
|
font-size: 100%;
|
||||||
|
line-height: 1.15;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
button,
|
||||||
|
input {
|
||||||
|
overflow: visible;
|
||||||
|
}
|
||||||
|
|
||||||
|
button,
|
||||||
|
select {
|
||||||
|
text-transform: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
button,
|
||||||
|
[type="button"],
|
||||||
|
[type="reset"],
|
||||||
|
[type="submit"] {
|
||||||
|
-webkit-appearance: button;
|
||||||
|
}
|
||||||
|
|
||||||
|
button::-moz-focus-inner,
|
||||||
|
[type="button"]::-moz-focus-inner,
|
||||||
|
[type="reset"]::-moz-focus-inner,
|
||||||
|
[type="submit"]::-moz-focus-inner {
|
||||||
|
border-style: none;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
button:-moz-focusring,
|
||||||
|
[type="button"]:-moz-focusring,
|
||||||
|
[type="reset"]:-moz-focusring,
|
||||||
|
[type="submit"]:-moz-focusring {
|
||||||
|
outline: 1px dotted ButtonText;
|
||||||
|
}
|
||||||
|
|
||||||
|
fieldset {
|
||||||
|
padding: 0.35em 0.75em 0.625em;
|
||||||
|
}
|
||||||
|
|
||||||
|
legend {
|
||||||
|
box-sizing: border-box;
|
||||||
|
color: inherit;
|
||||||
|
max-width: 100%;
|
||||||
|
padding: 0;
|
||||||
|
white-space: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
progress {
|
||||||
|
vertical-align: baseline;
|
||||||
|
}
|
||||||
|
|
||||||
|
textarea {
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
[type="checkbox"],
|
||||||
|
[type="radio"] {
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
[type="number"]::-webkit-inner-spin-button,
|
||||||
|
[type="number"]::-webkit-outer-spin-button {
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
[type="search"] {
|
||||||
|
-webkit-appearance: textfield;
|
||||||
|
outline-offset: -2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
[type="search"]::-webkit-search-decoration {
|
||||||
|
-webkit-appearance: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-file-upload-button {
|
||||||
|
-webkit-appearance: button;
|
||||||
|
font: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
details {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
summary {
|
||||||
|
display: list-item;
|
||||||
|
}
|
||||||
|
|
||||||
|
template {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
[hidden] {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user