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

feat(home): cria imagem central e cards da seção principal

Browse Source
This commit is contained in:
Andrea Matsunaga 2022-10-12 18:02:36 -03:00
parent 557fce8e3e
commit 1ed423ff18
2 changed files with 63 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
index.html
View File

@ -36,13 +36,11 @@
</p> </p>
</div> </div>
<div class="top-image"> <img class="top-section-image" src="./src/assets/img/top-section-image.png" alt="Imagem Central da Seção Principal" />
<img src="./src/assets/img/top-section-image.png" alt="Imagem Central da Seção Principal" />
</div>
<div class="top-cards"> <div class="top-section-cards">
<div class="top-card"> <div class="top-card">
<img class="top-card-image" src="./src/assets/img/top-card-image-01.png" alt="Imagem do Primeiro Card da Seção Principal"/> <img class="top-card-image top-card-image-01" src="./src/assets/img/top-card-image-01.png" alt="Imagem do Primeiro Card da Seção Principal"/>
<p class="top-card-description"> <p class="top-card-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.

61
src/styles/main.css
View File

@ -65,6 +65,46 @@ body {
font-size: 16px; font-size: 16px;
} }
.top-section-image {
max-width: 17%;
margin-bottom: 180px;
display: block;
}
.top-section-cards {
display: flex;
justify-content: center;
gap: 22px;
}
.top-card {
max-width: 18%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 36px 26px 26px;
background: #FFFFFF;
box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23);
}
.top-card-image {
/* max-width: 30%; */
display: block;
margin-bottom: 30px;
}
.top-card-image-01 {
/* margin-top: 16px; */
padding: 10px 0;
}
.top-card-description {
font-size: 16px;
line-height: 24px;
text-align: center;
}
/* ----- RESPONSIVIDADE ----- */ /* ----- RESPONSIVIDADE ----- */
@media screen and (min-width: 2500px) { @media screen and (min-width: 2500px) {
@ -83,7 +123,7 @@ body {
.top-section-text { .top-section-text {
max-width: 86%; max-width: 86%;
margin: 0 28px 64px; margin-bottom: 64px;
} }
.top-section-subtitle { .top-section-subtitle {
@ -97,8 +137,27 @@ body {
} }
.top-section-description { .top-section-description {
max-width: 100%;
text-align: center; text-align: center;
} }
.top-section-image {
max-width: 58%;
margin-bottom: 90px;
}
.top-section-cards {
max-width: 84%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 24px;
}
.top-card {
max-width: 100%;
}
} }
@media screen and (max-width: 320px) { @media screen and (max-width: 320px) {