Gabriel_Ferraz_Nogueira/practice-time-landing-page-gabriel-ferraz
1
0
Fork 0
forked from M3-Academy/practice-time-landing-page
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

feat(home): cards do topo desktop e mobile

Browse Source
This commit is contained in:
Gabriel Ferraz Nogueira 2022-10-07 20:28:10 -03:00
parent 359decd520
commit 46c3ce54ab
6 changed files with 86 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

0
assets/images/Logo M3 [branco] (4) 1.svg → assets/images/Logo M3.svg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 37 KiB

After

Width:  |  Height:  |  Size: 37 KiB

13
assets/images/top-card-image-01.svg Normal file
View File

@ -0,0 +1,13 @@
<svg width="104" height="103" viewBox="0 0 104 103" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_2_145)">
<path d="M73.8313 54.6077H96.5312V75.8331H73.8313V54.6077Z" fill="#00C8FF"/>
<path d="M7.79743 54.6077H30.4974V75.8331H7.79743V54.6077Z" fill="#00C8FF"/>
<path d="M41.5493 54.6077H62.7793V89.3419H41.5493V54.6077Z" fill="#00C8FF"/>
<path d="M95.8333 11.35H8.49535C4.30542 11.35 0.896729 14.7589 0.896729 18.9486V33.5697C0.896729 37.2557 2.85952 40.4918 5.79479 42.288V90.0041C5.79479 91.1102 6.69137 92.0067 7.79743 92.0067H96.5312C97.6373 92.0067 98.5339 91.1102 98.5339 90.0041V42.288C101.469 40.4918 103.432 37.2557 103.432 33.5697V18.9486C103.432 14.7589 100.023 11.35 95.8333 11.35ZM83.005 33.5697C83.005 36.9928 80.2201 39.7777 76.7968 39.7777C73.3735 39.7777 70.5886 36.9928 70.5886 33.5697V15.3553H83.005V33.5697ZM66.5833 33.5697C66.5833 36.9928 63.7985 39.7777 60.3752 39.7777C56.9518 39.7777 54.167 36.9928 54.167 33.5697V15.3553H66.5833V33.5697ZM50.1617 33.5697C50.1617 36.9928 47.3768 39.7777 43.9535 39.7777C40.5302 39.7777 37.7453 36.9928 37.7453 33.5697V15.3553H50.1617V33.5697ZM33.74 33.5697C33.74 36.9928 30.9552 39.7777 27.5319 39.7777C24.1085 39.7777 21.3237 36.9928 21.3237 33.5697V15.3553H33.74V33.5697ZM4.90201 18.9486C4.90201 16.9672 6.51414 15.3553 8.49535 15.3553H17.3184V33.5697C17.3184 36.9928 14.5335 39.7777 11.1102 39.7777C7.68688 39.7777 4.90201 36.9928 4.90201 33.5697V18.9486ZM94.5286 88.0015H9.80007V43.6994C10.229 43.7545 10.6664 43.7831 11.1102 43.7831C14.4714 43.7831 17.4588 42.151 19.321 39.6377C21.1833 42.151 24.1706 43.7831 27.5319 43.7831C30.8931 43.7831 33.8804 42.151 35.7427 39.6377C37.6049 42.151 40.5923 43.7831 43.9535 43.7831C47.3147 43.7831 50.3021 42.151 52.1643 39.6377C54.0266 42.151 57.0139 43.7831 60.3752 43.7831C63.7364 43.7831 66.7237 42.151 68.586 39.6377C70.4482 42.151 73.4356 43.7831 76.7968 43.7831C80.1581 43.7831 83.1454 42.151 85.0076 39.6377C86.8699 42.151 89.8572 43.7831 93.2185 43.7831C93.6623 43.7831 94.0996 43.7547 94.5286 43.6994V88.0015ZM99.4267 33.5697C99.4267 36.9928 96.6418 39.7777 93.2185 39.7777C89.7952 39.7777 87.0103 36.9928 87.0103 33.5697V15.3553H95.8333C97.8147 15.3553 99.4267 16.9672 99.4267 18.9486V33.5697Z" fill="black"/>
</g>
<defs>
<clipPath id="clip0_2_145">
<rect width="102.535" height="102.535" fill="white" transform="translate(0.896729 0.410767)"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.4 KiB

12
assets/images/top-card-image-02.svg Normal file
View File

@ -0,0 +1,12 @@
<svg width="102" height="103" viewBox="0 0 102 103" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_2_133)">
<path d="M63.7912 95.3056H18.2303V26.7631H28.9V37.1243C28.9 38.2353 29.7919 39.136 30.8922 39.136C31.9923 39.136 32.8844 38.2353 32.8844 37.1243V26.7631H60.2063V37.1243C60.2063 38.2353 61.0984 39.136 62.1985 39.136C63.2985 39.136 64.1906 38.2353 64.1906 37.1243V26.7631H74.5273V48.0779H78.5117V24.7514C78.5117 23.6403 77.6196 22.7397 76.5195 22.7397H64.1906V17.7287C64.1906 7.95313 56.2751 0 46.5454 0C44.3154 0 42.1806 0.417834 40.2145 1.17967C38.2484 0.417834 36.1135 0 33.8835 0C24.1537 0 16.2381 7.95313 16.2381 17.7287V22.7395H3.90924C2.80915 22.7395 1.91705 23.6401 1.91705 24.7512V89.7613C1.91705 95.0368 6.17416 99.3288 11.4068 99.3288H69.8044C67.8365 98.2564 65.7517 96.925 63.7912 95.3056ZM46.5454 4.02344C54.0781 4.02344 60.2063 10.1717 60.2063 17.7287V22.7395H51.5287V17.7287C51.5287 12.2528 49.045 7.34901 45.1501 4.09425C45.6089 4.04758 46.0745 4.02344 46.5454 4.02344ZM40.2145 5.58614C44.5682 7.8801 47.5445 12.4624 47.5445 17.7289V22.7397H32.8844V17.7287C32.8844 12.4622 35.8607 7.8801 40.2145 5.58614ZM20.2225 17.7287C20.2225 10.1717 26.3508 4.02344 33.8835 4.02344C34.3544 4.02344 34.8198 4.04738 35.2786 4.09445C31.3837 7.34901 28.8998 12.253 28.8998 17.7289V22.7397H20.2223V17.7287H20.2225ZM14.2459 95.3056H11.4068C8.37114 95.3056 5.90143 92.8185 5.90143 89.7615V26.7631H14.2459V95.3056Z" fill="black"/>
<path d="M93.7992 54.7374C87.7766 54.7374 82.582 51.191 80.165 46.0659H73.082C70.6651 51.1908 65.4705 54.7374 59.4479 54.7374C57.2051 54.7374 55.0772 54.2452 53.1641 53.3634V78.4196C53.1641 96.7462 76.6235 103 76.6235 103C76.6235 103 100.083 96.7462 100.083 78.4196V53.3634C98.1698 54.2452 96.0418 54.7374 93.7992 54.7374Z" fill="#00C8FF"/>
<path d="M75.8532 81.6053C75.328 81.6053 74.8228 81.3957 74.4487 81.0201L70.1193 76.673C69.3389 75.8894 69.3353 74.6158 70.1113 73.828C70.8868 73.04 72.1483 73.0364 72.9286 73.82L75.7249 76.6275L82.99 67.9301C83.6996 67.0807 84.9563 66.9733 85.7972 67.6895C86.6383 68.4058 86.7451 69.675 86.0354 70.5244L77.3762 80.891C77.0172 81.3207 76.4968 81.579 75.9406 81.6035C75.9113 81.6047 75.8825 81.6053 75.8532 81.6053Z" fill="white"/>
</g>
<defs>
<clipPath id="clip0_2_133">
<rect width="102" height="103" fill="white"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.3 KiB

6
assets/images/top-card-image-03.svg Normal file
View 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.9719C81.8615 49.9719 90.3174 41.4332 90.3174 30.9C90.3174 20.3669 81.8615 11.8281 71.4307 11.8281C60.9998 11.8281 52.5439 20.3669 52.5439 30.9C52.5439 41.4332 60.9998 49.9719 71.4307 49.9719Z" fill="#00C8FF"/>
<path d="M71.4307 60.8352C87.7768 60.8352 101.075 47.4064 101.075 30.9003C101.075 14.3939 87.7768 0.965088 71.4307 0.965088C55.0846 0.965088 41.7861 14.3939 41.7861 30.9003C41.7861 47.4064 55.0846 60.8352 71.4307 60.8352ZM71.4307 4.98853C85.5796 4.98853 97.0909 16.6124 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.6124 57.2816 4.98853 71.4307 4.98853Z" fill="black"/>
<path d="M68.085 35.9238C67.3947 35.0585 66.1408 34.9223 65.2837 35.6192C64.4269 36.3163 64.292 37.5826 64.9821 38.4479C66.0804 39.8245 67.6548 40.6067 69.2231 40.9814C69.3066 42.0149 70.1636 42.8272 71.2085 42.8272C72.204 42.8272 73.029 42.0899 73.177 41.1265C75.9828 40.6207 77.9517 38.7343 78.2746 36.1662C78.6499 33.183 76.7336 30.3221 73.6147 29.2089C73.4726 29.1582 73.3348 29.1087 73.2007 29.0602V25.1844C73.3666 25.2912 73.4904 25.4079 73.5689 25.5206C74.2004 26.4301 75.4429 26.6503 76.344 26.0118C77.2446 25.3737 77.4624 24.119 76.8303 23.2095C76.1057 22.1664 74.8403 21.2815 73.1995 20.9169C73.164 19.8373 72.2863 18.973 71.2085 18.973C70.1082 18.973 69.2163 19.8737 69.2163 20.9847V21.0521C69.094 21.0845 68.9709 21.1193 68.847 21.1571C66.7556 21.7935 65.1774 23.8388 65.009 26.1313C64.8417 28.4096 66.0358 30.3857 68.2031 31.4177C68.4394 31.5304 68.7846 31.6776 69.2161 31.8512V36.7554C68.7593 36.5478 68.3625 36.2716 68.085 35.9238ZM74.3219 35.6592C74.2478 36.2485 73.8527 36.6985 73.2007 36.9652V33.4707C74.0759 34.0915 74.4086 34.9712 74.3219 35.6592ZM68.9828 26.4289C69.0018 26.1693 69.087 25.9122 69.2165 25.6877V27.2609C69.0362 27.0249 68.9591 26.7489 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>
Side by Side

After

Width:  |  Height:  |  Size: 3.7 KiB

39
assets/styles/main.css
View File

@ -48,11 +48,45 @@ body{
font-weight: 400;
font-size: 16px;
}
.top-cards{
display: grid;
grid-template-columns: repeat(3, max-content);
gap: 20px;
justify-content: center;
padding: 74px 0;
background: #F0F0F0;
}
.top-card{
display: flex;
flex-direction: column;
align-items: center;
padding: 26px 26px 36px;
background: #FFF;
box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23);
}
.top-card-image{
display: block;
margin-bottom: 26px;
}
.top-card-description{
max-width: 300px;
font-size: 16px;
line-height: 24px;
text-align: center;
}
@media screen and (max-width: 414px) {
.main-banner-desktop{
display: none;
}
}
@media screen and (max-width: 768px) {
.top-cards{
grid-template-columns: 1fr;
padding: 36px 26px;
}
}
@media screen and (max-width: 992px) {
.top-infocard{
flex-direction: column;
@ -84,6 +118,11 @@ body{
margin-right: 70px;
}
}
@media screen and (min-width: 769px) and (max-width: 1200px) {
.top-cards{
grid-template-columns: repeat(2, max-content)
}
}
@media screen and (min-width: 415px) {
.main-banner-mobile{

17
index.html
View File

@ -20,7 +20,7 @@
<body>
<header class="page-header">
<a href="./">
<img class="header-logo" src="./assets/images/Logo M3 [branco] (4) 1.svg" alt="Logo M3 "/>
<img class="header-logo" src="./assets/images/Logo M3.svg" alt="Logo M3 "/>
</a>
</header>
@ -44,6 +44,21 @@
<img class="top-infocard-image" src="./assets/images/Top-infocard-image.png" alt="Banner do Infocard do Topo"/>
</section>
<section class="top-cards">
<div class="top-card">
<img class="top-card-image" src="./assets/images/top-card-image-01.svg" alt="Primeira card do topo"/>
<p class="top-card-description"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </p>
</div>
<div class="top-card">
<img class="top-card-image" src="./assets/images/top-card-image-02.svg" alt="Segunda card do topo"/>
<p class="top-card-description"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </p>
</div>
<div class="top-card">
<img class="top-card-image" src="./assets/images/top-card-image-03.svg" alt="Terceira card do topo"/>
<p class="top-card-description"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </p>
</div>
</section>
</main>
</body>
</html>