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

Merge pull request 'feature/landingPage' (#12) from feature/landingPage into develop/landingPage

Browse Source 
Reviewed-on: #12
This commit is contained in:
ThiagoDutraSampaioLeite 2022-10-12 11:21:34 +00:00
commit 03e947cdf6
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>
</div>
<div class="bottom-cards">
<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>
</div>
<figure class="container-bottom-cards">
<img class="bottom-img-card" src="assets/imgs/coin-card-bottom.png"
alt="Segundo 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 class="bottom-cards">
<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">
<img class="bottom-img-card" src="assets/imgs/laptop-card-bottom.png"
alt="Terceiro 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">
<img class="bottom-img-card" src="assets/imgs/coin-card-bottom.png" alt="Segundo 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">
<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>
<figure class="container-bottom-cards">
<img class="bottom-img-card" src="assets/imgs/laptop-card-bottom.png"
alt="Terceiro 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">
<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>
<section class="bottom-infocards">
@ -125,10 +125,35 @@
<img class="bottom-infocard-img bottom-infocard-img-mobile" src="assets/imgs/bottom-inforcard-mobile.png"
alt="Banner infocard mobile">
</figure>
</section>
</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>

1
style/colors.css
View File

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

1
style/style.css
View File

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