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 meio desktop e mobile

Browse Source
This commit is contained in:
Carlos cristovao guerreiro scantbelruy 2022-10-11 19:00:16 -04:00
parent 49a862ea0f
commit 762144022f
4 changed files with 46 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
assets/imagens/Rectangle 13.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 234 KiB

BIN
assets/imagens/Rectangle 16.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 215 KiB

BIN
assets/imagens/Rectangle 17.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 318 KiB

48
assets/styles/main.css
View File

@ -62,6 +62,7 @@ body {
}
.top-card {
width: 100%;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px ;
@ -92,6 +93,45 @@ body {
text-align: center;
}
.banner-quite {
width: 1920PX;
height: 530PX;
background: #E0E0E0;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px ;
padding: 62PX 72PX 62PX;
}
.imagem-quite {
width: 566px;
max-height: 530px;
display: flex;
flex-direction: column;
align-items: center;
padding: 72px 39px 62px 0%;
}
.banner-quite-imagem {
display: block;
margin-bottom: 26px;
width: 400PX;
height: 400PX;
}
@media screen and (maw-width: 1400px) {
.imagem-quite {
flex-direction: column;
}
}
@media screen and (max-width: 566px) {
.banner-quite {
grid-template-columns: 1fr;
padding: 36px 26px;
}
}
@media screen and (max-width: 768px) {
.top-card {
grid-template-columns: 1fr;
@ -100,26 +140,29 @@ body {
}
@media (max-width: 1400px) {
@media ( max-width: 1400px) {
.main-banner-desktop{
display: none;
}
}
@media screen (max-width: 1400px) {
@media screen and (max-width: 1200px) {
.top-infocard {
flex-direction: column;
}
.infocard text {
margin-right: 0;
}
.text-primario{
font-size: 20px;
}
.text-secundario{
margin-bottom: 24px;
font-size: 28px;
}
.text-paragraph {
width: 100%;
font-size: 20px;
@ -129,6 +172,7 @@ body {
max-width: 315px;
}
}
@media (min-width: 1399px) {
.main-banner-mobile {
display: none;