mirror of
https://github.com/ivabus/www
synced 2024-11-23 05:05:07 +03:00
Footer navigation
This commit is contained in:
Thomas Smith
parent
637d4e0215
commit
3fd9dc8e8e
3 changed files with 71 additions and 29 deletions
25
src/layouts/partials/footer-nav.html
Normal file
25
src/layouts/partials/footer-nav.html
Normal 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>
|
||||||
|
|
@ -1,36 +1,44 @@
|
||||||
<hr>
|
|
||||||
<section class="footer">
|
<section class="footer">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="row mb-5">
|
<hr>
|
||||||
<div class="col-lg-8 footer-content">
|
<div class="row mb-5">
|
||||||
<h4>Equitable Open-Source for Web3</h4>
|
<div class="col-lg-8 footer-content">
|
||||||
<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>
|
<h4>Equitable Open-Source for Web3</h4>
|
||||||
<img src="/Images/footer-grid-element.svg" alt="tea.grid">
|
<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>
|
||||||
</div>
|
<img src="/Images/footer-grid-element.svg" alt="tea.grid">
|
||||||
<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>
|
||||||
</div>
|
<div class="col-lg-4">
|
||||||
</div>
|
<div class="card social-box" style="width: 100%; float:right;">
|
||||||
<div class="row">
|
<ul class="list-group list-group-flush">
|
||||||
<hr>
|
<a class="list-group-item" role="button" href="https://twitter.com">Twitter</a>
|
||||||
<div class="col">
|
<a class="list-group-item" role="button" href="https://twitter.com">Discord</a>
|
||||||
<div class="input-group">
|
<li class="list-group-item">GitHub</li>
|
||||||
<input type="text" class="form-control footer-email" placeholder="Recipient's username" aria-label="Recipient's username with two button addons">
|
<li class="list-group-item">Reddit</li>
|
||||||
<button class="btn btn-outline-secondary" type="button">Button</button>
|
<li class="list-group-item">Telegram</li>
|
||||||
<button class="btn btn-outline-secondary" type="button">Button</button>
|
<li class="list-group-item">Instagram</li>
|
||||||
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</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>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -181,6 +181,11 @@ p{
|
||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
li{
|
||||||
|
font-family: "sono", sans-serif;
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
/* Breakpoint-Specific Typography */
|
/* Breakpoint-Specific Typography */
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -283,7 +288,11 @@ hr{
|
||||||
/* Footer Styling */
|
/* Footer Styling */
|
||||||
|
|
||||||
.footer-email{
|
.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;
|
background: none;
|
||||||
border: none;
|
border: none;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue