Acabou meu tempo, nao consegui arrumar o responsivo 100%

This commit is contained in:
Izabela Balizardo 2022-10-13 23:19:48 -03:00
parent f96c759091
commit 5e2733e295
2 changed files with 270 additions and 215 deletions

View File

@ -214,6 +214,46 @@ body {
color: #bdbdbd; color: #bdbdbd;
} }
@media screen and (max-width: 414px) {
.footer-texto {
max-width: 280px;
text-align: center;
}
}
@media screen and (max-width: 415px) {
.middle-banner-mobile {
display: none;
}
}
.middle-banner-img-mobile-3{
max-width: 372px;
}
.middle-banner-mobile1{
display: flex;
gap: 14px;
}
.middle-banner-img-mobile{
max-width: 177px;
display: block;
}
@media screen and (max-width:414px){
.main-banner-desktop,
.middle-banner-desktop {
display: none;
}
}
@media screen and (max-width: 412px) { @media screen and (max-width: 412px) {
.top-infocard-subtitulo { .top-infocard-subtitulo {
font-size: 20px; font-size: 20px;
@ -224,14 +264,26 @@ body {
} }
.top-infocard-paragrafo { .top-infocard-paragrafo {
font-size: 16px; font-size: 17px;
line-height: 24px; line-height: 24px;
text-align: center; text-align: center;
padding: 0 30px; padding: 0 32px;
} }
.middle-banners { .middle-banners {
height: 484px; height: 484px;
}
.middle-banner-mobile {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 24px;
max-width: 368px;
margin: 0 auto;
} }
} }
@ -243,8 +295,7 @@ body {
.bottom-infocard-flex { .bottom-infocard-flex {
flex-direction: column; flex-direction: column;
}
}
.bottom-infocard-img-mobile { .bottom-infocard-img-mobile {
margin-bottom: 50px; margin-bottom: 50px;
@ -252,58 +303,62 @@ body {
} }
@media screen and (min-width: 415px) { @media screen and (min-width: 415px) {
.main-banner-mobile,
.bottom-infocard-img-mobile { .bottom-infocard-img-mobile {
display: none; display: none;
} }
} }
@media screen and (max-width: 415px) { @media screen and (max-width: 415px) {
.bottom-infocard {
.bottom-infocard{ flex-direction: column;
flex-direction: column; padding: 80px 0 136px;
padding: 80px 0 136px;
} }
.bottom-infocard-img{ .bottom-infocard-img {
margin:0 0 50px; margin: 0 0 50px;
width: 100%; width: 100%;
max-width: 596px; max-width: 596px;
display: none; display: none;
} }
.bottom-infocard-texto{ .bottom-infocard-texto {
padding: 0 26px; padding: 0 26px;
} }
.bottom-infocard-titulo{ .bottom-infocard-titulo {
font-size: 24px; font-size: 24px;
}
.middle-banner-mobile {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 24px;
max-width: 368px;
margin: 0 auto;
} }
} }
@media screen and (max-width:768px) { @media screen and (max-width: 768px) {
.top-cards { .top-cards {
grid-template-columns: 1fr; grid-template-columns: 1fr;
padding: 36px 26px; padding: 36px 26px;
} }
.bottom-cards { .bottom-cards {
flex-direction: column; flex-direction: column;
grid-template-columns: 1fr; grid-template-columns: 1fr;
padding: 80px 23px; padding: 80px 23px;
}
}
} }
@media screen and (min-width: 769px) and (max-width: 1200px) { @media screen and (min-width: 769px) and (max-width: 1200px) {
.top-cards { .top-cards {
grid-template-columns: repeat(2, max-content); grid-template-columns: repeat(2, max-content);
flex-direction: column; flex-direction: column;
} }
} }

View File

@ -18,198 +18,198 @@
</header> </header>
<section> <section>
<img class="main-banner main-banner-desktop" src="assets/img/main-banner-desktop.png" <img class="main-banner main-banner-desktop" src="assets/img/main-banner-desktop.png"
alt="Banner Principal Desktop"> alt="Banner Principal Desktop">
<img class="main-banner main-banner-mobile" src="assets/img/main-banner-mobile.png" <img class="main-banner main-banner-mobile" src="assets/img/main-banner-mobile.png"
alt="Banner Principal Mobile"> alt="Banner Principal Mobile">
</section> </section>
<section class="top-infocard"> <section class="top-infocard">
<div class="top-infocard-text"> <div class="top-infocard-text">
<h2 class="top-infocard-subtitulo"> <h2 class="top-infocard-subtitulo">
Lorem ipsum Lorem ipsum
</h2> </h2>
<h1 class="top-infocard-titulo"> <h1 class="top-infocard-titulo">
Dolor sit amet Dolor sit amet
</h1> </h1>
<p class="top-infocard-paragrafo"> <p class="top-infocard-paragrafo">
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
interdum. Curabitur ut tortor sed lacus egestas vulputate vel sit amet velit. Nulla suscipit magna interdum. Curabitur ut tortor sed lacus egestas vulputate vel sit amet velit. Nulla suscipit magna
dui. dui.
</p>
</div>
<img class="top-infocard-img" src="assets/img/top-infocard.png" alt="Banner infocard do Topo">
</section>
<section class="top-cards">
<div class="top-card"><img class="top-card-img" src="assets/img/topo card 1.png"
alt="Imagem do topo do card 01">
<p class="top-card-paragrafo"> 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-img" src="assets/img/topo card 2.png"
alt="Imagem do topo do card 02">
<p class="top-card-paragrafo"> 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-img" src="assets/img/topo card 3.png"
alt="Imagem do topo do card 03">
<p class="top-card-paragrafo"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod
enim non dui fringilla interdum. </p>
</div>
</section>
<section class="middle-banners">
<div class="middle-wraper">
<div class="middle-banner-desktop">
<img class="middle-banner-img-desktop" src="assets/img/banner-meio-desktop1.png"
alt="Banner do meio Desktop">
<img class="middle-banner-img-desktop" src="assets/img/banner-meio-desktop2.png"
alt="Banner do meio Desktop">
<img class="middle-banner-img-desktop" src="assets/img/banner-meio-desktop3.png"
alt="Banner do meio Desktop">
</div>
</div>
<div class="middle-banner-mobile">
<div class="middle-banner-mobile1">
<img class="middle-banner-img-mobile" src="assets/img/banner-meio-mobile1.png"
alt="Banner do meio mobile">
<img class="middle-banner-img-mobile" src="assets/img/banner-meio-mobile2.png"
alt="Banner do meio mobile">
</div>
<img class="middle-banner-img-mobile-3" src="assets/img/banner-meio-mobile3.png"
alt="Banner do meio mobile">
</div>
</section>
<section class="bottom-cards">
<div class="bottom-card"><img class="bottom-card-img" src="assets/img/bottom-card1.png"
alt="Imagem do topo do card 01">
<p class="bottom-card-paragrafo"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod
enim non dui fringilla interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras
euismod enim non dui fringilla interdum. . </p>
</div>
<div class="bottom-card"><img class="bottom-card-img" src="assets/img/bottom-card2.png"
alt="Imagem do topo do card 02">
<p class="bottom-card-paragrafo"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod
enim non dui fringilla interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras
euismod enim non dui fringilla interdum. . </p>
</div>
<div class="bottom-card"><img class="bottom-card-img" src="assets/img/bottom-card3.png"
alt="Imagem do topo do card 03">
<p class="bottom-card-paragrafo"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod
enim non dui fringilla interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras
euismod enim non dui fringilla interdum. . </p>
</div>
<div class="bottom-card"><img class="bottom-card-img" src="assets/img/bottom-card4.png"
alt="Imagem do topo do card 04">
<p class="bottom-card-paragrafo"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod
enim non dui fringilla interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras
euismod enim non dui fringilla interdum. . </p>
</div>
</section>
<section class="bottom-infocard">
<div class="bottom-infocard-flex">
<img class="bottom-infocard-img-mobile" src="./assets/img/bottom-infocard-img-mobile.png"
alt="Banner do Infocard de Baixo">
<div class="bottom-inforcad-texto">
<h2 class="bottom-infocard-titulo">Lorem ipsum dolor sit amet</h2>
<p class="bottom-infocard-paragrafo">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vulputate sapien non libero
faucibus interdum.Ineget tincidunt ipsum. Quisque a tellus at lectus blandit tempor. Ut
tristique auctor mi eget hendrerit. Curabitur venenatis felis vitae sagittis venenatis. Donec
finibus turpis vitae lectus interdum rutrum vitae sed augue.</p>
</div>
</div>
<img class="bottom-infocard-img" src="assets/img/bottom-infocard.png" alt="">
</section>
</main>
<footer class="page-footer">
<ul class="footer-icons">
<li class="footer-icon">
<a href="#" target="_blank">
<img src="./assets/img/instagram-icon.png" alt="Icone Instagram">
</a>
</li>
<li class="footer-icon">
<a href="#" target="_blank">
<img src="./assets/img/facebook-icon.png" alt="Icone Facebook">
</a>
</li>
<li class="footer-icon">
<a href="#" target="_blank">
<img src="./assets/img/youtube-icon.png" alt="Icone Youtube">
</a>
</li>
</ul>
<p class="footer-texto">
Copyright © 2020 - Loja Comércio Eletrônico CNPJ: 000.000.000/0001-00
</p> </p>
</div>
<img class="top-infocard-img" src="assets/img/top-infocard.png" alt="Banner infocard do Topo">
</section>
<section class="top-cards">
<div class="top-card"><img class="top-card-img" src="assets/img/topo card 1.png"
alt="Imagem do topo do card 01">
<p class="top-card-paragrafo"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod
enim non dui fringilla interdum. </p>
</div>
</footer> <div class="top-card"><img class="top-card-img" src="assets/img/topo card 2.png"
alt="Imagem do topo do card 02">
<p class="top-card-paragrafo"> 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-img" src="assets/img/topo card 3.png"
alt="Imagem do topo do card 03">
<p class="top-card-paragrafo"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod
enim non dui fringilla interdum. </p>
</div>
</section>
<section class="middle-banners">
<div class="middle-wraper">
<div class="middle-banner-desktop">
<img class="middle-banner-img-desktop" src="assets/img/banner-meio-desktop1.png"
alt="Banner do meio Desktop">
<img class="middle-banner-img-desktop" src="assets/img/banner-meio-desktop2.png"
alt="Banner do meio Desktop">
<img class="middle-banner-img-desktop" src="assets/img/banner-meio-desktop3.png"
alt="Banner do meio Desktop">
</div>
</div>
<div class="middle-banner-mobile">
<div class="middle-banner-mobile1">
<img class="middle-banner-img-mobile" src="assets/img/banner-meio-mobile1.png"
alt="Banner do meio mobile">
<img class="middle-banner-img-mobile" src="assets/img/banner-meio-mobile2.png"
alt="Banner do meio mobile">
</div>
<img class="middle-banner-img-mobile-3" src="assets/img/banner-meio-mobile3.png"
alt="Banner do meio mobile">
</div>
</section>
<section class="bottom-cards">
<div class="bottom-card"><img class="bottom-card-img" src="assets/img/bottom-card1.png"
alt="Imagem do topo do card 01">
<p class="bottom-card-paragrafo"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod
enim non dui fringilla interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras
euismod enim non dui fringilla interdum. . </p>
</div>
<div class="bottom-card"><img class="bottom-card-img" src="assets/img/bottom-card2.png"
alt="Imagem do topo do card 02">
<p class="bottom-card-paragrafo"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod
enim non dui fringilla interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras
euismod enim non dui fringilla interdum. . </p>
</div>
<div class="bottom-card"><img class="bottom-card-img" src="assets/img/bottom-card3.png"
alt="Imagem do topo do card 03">
<p class="bottom-card-paragrafo"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod
enim non dui fringilla interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras
euismod enim non dui fringilla interdum. . </p>
</div>
<div class="bottom-card"><img class="bottom-card-img" src="assets/img/bottom-card4.png"
alt="Imagem do topo do card 04">
<p class="bottom-card-paragrafo"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod
enim non dui fringilla interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras
euismod enim non dui fringilla interdum. . </p>
</div>
</section>
<section class="bottom-infocard">
<div class="bottom-infocard-flex">
<img class="bottom-infocard-img-mobile" src="./assets/img/bottom-infocard-img-mobile.png"
alt="Banner do Infocard de Baixo">
<div class="bottom-inforcad-texto">
<h2 class="bottom-infocard-titulo">Lorem ipsum dolor sit amet</h2>
<p class="bottom-infocard-paragrafo">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vulputate sapien non libero
faucibus interdum.Ineget tincidunt ipsum. Quisque a tellus at lectus blandit tempor. Ut
tristique auctor mi eget hendrerit. Curabitur venenatis felis vitae sagittis venenatis. Donec
finibus turpis vitae lectus interdum rutrum vitae sed augue.</p>
</div>
</div>
<img class="bottom-infocard-img" src="assets/img/bottom-infocard.png" alt="">
</section>
</main>
<footer class="page-footer">
<ul class="footer-icons">
<li class="footer-icon">
<a href="#" target="_blank">
<img src="./assets/img/instagram-icon.png" alt="Icone Instagram">
</a>
</li>
<li class="footer-icon">
<a href="#" target="_blank">
<img src="./assets/img/facebook-icon.png" alt="Icone Facebook">
</a>
</li>
<li class="footer-icon">
<a href="#" target="_blank">
<img src="./assets/img/youtube-icon.png" alt="Icone Youtube">
</a>
</li>
</ul>
<p class="footer-texto">
Copyright © 2020 - Loja Comércio Eletrônico CNPJ: 000.000.000/0001-00
</p>
</footer>
</body> </body>