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

criar texto final, ajuste galeria,banner,final

Browse Source
This commit is contained in:
Matheus Mariosa 2022-10-13 12:19:25 -03:00
parent 6e9efa8c67
commit ab2f028b32
3 changed files with 134 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
assents/imagens/banner-bottom-reverse.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 247 KiB

110
assents/style/estilo.css
View File

@ -80,21 +80,49 @@ body {
padding: 0 28px;
width: 45%;
}
/*texto final*/
.text-title-final {
font-weight: 600;
font-size: 32px;
line-height: 39px;
}
.text-description-final {
text-align: center;
font-size: 16px;
line-height: 24px;
}
.text-final {
display: block;
margin: 0 36% 50px;
width: 29%;
}
/*Cards do topo*/
.cards-top {
display: grid;
grid-template-columns: repeat(3, max-content);
gap: 20px;
display: flex;
align-items: center;
justify-content: center;
padding: 0 72px;
}
.card-top-box {
display: flex;
align-items: center;
justify-content: center;
gap: 20px;
width: 100%;
}
.card {
display: flex;
flex-direction: column;
align-items: center;
padding: 36px 26px 27px ;
justify-content: center;
padding: 35px 25px 26px ;
background: #FFFFFF;
box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23);
}
@ -113,11 +141,13 @@ body {
text-align: center;
}
/*Card de baixo */
.amiga {
.card-bottom {
display: flex;
align-items: center;
justify-content: center;
padding: 0 4.5rem;
padding: 0 72px;
margin-top: 81px;
}
@ -154,7 +184,8 @@ body {
background-color: #E0E0E0;
height: 14%;
max-height: 570px;
padding-top: 62px;
padding-top: 31px;
margin: 0 0 5%;
}
.gallery-box {
@ -164,6 +195,7 @@ body {
gap: 39px;
width: 30%;
height: 89%;
transform: translateY(31px);
}
.gallery-foto {
@ -174,6 +206,24 @@ body {
max-height: 530px;
}
/*foto final*/
.foto-final {
display: block;
align-items: center;
width: 71%;
height: 7%;
margin: 0 15%;
}
.foto-final-reverse {
display: none;
width: 100%;
height: 8%;
margin-bottom: 50px;
}
@media screen and (max-width: 1023px) {
.banner-big {
display: none;
@ -189,8 +239,10 @@ body {
width: 100%;
}
.text-card {
max-width: max-content;
.text-final {
text-align: center;
margin: 0 0 50px;
width: 100%;
}
.theree-computer {
@ -199,7 +251,43 @@ body {
}
.cards-top {
grid-template-columns: 1fr;
padding: 0 32px;
}
.card-top-box {
flex-direction: column;
margin: 0 32px;
}
}
.gallery {
padding: 0;
}
.gallery-box {
display: grid;
grid-template-columns: repeat(2, 1fr);
width: 100%;
padding: 0 23px;
}
.gallery-foto-mobile-3 {
grid-column: 1/3 ;
grid-row: 2/3;
}
.card-bottom {
padding: 0 8% 1rem;
}
.card-total-bottom {
flex-direction: column;
}
.foto-final-reverse {
display: block;
}
.foto-final {
display: none;
}
}

58
index.html
View File

@ -38,55 +38,57 @@
</section>
<section class="cards-top">
<figure class="card">
<img class="card-foto" src="./assents/imagens/card-top-shop.png" alt="Foto da loja"/>
<figcaption class="text-card"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.</figcaption>
</figure>
<div class="card-top-box">
<figure class="card">
<img class="card-foto" src="./assents/imagens/card-top-shop.png" alt="Foto da loja"/>
<figcaption class="text-card"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.</figcaption>
</figure>
<figure class="card">
<img class="card-foto" src="./assents/imagens/card-top-shopping-bag.png" alt="Foto de bolsa da loja"/>
<figcaption class="text-card"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.</figcaption>
</figure>
<figure class="card">
<img class="card-foto" src="./assents/imagens/card-top-shopping-bag.png" alt="Foto de bolsa da loja"/>
<figcaption class="text-card"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.</figcaption>
</figure>
<figure class="card">
<img class="card-foto" src="./assents/imagens/card-top-coin.png" alt="Foto de uma moeda"/>
<figcaption class="text-card"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.</figcaption>
</figure>
<figure class="card">
<img class="card-foto" src="./assents/imagens/card-top-coin.png" alt="Foto de uma moeda"/>
<figcaption class="text-card"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.</figcaption>
</figure>
</div>
</section>
<div class="gallery">
<div class="gallery-box">
<img class="gallery-foto" src="./assents/imagens/card-middle-1.png" alt="computador quase completamente fechado">
<img class="gallery-foto" src="./assents/imagens/card-middle-2.png" alt="computador meio completamente fechado">
<img class="gallery-foto" src="./assents/imagens/card-middle-3.png" alt="computador quase completamente fechado de lado">
<img class="gallery-foto gallery-foto-mobile1-1" src="./assents/imagens/card-middle-1.png" alt="computador quase completamente fechado">
<img class="gallery-foto gallery-foto-mobile-2" src="./assents/imagens/card-middle-2.png" alt="computador meio completamente fechado">
<img class="gallery-foto gallery-foto-mobile-3" src="./assents/imagens/card-middle-3.png" alt="computador quase completamente fechado de lado">
</div>
</div>
<section class="amiga">
<section class="card-bottom">
<div class="card-total-bottom">
<figure class="card card-bottom">
<figure class="card">
<img class="card-foto-bottom" src="./assents/imagens/card-bottom-money.png" alt="foto de dinheiro">
<figcaptionet 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.
</figcaption>
</figure>
<figure class="card card-bottom">
<figure class="card">
<img class="card-foto-bottom" src="./assents/imagens/card-bottom-coin.png" alt=" foto de moeda">
<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.
</figcaption>
</figure>
<figure class="card card-bottom">
<figure class="card">
<img class="card-foto-bottom" src="./assents/imagens/card-bottom-laptop.png" alt="foto de um laptop">
<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.
</figcaption>
</figure>
<figure class="card card-bottom">
<figure class="card">
<img class="card-foto-bottom" src="./assents/imagens/card-bottom-group.png" alt="foto de um celular">
<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.
@ -95,8 +97,18 @@
</div>
</section>
</main>
<section class="text" >
<img class="foto-final-reverse" src="./assents/imagens/banner-bottom-reverse.png" alt="Foto de um computador e um óculos">
<div class="text-final">
<h3 class="text-title-final">Lorem ipsum dolor sit amet</h3>
<p class="text-description-final">
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>
<img class="foto-final" src="./assents/imagens/banner-bottom.png" alt="Foto de computador embasado">
</section>
</main>
</body>
</html>