logo

Footer

Modèles de Footers

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">&copy; 2019 Pied Piper. All right reserved.</p>
          </div>
        </div>
      </div>
    </footer>
  </div>

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">&copy; 2019 Pied Piper.
            All right reserved.</p>
      </div>
    </footer>
  </div>

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">&copy; 2019 Pied Piper. All right reserved.</p>
      </div>
    </footer>
  </div>

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">&copy; 2019 Pied Piper. All right reserved.</p>
      </div>
    </footer>
  </div>

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">&copy; 2019 Pied Piper. All right reserved.</p>
          </div>
        </div>
      </div>
    </footer>
  </div>

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">&copy; 2019 Pied Piper. All right reserved.</p>
          </div>
        </div>
      </div>
    </footer>
  </div>

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>

 

Une idée ? Partagez-la !

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *