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

Adiciona imagens primárias responsivas desktop e mobile

Browse Source
This commit is contained in:
Joseildo Lima da Silva 2022-10-08 13:05:37 -03:00
parent f4c9c6bf6c
commit 97db60c9b4
5 changed files with 62 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
assets/img/Logo-M3Academy 1.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 19 KiB

BIN
assets/img/image_principal.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 MiB

BIN
assets/img/mobile_image_primary.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 341 KiB

16
index.html
View File

@ -10,6 +10,22 @@
</head> </head>
<body> <body>
<header class="header_landing">
<a href="/">
<picture>
<img class="logo_m3" src="./assets/img/Logo-M3Academy 1.svg" alt="LogoM3Academy">
</picture>
</a>
</header>
<div>
<picture>
<img class="primary_banner" src="./assets/img/image_principal.png" alt="banner primário">
</picture>
<picture>
<img class="banner_mobile" src="./assets/img/mobile_image_primary.png" alt="image mobile">
</picture>
</div>
</body> </body>

37
style.css
View File

@ -0,0 +1,37 @@
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.header_landing {
background-color: #000;
display: flex;
justify-content: center;
}
.logo_m3 {
margin: 28px 0;
}
.primary_banner {
width: 100%;
}
@media screen and (max-width: 413px) {
.primary_banner {
display: none;
}
.banner_mobile {
width: 100%;
max-width: 414px;
}
}
@media screen and (min-width:414px) {
.banner_mobile {
display: none;
}
}