feat(figure) colocado imagem final desktop
This commit is contained in:
parent
6bff2a6cb4
commit
e45345418e
12
index.html
12
index.html
@ -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>
|
||||
|
||||
|
||||
|
||||
|
73
style.css
73
style.css
@ -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;
|
||||
}
|
||||
}
|
Loading…
Reference in New Issue
Block a user