forked from M3-Academy/challenge-landing-page
feat(main-banner-responsive): adicionei responsividade - desktop, mobile~
This commit is contained in:
parent
27fa27b386
commit
93c48faa84
@ -17,12 +17,10 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<main>
|
<main>
|
||||||
<div id="img1">
|
<section>
|
||||||
<picture>
|
<img class="main-banner-desktop" src="assets/img/Rectangle 9.png" alt="Imagem de Laptop com codigos na tela.">
|
||||||
<source media="(max-width: 1920px)" srcset="assets/img/Rectangle 9 (1).png">
|
<img class="main-banner-mobile" src="assets/img/Rectangle 9 (1).png" alt="">
|
||||||
<img src="assets/img/Rectangle 9.png" alt="Ilustração de um laptop com codigos na tela.">
|
</section>
|
||||||
</picture>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<article>
|
<article>
|
||||||
<h1 id="title1">Lorem ipsum</h1>
|
<h1 id="title1">Lorem ipsum</h1>
|
||||||
|
@ -20,3 +20,23 @@ header {
|
|||||||
width: auto;
|
width: auto;
|
||||||
height: auto;
|
height: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.main-banner-desktop {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-banner-mobile {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 414px) {
|
||||||
|
.main-banner-desktop {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (min-width: 415px) {
|
||||||
|
.main-banner-mobile {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
Loading…
Reference in New Issue
Block a user