Modèles de Footers
1°
Code :
<div class="container is-fluid">
<footer class="footer">
<div class="container">
<div class="level">
<div class="level-left">
<div class="level-item"><a class="title is-4" href="#">Pied Piper</a></div>
</div>
<div class="level-right"><a class="level-item" href="#">Features</a><a class="level-item"
href="#">Enterprise</a><a class="level-item" href="#">Support</a><a class="level-item"
href="#">ICO</a>
</div>
</div>
<hr>
<div class="columns">
<div class="column">
<div class="buttons"><a class="button" href="#"><img src="../../all-css/placeholder/icons/
twitter.svg" alt=""></a><a
class="button" href="#"><img src="../../all-css/placeholder/icons/facebook-f.svg" alt="">
</a><a class="button"
href="#"><img src="../../all-css/placeholder/icons/instagram.svg" alt=""></a></div>
</div>
<div class="column has-text-centered has-text-right-tablet">
<p class="subtitle is-6">© 2019 Pied Piper. All right reserved.</p>
</div>
</div>
</div>
</footer>
</div>
2°
Code :
<div class="container is-fluid">
<footer class="footer">
<div class="container">
<div class="columns">
<div class="column is-4 has-text-centered is-hidden-tablet">
<a class="title is-4" href="#">Pied Piper</a>
</div>
<div class="column is-4">
<div class="level"><a class="level-item" href="#">Features</a>
<a class="level-item" href="#">Enterprise</a>
</div>
</div>
<div class="column is-4 has-text-centered is-hidden-mobile">
<a class="title is-4" href="#">Pied Piper</a>
</div>
<div class="column is-4 has-text-right">
<div class="level"><a class="level-item" href="#">Support</a>
<a class="level-item" href="#">ICO</a></div>
</div>
</div>
<p class="subtitle has-text-centered is-6">© 2019 Pied Piper.
All right reserved.</p>
</div>
</footer>
</div>
3°
Code :
<div class="container is-fluid">
<footer class="footer">
<div class="container has-text-centered">
<div class="block"><a class="title is-4" href="#">Pied Piper</a></div>
<div class="buttons is-centered"><a class="button" href="#"><img src="../../all-css/placeholder/
icons/twitter.svg"
alt=""></a><a class="button" href="#"><img src="../../all-css/placeholder/icons/
facebook-f.svg" alt=""></a><a
class="button" href="#"><img src="../../all-css/placeholder/icons/instagram.svg" alt="">
</a><a class="button"
href="#"><img src="../../all-css/placeholder/icons/linkedin-in.svg" alt=""></a></div>
<p class="subtitle is-6">© 2019 Pied Piper. All right reserved.</p>
</div>
</footer>
</div>
4°
Code :
<div class="container is-fluid">
<footer class="footer">
<div class="container has-text-centered">
<div class="columns is-centered">
<div class="column is-8">
<div class="level"><a class="level-item" href="#">Features</a><a class="level-item"
href="#">Enterprise</a><a class="level-item" href="#">Support</a><a class="level-item"
href="#">ICO</a>
</div>
</div>
</div>
<hr>
<p class="subtitle is-6">© 2019 Pied Piper. All right reserved.</p>
</div>
</footer>
</div>
5°
Code :
<div class="container is-fluid">
<footer class="footer">
<div class="container">
<div class="columns is-desktop">
<div class="column is-5">
<h2 class="title is-5"><a href="#">Pied Piper</a></h2>
<p class="block">Let's get you connected! We've designed a simple, efficient process
for companies migrating to PiperNet. Here's how it works.</p>
<div class="buttons"><a class="button" href="#"><img src="../../all-css/placeholder/icons/
twitter.svg" alt=""></a><a
class="button" href="#"><img src="../../all-css/placeholder/icons/facebook-f.svg"
alt=""></a><a class="button"
href="#"><img src="../../all-css/placeholder/icons/instagram.svg" alt=""></a></div>
</div>
<div class="column">
<h3 class="title is-6">Products</h3>
<ul>
<li><a href="#">Features</a></li>
<li><a href="#">Enterprise</a></li>
<li><a href="#">Support</a></li>
<li><a href="#">ICO</a></li>
</ul>
</div>
<div class="column">
<h6 class="title is-6">About Pied Piper</h6>
<ul>
<li><a href="#">Our team</a></li>
<li><a href="#">Careers</a></li>
<li><a href="#">Press</a></li>
<li><a href="#">Stores</a></li>
</ul>
</div>
<div class="column">
<h6 class="title is-6">Contact</h6>
<ul>
<li><a href="#">pay-the-piper@piedpiper.com</a></li>
<li><a href="#">555-05-555</a></li>
<li><a href="#">Pied Piper HQ - 59 Silicon Av.</a></li>
</ul>
</div>
</div>
<hr>
<div class="columns">
<div class="column"><a href="#">Terms and conditions</a></div>
<div class="column has-text-right-tablet">
<p class="subtitle is-6">© 2019 Pied Piper. All right reserved.</p>
</div>
</div>
</div>
</footer>
</div>
6°
Code :
<div class="container is-fluid">
<footer class="footer">
<div class="container">
<div class="columns is-multiline is-mobile">
<div class="column is-hidden-desktop">
<h2 class="title is-5"><a href="#">Pied Piper</a></h2>
</div>
<div class="column is-12-mobile is-5-tablet is-5-desktop">
<div class="level"><a class="level-item is-block-mobile" href="#">Features</a><a
class="level-item is-block-mobile" href="#">Enterprise</a><a class="level-item
is-block-mobile"
href="#">Support</a><a class="level-item is-block-mobile" href="#">ICO</a></div>
</div>
<div
class="column is-12-tablet is-4-desktop is-hidden-mobile is-hidden-tablet-only
has-text-centered-desktop">
<h2 class="title is-5"><a href="#">Pied Piper</a></h2>
</div>
<div class="column is-12-mobile is-12-tablet is-3-desktop">
<div class="field has-addons is-fullwidth">
<div class="control">
<input class="input" type="text" placeholder="Your e-mail" aria-label="Your e-mail">
</div>
<div class="control">
<button class="button is-primary">Subscribe</button>
</div>
</div>
</div>
</div>
<hr>
<div class="columns">
<div class="column">
<div class="buttons"><a class="button" href="#"><img src="../../all-css/placeholder/icons/
twitter.svg" alt=""></a><a
class="button" href="#"><img src="../../all-css/placeholder/icons/facebook-f.svg"
alt=""></a><a class="button"
href="#"><img src="../../all-css/placeholder/icons/instagram.svg" alt=""></a></div>
</div>
<div class="column has-text-right-tablet">
<p class="subtitle is-6">© 2019 Pied Piper. All right reserved.</p>
</div>
</div>
</div>
</footer>
</div>
7°
Code :
<div class="container is-fluid">
<footer class="footer">
<div class="container has-text-centered">
<div class="level">
<div class="level-item">
<figure class="image is-48x48"><img
src="https://bulma.dev/placeholder/pictures/bg_square.svg?primary=00d1b2" alt="">
</figure>
</div>
</div>
<div class="columns is-centered">
<div class="column is-8">
<h2 class="title is-4"><a href="#">Pied Piper</a></h2>
<p class="block">Our mission is not to outsell Hooli with a product like their latest Box 3.
We are not in it for the money - we are in it to make the whole world decentralized.</p>
</div>
</div>
<div class="columns is-centered">
<div class="column is-7">
<div class="level"><a class="level-item" href="#">Features</a><a class="level-item"
href="#">Enterprise</a><a class="level-item" href="#">Support</a><a class="level-item"
href="#">ICO</a>
</div>
</div>
</div>
</div>
</footer>
</div>