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

adicionando adaptação para tablet

Browse Source
This commit is contained in:
Ana Carolina Duarte Cavalcante 2022-10-08 07:29:38 -03:00
parent f2fc6f9182
commit 353d227f27
2 changed files with 41 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
css/layout/header.css
View File

@ -12,3 +12,4 @@ header a img {
display: block; display: block;
} }

61
css/layout/main.css
View File

@ -15,18 +15,20 @@
} }
.three-computers { .three-computers {
width: 315px; width: 100%;
height: 315px; max-width: 315px;
margin-left: 124px; margin-left: 124px;
} }
.first-content-text { .first-content-text {
width: 100%;
max-width: 766px; max-width: 766px;
} }
.content-card-container { .content-card-container {
max-width: 1092px; max-width: 1092px;
width: 100%;
height: 435px; height: 435px;
display: flex; display: flex;
justify-content: space-around; justify-content: space-around;
@ -43,15 +45,18 @@
} }
.first-card, .second-card, .three-card { .first-card, .second-card, .three-card {
width: 350.33px; width: 100%;
height: 287.95px; max-width: 350.33px;
height: 100%;
max-height: 287.95px;
/* padding: 26px; */
background: #FFFFFF; background: #FFFFFF;
box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23); box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23);
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
flex-direction: column; flex-direction: column;
margin: auto; margin: 0px auto;
} }
.first-card p, .second-card p, .three-card p { .first-card p, .second-card p, .three-card p {
@ -91,9 +96,6 @@
height: 332px; height: 332px;
background: #FFFFFF; background: #FFFFFF;
box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.15); box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.15);
}
.grid-one, .grid-two, .grid-three, .grid-four {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
@ -114,7 +116,9 @@
align-items: center; align-items: center;
position: relative; position: relative;
max-width: 1186px; max-width: 1186px;
height: 596px; width: 100%;
height: 100%;
max-height: 596px;
margin: auto; margin: auto;
top: 242px; top: 242px;
} }
@ -134,15 +138,20 @@
.content-text-final p { .content-text-final p {
max-width: 550px; max-width: 550px;
width: 100%;
height: 120px; height: 120px;
line-height: 24px; line-height: 24px;
} }
@media screen and (max-width: 415px) { @media screen and (max-width: 1024px) {
.main_banner_desktop { .main_banner_desktop {
display: none; display: none;
} }
.main_banner_mobile {
width: 100%;
}
.first-content-information { .first-content-information {
flex-direction: column; flex-direction: column;
margin-top: 84px; margin-top: 84px;
@ -152,8 +161,8 @@
} }
.three-computers { .three-computers {
width: 239px; width: 100%;
height: 239px; max-width: 239px;
margin-top: 137px; margin-top: 137px;
margin-left: 0; margin-left: 0;
position: relative; position: relative;
@ -165,7 +174,8 @@
} }
.first-content-card { .first-content-card {
width: auto; width: 100%;
max-width: 1092px;
height: 966px; height: 966px;
display: flex; display: flex;
justify-content: center; justify-content: center;
@ -173,7 +183,7 @@
} }
.content-card-container { .content-card-container {
width: auto; width: 100%;
height: 894px; height: 894px;
flex-direction: column; flex-direction: column;
justify-content: space-around; justify-content: space-around;
@ -187,24 +197,32 @@
.grid-container-content { .grid-container-content {
grid-template-columns: repeat(1, 1fr); grid-template-columns: repeat(1, 1fr);
gap: 20px; gap: 20px;
margin: 0 23px;
} }
.grid-one, .grid-two, .grid-three, .grid-four { .grid-one, .grid-two, .grid-three, .grid-four {
width: 368px; width: 100%;
height: 332px; max-width: 368px;
height: 100%;
max-height: 332px;
padding: 32px;
} }
.grid-one p, .grid-two p, .grid-three p, .grid-four p { .grid-one p, .grid-two p, .grid-three p, .grid-four p {
padding: 0 33px;
font-weight: 400; font-weight: 400;
font-size: 14px; font-size: 14px;
line-height: 24px; line-height: 24px;
text-align: center; text-align: center;
color: #000000; color: #000000;
width: 100%;
max-width: 367px;
height: 100%;
margin: 14px auto;
} }
.grid-container { .grid-container {
width: 100%;
height: 1394px; height: 1394px;
} }
@ -213,8 +231,8 @@
} }
.content-text-final img { .content-text-final img {
width: 414px; width: 100%;
height: 414px; max-width: 414px;
margin-right: 0; margin-right: 0;
margin-bottom: 51px; margin-bottom: 51px;
} }
@ -227,7 +245,8 @@
} }
.content-text-final p { .content-text-final p {
width: 350px; width: 100%;
max-width: 350px;
height: 192px; height: 192px;
font-weight: 400; font-weight: 400;
font-size: 16px; font-size: 16px;
@ -236,7 +255,7 @@
} }
@media screen and (min-width: 415px) { @media screen and (min-width: 1024px) {
.main_banner_mobile { .main_banner_mobile {
display: none; display: none;
} }