matheusbrollodauter/challenge-landing-page-matheus-brollo-dauter
1
0
Fork 0
forked from M3-Academy/challenge-landing-page
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(style): started responsive general

Browse Source
This commit is contained in:
Matheus Brollo Dauter 2022-10-12 16:53:06 -03:00
parent 886409e56b
commit 0f9afa22b4
2 changed files with 31 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/index.html
View File

@ -104,6 +104,10 @@
</section> </section>
<article> <article>
<section class="bottom-img">
<img class="bottom-banner-mobile" src="assets/img/Rectangle 15 (1).png" alt="Imagem de um Oculos com uma tela de códigos atrás.">
</section>
<div class="bottom-text"> <div class="bottom-text">
<h1>Lorem ipsum dolor sit amet</h1> <h1>Lorem ipsum dolor sit amet</h1>
<p> <p>
@ -113,7 +117,6 @@
<section class="bottom-img"> <section class="bottom-img">
<img class="bottom-banner-desktop" src="assets/img/Rectangle 15.png" alt="Imagem de um Oculos com uma tela de códigos atrás."> <img class="bottom-banner-desktop" src="assets/img/Rectangle 15.png" alt="Imagem de um Oculos com uma tela de códigos atrás.">
<img class="bottom-banner-mobile" src="assets/img/Rectangle 15 (1).png" alt="Imagem de um Oculos com uma tela de códigos atrás.">
</section> </section>
</article> </article>
</main> </main>

33
src/styles/style.css
View File

@ -19,12 +19,13 @@ header {
background-color: black; background-color: black;
text-align: center; text-align: center;
min-height: 10px; min-height: 10px;
max-height: 100px;
padding: 18px; padding: 18px;
} }
.home img { .home img {
max-width:160px; max-width: 226px;
max-height:110px; max-height: 43px;
width: auto; width: auto;
height: auto; height: auto;
} }
@ -183,14 +184,14 @@ picture img {
} }
} }
@media screen and (min-width: 415px) { @media screen and (max-width: 414px) {
.main-banner-mobile { .bottom-banner-desktop {
display: none; display: none;
} }
} }
@media screen and (max-width: 414px) { @media screen and (min-width: 415px) {
.bottom-banner-desktop { .main-banner-mobile {
display: none; display: none;
} }
} }
@ -228,6 +229,11 @@ picture img {
grid-template-columns: 1fr; grid-template-columns: 1fr;
padding: 36px 26px; padding: 36px 26px;
} }
.blocks3 {
grid-template-columns: 1fr;
padding: 36px 26px;
}
} }
@media screen and (min-width: 769px) and (max-width: 1200px) { @media screen and (min-width: 769px) and (max-width: 1200px) {
@ -236,3 +242,18 @@ picture img {
padding: 36px 26px; padding: 36px 26px;
} }
} }
@media screen and (min-width: 769px) and (max-width: 1400px) {
.bottom-banner-desktop {
width: 963.33px;
height: 195.50px;
}
}
@media screen and (min-width: 769px) and (max-width: 1800px) {
.blocks3 {
grid-template-columns: repeat(2, max-content);
padding: 36px 26px;
}
}