Atualiza a responsividade do conteudo desktop e mobile
This commit is contained in:
parent
b6ea25ce81
commit
344dfd3078
@ -69,6 +69,7 @@ body {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, max-content);
|
||||
gap: 21px;
|
||||
|
||||
justify-content: center;
|
||||
margin-bottom: 80px;
|
||||
}
|
||||
@ -93,11 +94,10 @@ body {
|
||||
}
|
||||
|
||||
.middle-cards-wrapper {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
justify-items: center;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
gap: 40px;
|
||||
margin: 0 72px;
|
||||
position: relative;
|
||||
bottom: -62px;
|
||||
}
|
||||
@ -120,10 +120,10 @@ body {
|
||||
|
||||
}
|
||||
|
||||
.bottom-cards {
|
||||
/*.bottom-cards {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
padding: 0 72px 108px;
|
||||
/: 0 72px 108px;
|
||||
gap: 16px;
|
||||
justify-content: center;
|
||||
}
|
||||
@ -132,7 +132,6 @@ body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
background: #FFF;
|
||||
padding: 35px 32px 65px;
|
||||
box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
@ -143,13 +142,39 @@ body {
|
||||
}
|
||||
|
||||
.bottom-card-description {
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
text-align: center;
|
||||
max-width: 368px;
|
||||
}*/
|
||||
|
||||
.bottom-cards {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, max-content);
|
||||
gap: 16px;
|
||||
justify-content: center;
|
||||
margin-bottom: 80px;
|
||||
}
|
||||
|
||||
.bottom-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 35px 26px 27px;
|
||||
box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23);
|
||||
}
|
||||
|
||||
.bottom-card-image {
|
||||
display: block;
|
||||
margin-bottom: 27px;
|
||||
}
|
||||
|
||||
.bottom-card-description {
|
||||
max-width: 299px;
|
||||
line-height: 24px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
.bottom-infocard {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@ -158,7 +183,7 @@ body {
|
||||
}
|
||||
|
||||
.bottom-infocard-text {
|
||||
padding: 0 685px 50px;
|
||||
padding: 0 28% 50px;
|
||||
}
|
||||
|
||||
.bottom-infocard-title {
|
||||
@ -178,6 +203,7 @@ body {
|
||||
|
||||
.bottom-infocard-image {
|
||||
display: block;
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.page-footer {
|
||||
@ -207,14 +233,127 @@ body {
|
||||
|
||||
}
|
||||
|
||||
@media screen and (max-width: 413px) {
|
||||
.top-card-description, .bottom-card-description {
|
||||
max-width: 280px;
|
||||
}
|
||||
|
||||
.top-card, .bottom-card {
|
||||
padding: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 414px) {
|
||||
.main-banner-desktop{
|
||||
.main-banner-desktop, .bottom-infocard-image-desktop{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 415px) {
|
||||
.main-banner-mobile {
|
||||
.main-banner-mobile, .bottom-infocard-image-mobile {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 750px){
|
||||
.top-infocard-image {
|
||||
width: 16%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media screen and (max-width: 525px) {
|
||||
.top-infocard-image {
|
||||
width: 57%;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 526px) and (max-width: 1199px) {
|
||||
.top-cards {
|
||||
grid-template-columns: repeat(2, max-content);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media screen and (min-width: 526px) and (max-width: 1499px) {
|
||||
|
||||
|
||||
.bottom-cards {
|
||||
grid-template-columns: repeat(2, max-content);
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.top-cards {
|
||||
grid-template-columns: repeat(1, max-content);
|
||||
}
|
||||
|
||||
.bottom-cards {
|
||||
grid-template-columns: repeat(1, max-content);
|
||||
}
|
||||
|
||||
.middle-cards-wrapper {
|
||||
flex-direction: column;
|
||||
margin: 0 23px;
|
||||
align-items: center;
|
||||
gap: 24px;
|
||||
bottom: -32px;
|
||||
}
|
||||
|
||||
.middle-cards {
|
||||
margin-bottom: 112px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
.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 {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.bottom-infocard-image{
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
11
index.html
11
index.html
@ -41,19 +41,19 @@
|
||||
|
||||
<section class="top-cards">
|
||||
<div class="top-card">
|
||||
<img class="top-card-image" src="./assets/images/top-card-image-01.png" alt="">
|
||||
<img class="top-card-image" src="./assets/images/top-card-image-01.png" alt="Imagem 01 do card do topo">
|
||||
|
||||
<p class="top-card-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </p>
|
||||
</div>
|
||||
|
||||
<div class="top-card">
|
||||
<img class="top-card-image" src="./assets/images/top-card-image-02.png" alt="">
|
||||
<img class="top-card-image" src="./assets/images/top-card-image-02.png" alt="Imagem 02 do card do topo">
|
||||
|
||||
<p class="top-card-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </p>
|
||||
</div>
|
||||
|
||||
<div class="top-card">
|
||||
<img class="top-card-image" src="./assets/images/top-card-image-03.png" alt="">
|
||||
<img class="top-card-image" src="./assets/images/top-card-image-03.png" alt="Imagem do card do topo">
|
||||
|
||||
<p class="top-card-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </p>
|
||||
</div>
|
||||
@ -106,7 +106,7 @@
|
||||
|
||||
<div class="bottom-infocard-text">
|
||||
<h2 class="bottom-infocard-title">Lorem ipsum dolor sit amet</h2>
|
||||
|
||||
|
||||
<p class="bottom-infocard-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vulputate sapien non libero faucibus interdum. In eget tincidunt ipsum.
|
||||
</p>
|
||||
|
||||
@ -119,7 +119,8 @@
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<img class="bottom-infocard-image" src="./assets/images/bottom-infocard-image-desktop.png" alt="Imagem do infocard de baixo">
|
||||
<img class="bottom-infocard-image bottom-infocard-image-desktop" src="./assets/images/bottom-infocard-image-desktop.png" alt="Imagem do infocard de baixo desktop">
|
||||
<img class="bottom-infocard-image bottom-infocard-image-mobile" src="./assets/images/bottom-infocard-image-mobile.png" alt="Imagem do infocard de baixo mobile">
|
||||
</section>
|
||||
</main>
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user