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

feat: adiciona cards de baixo

Browse Source
This commit is contained in:
Vitor Soares 2022-10-11 19:00:09 -03:00
parent 76849e1e60
commit 7b9fff513c
2 changed files with 121 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

85
assets/styles/main.css
View File

@ -93,22 +93,62 @@ body {
text-align: center;
}
/*Adiciona banner do meio*/
.middle-banner {
display: grid;
grid-template-columns: repeat(3, 1fr);
padding: 60px 70px 130px;
margin-bottom: 130px;
position: relative;
display: flex;
justify-content: center;
margin-bottom: 162px;
padding: 0 72px;
}
.middle-banner-wrapper {
display: flex;
align-items: center;
gap: 40px;
width: 100%;
max-height: 27vw;
background: #E0E0E0;
}
.middle-banner-image img {
width: 100%;
}
.middle-banner-background {
position: absolute;
background: #E0E0E0;
height: 85%;
width: 100%;
top: -32px;
left: 0;
z-index: -1;
}
/*Adiciona bottom card*/
.bottom-cards {
display: grid;
grid-template-columns: repeat(4, max-content);
gap: 16px;
padding: 0 0 108px 0;
max-width: fit-content;
margin: 0 auto;
}
.bottom-card {
display: flex;
flex-direction: column;
align-items: center;
padding: 36px 32px 65px;
box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.15);
}
.bottom-card-image {
display: block;
max-width: 100%;
height: auto;
margin-bottom: 18px;
}
.bottom-card-description {
max-width: 368px;
font-size: 16px;
line-height: 24px;
text-align: center;
}
/*Media Querie*/
@ -118,10 +158,22 @@ body {
}
}
@media screen and (max-width:1776px) {
.bottom-cards {
grid-template-columns: repeat(2, 1fr);
}
}
@media screen and (max-width: 768px) {
.top-cards {
grid-template-columns: 1fr;
padding: 0 26px 80px;
padding: 0 32px 80px;
}
.bottom-cards {
grid-template-columns: 1fr;
padding: 0 24px 98px;
}
}
@ -150,11 +202,18 @@ body {
}
.middle-banner {
padding: 0;
margin-bottom: 80px;
}
.middle-banner-wrapper {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, 1fr);
grid-template-rows: repeat(2, auto);
padding: 30px 23px 0;
margin-bottom: 80px;
gap: 14px;
max-width: 900px;
}
.middle-banner-image:nth-child(1) {
@ -168,7 +227,9 @@ body {
.middle-banner-image:nth-child(3) {
grid-column: 1 / span 2;
order: 3;
width: 100%;
}
}
@media screen and (min-width: 768px) and (max-width: 1200px) {

58
index.html
View File

@ -68,21 +68,59 @@
<!--Adiciona banner do meio-->
<div class="middle-banner">
<figure class="middle-banner-image">
<div class="middle-banner-background"></div>
<div class="middle-banner-wrapper">
<figure class="middle-banner-image">
<img src="assets/imagens/middle-banner-image1.png" alt="Primeira Imagem do Banner do Meio" />
</figure>
<figure class="middle-banner-image">
<img src="assets/imagens/middle-banner-image2.png" alt="Segunda Imagem do Banner do Meio" />
</figure>
</figure>
<figure class="middle-banner-image">
<img src="assets/imagens/middle-banner-image2.png" alt="Segunda Imagem do Banner do Meio" />
</figure>
<figure class="middle-banner-image">
<img src="assets/imagens/middle-banner-image3.png" alt="Terceira Imagem do Banner do Meio" />
<figure class="middle-banner-image">
<img src="assets/imagens/middle-banner-image3.png" alt="Terceira Imagem do Banner do Meio" />
</figure>
</figure>
</div>
</div>
<!--Adiciona bottom card-->
<section class="bottom-cards">
<div class="bottom-card">
<img class="bottom-card-image" src="assets/imagens/bottom-card-image1.png" alt="Imagem do Primeiro Card de Baixo" />
<p class="bottom-card-description">
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>
</div>
<div class="bottom-card">
<img class="bottom-card-image" src="assets/imagens/bottom-card-image2.png" alt="Imagem do Segundo Card de Baixo" />
<p class="bottom-card-description">
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>
</div>
<div class="bottom-card">
<img class="bottom-card-image" src="assets/imagens/bottom-card-image3.png" alt="Imagem do Terceiro Card de Baixo" />
<p class="bottom-card-description">
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>
</div>
<div class="bottom-card">
<img class="bottom-card-image" src="assets/imagens/bottom-card-image4.png" alt="Imagem do Quarto Card de Baixo" />
<p class="bottom-card-description">
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>
</div>
</section>
</main>
</body>
</html>