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

Adicionando o banner-top desktop e mobile

Browse Source
This commit is contained in:
Victor Cardoso de Souza 2022-10-09 21:53:48 -03:00
parent 79a1d1f4e1
commit 87381ba555
4 changed files with 22 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

0
assests/banner-top-desktop.png → assests/main-banner-desktop.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.5 MiB

After

Width:  |  Height:  |  Size: 1.5 MiB

0
assests/banner-top-mobile.png → assests/main-banner-mobile.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 341 KiB

After

Width:  |  Height:  |  Size: 341 KiB

4
index.html
View File

@ -18,8 +18,8 @@
<main>
<div>
<figure>
<img class="main-banner main banner desktop" src="./assests/banner-top-desktop.png" alt="Banner do topo Desktop">
<img class="main banner main banner mobile" src="./assests/banner-top-mobile.png" alt="Banner do topo Mobile">
<img class="main-banner main-banner-desktop" src="./assests/main-banner-desktop.png" alt="Banner do topo Desktop">
<img class="main-banner main-banner-mobile" src="./assests/main-banner-mobile.png" alt="Banner do topo Mobile">
</figure>
</div>

20
main.css
View File

@ -1,3 +1,5 @@
* {
margin: 0;
padding: 0;
@ -14,4 +16,22 @@
.head-image {
width: 100%;
padding: 28px 0 ;
}
.main-banner {
width: 100%;
display: block;
}
@media screen and (max-width: 414px) {
.main-banner-desktop {
display: none;
}
}
@media screen and (min-width:415px ) {
.main-banner-mobile {
display: none;
}
}