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

fix(home): Conserto da posicao relativa do banner do meio desktop

Browse Source
This commit is contained in:
Savio Carvalho Moraes 2022-10-12 10:06:52 -03:00
parent a710d9ba98
commit 78d66e3b13
2 changed files with 13 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
assets/css/style.css
View File

@ -98,6 +98,7 @@ body {
justify-content: center; justify-content: center;
background: #e0e0e0; background: #e0e0e0;
width: 100%; width: 100%;
margin-bottom: 192px;
} }
.image-01 { .image-01 {
@ -115,8 +116,10 @@ body {
grid-template-areas: "image01 image02 image03"; grid-template-areas: "image01 image02 image03";
width: 88%; width: 88%;
gap: 40px; gap: 40px;
position: relative;
bottom: -62px;
} }
.imagens { .mb-imagens {
width: 100%; width: 100%;
} }
@media screen and (max-width: 1023px) { @media screen and (max-width: 1023px) {
@ -124,10 +127,12 @@ body {
display: none; display: none;
} }
.top-infocard { .top-infocard {
padding-bottom: 90px; padding: 73px 0 90px;
margin: 0 28px 0;
} }
.top-inforcard-text { .top-inforcard-text {
margin: 0 28px 0; margin-bottom: 65px;
max-width: 100%;
} }
.top-infocard-subtitle { .top-infocard-subtitle {
@ -147,8 +152,10 @@ body {
.top-cards { .top-cards {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center;
gap: 24px; gap: 24px;
margin: 0 32px 80px; margin: 0 32px 80px;
width: 85%;
} }
} }
@media screen and (min-width: 1024px) { @media screen and (min-width: 1024px) {

9
index.html
View File

@ -85,21 +85,18 @@
</figcaption> </figcaption>
</figure> </figure>
</section> </section>
<section class="middle-banners"> <section class="middle-banners">
<div class="middle-banners-wrapper"> <div class="middle-banners-wrapper">
<figure class="middle-banner image-01"> <figure class="middle-banner image-01">
<img class="imagens" src="/assets/imagens/middle-banner-image-01.png" <img class="mb-imagens" src="/assets/imagens/middle-banner-image-01.png"
alt="Imagem do Banner do Meio"> alt="Imagem do Banner do Meio">
</figure> </figure>
<figure class="middle-banner image-02"> <figure class="middle-banner image-02">
<img class="imagens" src="/assets/imagens/middle-banner-image-02.png" <img class="mb-imagens" src="/assets/imagens/middle-banner-image-02.png"
alt="Imagem do Banner do Meio"> alt="Imagem do Banner do Meio">
</figure> </figure>
<figure class="middle-banner image-03"> <figure class="middle-banner image-03">
<img class="imagens" src="/assets/imagens/middle-banner-image-03.png" <img class="mb-imagens" src="/assets/imagens/middle-banner-image-03.png"
alt="Imagem do Banner do Meio"> alt="Imagem do Banner do Meio">
</figure> </figure>
</div> </div>