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