Carlos_cristovao/challenge-landing-page-carlos-cristovao
1
1
Fork 0
forked from M3-Academy/challenge-landing-page
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Adiciona os card do topo desktop e mobile

Browse Source
This commit is contained in:
Carlos cristovao guerreiro scantbelruy 2022-10-11 17:16:26 -04:00
parent 34d5b6e86f
commit 49a862ea0f
4 changed files with 42 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
assets/imagens/coin 1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.0 KiB

BIN
assets/imagens/shop 1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 959 B

BIN
assets/imagens/shopping-bag (1) 1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.0 KiB

53
assets/styles/main.css
View File

@ -61,13 +61,52 @@ body {
line-height: 24px;
}
@media and (max-width: 414px) {
.top-card {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px ;
padding: 74px 0;
background: #FFFFFF;
}
.top-cards {
display: flex;
flex-direction: column;
align-items: center;
max-width: 350px;
padding: 26px 26px 34px;
background: #FFFFFF;
box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.15);
}
.top-card-imagem {
display: block;
margin-bottom: 26px;
}
.top-texto {
max-width: 300px;
font-weight: 400;
font-size: 16px;
line-height: 24px;
text-align: center;
}
@media screen and (max-width: 768px) {
.top-card {
grid-template-columns: 1fr;
padding: 36px 26px;
}
}
@media (max-width: 1400px) {
.main-banner-desktop{
display: none;
}
}
@media screen and (max-width: 1400px) {
@media screen (max-width: 1400px) {
.top-infocard {
flex-direction: column;
}
@ -90,15 +129,7 @@ body {
max-width: 315px;
}
}
@media screen and (min-width: 992px) and (max-width:1400px) {
.infocard text {
max-width: 542px;
margin-right: 70px;
}
}
@media and (min-width: 415px) {
@media (min-width: 1399px) {
.main-banner-mobile {
display: none;
}