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

adicona middle banners desktop

Browse Source
This commit is contained in:
Henrique Martins Silva 2022-10-12 12:48:18 -03:00
parent 0d0a2c447c
commit 5f8e523561
5 changed files with 37 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
assets/image/Rectangle 13 (2).png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 232 KiB

BIN
assets/image/Rectangle 16 (1).png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 212 KiB

BIN
assets/image/Rectangle 17 (1).png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 318 KiB

15
index.html
View File

@ -39,19 +39,28 @@
<section class="cards-conteiner"> <section class="cards-conteiner">
<div class="card"> <div class="card">
<img class="card-image" src="assets/image/shopping.png" alt=""> <img class="card-image" src="assets/image/shopping.png" alt="card um">
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </p> <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </p>
</div> </div>
<div class="card"> <div class="card">
<img class="card-image" src="assets/image/bag.png" alt=""> <img class="card-image" src="assets/image/bag.png" alt="card dois">
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </p> <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </p>
</div> </div>
<div class="card"> <div class="card">
<img class="card-image" src="assets/image/coin.png" alt=""> <img class="card-image" src="assets/image/coin.png" alt="card três">
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </p> <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </p>
</div> </div>
</section> </section>
</section> </section>
<section class="middle-conteiner">
<div class="middle-page">
<figure class="middle-images">
<img class="middle-banner" src="assets/image/Rectangle 13 (2).png" alt="middle banner">
<img class="middle-banner" src="assets/image/Rectangle 16 (1).png" alt="middle banner">
<img class="middle-banner" src="assets/image/Rectangle 17 (1).png" alt="middle banner">
</figure>
</div>
</section>
</main> </main>
</body> </body>
</html> </html>

25
style/style.css
View File

@ -129,9 +129,32 @@
text-align: center; text-align: center;
} }
@media screen and (max-width: 1024px) { @media screen and (max-width: 1024px){
.cards-conteiner { .cards-conteiner {
grid-template-columns: 1fr; grid-template-columns: 1fr;
padding: 90px 30px 80px; padding: 90px 30px 80px;
} }
} }
.middle-conteiner {
display: grid;
background: #E0E0E0;
}
.middle-page{
display: grid;
margin: 62px 72px -62px;
}
.middle-images{
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 40px;
width: 100%;
}
.middle-banner{
width: 100%
}