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 meio para o mobile

Browse Source
This commit is contained in:
Leonardo Pereira Rocha 2022-10-13 10:33:59 -03:00
parent 1643cd3e1b
commit 04a4f0cae9
2 changed files with 36 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
assets/styles/style.css
View File

@ -15,6 +15,10 @@ body{
background-color: #000; background-color: #000;
} }
.logo-header{
margin: 29px 0;
}
.logo-header, .main-banner-desktop{ .logo-header, .main-banner-desktop{
width: 100%; width: 100%;
display: block; display: block;
@ -293,8 +297,33 @@ a {
} }
.photo-desktop{ .photo-desktop{
display: none; display: none;
} }
.middle-photo-mobile{
background-color: #E0E0E0;
display: flex;
align-items: center;
justify-content: center;
}
.photo-mobile{
display: block;
max-width: 80%;
align-items: center;
position: relative;
margin-bottom: -62px;
}
.photo,.photo-desktop{
position: relative;
margin-bottom: 24px;
margin-top: 32px;
max-width: 100%;
width: 100%;
}
} }
@media screen and (min-width: 769px) and (max-width: 1250px){ @media screen and (min-width: 769px) and (max-width: 1250px){

8
index.html
View File

@ -63,7 +63,7 @@
</div> </div>
</section> </section>
<div>
<div class="middle-photo"> <div class="middle-photo">
<img class="photo" src="./assets/img/photo1.png" alt="Primeira foto do meio da página" /> <img class="photo" src="./assets/img/photo1.png" alt="Primeira foto do meio da página" />
@ -72,9 +72,13 @@
<img class="photo-desktop" id="photo3" src="./assets/img/photo3.png" alt="Terceira foto do meio da página" /> <img class="photo-desktop" id="photo3" src="./assets/img/photo3.png" alt="Terceira foto do meio da página" />
</div> </div>
<img class="photo-mobile" src="./assets/img/photo3-mobile.png" alt="Terceira foto do meio da página" /> <div class="middle-photo-mobile">
<img class="photo-mobile" src="./assets/img/photo3-mobile.png" alt="Terceira foto do meio da página" />
</div> </div>
<section class="second-card"> <section class="second-card">
<div class="card-2"> <div class="card-2">
<img class="card2-image" src = "./assets/img/second-card-image-1.png" alt="Primeira imagem do card inferior" /> <img class="card2-image" src = "./assets/img/second-card-image-1.png" alt="Primeira imagem do card inferior" />