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

thaisferreira #1

Merged
Thais_Ferreira merged 11 commits from thaisferreira into main 2022-10-13 20:02:21 +00:00
Conversation 0 Commits 11 Files Changed 22 +42 -10
5 changed files with 42 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 42dc21869f - Show all commits

BIN
Assets/Images/Banner-midle-first.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 236 KiB

BIN
Assets/Images/Banner-midle-second.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 213 KiB

BIN
Assets/Images/Banner-midle-third.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 317 KiB

32
Styles/index.css
View File

@ -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
View File

@ -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>