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

Ajusta imagens do banner para desktop

Browse Source
This commit is contained in:
Leonardo Pereira Rocha 2022-10-12 21:46:27 -03:00
parent d111581eb8
commit 7b07501d88
5 changed files with 32 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

0
assets/img/final-photo.png → assets/img/final-photo-desktop.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 362 KiB

After

Width:  |  Height:  |  Size: 362 KiB

BIN
assets/img/final-photo-mobile.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 247 KiB

BIN
assets/img/main-banner-mobile.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 341 KiB

28
assets/styles/style.css
View File

@ -174,13 +174,29 @@ body{
margin-bottom: 50px;
}
.final-card-image{
.final-card-image-desktop{
width: 70%;
margin-bottom: 116px;
}
@media screen and (max-width:414px) {
.main-banner-desktop, .final-card-image-desktop {
display: none;
}
.main-banner-mobile, .final-card-image-mobile {
max-width: 100%;
}
.final-card-image-mobile{
margin-bottom: 50px;
}
}
@media screen and (max-width:768px){
.final-card-info{
max-width: 350px;
}
@ -227,6 +243,9 @@ body{
@media screen and (max-width:992px) {
.top-infocard-image{
width: 40%;
}
.second-card{
grid-template-columns: 1fr;
margin: 0 23px;
@ -262,6 +281,13 @@ body{
padding: 35px 33px;
}
}
@media screen and (min-width:415px){
.main-banner-mobile, .final-card-image-mobile {
display: none;
}
}
@media screen and (min-width:2500px){
.top-infocard-text {

6
index.html
View File

@ -24,6 +24,7 @@
<div>
<img class="main-banner-desktop" src="./assets/img/main-banner-desktop.png" alt="Banner Principal"/>
<img class="main-banner-mobile" src="./assets/img/main-banner-mobile.png" alt="Banner Principal"/>
</div>
<section class="top-infocard">
@ -110,6 +111,9 @@
</section>
<section class="final-card">
<img class="final-card-image-mobile" src="./assets/img/final-photo-mobile.png" alt="Banner final da pagina" />
<div class="final-card-info">
<h1 class="final-card-title" >Lorem ipsum dolor sit amet</h1>
<p class="final-card-text">
@ -121,7 +125,7 @@
</p>
</div>
<img class="final-card-image" src="./assets/img/final-photo.png" alt="Banner final da pagina" />
<img class="final-card-image-desktop" src="./assets/img/final-photo-desktop.png" alt="Banner final da pagina" />
</section>
</body>