Feature: added banner-midle

This commit is contained in:
Thaís Ferreira Caetano de Jesus 2022-10-13 10:09:58 -03:00
parent 75d1dec63d
commit 42dc21869f
5 changed files with 42 additions and 10 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 236 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 213 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 317 KiB

View File

@ -24,8 +24,6 @@ body{
display: none;
}
.text-infocard{
display: flex;
flex-direction: column;
@ -88,6 +86,28 @@ body{
max-height: 104px;
}
.banner-midle-back{
background: #E0E0E0;
padding: 0 72px;
}
.banners-midle{
display: flex;
gap: 39px;
}
.banners-midle img{
position: relative;
top: 62px;
}
.banner-midle{
display: flex;
gap: 39px;
}
@media screen and (max-width: 414px){
.banner-principal-desktop,
@ -98,19 +118,21 @@ body{
.infocard-image-mobile{
display: unset;
}
}
@media screen and (max-width: 768px){
.text-subtitle{
.infocard-subtitle{
font-size: 20px;
line-height: 24px;
}
.text-title{
.infocard-title{
font-size: 28px;
line-height: 34px;
}
.text-description{
.infocard-description{
width: 100%;
padding: 0 40px;
}
.top-cards{
flex-direction: column;

View File

@ -8,7 +8,7 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="stylesheet" href="/Styles/index.css"/>
<link rel="stylesheet" href="./Styles/index.css"/>
<link href="https: //fonts.googleapis.com/css2? family= Inter:wght@400;500 & display=swap" rel="stylesheet"/>
@ -43,12 +43,11 @@
</div>
<div class="infocard-image">
<img class="infocard-image-desktop" src="./Assets/SVG/Computer-image-desktop.svg" alt="infocard image desktop">
<img class="infocard-image-desktop" src="./Assets/SVG/Computer-image-desktop.svg" alt="infocard image desktop">
<img class="infocard-image-mobile" src="./Assets/SVG/Computer-image-mobile.svg" alt="infocard image mobile">
</div>
</section>
<div class="top-cards">
<div class="top-card">
<img class="card-icon" src="./Assets/SVG/Store-icon.svg" alt="Store icon"/>
@ -67,7 +66,7 @@
</div>
<div class="top-card">
<img class="card-icon" src="./Assets/SVG/Coin-icon.svg" alt="Coin icon">
<img class="card-icon" src="./Assets/SVG/Coin-icon.svg" alt="Coin icon"/>
<p class="card-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Cras euismod enim non dui fringilla interdum.
@ -75,7 +74,18 @@
</div>
</div>
<div class="banner-midle-back">
<div class="banners-midle">
<div class="banner-midle">
<img src="./Assets/Images/Banner-midle-first.png" alt="Banner midle first">
<img src="./Assets/Images/Banner-midle-second.png" alt="Banner midle second">
</div>
<img src="./Assets/Images/Banner-midle-third.png" alt="Banner-midle-third">
</div>
</div>
</main>
</body>
</html>