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

feat(home): adicionando area de bottom-card desktop e mobile

Browse Source
This commit is contained in:
Bernardo Cunha Ernani Waldhelm 2022-10-12 17:39:11 -03:00
parent f5db388416
commit b7ece86186
6 changed files with 61 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
assets/images/bottom-card1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
assets/images/bottom-card2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.0 KiB

BIN
assets/images/bottom-card3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

BIN
assets/images/bottom-card4.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

41
assets/styles/css/main.css
View File

@ -117,6 +117,37 @@
display: block; display: block;
} }
.bottom-cards {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
justify-content: center;
margin-top: 190px;
padding: 0 72px;
}
.bottom-cards__card{
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
background: #FFFFFF;
box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23);
padding: 36px 26px 26px;
}
.bottom-card__img {
display: block;
margin-bottom: 26px;
}
.bottom-card__description {
padding: 0 25px 27px;
text-align: center;
max-width: 300px;
}
@media screen and (min-width: 769px) and (max-width: 1200px) { @media screen and (min-width: 769px) and (max-width: 1200px) {
.home-destaque__img { .home-destaque__img {
width: 58%; width: 58%;
@ -127,9 +158,13 @@
grid-template-columns: repeat(2, max-content); grid-template-columns: repeat(2, max-content);
} }
.card__description { .card__description, .bottom-card__description {
max-width: 230px; max-width: 230px;
} }
.bottom-cards{
grid-template-columns: repeat(2, 1fr);
}
} }
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
@ -161,7 +196,7 @@
max-width: 240px; max-width: 240px;
} }
.cards { .cards, .bottom-cards {
grid-template-columns: 1fr; grid-template-columns: 1fr;
padding: 0 28px; padding: 0 28px;
} }
@ -203,7 +238,7 @@
.home-destaque__text__title{ .home-destaque__text__title{
font-size: 26px; font-size: 26px;
} }
.cards__card{ .cards__card, .bottom-cards__card{
max-width: 235px; max-width: 235px;
} }
} }

24
index.html
View File

@ -15,7 +15,10 @@
</head> </head>
<body> <body>
<header class="header"> <header class="header">
<img class="header__logo" src="./assets/images/logo-m3.svg" alt="Logo M3 Academy"> <a href="/">
<img class="header__logo" src="./assets/images/logo-m3.svg" alt="Logo M3 Academy">
</a>
</header> </header>
<main> <main>
@ -58,6 +61,25 @@
</div> </div>
</section> </section>
<section class="bottom-cards">
<div class="bottom-cards__card">
<img src="/assets/images/bottom-card1.png" alt="Imagem do Card 1" class="bottom-card__img">
<p class='bottom-card__description'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </p>
</div>
<div class="bottom-cards__card">
<img src="/assets/images/bottom-card2.png" alt="Imagem do Card 2" class="bottom-card__img">
<p class='bottom-card__description'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </p>
</div>
<div class="bottom-cards__card">
<img src="/assets/images/bottom-card3.png" alt="Imagem do Card 3" class="bottom-card__img">
<p class='bottom-card__description'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </p>
</div>
<div class="bottom-cards__card">
<img src="/assets/images/bottom-card4.png" alt="Imagem do Card 4" class="bottom-card__img">
<p class='bottom-card__description'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </p>
</div>
</section>
</main> </main>
</body> </body>