finaliza o mobile e corrige erros de medidas

This commit is contained in:
Yan Pecanha Garriga 2022-10-13 02:32:39 -03:00
parent e23b24462d
commit 0605ff5dff
2 changed files with 53 additions and 51 deletions

View File

@ -24,7 +24,7 @@ body {
.top-infocard { .top-infocard {
display: flex; display: flex;
justify-content: center; justify-content: center;
padding: 3.80vw 0 0; padding: 4% 0 0;
} }
.top-infocard-text { .top-infocard-text {
@ -63,8 +63,8 @@ body {
} }
.top-infocard-image { .top-infocard-image {
padding: 3.80vw 0 4.63vw 0; padding: 4% 0 5% 0;
width: 16.4vw; width: 16.5vw;
align-items: center; align-items: center;
} }
@ -76,7 +76,7 @@ body {
.top-cards { .top-cards {
background: #FFFFFF; background: #FFFFFF;
grid-template-columns: repeat(3, max-content); grid-template-columns: repeat(3, max-content);
padding: 3.125vw 0 4.166vw; padding: 3% 0 4%;
display: grid; display: grid;
gap: 1.09vw; gap: 1.09vw;
justify-content: center; justify-content: center;
@ -128,12 +128,12 @@ body {
background: #FFFFFF; background: #FFFFFF;
grid-template-columns: repeat(4, 4fr); grid-template-columns: repeat(4, 4fr);
display: grid; display: grid;
gap: 0.83vw; gap: 16px;
justify-content: center; justify-content: center;
padding: 6.71875vw 0 0;
text-align: center; text-align: center;
margin: 0 3.75vw; margin: 0 4%;
width: 92.5%; max-width: 92.5%;
padding-top: 7%;
} }
.bottom-card-group { .bottom-card-group {
@ -142,30 +142,26 @@ body {
display: flex; display: flex;
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);
justify-items: center;
} }
.bottom-card-image { .bottom-card-image {
padding: 1.82vw; padding-top: 8% ;
} }
.bottom-card-text { .bottom-card-text {
font-size: 16px; font-size: 14px;
line-height: 24px; line-height: 24px;
width: 19vw; padding: 1% 2% 4%;
padding: 0 0 65px;
} }
.bottom-infocard { .bottom-infocard-desktop {
display: flex; display: flex;
margin: 5.625vw 0 2.604vw; margin: 6% 0 3%;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
.bottom-infocard-group {
width: 29%;
}
.bottom-infocard-tittle { .bottom-infocard-tittle {
font-weight: 600; font-weight: 600;
@ -182,14 +178,14 @@ body {
.bottom-banner-image { .bottom-banner-image {
width: 100%; width: 100%;
padding: 2.6vw 14.583vw 6.04vw; padding: 3% 15% 6%;
} }
.page-footer { .page-footer {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
padding: 1.979vw 0; padding: 2% 0;
background-color: #000000; background-color: #000000;
} }
@ -206,7 +202,6 @@ body {
.footer-text { .footer-text {
text-transform: uppercase; text-transform: uppercase;
line-height: 12px; line-height: 12px;
font-size: 10px;
color: #BDBDBD; color: #BDBDBD;
text-align: center; text-align: center;
} }
@ -215,14 +210,6 @@ body {
display: none; display: none;
} }
.bottom-banner-image-mobile {
display: none;
}
.bottom-infocard-mobile {
display: none;
}
@media screen and (max-width: 1025px) { @media screen and (max-width: 1025px) {
.desktop { .desktop {
display: none; display: none;
@ -232,15 +219,15 @@ body {
display: flex; display: flex;
} }
.bottom-banner-image-desktop {
display: none;
}
.main-banner-desktop { .main-banner-desktop {
display: none; display: none;
} }
.bottom-infocard-paragraph { .bottom-infocard-desktop {
display: none;
}
.bottom-infocard {
display: none; display: none;
} }
@ -258,6 +245,7 @@ body {
.top-infocard-subtitle { .top-infocard-subtitle {
font-size: 20px; font-size: 20px;
line-height: 24px; line-height: 24px;
margin-top: 18%;
} }
.top-infocard-description { .top-infocard-description {
@ -330,39 +318,53 @@ body {
.bottom-card-group { .bottom-card-group {
grid-template-columns: 1fr; grid-template-columns: 1fr;
gap: 15px;
} }
.bottom-card { .bottom-card {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
margin-top: 19%; gap: 15px;
padding: 19% 0 24%;
} }
.bottom-card-text { .bottom-card-text {
width: 302px;
font-size: 14px; font-size: 14px;
padding: 0 0 16%;
}
.bottom-infocard-group {
width: 84%;
}
.bottom-banner-image-desktop {
display: none;
} }
.bottom-banner-image-mobile { .bottom-banner-image-mobile {
padding: 0; padding: 0;
margin: 24% 0 12%; }
.bottom-infocard-group {
max-width: 88%;
margin: 12% 0 21%;
}
.bottom-infocard-mobile {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
.page-footer {
padding: 20px 0;
font-size: 12px;
} }
} }
@media screen and (min-width: 415px) { @media screen and (min-width: 1026px) {
.main-banner-mobile { .main-banner-mobile {
display: none; display: none;
} }
.bottom-banner-image-mobile {
display: none;
}
.bottom-infocard-mobile {
display: none;
}
} }
@media screen and (min-width: 768px) and (max-width: 1023px) { @media screen and (min-width: 768px) and (max-width: 1023px) {

View File

@ -119,7 +119,7 @@
<section class="bottom-card"> <section class="bottom-card">
<div class="bottom-card-group"> <div class="bottom-card-group">
<img class=" bottom-card-image" src="./assets/images/bottom-card-01.png" alt="image01-bottomcard" /> <img class="bottom-card-image" src="./assets/images/bottom-card-01.png" alt="image01-bottomcard" />
<p class="bottom-card-text"> <p class="bottom-card-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla
@ -159,7 +159,7 @@
</div> </div>
</section> </section>
<section class="bottom-infocard"> <section class="bottom-infocard-desktop">
<div class="bottom-infocard-group"> <div class="bottom-infocard-group">
<h3 class="bottom-infocard-tittle">Lorem ipsum dolor sit amet</h3> <h3 class="bottom-infocard-tittle">Lorem ipsum dolor sit amet</h3>
<p class="bottom-infocard-paragraph"> <p class="bottom-infocard-paragraph">
@ -184,7 +184,7 @@
<section class="bottom-infocard-mobile"> <section class="bottom-infocard-mobile">
<div class="bottom-infocard-group"> <div class="bottom-infocard-group">
<h3 class="bottom-infocard-tittle ">Lorem ipsum dolor sit amet</h3> <h3 class="bottom-infocard-tittle ">Lorem ipsum dolor sit amet</h3>
<p class="bottom-infocard-paragraph-bottom-mobile"> <p class="bottom-infocard-paragraph">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vulputate sapien non libero Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vulputate sapien non libero
faucibus interdum. faucibus interdum.
In eget tincidunt ipsum. Quisque a tellus at lectus blandit tempor. Ut tristique auctor mi eget In eget tincidunt ipsum. Quisque a tellus at lectus blandit tempor. Ut tristique auctor mi eget