Footer navigation

This commit is contained in:
Thomas Smith 2022-09-13 18:59:12 -04:00
parent 637d4e0215
commit 3fd9dc8e8e
3 changed files with 71 additions and 29 deletions

View file

@ -0,0 +1,25 @@
<ul class="nav justify-content-end">
<li class="nav-item">
<a class="nav-link footer-link small" aria-current="page" href="#">Careers</a>
</li>
<li class="nav-item">
<a class="nav-link footer-link small" href="#">Privacy Policy</a>
</li>
<li class="nav-item">
<a class="nav-link footer-link small" href="#">Terms of Use</a>
</li>
</ul>
<style>
.footer-link{
text-transform: lowercase;
color: white;
padding: 0px 0px 0px 40px !important;
}
.footer-link:hover{
color: #00ffd0 !important;
text-decoration:underline;
}
</style>

View file

@ -1,36 +1,44 @@
<hr>
<section class="footer">
<div class="container">
<div class="row mb-5">
<div class="col-lg-8 footer-content">
<h4>Equitable Open-Source for Web3</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<img src="/Images/footer-grid-element.svg" alt="tea.grid">
</div>
<div class="col-lg-4">
<div class="card social-box" style="width: 100%; float:right;">
<ul class="list-group list-group-flush">
<a class="list-group-item" role="button" href="https://twitter.com">Twitter</a>
<a class="list-group-item" role="button" href="https://twitter.com">Discord</a>
<li class="list-group-item">GitHub</li>
<li class="list-group-item">Reddit</li>
<li class="list-group-item">Telegram</li>
<li class="list-group-item">Instagram</li>
</ul>
<hr>
<div class="row mb-5">
<div class="col-lg-8 footer-content">
<h4>Equitable Open-Source for Web3</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<img src="/Images/footer-grid-element.svg" alt="tea.grid">
</div>
</div>
</div>
<div class="row">
<hr>
<div class="col">
<div class="input-group">
<input type="text" class="form-control footer-email" placeholder="Recipient's username" aria-label="Recipient's username with two button addons">
<button class="btn btn-outline-secondary" type="button">Button</button>
<button class="btn btn-outline-secondary" type="button">Button</button>
<div class="col-lg-4">
<div class="card social-box" style="width: 100%; float:right;">
<ul class="list-group list-group-flush">
<a class="list-group-item" role="button" href="https://twitter.com">Twitter</a>
<a class="list-group-item" role="button" href="https://twitter.com">Discord</a>
<li class="list-group-item">GitHub</li>
<li class="list-group-item">Reddit</li>
<li class="list-group-item">Telegram</li>
<li class="list-group-item">Instagram</li>
</ul>
</div>
</div>
<hr>
</div>
</div>
<div class="row mb-4">
<hr>
<div class="col">
<div class="input-group">
<input type="text" class="form-control footer-email" placeholder="Recipient's username" aria-label="Recipient's username with two button addons">
<button class="btn btn-outline-secondary" type="button">Button</button>
<button class="btn btn-outline-secondary" type="button">Button</button>
</div>
</div>
<hr>
</div>
<div class="row">
<div class="col-lg-6">
<p class="small">©2022 tea inc. You can also share our <a href="" class="teal">Linktree</a>.</p>
</div>
<div class="col-lg-6">
{{- partial "footer-nav.html" . -}}
</div>
</div>
</div>
</section>

View file

@ -181,6 +181,11 @@ p{
color: #ffffff;
}
li{
font-family: "sono", sans-serif;
color: #ffffff;
}
/* Breakpoint-Specific Typography */
@ -283,7 +288,11 @@ hr{
/* Footer Styling */
.footer-email{
padding: 35px 75px;
font-family: "pp-neue-machina", sans-serif;
text-transform: uppercase;
font-size: 38px;
line-height: 38px;
padding: 35px 0px;
background: none;
border: none;
}