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 Top Info cards e Top Cards desktop

Browse Source
This commit is contained in:
DaviHKlein 2022-10-10 18:56:36 -03:00
parent 28e8f38f1d
commit 23953b8401
8 changed files with 87 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
assets/images/coin.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.9 KiB

BIN
assets/images/notebook1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 232 KiB

BIN
assets/images/notebook2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 212 KiB

BIN
assets/images/notebook3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 318 KiB

BIN
assets/images/shop.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 965 B

BIN
assets/images/shopping-bag.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.0 KiB

59
assets/styles/main.css
View File

@ -27,5 +27,62 @@ body{
.top-infocard{ .top-infocard{
display: flex; display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
max-width: 100%;
padding-top: 4%;
}
.top-infocard-text{
width: 40.25%;
margin-bottom: 4.42%;
}
.top-infocard-subtitle{
font-weight: 400;
display: flex;
justify-content: center;
font-size: 32px;
}
.top-infocard-title{
display: flex;
justify-content: center;
margin-bottom: 3.66%;
font-weight: 500;
font-size: 48px;
}
.top-infocard-description{
font-size: 16px;
line-height: 24px;
}
.top-infocard-image{
width: 16.6%;
}
.top-cards{
display: flex;
justify-content: center;
align-self: center;
margin-top: 9.4%;
gap: 2%;
}
.top-card-images{
display: flex;
justify-content: center;
padding-bottom: 10%;
}
.top-card{
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.23);
width: 18.4%;
padding: 2%;
}
.top-card-description{
text-align: center;
} }

32
index.html
View File

@ -13,12 +13,16 @@
<body> <body>
<header class="header"> <header class="header">
<a href=""> <a href="">
<img class="header-logo" src="./assets/images//LogoM3Academy.svg" alt="logo M3"> <figure>
<img class="header-logo" src="./assets/images//LogoM3Academy.svg" alt="logo M3">
</figure>
</a> </a>
</header> </header>
<main> <main>
<section class="banner-desktop"> <section class="banner-desktop">
<img class="banner-desktop-img" src="./assets/images/top-banner.png" alt="Banner principal"> <figure>
<img class="banner-desktop-img" src="./assets/images/top-banner.png" alt="Banner principal">
</figure>
</section> </section>
<section class="top-infocard"> <section class="top-infocard">
@ -27,8 +31,30 @@
<h1 class="top-infocard-title">DOLOR SIT AMET</h1> <h1 class="top-infocard-title">DOLOR SIT AMET</h1>
<p class="top-infocard-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. Curabitur ut tortor sed lacus egestas vulputate vel sit amet velit. Nulla suscipit magna dui. </p> <p class="top-infocard-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. Curabitur ut tortor sed lacus egestas vulputate vel sit amet velit. Nulla suscipit magna dui. </p>
</div> </div>
<img class="top-infocard-image" src="./assets/images/Computadores.png" alt="Infocard"> <img class="top-infocard-image" src="./assets/images/Computadores.png" alt="Infocard">
</section> </section>
<section class="top-cards">
<div class="top-card">
<figure class="top-card-images">
<img 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">
</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">
</figure>
<p class="top-card-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </p>
</div>
</section>
</main> </main>
</body> </body>
</html> </html>