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> Craseuismod enim non dui fringilla interdum.</figcaption>
</figure> </figure>
<figure class="card top-card" /> <figure class="card top-card">
<img class="top-card-image" src="assets/images/card-image-coin.png" alt="imagem do terceiro card do topo"> <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. <figcaption class="top-card-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Craseuismod enim non dui fringilla interdum.</figcaption> Craseuismod enim non dui fringilla interdum.</figcaption>
</figure> </figure>
@ -110,17 +110,17 @@
elit. Cras euismod enim non dui fringilla interdum. </figcaption> elit. Cras euismod enim non dui fringilla interdum. </figcaption>
</figure> </figure>
<figure class="card bottom-card" /> <figure class="card bottom-card">
<img class="bottom-card-image" src="assets/images/card-image-laptop.png" <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 <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. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras
euismod enim non dui fringilla interdum. </figcaption> euismod enim non dui fringilla interdum. </figcaption>
</figure> </figure>
<figure class="card bottom-card" /> <figure class="card bottom-card">
<img class="bottom-card-image" src="assets/images/card-image-cellphone.png" <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 <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. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras
euismod enim non dui fringilla interdum. </figcaption> euismod enim non dui fringilla interdum. </figcaption>
@ -139,7 +139,8 @@
</div> </div>
<figure class="bottom-infocard-image-container"> <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"> alt="imagem do infocard de baixo">
</figure> </figure>
</article> </article>
@ -147,9 +148,9 @@
<footer class="footer-page"> <footer class="footer-page">
<ul class="footer-icons"> <ul class="footer-icons">
<li><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/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 class="footer-icons-container"><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/youtube-logo.svg" alt="logo do youtube"></a></li>
</ul> </ul>
<p class="footer-text">Copyright © 2020 - Loja Comércio Eletrônico CNPJ: 000.000.000/0001-00 <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, .main-banner,
.top-infocard-image, .top-infocard-image,
.bottom-infocard-image, .bottom-infocard-image,
.middle-image { .middle-image,
.header-page-logo {
width: 100%; width: 100%;
} }
@ -56,23 +57,29 @@ body {
background: #000; background: #000;
} }
.header-page a {
width: 12%;
}
.header-page-logo { .header-page-logo {
display: block; display: block;
padding: 30px 0; padding: 30px 0;
} }
/*Main Banner*/ /*Main Banner*/
.main-banner-desktop { .main-banner-desktop,
.bottom-banner-desktop {
display: block; display: block;
} }
.main-banner-mobile { .main-banner-mobile,
.bottom-banner-mobile {
display: none; display: none;
} }
/* Top Infocard */ /* Top Infocard */
.top-infocard { .top-infocard {
padding: 74px 0; padding: 73px 0 179px;
} }
.top-infocard-content { .top-infocard-content {
@ -121,7 +128,6 @@ body {
.top-card { .top-card {
padding: 36px 26px 26px; padding: 36px 26px 26px;
min-width: 300px;
} }
.top-card-image { .top-card-image {
@ -169,7 +175,7 @@ body {
.bottom-card-image { .bottom-card-image {
width: 29%; width: 29%;
padding-bottom: 18px; padding-bottom: 15px;
} }
/*bottom infocard*/ /*bottom infocard*/
@ -195,11 +201,6 @@ body {
width: 71%; width: 71%;
} }
.bottom-infocard-image {
height: 276px;
object-fit: cover;
}
/*footer*/ /*footer*/
.footer-page { .footer-page {
background: #000; background: #000;
@ -209,14 +210,25 @@ body {
.footer-icons { .footer-icons {
list-style: none; list-style: none;
display: flex; display: flex;
justify-content: center;
gap: 16px; gap: 16px;
padding-bottom: 16px; padding-bottom: 16px;
width: 6%;
} }
.footer-icons>li:last-child { .footer-icons>li:last-child {
margin: auto 0; margin: auto 0;
} }
.footer-icons-container {
width: 23%;
}
.footer-icons-container img {
width: 100%;
}
.footer-text { .footer-text {
color: #BDBDBD; color: #BDBDBD;
font-weight: 400; font-weight: 400;
@ -238,19 +250,19 @@ body {
} }
/*Banner*/ /*Banner*/
.main-banner-desktop { .main-banner-desktop,
.bottom-banner-desktop {
display: none; display: none;
} }
.main-banner-mobile { .main-banner-mobile,
.bottom-banner-mobile {
display: block; display: block;
max-height: 598px;
object-fit: cover;
} }
/*Top infocard*/ /*Top infocard*/
.top-infocard { .top-infocard {
padding: 74px 30px 90px 30px; padding: 69px 30px 90px 30px;
} }
.top-infocard-subtitle { .top-infocard-subtitle {
@ -261,10 +273,12 @@ body {
.top-infocard-title { .top-infocard-title {
font-size: 28px; font-size: 28px;
line-height: 34px; line-height: 34px;
padding-bottom: 5px;
} }
.top-infocard-description { .top-infocard-description {
text-align: center; text-align: center;
padding-bottom: 69px;
} }
.top-infocard-image-container { .top-infocard-image-container {
@ -279,6 +293,7 @@ body {
.top-cards { .top-cards {
padding: 0 30px 80px; padding: 0 30px 80px;
gap: 24px;
} }
.top-card { .top-card {
@ -315,12 +330,7 @@ body {
.bottom-infocard { .bottom-infocard {
flex-direction: column-reverse; flex-direction: column-reverse;
padding-bottom: 88px; padding-bottom: 98px;
}
.bottom-infocard-image {
height: auto;
object-fit: initial;
} }
.bottom-infocard-content { .bottom-infocard-content {
@ -337,6 +347,17 @@ body {
padding-bottom: 0; padding-bottom: 0;
} }
.footer-page {
padding: 32px 0;
}
.footer-icons {
width: 25%;
}
.footer-icons-container {
width: 23%;
}
.footer-text { .footer-text {
width: 261px; width: 261px;
} }