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

adiciona cards desktop

Browse Source
This commit is contained in:
Henrique Martins Silva 2022-10-11 12:59:55 -03:00
parent cd86d7f875
commit acd86bd4b8
5 changed files with 96 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
assets/image/bag.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.0 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.9 KiB

BIN
assets/image/shopping.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 945 B

57
index.html
View File

@ -0,0 +1,57 @@
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style/style.css">
</head>
<body>
<header class="page-header">
<a href="/">
<img class= "image-header" src="assets/svg/Logo-M3Academy 1 - Copia.svg" alt="">
</a>
</header>
<main>
<div>
<figure>
<img class="main-banner banner-desktop" src="assets/image/main-banner-desktop.png" alt="main banner da página desktop">
<img class="main-banner banner-mobile" src="assets/image/main-banner-mobile.png" alt="main banner da página mobile">
</figure>
</div>
<section class="top-infocard">
<div class="infocard">
<h2 class="infocard-subtitle">Lorem ipsum</h2>
<h1 class="infocard-title">dolor sit amet</h1>
<p class="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>
<figure class="infocard-image">
<img src="assets/image/top-infocard-image.png" alt="imagem do primeiro infocard">
</figure>
<section class="cards-conteiner">
<div class="card">
<img class="image-card" src="assets/image/shopping.png" alt="">
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </p>
</div>
<div class="card">
<img class="image-card" src="assets/image/bag.png" alt="">
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </p>
</div>
<div class="card">
<img class="image-card" src="assets/image/coin.png" alt="">
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </p>
</div>
</section>
</section>
</main>
</body>
</html>

40
style/style.css
View File

@ -84,7 +84,6 @@
.infocard-title{ .infocard-title{
font-size: 28px; font-size: 28px;
} }
}
.infocard-description{ .infocard-description{
font-size: 16px; font-size: 16px;
@ -94,8 +93,43 @@
} }
.infocard-image{ .infocard-image{
max-width: 100%; display: flex;
max-width: 239px;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: 100%;
}
}
.cards-conteiner{
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
padding: 178px 0 0;
width: 100%;
}
.card{
display: flex;
flex-direction: column;
align-items: center;
max-width: 350px;
width: 100%;
margin: 0 40px;
background: #FFFFFF;
box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23);
}
.image-card{
display: block;
margin-bottom: 26px;
margin-top: 36px;
}
.card-text{
display: flex;
text-align: center;
justify-content: center;
padding: 0 26px 26px;
max-width: 300px;
} }