Feature: added banner-midle
This commit is contained in:
parent
75d1dec63d
commit
42dc21869f
BIN
Assets/Images/Banner-midle-first.png
Normal file
BIN
Assets/Images/Banner-midle-first.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 236 KiB |
BIN
Assets/Images/Banner-midle-second.png
Normal file
BIN
Assets/Images/Banner-midle-second.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 213 KiB |
BIN
Assets/Images/Banner-midle-third.png
Normal file
BIN
Assets/Images/Banner-midle-third.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 317 KiB |
@ -24,8 +24,6 @@ body{
|
|||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.text-infocard{
|
.text-infocard{
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
@ -88,6 +86,28 @@ body{
|
|||||||
max-height: 104px;
|
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){
|
@media screen and (max-width: 414px){
|
||||||
.banner-principal-desktop,
|
.banner-principal-desktop,
|
||||||
@ -98,19 +118,21 @@ body{
|
|||||||
.infocard-image-mobile{
|
.infocard-image-mobile{
|
||||||
display: unset;
|
display: unset;
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (max-width: 768px){
|
@media screen and (max-width: 768px){
|
||||||
.text-subtitle{
|
.infocard-subtitle{
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
line-height: 24px;
|
line-height: 24px;
|
||||||
}
|
}
|
||||||
.text-title{
|
.infocard-title{
|
||||||
font-size: 28px;
|
font-size: 28px;
|
||||||
line-height: 34px;
|
line-height: 34px;
|
||||||
}
|
}
|
||||||
.text-description{
|
.infocard-description{
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
padding: 0 40px;
|
||||||
}
|
}
|
||||||
.top-cards{
|
.top-cards{
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
20
index.html
20
index.html
@ -8,7 +8,7 @@
|
|||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
|
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
<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"/>
|
<link href="https: //fonts.googleapis.com/css2? family= Inter:wght@400;500 & display=swap" rel="stylesheet"/>
|
||||||
|
|
||||||
@ -43,12 +43,11 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="infocard-image">
|
<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">
|
<img class="infocard-image-mobile" src="./Assets/SVG/Computer-image-mobile.svg" alt="infocard image mobile">
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
|
||||||
<div class="top-cards">
|
<div class="top-cards">
|
||||||
<div class="top-card">
|
<div class="top-card">
|
||||||
<img class="card-icon" src="./Assets/SVG/Store-icon.svg" alt="Store icon"/>
|
<img class="card-icon" src="./Assets/SVG/Store-icon.svg" alt="Store icon"/>
|
||||||
@ -67,7 +66,7 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="top-card">
|
<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.
|
<p class="card-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
||||||
Cras euismod enim non dui fringilla interdum.
|
Cras euismod enim non dui fringilla interdum.
|
||||||
@ -75,7 +74,18 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
</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>
|
</main>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
Loading…
Reference in New Issue
Block a user