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

ajustes imagens,text e card

Browse Source
This commit is contained in:
Matheus Mariosa 2022-10-13 14:00:51 -03:00
parent 456d81195a
commit e29835155a
2 changed files with 25 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
assents/style/estilo.css
View File

@ -47,6 +47,10 @@ body {
.theree-computer { .theree-computer {
margin-bottom: 179px; margin-bottom: 179px;
} }
.foto-celular {
max-height: 103px ;
}
/*texto inicial*/ /*texto inicial*/
.text { .text {
@ -100,6 +104,10 @@ body {
width: 29%; width: 29%;
} }
.text-margin {
margin-bottom: 116px;
}
/*Cards do topo*/ /*Cards do topo*/
.cards-top { .cards-top {
@ -107,6 +115,7 @@ body {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
padding: 0 72px; padding: 0 72px;
margin-bottom: 107px;
} }
.card-top-box { .card-top-box {
@ -251,6 +260,10 @@ body {
} }
@media screen and (max-width: 1023px) { @media screen and (max-width: 1023px) {
.logo-m3 {
width: auto;
}
.banner-big { .banner-big {
display: none; display: none;
} }
@ -259,6 +272,16 @@ body {
display: block; display: block;
} }
.text-title {
font-size: 28px;
line-height: 34px;
}
.text-sub-title {
font-size: 20px;
line-height: 24px;
}
.text-description { .text-description {
text-align: center; text-align: center;
margin: 0 0 79px; margin: 0 0 79px;

4
index.html
View File

@ -89,7 +89,7 @@
</figure> </figure>
<figure class="card"> <figure class="card">
<img class="card-foto-bottom" src="./assents/imagens/card-bottom-group.png" alt="foto de um celular"> <img class="card-foto-bottom foto-celular" src="./assents/imagens/card-bottom-group.png" alt="foto de um celular">
<figcaption class="text-card-bottom"> <figcaption class="text-card-bottom">
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. 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.
</figcaption> </figcaption>
@ -97,7 +97,7 @@
</div> </div>
</section> </section>
<section class="text" > <section class="text text-margin" >
<img class="foto-final-reverse" src="./assents/imagens/banner-bottom-reverse.png" alt="Foto de um computador e um óculos"> <img class="foto-final-reverse" src="./assents/imagens/banner-bottom-reverse.png" alt="Foto de um computador e um óculos">
<div class="text-final"> <div class="text-final">
<h3 class="text-title-final">Lorem ipsum dolor sit amet</h3> <h3 class="text-title-final">Lorem ipsum dolor sit amet</h3>