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

29
assets/styles/style.css
View File

@ -15,6 +15,10 @@ body{
background-color: #000;
}
.logo-header{
margin: 29px 0;
}
.logo-header, .main-banner-desktop{
width: 100%;
display: block;
@ -295,6 +299,31 @@ a {
.photo-desktop{
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){

6
index.html
View File

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