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

feat: correcao dos erros enviados

Browse Source
This commit is contained in:
Nicolly Vieira Santos Costa 2022-10-18 19:50:16 -03:00
parent e0d1d3ae8c
commit f9182c65c5
4 changed files with 54 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
assets/images/bottom-infocard-image-desktop.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 360 KiB

0
assets/images/bottom-infocard-image.png → assets/images/bottom-infocard-image-mobile.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 246 KiB

After

Width:  |  Height:  |  Size: 246 KiB

21
index.html
View File

@ -67,8 +67,8 @@
Craseuismod enim non dui fringilla interdum.</figcaption>
</figure>
<figure class="card top-card" />
<img class="top-card-image" src="assets/images/card-image-coin.png" alt="imagem do terceiro card do topo">
<figure class="card top-card">
<img class="top-card-image" src="assets/images/card-image-coin.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>
@ -110,17 +110,17 @@
elit. Cras euismod enim non dui fringilla interdum. </figcaption>
</figure>
<figure class="card bottom-card" />
<figure class="card bottom-card">
<img class="bottom-card-image" src="assets/images/card-image-laptop.png"
alt="imagem do terceiro card do bottomo">
alt="imagem do terceiro card do bottomo" />
<figcaption class="bottom-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. </figcaption>
</figure>
<figure class="card bottom-card" />
<figure class="card bottom-card">
<img class="bottom-card-image" src="assets/images/card-image-cellphone.png"
alt="imagem do terceiro card do bottomo">
alt="imagem do terceiro card do bottomo" />
<figcaption class="bottom-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. </figcaption>
@ -139,7 +139,8 @@
</div>
<figure class="bottom-infocard-image-container">
<img class="bottom-infocard-image" src="assets/images/bottom-infocard-image.png"
<img class="bottom-infocard-image bottom-banner-desktop" src="assets/images/bottom-infocard-image-desktop.png" alt="imagem do infocard de baixo">
<img class="bottom-infocard-image bottom-banner-mobile" src="assets/images/bottom-infocard-image-mobile.png"
alt="imagem do infocard de baixo">
</figure>
</article>
@ -147,9 +148,9 @@
<footer class="footer-page">
<ul class="footer-icons">
<li><a href="/"><img src="assets/svgs/instagram-logo.svg" alt="logo do instagram"></a></li>
<li><a href="/"><img src="assets/svgs/facebook-logo.svg" alt="logo do facebook"></a></li>
<li><a href="/"><img src="assets/svgs/youtube-logo.svg" alt="logo do youtube"></a></li>
<li class="footer-icons-container"><a href="/"><img src="assets/svgs/instagram-logo.svg" alt="logo do instagram"></a></li>
<li class="footer-icons-container"><a href="/"><img src="assets/svgs/facebook-logo.svg" alt="logo do facebook"></a></li>
<li class="footer-icons-container"><a href="/"><img src="assets/svgs/youtube-logo.svg" alt="logo do youtube"></a></li>
</ul>
<p class="footer-text">Copyright © 2020 - Loja Comércio Eletrônico CNPJ: 000.000.000/0001-00

65
styles/main.css
View File

@ -11,7 +11,8 @@ body {
.main-banner,
.top-infocard-image,
.bottom-infocard-image,
.middle-image {
.middle-image,
.header-page-logo {
width: 100%;
}
@ -56,23 +57,29 @@ body {
background: #000;
}
.header-page a {
width: 12%;
}
.header-page-logo {
display: block;
padding: 30px 0;
}
/*Main Banner*/
.main-banner-desktop {
.main-banner-desktop,
.bottom-banner-desktop {
display: block;
}
.main-banner-mobile {
.main-banner-mobile,
.bottom-banner-mobile {
display: none;
}
/* Top Infocard */
.top-infocard {
padding: 74px 0;
padding: 73px 0 179px;
}
.top-infocard-content {
@ -121,7 +128,6 @@ body {
.top-card {
padding: 36px 26px 26px;
min-width: 300px;
}
.top-card-image {
@ -169,7 +175,7 @@ body {
.bottom-card-image {
width: 29%;
padding-bottom: 18px;
padding-bottom: 15px;
}
/*bottom infocard*/
@ -195,11 +201,6 @@ body {
width: 71%;
}
.bottom-infocard-image {
height: 276px;
object-fit: cover;
}
/*footer*/
.footer-page {
background: #000;
@ -209,14 +210,25 @@ body {
.footer-icons {
list-style: none;
display: flex;
justify-content: center;
gap: 16px;
padding-bottom: 16px;
width: 6%;
}
.footer-icons>li:last-child {
margin: auto 0;
}
.footer-icons-container {
width: 23%;
}
.footer-icons-container img {
width: 100%;
}
.footer-text {
color: #BDBDBD;
font-weight: 400;
@ -238,19 +250,19 @@ body {
}
/*Banner*/
.main-banner-desktop {
.main-banner-desktop,
.bottom-banner-desktop {
display: none;
}
.main-banner-mobile {
.main-banner-mobile,
.bottom-banner-mobile {
display: block;
max-height: 598px;
object-fit: cover;
}
/*Top infocard*/
.top-infocard {
padding: 74px 30px 90px 30px;
padding: 69px 30px 90px 30px;
}
.top-infocard-subtitle {
@ -261,10 +273,12 @@ body {
.top-infocard-title {
font-size: 28px;
line-height: 34px;
padding-bottom: 5px;
}
.top-infocard-description {
text-align: center;
padding-bottom: 69px;
}
.top-infocard-image-container {
@ -279,6 +293,7 @@ body {
.top-cards {
padding: 0 30px 80px;
gap: 24px;
}
.top-card {
@ -315,12 +330,7 @@ body {
.bottom-infocard {
flex-direction: column-reverse;
padding-bottom: 88px;
}
.bottom-infocard-image {
height: auto;
object-fit: initial;
padding-bottom: 98px;
}
.bottom-infocard-content {
@ -337,6 +347,17 @@ body {
padding-bottom: 0;
}
.footer-page {
padding: 32px 0;
}
.footer-icons {
width: 25%;
}
.footer-icons-container {
width: 23%;
}
.footer-text {
width: 261px;
}