guilhermerosa/challenge-landing-page-guilherme-rosa
1
0
Fork 0
forked from M3-Academy/challenge-landing-page
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Ajuste de responsividade

Browse Source
This commit is contained in:
Guilherme Carvalho da Rosa 2022-10-13 20:20:06 -03:00
parent 7342bc217f
commit dd7df671b8
1 changed files with 115 additions and 86 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

201
assets/style/main.css
View File

@ -78,7 +78,7 @@ body {
display: flex;
flex-direction: column;
align-items: center;
padding: 35px 26px 27px;
padding: 8.45% 7.97% 15.70%;
box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23);
}
@ -100,6 +100,7 @@ body {
gap: 40px;
position: relative;
bottom: -62px;
margin: 0 3.75%;
}
.middle-cards-2 {
@ -128,33 +129,6 @@ body {
}
/*.bottom-cards {
display: grid;
grid-template-columns: repeat(4, 1fr);
/: 0 72px 108px;
gap: 16px;
justify-content: center;
}
.bottom-card {
display: flex;
flex-direction: column;
align-items: center;
padding: 35px 32px 65px;
box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.15);
}
.bottom-card-image {
display: block;
margin-bottom: 14px;
}
.bottom-card-description {
line-height: 24px;
text-align: center;
max-width: 368px;
}*/
.bottom-cards {
display: grid;
grid-template-columns: repeat(4, max-content);
@ -167,7 +141,7 @@ body {
display: flex;
flex-direction: column;
align-items: center;
padding: 35px 26px 27px;
padding: 8.45% 7.97% 15.70%;
box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23);
}
@ -177,7 +151,7 @@ body {
}
.bottom-card-description {
max-width: 299px;
max-width: 367px;
line-height: 24px;
text-align: center;
}
@ -241,34 +215,33 @@ body {
}
@media screen and (max-width: 413px) {
.top-card-description, .bottom-card-description {
max-width: 280px;
}
.top-card, .bottom-card {
padding: auto;
.top-card {
padding: 8.45% 7.97% 15.70%;
}
.bottom-card {
padding: 8.45% 7.97% 15.70%;
}
}
@media screen and (max-width: 414px) {
.main-banner-desktop, .bottom-infocard-image-desktop{
display: none;
}
}
@media screen and (min-width: 415px) {
.main-banner-mobile, .bottom-infocard-image-mobile {
display: none;
}
}
@media screen and (min-width: 750px){
@media screen and (min-width: 851px) {
.top-infocard-image {
width: 16%;
}
}
@media screen and (min-width: 750px) and (max-width: 850px){
.top-infocard-image {
width: 30%;
}
}
@media screen and (max-width: 525px) {
.top-infocard-image {
@ -283,7 +256,7 @@ body {
}
@media screen and (min-width: 526px) and (max-width: 1499px) {
@media screen and (min-width: 526px) and (max-width: 1580px) {
.bottom-cards {
@ -310,60 +283,116 @@ body {
.middle-cards-2 {
max-width: 566px;
flex-direction: row-reverse;
gap: 14px;
}
.middle-cards {
margin-bottom: 112px;
}
.main-banner-desktop, .bottom-infocard-image-desktop {
display: none;
}
.bottom-infocard {
display: flex;
flex-direction: column-reverse;
margin-bottom: 0;
}
.bottom-cards {
grid-template-columns: repeat(1, max-content);
}
.bottom-infocard-image{
width: 100%;
}
}
@media screen and (max-width: 1024px) {
.top-infocard-text {
margin: 73px 29px 65px;
@media screen and (min-width: 769px) {
.main-banner-mobile, .bottom-infocard-image-mobile {
display: none;
}
}
.top-infocard-title {
font-size: 28px;
line-height: 34px;
text-align: center;
margin: 0 0 14px;
@media screen and (max-width: 1024px) {
.top-infocard {
margin-bottom: 21.88%;
}
.top-infocard-text {
margin: 73px 29px 65px;
}
.top-infocard-title {
font-size: 28px;
line-height: 34px;
text-align: center;
margin: 0 0 14px;
}
.top-infocard-subtitle {
font-size: 20px;
line-height: 24px;
text-align: center;
}
.top-infocard-description {
text-align: center;
}
.bottom-infocard-text {
padding: 50px 32px 87px;
}
.bottom-infocard-title {
font-weight: 600;
font-size: 24px;
line-height: 29px;
text-align: center;
margin-bottom: 9px;
}
.footer-text {
text-align: center;
}
}
.top-infocard-subtitle {
font-size: 20px;
line-height: 24px;
text-align: center;
}
@media screen and (min-width: 2500px) {
.main-banner-mobile, .bottom-infocard-image-mobile {
display: none;
}
.top-infocard-description {
text-align: center;
}
.top-infocard-title {
font-size: 96px;
line-height: 116px;
}
.top-infocard-subtitle, .bottom-infocard-title {
font-size: 64px;
line-height: 78px;
}
.top-infocard-description, .bottom-infocard-description {
font-size: 32px;
line-height: 48px;
}
.bottom-infocard {
display: flex;
flex-direction: column-reverse;
margin-bottom: 0;
}
.top-card-description, .bottom-card-description {
font-size: 32px;
}
.bottom-infocard-image{
width: 100%;
}
.footer-text {
font-size: 20px;
line-height: 24px;
}
.bottom-infocard-text {
padding: 50px 32px 87px;
.top-card-description, .bottom-card-description {
line-height: 48px;
}
}
.bottom-infocard-title {
font-weight: 600;
font-size: 24px;
line-height: 29px;
text-align: center;
margin-bottom: 9px;
}
.footer-text {
text-align: center;
}
}