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

Adiciona Footer Desktop e mobile

Browse Source
This commit is contained in:
Affonso Kopmann 2022-10-08 00:27:24 -03:00
parent 68511b3843
commit fbbb423474
8 changed files with 72 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
_assets/css/main.css
View File

@ -148,6 +148,33 @@ body {
max-width: 550px;
}
.page-footer {
display: flex;
flex-direction: column;
align-items: center;
background: #000000;
padding: 38px 0;
}
.footer-icons {
display: flex;
list-style: none;
margin-bottom: 16px;
}
.footer-icon {
margin: 0 8px;
}
.footer-text {
text-transform: uppercase;
line-height: 12px;
font-size: 10px;
color: #BDBDBD;
}
@media screen and (max-width: 414px) {
.main-banner-desktop,
.middle-banner-desktop {
@ -181,6 +208,15 @@ body {
font-size: 14px;
}
.page-footer {
padding-bottom: 26px;
}
.footer-text {
max-width: 280px;
text-align: center;
}
}
@media screen and (max-width: 992px) {

BIN
_assets/images/facebook-icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 287 B

3
_assets/images/facebook-icon.svg
View File

@ -1,3 +0,0 @@
<svg width="14" height="24" viewBox="0 0 14 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12.9993 0.0049936L9.88701 0C6.39049 0 4.13088 2.31828 4.13088 5.90643V8.62969H1.00164C0.731238 8.62969 0.512268 8.84891 0.512268 9.11932V13.065C0.512268 13.3354 0.731487 13.5544 1.00164 13.5544H4.13088V23.5106C4.13088 23.781 4.34985 24 4.62026 24H8.70303C8.97343 24 9.1924 23.7808 9.1924 23.5106V13.5544H12.8512C13.1216 13.5544 13.3406 13.3354 13.3406 13.065L13.3421 9.11932C13.3421 8.98948 13.2904 8.86514 13.1988 8.77326C13.1071 8.68138 12.9823 8.62969 12.8525 8.62969H9.1924V6.32115C9.1924 5.21157 9.45681 4.64829 10.9022 4.64829L12.9988 4.64755C13.2689 4.64755 13.4879 4.42833 13.4879 4.15817V0.494367C13.4879 0.224462 13.2692 0.00549296 12.9993 0.0049936Z" fill="white"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 790 B

BIN
_assets/images/instagram-icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 492 B

3
_assets/images/instagram-icon.svg
View File

@ -1,3 +0,0 @@
<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M17.3766 0H6.62295C2.97106 0 0 3.095 0 6.89906V18.1008C0 21.905 2.97106 24.9999 6.62295 24.9999H17.3766C21.0288 24.9999 23.9999 21.9049 23.9999 18.1008V6.89906C24 3.095 21.0288 0 17.3766 0ZM21.8706 18.1008C21.8706 20.6819 19.8547 22.7817 17.3768 22.7817H6.62295C4.1452 22.7819 2.12938 20.6819 2.12938 18.1008V6.89906C2.12938 4.31806 4.1452 2.21811 6.62295 2.21811H17.3766C19.8545 2.21811 21.8705 4.31806 21.8705 6.89906V18.1008H21.8706Z" fill="white"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 565 B

BIN
_assets/images/youtube-icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 350 B

3
_assets/images/youtube-icon.svg
View File

@ -1,3 +0,0 @@
<svg width="24" height="18" viewBox="0 0 24 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M22.98 2.34C22.329 1.182 21.6225 0.969 20.184 0.888C18.747 0.7905 15.1335 0.75 12.003 0.75C8.8665 0.75 5.2515 0.7905 3.816 0.8865C2.3805 0.969 1.6725 1.1805 1.0155 2.34C0.345 3.4965 0 5.4885 0 8.9955C0 8.9985 0 9 0 9C0 9.003 0 9.0045 0 9.0045V9.0075C0 12.4995 0.345 14.5065 1.0155 15.651C1.6725 16.809 2.379 17.019 3.8145 17.1165C5.2515 17.2005 8.8665 17.25 12.003 17.25C15.1335 17.25 18.747 17.2005 20.1855 17.118C21.624 17.0205 22.3305 16.8105 22.9815 15.6525C23.658 14.508 24 12.501 24 9.009C24 9.009 24 9.0045 24 9.0015C24 9.0015 24 8.9985 24 8.997C24 5.4885 23.658 3.4965 22.98 2.34ZM9 13.5V4.5L16.5 9L9 13.5Z" fill="white"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 743 B

41
index.html
View File

@ -18,7 +18,7 @@
</head>
<body>
<!-- Header | Image and background -->
<!-- Header | Image and Background -->
<header class="page-header">
<a href="/">
<img
@ -30,7 +30,7 @@
</header>
<main>
<!-- Main Banner | desktop and Mobile -->
<!-- Main Banner | Desktop and Mobile -->
<section>
<img
class="main-banner main-banner-desktop"
@ -103,7 +103,7 @@
</div>
</section>
<!-- Middle Banner | desktop and Mobile -->
<!-- Middle Banner | Desktop and Mobile -->
<section>
<img
class="middle-banner middle-banner-desktop"
@ -117,7 +117,7 @@
/>
</section>
<!-- Bottom Card | desktop and Mobile -->
<!-- Bottom Card | Desktop and Mobile -->
<section class="bottom-cards">
<div class="bottom-cards-wrapper">
@ -167,7 +167,7 @@
</section>
<!-- Bottom Infocard | Desktop and Mobile -->
<section class="bottom-infocard">
<img class="bottom-infocard-image" src="./_assets/images/bottom-infocard-image.jpg" alt="Banner do Infocard de Baixo" />
@ -182,6 +182,37 @@
</p>
</div>
</section>
</main>
<!-- Footer | Desktop and Mobile -->
<footer class="page-footer">
<ul class="footer-icons">
<li class="footer-icon">
<a href="https://www.instagram.com/m3.ecommerce/" target="_blank">
<img src="./_assets/images/instagram-icon.png" alt="Instagram Icon" />
</a>
</li>
<li class="footer-icon">
<a href="https://www.facebook.com/digitalm3" target="_blank">
<img src="./_assets/images/facebook-icon.png" alt="Facebook Icon" />
</a>
</li>
<li class="footer-icon">
<a href="https://www.youtube.com/channel/UCW4o86gZG_ceA8CmHltXeXA" target="_blank">
<img src="./_assets/images/youtube-icon.png" alt="Youtube Icon" />
</a>
</li>
</ul>
<p class="footer-text">
Copyright © 2020 - Loja Comércio Eletrônico CNPJ: 000.000.000/0001-00
</p>
</footer>
</body>
</html>