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 banner do meio

Browse Source
This commit is contained in:
Vitor Soares 2022-10-11 16:18:09 -03:00
parent eb3195dfee
commit 76849e1e60
2 changed files with 60 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
assets/styles/main.css
View File

@ -93,6 +93,24 @@ body {
text-align: center; text-align: center;
} }
/*Adiciona banner do meio*/
.middle-banner {
display: grid;
grid-template-columns: repeat(3, 1fr);
padding: 60px 70px 130px;
margin-bottom: 130px;
gap: 40px;
width: 100%;
max-height: 27vw;
background: #E0E0E0;
}
.middle-banner-image img {
display: block;
max-width: 100%;
height: auto;
}
/*Media Querie*/ /*Media Querie*/
@media screen and (max-width: 414px) { @media screen and (max-width: 414px) {
.main-banner { .main-banner {
@ -130,6 +148,27 @@ body {
width: 100%; width: 100%;
max-width: 240px; max-width: 240px;
} }
.middle-banner {
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, 1fr);
padding: 30px 23px 0;
margin-bottom: 80px;
gap: 14px;
}
.middle-banner-image:nth-child(1) {
order: 2;
}
.middle-banner-image:nth-child(2) {
order: 1;
}
.middle-banner-image:nth-child(3) {
grid-column: 1 / span 2;
order: 3;
}
} }
@media screen and (min-width: 768px) and (max-width: 1200px) { @media screen and (min-width: 768px) and (max-width: 1200px) {

24
index.html
View File

@ -42,7 +42,7 @@
<!--Adiciona top cards--> <!--Adiciona top cards-->
<section class="top-cards"> <section class="top-cards">
<div class="top-card"> <div class="top-card">
<img src="assets/imagens/top-card-image1.png" alt="Imagem do Primeiro Card do topo" class="top-card-image" /> <img class="top-card-image" src="assets/imagens/top-card-image1.png" alt="Imagem do Primeiro Card do topo" />
<p class="top-card-description"> <p class="top-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.
@ -50,7 +50,7 @@
</div> </div>
<div class="top-card"> <div class="top-card">
<img src="assets/imagens/top-card-image2.png" alt="Imagem do Segundo Card do topo" class="top-card-image" /> <img class="top-card-image" src="assets/imagens/top-card-image2.png" alt="Imagem do Segundo Card do topo" />
<p class="top-card-description"> <p class="top-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.
@ -58,13 +58,31 @@
</div> </div>
<div class="top-card"> <div class="top-card">
<img src="assets/imagens/top-card-image3.png" alt="Imagem do Terceiro Card do topo" class="top-card-image" /> <img class="top-card-image" src="assets/imagens/top-card-image3.png" alt="Imagem do Terceiro Card do topo" />
<p class="top-card-description"> <p class="top-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> </p>
</div> </div>
</section> </section>
<!--Adiciona banner do meio-->
<div class="middle-banner">
<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 class="middle-banner-image">
<img src="assets/imagens/middle-banner-image3.png" alt="Terceira Imagem do Banner do Meio" />
</figure>
</div>
</main> </main>
</body> </body>
</html> </html>