forked from M3-Academy/challenge-landing-page
Fix: Corrige responsividade Desktop
This commit is contained in:
parent
f7267c9811
commit
85c9e2a8a0
@ -1,3 +1,4 @@
|
||||
/* Reset */
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
@ -20,15 +21,19 @@ body {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.top-banner-image-desktop,
|
||||
.top-banner-image-desktop {
|
||||
width: 100%;
|
||||
}
|
||||
.top-banner-image-mobile {
|
||||
width: 100%;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.infocard {
|
||||
margin: 73px 25%;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.infocard-title {
|
||||
text-align: center;
|
||||
font-weight: 500;
|
||||
@ -65,18 +70,15 @@ body {
|
||||
}
|
||||
|
||||
.cards-wrapper {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, max-content);
|
||||
gap: 21px;
|
||||
gap: 16px;
|
||||
justify-content: center;
|
||||
padding-top: 179px;
|
||||
padding-bottom: 74px;
|
||||
text-align: center;
|
||||
margin: 129px 72px 74px 72px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.card {
|
||||
max-width: 350px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 0 26px 28px;
|
||||
@ -88,6 +90,7 @@ body {
|
||||
margin-top: 35px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.card-description {
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
@ -96,36 +99,57 @@ body {
|
||||
}
|
||||
|
||||
.fig-container {
|
||||
display: flex;
|
||||
background-color: #E0E0E0;
|
||||
max-height: 530px;
|
||||
|
||||
}
|
||||
|
||||
.fig-wrapper {
|
||||
max-height: 530px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: 39px;
|
||||
padding: 0;
|
||||
.figure-wrapper {
|
||||
margin-left: 72px;
|
||||
margin-right: 72px;
|
||||
}
|
||||
|
||||
.fig-image {
|
||||
width: 100%;
|
||||
max-width: 566px;
|
||||
width: 29%;
|
||||
}
|
||||
|
||||
.cards-wrapper2 {
|
||||
.flex-img {
|
||||
max-width: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.flex {
|
||||
/* background-color: #E0E0E0; */
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
max-width: 80%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.flex > div {
|
||||
flex: 1 1 566px;
|
||||
margin: 0 20px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/* bloco 4 cards */
|
||||
.cards-wrapper2 {
|
||||
gap: 16px;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
margin: 179px 72px 74px 72px;
|
||||
margin: 129px 72px 74px 72px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.card2 {
|
||||
|
||||
max-width: 350px;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 0 26px 28px;
|
||||
@ -145,8 +169,10 @@ body {
|
||||
margin-top: 27px;
|
||||
}
|
||||
|
||||
|
||||
/* bloco Article */
|
||||
.article {
|
||||
margin-top: 108px;
|
||||
margin-top: 108px;
|
||||
}
|
||||
|
||||
.article-title {
|
||||
@ -162,9 +188,10 @@ body {
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
margin: 0 auto 50px auto;
|
||||
|
||||
}
|
||||
|
||||
|
||||
/* bloco bottom banner */
|
||||
.bottom-banner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -176,6 +203,13 @@ body {
|
||||
width: 71%;
|
||||
}
|
||||
|
||||
.bottom-banner-mobile {
|
||||
width: 100%;
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
/* bloco footer */
|
||||
.page-footer {
|
||||
margin-top: 116px;
|
||||
display: flex;
|
||||
@ -191,7 +225,6 @@ body {
|
||||
}
|
||||
|
||||
.footer-text {
|
||||
color: #ffffff;
|
||||
text-align: center;
|
||||
margin: 17px 0 38px;
|
||||
font-size: 10px;
|
||||
@ -202,125 +235,3 @@ body {
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/* Tablet e Mobile - 280px to 1024px */
|
||||
@media only screen
|
||||
and (min-device-width: 280px)
|
||||
and (max-device-width: 1024px) {
|
||||
|
||||
.top-banner-image-desktop {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.infocard {
|
||||
margin: 73px 6%;
|
||||
}
|
||||
|
||||
.infocard-subtitle {
|
||||
font-size: 20px;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
.infocard-title {
|
||||
font-size: 28px;
|
||||
line-height: 34px;
|
||||
}
|
||||
.infocard-description {
|
||||
padding-top: 19px;
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.pc-icon {
|
||||
margin-top: 65px 0 91px;
|
||||
}
|
||||
|
||||
.pc-icon-image {
|
||||
width: 58%;
|
||||
}
|
||||
|
||||
.cards-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding-top: 91px;
|
||||
padding-bottom: 80px;
|
||||
}
|
||||
|
||||
.card {
|
||||
padding: 35px 26px 28px;
|
||||
background: #ffffff;
|
||||
box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23);
|
||||
}
|
||||
|
||||
.card-description {
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
margin-top: 27px;
|
||||
}
|
||||
|
||||
.imageblock-wrapper {
|
||||
background-color: #e0e0e0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.imageblock-image {
|
||||
align-items: center;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
|
||||
.image2 .image1 {
|
||||
grid-row: span 2;
|
||||
width: 43%;
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/* Desktop - 1025px to 2500px */
|
||||
@media only screen
|
||||
and (min-device-width: 1025px)
|
||||
and (max-device-width: 2500px) {
|
||||
|
||||
.top-banner-image-mobile,
|
||||
.bottom-banner-mobile {
|
||||
display: none;
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/* Desktop 4k - 2501px above */
|
||||
@media only screen
|
||||
and (min-device-width: 2501px) {
|
||||
|
||||
.top-banner-image-mobile,
|
||||
.bottom-banner-mobile {
|
||||
display: none;
|
||||
}
|
||||
};
|
||||
23
index.html
23
index.html
@ -104,20 +104,23 @@
|
||||
</div>
|
||||
|
||||
|
||||
<div class="fig-container">
|
||||
|
||||
<figure class="fig-wrapper">
|
||||
<img class="fig-image" src="./_assets/images/image1.png" alt="Imagem 1">
|
||||
<img class="fig-image" src="./_assets/images/image2.png" alt="Imagem 2">
|
||||
<img class="fig-image" src="./_assets/images/image3.png" alt="Imagem 3">
|
||||
</figure>
|
||||
|
||||
<section class="flex">
|
||||
<div>
|
||||
<img class="flex-img" src="./_assets/images/image1.png" alt="">
|
||||
</div>
|
||||
|
||||
|
||||
<div>
|
||||
<img class="flex-img" src="./_assets/images/image2.png" alt="">
|
||||
</div>
|
||||
<div>
|
||||
<img class="flex-img" src="./_assets/images/image3.png" alt="">
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<!-- Cards2 | Desktop and Mobile -->
|
||||
<div class="cards-wrapper2">
|
||||
<figure class="card2">
|
||||
@ -165,7 +168,7 @@
|
||||
<figure class="card2">
|
||||
<img
|
||||
class="card-image2"
|
||||
src="./_assets/images/card2-image3.svg"
|
||||
src="./_assets/images/card2-image4.svg"
|
||||
alt="Card Image 4"
|
||||
/>
|
||||
<figcaption class="card-description2">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user