feat(figure) colocado imagem final desktop

This commit is contained in:
Vinicius Gabriel do Amaral Pereira 2022-10-13 18:54:38 -03:00
parent 6bff2a6cb4
commit e45345418e
2 changed files with 72 additions and 15 deletions

View File

@ -94,7 +94,19 @@
<p class="p-cards2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.</p> <p class="p-cards2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.</p>
</section> </section>
</div>
<div class="conteiner-p">
<div class="div-text">
<h2 class="h2-text">Lorem ipsum dolor sit amet</h2>
<p class="p-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vulputate sapien non libero faucibus interdum. In eget tincidunt ipsum. Quisque a tellus at lectus blandit tempor. Ut tristique auctor mi eget hendrerit. Curabitur venenatis felis vitae sagittis venenatis. Donec finibus turpis vitae lectus interdum rutrum vitae sed augue.</p>
</div>
<figure class="figure-img-final">
<img class="img-final-descktop" src="./image/img-final-desck.png" alt="Imagem circuitos elétricos">
<img class="img-final-mobile" src="./image/img-final-mobi.png" alt="Imagem oculos com fundo de circuitos elétricos">
</figure>
</div>

View File

@ -124,7 +124,6 @@ body html{
.div-background{ .div-background{
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
@ -153,22 +152,22 @@ body html{
gap: 14px; gap: 14px;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
padding: 0 72px;
} }
.section-cards2{ .section-cards2{
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
text-align: center; text-align: center;
padding: 35px 2px 27px 2px; padding: 35px 33px 65px;
width: 22.5%; width: 22.5%;
background: #FFFFFF; background: #FFFFFF;
box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.15); box-shadow: 0px 4px 16px rgb(0 0 0 / 15%);
} }
.img-section-cards2{ .img-section-cards2{
} }
.p-cards2{ .p-cards2{
width: 85%;
margin-top: 15px; margin-top: 15px;
font-weight: 400; font-weight: 400;
font-size: 16px; font-size: 16px;
@ -176,6 +175,43 @@ body html{
text-align: center; text-align: center;
} }
.conteiner-p{
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.div-text{
margin-top: 108px;
text-align: center;
width: 28%;
margin-bottom: 50px;
}
.h2-text{
font-weight: 600;
font-size: 32px;
line-height: 39px;
}
.p-text{
font-weight: 400;
font-size: 16px;
line-height: 24px;
}
.figure-img-final{
width: 71%;
justify-content: center;
align-items: center;
}
.img-final-descktop{
width: 100%;
}
/*MEDIA SCREEN*/ /*MEDIA SCREEN*/
@media screen and (max-width: 1024px){ @media screen and (max-width: 1024px){
.img-logo{ .img-logo{
@ -221,12 +257,7 @@ body html{
.section-cards{ .section-cards{
width: 84.5%; width: 84.5%;
} }
.img-cards{
}
.p-cards{
}
/*FIM SECTION CARDS*/ /*FIM SECTION CARDS*/
/*INICIO IMAGENS DESCKTOP*/ /*INICIO IMAGENS DESCKTOP*/
@ -237,7 +268,7 @@ body html{
padding: 0; padding: 0;
margin-bottom: 116px; margin-bottom: 116px;
} }
}
.div-background{ .div-background{
flex-wrap: wrap; flex-wrap: wrap;
@ -267,27 +298,38 @@ body html{
width: 86%; width: 86%;
} }
/*FIM IMAGENS DESCKTOP*/ /*FIM IMAGENS DESCKTOP*/
/*INICIO CARDIS2*/ /*INICIO CARDIS2*/
.div-section-cards2{ .div-section-cards2{
flex-direction: column; flex-direction: column;
margin-top: 90px; margin-top: 90px;
padding: 32px;
} }
.section-cards2{ .section-cards2{
width: 84.5%; width: 84.5%;
padding: 35px 33px 65px;
} }
.img-section-cards2{ .img-section-cards2{
} }
.p-cards2{ .p-cards2{
width: 100%;
margin-top: 15px;
text-align: center;
font-weight: 400;
font-size: 14px;
line-height: 24px;
} }
/*FINAL CARDIS2*/ /*FINAL CARDIS2*/
.img-final-descktop{
display: none;
} }
}
@media screen and (min-width: 1025px){ @media screen and (min-width: 1025px){
.not-main-mobi{ .not-main-mobi{
display: none; display: none;
@ -295,4 +337,7 @@ body html{
.img-figura{ .img-figura{
display: none; display: none;
} }
.img-final-mobile{
display: none;
}
} }