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

feat: cria area da landing page que contem os tres cards, feito tanto na versão mobile quanto na versao desktop

Browse Source
This commit is contained in:
Emmanuel Vitor Pereira de Jesus 2022-10-10 13:56:50 -03:00
parent 36072312cf
commit 909a569eaa
2 changed files with 121 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
index.html
View File

@ -39,6 +39,35 @@
</div>
<img src="assets/fxemoji_threenetworkedcomputers.png" alt="Computadores" class="banner-infocard">
</div>
<div class="container-icones">
<div class="container-cards">
<div class="container-card1">
<figure>
<img class="icon-card" src="assets/icons/shop.svg" alt="icone de shopping">
<figcaption class="text-card">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras
euismod enim non dui
fringilla interdum. </figcaption>
</figure>
</div>
<div class="container-card2">
<figure>
<img class="icon-card" src="assets/icons/shopping-bag.svg" alt="icone bolsa de shopping">
<figcaption class="text-card">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras
euismod enim non dui
fringilla interdum. </figcaption>
</figure>
</div>
<div class="container-card3">
<figure>
<img class="icon-card" src="assets/icons/coin.svg" alt="icone de mão segurando moeda">
<figcaption class="text-card">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras
euismod enim non dui
fringilla interdum. </figcaption>
</figure>
</div>
</div>
</div>
</main>
</body>

98
style/style.css
View File

@ -56,11 +56,68 @@ header {
}
.banner-infocard {
width: 315px;
height: 315px;
width: 19.688rem;
height: 19.688rem;
display: block;
}
/* container com icones */
.container-icones {
background-color: #F0F0F0;
width: 100%;
padding: 4.625rem 25.875rem;
display: flex;
justify-content: center;
}
.container-cards {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr;
gap: 20px;
grid-template-areas:
"container-card1 container-card2 container-card3";
}
.container-card1,
.container-card2,
.container-card3 {
width: 100%;
min-width: 21.896rem;
grid-area: container-card2 container-card3 container-card1;
background-color: #FFF;
}
.container-card1,
.container-card2,
.container-card3 {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
padding: 36px 28px 24px;
}
.icon-card {
width: 6.409rem;
height: 6.409rem;
display: block;
margin: 0 auto;
margin-bottom: 28px;
}
.text-card {
font-size: 16px;
line-height: 24px;
text-align: center;
margin-bottom: 28px;
color: #000;
margin-bottom: 28px;
font-weight: 400;
}
/* Media Queries */
@media screen and (min-width:280px) and (max-width: 1023px) {
@ -70,10 +127,6 @@ header {
display: none;
}
.banner-principal-mobile {
object-fit: cover;
}
/* Infocard */
.container-infocard {
flex-direction: column;
@ -107,6 +160,39 @@ header {
height: 15rem;
width: 15rem;
}
/* container banner icones */
.container-icones {
background-color: #F0F0F0;
width: 100%;
padding: 2.375rem 2rem;
}
.container-cards {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr 1fr 1fr;
gap: 16px 0px;
grid-auto-flow: column dense;
grid-template-areas:
"container-card1"
"container-card2"
"container-card3";
}
.container-card1 {
grid-area: container-card1;
}
.container-card2 {
grid-area: container-card2;
}
.container-card3 {
grid-area: container-card3;
}
}
@media (min-width:1024px) {