HenriqueSantosSantana/challenge-landing-page-henrique-santos-santana
0
0
Fork 0
forked from M3-Academy/challenge-landing-page
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: create main banner and responsive #3

Merged
HenriqueSantosSantana merged 1 commits from feature/main-banner into develop 2022-10-09 08:00:25 +00:00
Conversation 0 Commits 1 Files Changed 3 +40
3 changed files with 40 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
assets/css/main.css
View File

@ -18,6 +18,14 @@
display: flex; display: flex;
} }
/*-------------*\
= MAIN BANNER =
\*-------------*/
.main-banner-image {
width: 100%;
height: auto;
}
/*CUBE CSS styles*/ /*CUBE CSS styles*/
/*-------*\ /*-------*\
@ -26,3 +34,23 @@
.bg-clr-black { .bg-clr-black {
background-color: var(--bg-clr-black); background-color: var(--bg-clr-black);
} }
@media only screen and (max-width: 1024px) {
.image-mobile {
display: flex;
}
.image-desktop {
display: none;
}
}
@media only screen and (min-width: 1025px) {
.image-mobile {
display: none;
}
.image-desktop {
display: flex;
}
}

BIN
assets/images/main-banner-mobile.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 230 KiB

12
index.html
View File

@ -29,6 +29,18 @@
</header> </header>
<!--=============== Main Banner ===============--> <!--=============== Main Banner ===============-->
<figure class="main-banner">
<img
class="main-banner-image image-desktop"
src="./assets/images/main-banner-desktop.jpg"
alt="Um desktop aberto em um software de ambiente de desenvolvimento"
/>
<img
class="main-banner-image image-mobile"
src="./assets/images/main-banner-mobile.jpg"
alt="Um desktop aberto em um software de ambiente de desenvolvimento"
/>
</figure>
<!--=============== Information ===============--> <!--=============== Information ===============-->