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

feat(index): adiciona top cards desktop e mobile #4

Merged
NicollyVieira merged 1 commits from feature/top-cards into main 2022-10-10 15:03:13 +00:00
Conversation 0 Commits 1 Files Changed 5 +76
5 changed files with 76 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
assets/images/top-card-image-01.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

BIN
assets/images/top-card-image-02.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.8 KiB

BIN
assets/images/top-card-image-03.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.7 KiB

23
index.html
View File

@ -47,6 +47,29 @@
<img class="top-infocard-image" src="/assets/images/top-infocard-image.png" alt="Banner do infoCard do topo" /> <img class="top-infocard-image" src="/assets/images/top-infocard-image.png" alt="Banner do infoCard do topo" />
</figure> </figure>
</section> </section>
<!-- top cards-->
<div class="top-cards">
<figure class="top-card">
<img class="top-card-image" src="assets/images/top-card-image-01.png" alt="imagem do primeiro card do topo" />
<figcaption class="top-card-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Craseuismod enim non dui fringilla interdum.
</figcaption>
</figure>
<figure class="top-card">
<img class="top-card-image" src="assets/images/top-card-image-02.png" alt="imagem do segundo card do topo" />
<figcaption class="top-card-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Craseuismod enim non dui fringilla interdum.
</figcaption>
</figure>
<figure class="top-card">
<img class="top-card-image" src="assets/images/top-card-image-03.png" alt="imagem do terceiro card do topo" />
<figcaption class="top-card-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Craseuismod enim non dui fringilla interdum.
</figcaption>
</figure>
</div>
</main> </main>
</body> </body>

53
styles/main.css
View File

@ -68,6 +68,42 @@ body {
line-height: 24px; line-height: 24px;
} }
/*top card*/
.top-cards {
background: #f0f0f0;
padding: 74px 0;
display: flex;
justify-content: center;
gap: 20px;
}
.top-card {
display: flex;
align-items: center;
flex-direction: column;
background: #FFFFFF;
box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23);
width: 18%;
padding: 26px;
}
.top-card-image {
display: block;
width: 30%;
min-width: 65px;
}
.top-card-description {
margin-top: 26px;
font-weight: 400;
font-size: 16px;
line-height: 24px;
text-align: center;
width: 86%;
}
@media screen and (max-width: 1024px) { @media screen and (max-width: 1024px) {
/*top infocard*/ /*top infocard*/
.top-infocard { .top-infocard {
@ -101,6 +137,23 @@ body {
.top-infocard-title { .top-infocard-title {
font-size: 28px; font-size: 28px;
} }
/*top card*/
.top-cards {
flex-direction: column;
gap: 16px;
padding: 37px 26px;
}
.top-card {
width: 100%;
}
.top-card-image {
max-width: 120px;
}
} }
@media screen and (max-width: 414px) { @media screen and (max-width: 414px) {