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

feature/landing-page #1

Merged
EleonoraOtz merged 12 commits from feature/landing-page into main 2022-10-13 23:46:54 +00:00
Conversation 0 Commits 12 Files Changed 22 +105 -43
6 changed files with 105 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 5c5e9c17c8 - Show all commits

0
assets/images/grid-area-image-01.png → assets/images/gallery-area-image-01.png
View File

Side by Side

After

Width:  |  Height:  |  Size: 234 KiB

0
assets/images/grid-area-image-02.png → assets/images/gallery-area-image-02.png
View File

Side by Side

After

Width:  |  Height:  |  Size: 215 KiB

0
assets/images/grid-area-image-03.png → assets/images/gallery-area-image-03.png
View File

Side by Side

After

Width:  |  Height:  |  Size: 318 KiB

BIN
assets/images/top-card-image-03.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.9 KiB

84
assets/styles/main.css
View File

@ -2,6 +2,7 @@
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Inter' , sans-serif;
}
body {
@ -71,14 +72,13 @@ body {
}
.top-infocard-image {
width: 16%;
width: 17%;
}
/*Cards do Topo*/
.top-cards {
display: grid;
grid-template-columns: repeat(3, max-content);
display: flex;
background: #FFFFFF;
gap: 21px;
justify-content: center;
@ -91,13 +91,18 @@ body {
display: flex;
flex-direction: column;
align-items: center;
padding: 47px 25px 27px 26px;
justify-content: center;
padding: 35px 26px 27px 26px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.23);
min-height: 287px;
width: 18%;
gap: 27px;
height: auto;
}
.top-card-image {
display: block;
margin-bottom: 22px;
width: 34%;
}
.top-card-description {
@ -107,11 +112,36 @@ body {
text-align: center;
}
.gallery-area {
background: #E0E0E0;
width: 100%;
}
.gallery-wrapper {
position: relative;
transform: translateY(4rem);
display: flex;
gap: 39px;
justify-content: center;
width: 88%;
margin: 0 auto;
}
.gallery-area-images {
display: block;
}
.gallery-area-image {
width: 100%
}
/*Versão mobile*/
@media screen and (max-width: 320px) {
.header-logo {
width: 180px
/*Apresentar padding lateral para espaçar melhor as informações*/
}
}
@ -126,7 +156,7 @@ body {
}
.top-infocard {
margin: 73px 0 90px;
margin: 73px 28px 91px;
}
.top-infocard-text {
@ -152,27 +182,49 @@ body {
.top-infocard-image {
width: 58%;
}
.top-cards {
grid-template-columns: 1fr;
padding: 36px 26px;
flex-direction: column;
}
}
/*Versão telas de 1025px até 1200px*/
.top-card {
width: 84%;
}
@media screen and (min-width: 1025px) and (max-width: 1200px) {
.top-cards {
grid-template-columns: repeat(2, max-content);
padding: 36px 26px;
}
.top-card-image {
max-width: 102px;
}
.gallery-wrapper {
display: grid;
grid-template-columns: repeat(2, 1fr);
width: 89%;
gap: 23px 14px;
transform: translateY(32px);
}
.gallery-area-images {
}
.gallery-area-images-01 {
order: 2;
}
.gallery-area-images-02 {
order: 1;
}
.gallery-area-images-03 {
grid-column: 1/2 span;
order: 2;
}
}
/*Versão telas 4k*/
@media screen and (min-width: 2500px) {
/*rever as fontes, precisam estar no dobro do tamanho do desktop*/
.top-infocard-text {
width: 52%;
margin: 95px 0 95px;

64
index.html
View File

@ -49,36 +49,46 @@
<!-- Cards do topo -->
<section class="top-cards">
<div class="top-card">
<figure class="top-card-image">
<img src="./assets/images/top-card-image-01.png" alt="Imagem do card do topo: Loja" />
</figure>
<figure class="top-card">
<img class="top-card-image" src="./assets/images/top-card-image-01.png" alt="Imagem do card do topo: Loja" />
<figcaption class="top-card-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
</figcaption>
</figure>
<p class="top-card-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
</p>
</div>
<figure class="top-card">
<img class="top-card-image" src="./assets/images/top-card-image-02.png" alt="Imagem do card do topo: Bolsa de compras" />
<figcaption class="top-card-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
</figcaption>
</figure>
<div class="top-card">
<figure class="top-card-image">
<img src="./assets/images/top-card-image-02.png" alt="Imagem do card do topo: Bolsa de compras" />
</figure>
<p class="top-card-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
</p>
</div>
<div class="top-card">
<figure class="top-card-image">
<img src="./assets/images/top-card-image-03.png" alt="Imagem do card do topo: Moeda" />
</figure>
<p class="top-card-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
</p>
</div>
<figure class="top-card">
<img class="top-card-image" src="./assets/images/top-card-image-03.png" alt="Imagem do card do topo: Moeda" />
<figcaption class="top-card-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
</figcaption>
</figure>
</section>
<div class="gallery-area">
<div class="gallery-wrapper">
<figure class="gallery-area-images gallery-area-images-01">
<img class="gallery-area-image" src="./assets/images/gallery-area-image-01.png" alt="Imagem da galeria: Computador 1" />
</figure>
<figure class="gallery-area-images gallery-area-images-02">
<img class="gallery-area-image" src="./assets/images/gallery-area-image-02.png" alt="Imagem da galeria: Computador 2" />
</figure>
<figure class="gallery-area-images gallery-area-images-03">
<img class="gallery-area-image" src="./assets/images/gallery-area-image-03.png" alt="Imagem da galeria: Computador 3" />
</figure>
</div>
</div>
</main>
</body>
</html>