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

feat: cria banner na versao mobile e desktop

Browse Source
This commit is contained in:
Emmanuel Vitor Pereira de Jesus 2022-10-08 23:54:42 -03:00
parent 17bea6e525
commit fae1c9312e
3 changed files with 23 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
assets/bannerPrincipalMobile.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 341 KiB

9
index.html
View File

@ -12,13 +12,16 @@
<body> <body>
<header> <header>
<a href="./"> <a href="./">
<img src="assets/icons/Logo-M3.svg" alt="Logo-M3" class="logo-header"> <img src="assets/icons/Logo-M3.svg" alt="Logo-M3" class="logo-header" />
</a> </a>
</header> </header>
<main> <main>
<div class="banner-principal"> <div>
<figure> <figure>
<img src="assets/bannerPrincipal.png" alt="Computador aberto com codigos de programação"> <img src="assets/bannerPrincipal.png" alt="Computador aberto com codigos de programação"
class="banner-principal banner-principal-desktop" />
<img src="assets/bannerPrincipalMobile.png" alt="Computador aberto com codigos de programação"
class="banner-principal banner-principal-mobile" />
</figure> </figure>
</div> </div>
</main> </main>

17
style/style.css
View File

@ -15,3 +15,20 @@ header {
.logo-header { .logo-header {
display: block; display: block;
} }
.banner-principal {
width: 100%;
}
@media (max-width:414px) {
.banner-principal-desktop {
display: none;
}
}
@media (min-width:415px) {
.banner-principal-mobile {
display: none;
}
}