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

feature/landingPage #12

Merged
ThiagoDutraSampaioLeite merged 2 commits from feature/landingPage into develop/landingPage 2022-10-12 11:21:35 +00:00
Conversation 0 Commits 2 Files Changed 8 +105 -39
8 changed files with 105 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
assets/imgs/footer-face.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 287 B

BIN
assets/imgs/footer-insta.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 492 B

BIN
assets/imgs/footer-yt.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 346 B

87
index.html
View File

@ -72,39 +72,39 @@
</figure> </figure>
</div> </div>
<div class="bottom-cards"> </div>
<figure class="container-bottom-cards">
<img class="bottom-img-card" src="assets/imgs/money-card-bottom.png"
alt="Primeiro card da parte de baixo" />
<figcaption class="bottom-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="container-bottom-cards"> <div class="bottom-cards">
<img class="bottom-img-card" src="assets/imgs/coin-card-bottom.png" <figure class="container-bottom-cards">
alt="Segundo card da parte de baixo" /> <img class="bottom-img-card" src="assets/imgs/money-card-bottom.png"
<figcaption class="bottom-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras alt="Primeiro card da parte de baixo" />
euismod enim non dui fringilla interdum. Lorem ipsum dolor <figcaption class="bottom-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras
sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.</figcaption> euismod enim non dui fringilla interdum. Lorem ipsum dolor
</figure> sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.</figcaption>
</figure>
<figure class="container-bottom-cards"> <figure class="container-bottom-cards">
<img class="bottom-img-card" src="assets/imgs/laptop-card-bottom.png" <img class="bottom-img-card" src="assets/imgs/coin-card-bottom.png" alt="Segundo card da parte de baixo" />
alt="Terceiro card da parte de baixo" /> <figcaption class="bottom-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras
<figcaption class="bottom-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. Lorem ipsum dolor
euismod enim non dui fringilla interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.</figcaption>
sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.</figcaption> </figure>
</figure>
<figure class="container-bottom-cards"> <figure class="container-bottom-cards">
<img class="bottom-img-card" src="assets/imgs/phone-card-bottom.png" <img class="bottom-img-card" src="assets/imgs/laptop-card-bottom.png"
alt="Primeiro card da parte de baixo" /> alt="Terceiro card da parte de baixo" />
<figcaption class="bottom-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras <figcaption class="bottom-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras
euismod enim non dui fringilla interdum. Lorem ipsum dolor euismod enim non dui fringilla interdum. Lorem ipsum dolor
sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.</figcaption> sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.</figcaption>
</figure> </figure>
</div>
<figure class="container-bottom-cards">
<img class="bottom-img-card" src="assets/imgs/phone-card-bottom.png"
alt="Primeiro card da parte de baixo" />
<figcaption class="bottom-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>
</div> </div>
<section class="bottom-infocards"> <section class="bottom-infocards">
@ -125,10 +125,35 @@
<img class="bottom-infocard-img bottom-infocard-img-mobile" src="assets/imgs/bottom-inforcard-mobile.png" <img class="bottom-infocard-img bottom-infocard-img-mobile" src="assets/imgs/bottom-inforcard-mobile.png"
alt="Banner infocard mobile"> alt="Banner infocard mobile">
</figure> </figure>
</section> </section>
</main> </main>
<footer class="footer">
<ul class="container-footer-icons">
<li class="footer-icon">
<a href="#" target="_blank">
<img src="assets/imgs/footer-insta.png" alt="Icone instagram">
</a>
</li>
<li class="footer-icon">
<a href="#" target="_blank">
<img src="assets/imgs/footer-face.png" alt="Icone facebook">
</a>
</li>
<li class="footer-icon">
<a href="#" target="_blank">
<img src="assets/imgs/footer-yt.png" alt="Icone youtube">
</a>
</li>
</ul>
<p class="footer-text">
Copyright © 2020 - Loja Comércio Eletrônico CNPJ: 000.000.000/0001-00
</p>
</footer>
<body> <body>
</body> </body>

1
style/colors.css
View File

@ -3,4 +3,5 @@
--white: #fff; --white: #fff;
--bg-light-gray: #e5e5e5; --bg-light-gray: #e5e5e5;
--middlebg-gray: #e0e0e0; --middlebg-gray: #e0e0e0;
--letter-footer: #bdbdbd;
} }

38
style/footer.css Normal file
View File

@ -0,0 +1,38 @@
.footer {
display: flex;
align-items: center;
text-align: center;
background: var(--black);
flex-direction: column;
padding: 38px 0;
max-width: 100%;
}
.container-footer-icons {
display: flex;
list-style: none;
margin-bottom: 16px;
gap: 16px;
}
.footer-icon {
width: 20%;
}
.footer-text {
color: var(--letter-footer);
font-size: 10px;
line-height: 12px;
text-transform: uppercase;
}
@media (max-width: 414px) {
.footer {
max-width: 100%;
padding: 32px 77px;
}
.footer-text {
width: 63%;
}
}

17
style/main.css
View File

@ -46,6 +46,7 @@
justify-content: center; justify-content: center;
width: 100%; width: 100%;
gap: 21px; gap: 21px;
margin-bottom: 50px;
} }
.main .top-card { .main .top-card {
@ -75,8 +76,7 @@
} }
.main .container-middle-cards { .main .container-middle-cards {
display: grid; display: flex;
grid-template-columns: repeat(3, 1fr);
gap: 39px; gap: 39px;
justify-content: center; justify-content: center;
position: relative; position: relative;
@ -237,14 +237,9 @@
.main .container-middle-cards { .main .container-middle-cards {
padding: 0 23px; padding: 0 23px;
} }
}
@media (max-width: 768px) {
.main .middle-cards {
margin-top: 44px;
}
.main .container-middle-cards { .main .container-middle-cards {
display: grid;
grid-template-columns: repeat(2, 1fr); grid-template-columns: repeat(2, 1fr);
column-gap: 14px; column-gap: 14px;
margin-bottom: 80px; margin-bottom: 80px;
@ -258,6 +253,12 @@
} }
} }
@media (max-width: 768px) {
.main .middle-cards {
margin-top: 44px;
}
}
@media (max-width: 480px) { @media (max-width: 480px) {
.main .second-img-banner { .main .second-img-banner {
grid-area: 1/1; grid-area: 1/1;

1
style/style.css
View File

@ -3,3 +3,4 @@
@import url("colors.css"); @import url("colors.css");
@import url("header.css"); @import url("header.css");
@import url("main.css"); @import url("main.css");
@import url("footer.css");