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

criando o banner mobile e editando banner

Browse Source
This commit is contained in:
Matheus Mariosa 2022-10-12 12:28:14 -03:00
parent 5895414b29
commit 57126365de
2 changed files with 29 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
assents/style/estilo.css
View File

@ -1,8 +1,11 @@
/*configurações globais*/
* {
margin: 0;
box-sizing: border-box;
}
/*Logo da M3 Academy*/
.page-header {
display: flex;
justify-content: center;
@ -14,10 +17,10 @@
.logo-m3 {
width: 12%;
height: 42%;
min-height: 43px;
min-width: 226px;
min-height: 23px;
min-width: 110px;
}
/*Banner do top*/
.banner-principal {
max-width: 100%;
min-height: 19%;
@ -31,4 +34,22 @@
.banner-big-mobile {
display: none;
width: 100%;
max-height: 11%;
min-height: 598px;
}
@media screen and (max-width: 1023px) {
.banner-big {
display: none;
}
.banner-big-mobile {
display: block;
}
.banner-principal {
min-height: 11%;
}
}

9
index.html
View File

@ -15,10 +15,11 @@
<img src="./assents/imagens/Logo-M3Academy 1.svg" alt="logo da M3 Academy" class="logo-m3"/>
</header>
<main>
<div class="banner-principal">
<img src="./assents/imagens/big-banner.png" alt="Banner principal" class="banner-big"/>
<img src="./assents/imagens/big-banner-mobile.png" alt="Banner principal" class="banner-big-mobile">
</div>
<section class="banner-principal">
<img class="banner-big" src="./assents/imagens/big-banner.png" alt="Banner principal"/>
<img class="banner-big-mobile" src="./assents/imagens/big-banner-mobile.png" alt="Banner principal">
</section>
<h2>Lorem ipsum</h2>
<h1>dolor sit amet</h1>