DaviKlein/challenge-landing-page-Davi-Klein
1
0
Fork 0
forked from M3-Academy/challenge-landing-page
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Adiciona as imagens do middle-banner respansivo desktop

Browse Source
This commit is contained in:
DaviHKlein 2022-10-10 21:33:44 -03:00
parent 23953b8401
commit b5813c42e4
2 changed files with 58 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
assets/styles/main.css
View File

@ -32,6 +32,7 @@ body{
flex-direction: column;
max-width: 100%;
padding-top: 4%;
margin-bottom: 9.4%;
}
.top-infocard-text{
@ -67,10 +68,14 @@ body{
display: flex;
justify-content: center;
align-self: center;
margin-top: 9.4%;
margin-bottom: 4.2%;
gap: 2%;
}
.card-imgs{
width: 37.6%;
}
.top-card-images{
display: flex;
justify-content: center;
@ -85,4 +90,32 @@ body{
.top-card-description{
text-align: center;
}
.middle-banners{
background-color: #E0E0E0;
}
.middle-banners-content{
display: flex;
justify-content: center;
position: relative;
top: 6.4vmin;
}
.banner-list{
display: flex;
list-style: none;
}
.banner-list-space{
margin-right: 4vmin
}
.middle-banners-imgs{
width: 100%;
}
.image-height{
width: 57.8vmin;
}

27
index.html
View File

@ -37,24 +37,45 @@
<section class="top-cards">
<div class="top-card">
<figure class="top-card-images">
<img src="/assets/images/shop.png" alt="shop">
<img class="card-imgs" src="/assets/images/shop.png" alt="shop">
</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-images">
<img src="/assets/images/shopping-bag.png" alt="bag">
<img class="card-imgs" src="/assets/images/shopping-bag.png" alt="bag">
</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-images">
<img src="/assets/images/coin.png" alt="coin">
<img class="card-imgs" src="/assets/images/coin.png" alt="coin">
</figure>
<p class="top-card-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </p>
</div>
</section>
<section class="middle-banners">
<div class="middle-banners-content">
<ul class="banner-list">
<li class="banner-list-space">
<figure class="image-height">
<img class="middle-banners-imgs" src="./assets/images/notebook1.png" alt="Banner do meio1">
</figure>
</li>
<li class="banner-list-space">
<figure class="image-height">
<img class="middle-banners-imgs" src="./assets/images/notebook2.png" alt="Banner do meio2">
</figure>
</li>
</ul>
<figure class="image-height">
<img class="middle-banners-imgs" src="./assets/images/notebook3.png" alt="Banner do meio3">
</figure>
</div>
</section>
</main>
</body>
</html>