logo

Headers

Modèles de Header

1°

Code :

  1. <div class="container is-fluid">
  2.  <section class="hero">
  3.   <div class="hero-body">
  4.    <div class="container has-text-centered">
  5.     <h1 class="title is-spaced">The New Internet</h1>
  6.      <h2 class="subtitle">Decentralized, secure, private. The PiperNet is on it's way to 
  7.         revolutionize every smartphone, PC, and smart-fridge near you.</h2>
  8. 	<div class="buttons is-centered"><a class="control button is-primary" 
  9.           href="#">Sign up for free</a>
  10.         <a class="control button is-light" href="#">Read more</a>
  11.     </div>
  12.    </div>
  13.   </div>
  14.  </section>
  15. </div>

2°

Code :

  1. <div class="container is-fluid">
  2.  <section class="hero">
  3.   <div class="hero-body">
  4.    <div class="container has-text-centered">
  5.     <h2 class="subtitle">The New Internet</h2>
  6.      <h1 class="title">We've built a decentralized internet where information is totally free
  7.      </h1>
  8.       <a href="#">Read more &raquo;</a>
  9.    </div>
  10.   </div>
  11.  </section>
  12. </div>

3°

Code :

  1. <div class="container is-fluid">
  2.  <section class="hero">
  3.   <div class="hero-body">
  4.    <div class="container has-text-centered">
  5.     <h1 class="title">The New Internet</h1>
  6.      <h2 class="subtitle">We've built a decentralized internet where information is totally
  7.          free in every sense of the word.</h2>
  8.      <form>
  9. 	<div class="columns is-centered">
  10. 	 <div class="column is-7 is-5-desktop">
  11. 	  <div class="field is-grouped">
  12. 	   <div class="control is-expanded">
  13. 	    <input class="input" type="text" placeholder="Your e-mail" required="required">
  14. 	   </div>
  15. 	     <div class="control is-expanded">
  16. 	      <input class="input" type="password" placeholder="Password" required="required">
  17. 	   </div>
  18. 	     <div class="control">
  19. 	      <button class="button is-primary" type="submit">Submit</button>
  20. 	   </div>
  21. 	   </div>
  22.            </div>
  23. 	   </div>
  24. 	   <div class="control has-text-centered-tablet">
  25. 	    <label class="checkbox">
  26. 	     <input type="checkbox" required="required">&nbsp; I agree to 
  27.               <a href="#">terms and conditions</a>.
  28. 	    </label>
  29. 	   </div>
  30.      </form>
  31.     </div>
  32.    </div>
  33.  </section>
  34. </div>

4°

Code :

  1. <div class="container is-fluid">
  2.  <section class="hero" style="background: 
  3.       url('https://bulma.dev/placeholder/pictures/bg_16-4.svg?primary=00d1b2');background-size: cover">
  4.   <div class="hero-body">
  5.    <div class="container has-text-centered">
  6.     <h2 class="subtitle">The New Internet</h2>
  7.      <h1 class="title">We've built a decentralized internet where information is totally free</h1>
  8.       <div class="buttons is-centered"><a class="button is-primary" href="#">Read more &raquo;</a></div>
  9.     </div>
  10.   </div>
  11.  </section>
  12. </div>

5°

Code :

  1. <div class="container is-fluid">
  2.  <section class="hero" style="background: 
  3.     url('https://bulma.dev/placeholder/pictures/bg_16-4.svg?primary=00d1b2');background-size: cover">
  4.    <div class="hero-body">
  5.     <div class="container">
  6.      <div class="columns">
  7.       <div class="column is-6">
  8. 	<h1 class="title is-spaced">The New Internet</h1>
  9. 	 <h2 class="subtitle">Decentralized, secure, private.
  10.           The PiperNet is on it's way to revolutionize every
  11. 	   smartphone, PC, and smart-fridge near you.</h2>
  12. 	   <div class="buttons"><a class="control button is-primary" 
  13.             href="#">Sign up for free</a>
  14.               <a class="control button is-light" href="#">Read more</a></div>
  15.      </div>
  16.     </div>
  17.    </div>
  18.   </div>
  19.  </section>
  20. </div>

6°

Code :

  1. <div class="container is-fluid">
  2.  <section class="hero">
  3.   <div class="hero-body">
  4.    <div class="container">
  5.     <div class="columns is-vcentered">
  6.      <div class="column is-6"> 
  7.       <h1 class="title is-spaced">The New Internet</h1>
  8. 	<p class="subtitle">We've built a decentralized internet where information
  9.            is totally free in every sense
  10. 	of the word.</p>
  11. 	 <div class="buttons"><a class="button is-primary" href="#">Sign up for free
  12.             </a><a class="button is-text"
  13. 		href="#">Read more</a></div>
  14. 	</div>
  15. 	 <div class="column is-6"><img src="https://bulma.dev/placeholder/pictures/
  16.                       bg_4-3.svg?primary=00d1b2" alt="">
  17.      </div>
  18.     </div>
  19.    </div>
  20.   </div>
  21.  </section>
  22. </div>

7°

Code :

  1. <div class="container is-fluid">
  2.  <section class="hero">
  3.   <div class="hero-body">
  4.    <div class="container">
  5.     <div class="columns is-vcentered">
  6.      <div class="column is-6">
  7.       <h1 class="title is-spaced">The New Internet</h1>
  8. 	<p class="subtitle">We've built a decentralized internet where information is totally free in
  9.         every sense of the word.</p>
  10. 	 <div class="buttons"><a class="button is-text" href="#">Read more &raquo;</a></div>
  11. 	</div>
  12. 	<div class="column is-6"><img src="https://bulma.dev/placeholder/pictures/bg_4-3.svg
  13.            ?primary=00d1b2" alt="">
  14.      </div>
  15.     </div>
  16.    </div>
  17.   </div>
  18.  </section>
  19. </div>

8°

Code :

  1. <div class="container is-fluid">
  2.  <section class="hero">
  3.   <div class="hero-body">
  4.    <div class="container">
  5.     <div class="columns is-vcentered">
  6.      <div class="column is-6">
  7.       <h1 class="title is-spaced">The New Internet</h1>
  8. 	<p class="subtitle">We've built a decentralized internet where information is totally 
  9.          free in every sense of the word.</p>
  10. 	 <form>
  11. 	  <div class="field has-addons">
  12. 	   <div class="control">
  13.             <input class="input" type="text" placeholder="Your e-mail">
  14. 	 </div>
  15. 	   <div class="control">
  16. 	    <button class="button is-primary">Submit</button>
  17. 	   </div>
  18. 	</div>
  19. 	   <div class="field"></div>
  20. 	    <div class="control">
  21. 	     <label class="checkbox">
  22. 	      <div class="control">
  23. 		<input type="checkbox" required="required">&nbsp; I agree to <a href="#">terms 
  24.                  and conditions</a>.
  25. 	  </div>
  26. 	 </label>
  27. 	</div>
  28.        </form>
  29.       </div>
  30. 	<div class="column is-6"><img src="https://bulma.dev/placeholder/pictures/
  31.             bg_4-3.svg?primary=00d1b2" alt="">
  32.      </div>
  33.     </div>
  34.    </div>
  35.   </div>
  36.  </section>
  37. </div>

9°

Code :

  1. <div class="container is-fluid">
  2.  <section class="hero">			
  3.   <div class="hero-body">
  4.    <div class="container">
  5.     <div class="columns is-vcentered">
  6.      <div class="column is-6">
  7.       <h1 class="title">The New Internet</h1>
  8.         <p class="subtitle">We've built a decentralized internet where information
  9.           is totally free in every sense of the word.</p>
  10. 	<div class="columns">
  11. 	 <div class="column is-half-desktop">
  12. 	  <form>
  13. 	   <div class="field">
  14. 	    <div class="control">
  15. 	     <input class="input" type="text" placeholder="Login">
  16. 	    </div>
  17.            </div>
  18. 	      <div class="field">
  19. 	       <div class="control">
  20. 		<input class="input" type="password" placeholder="Password">
  21. 	       </div>
  22. 	      </div>
  23. 		 <div class="field">
  24. 		  <div class="control">
  25. 		   <input class="input" type="password" placeholder="Repeat password">
  26. 		  </div>
  27. 		 </div>
  28. 	          <div class="field">
  29. 		   <div class="control">
  30. 		    <button class="button is-primary">Sign up</button>
  31. 		   </div>
  32. 		  </div>
  33. 		   <div class="field">
  34. 		    <div class="control">
  35. 		     <label class="checkbox">
  36. 		      <div class="control">
  37. 		       <input type="checkbox" required="required">&nbsp; I agree to <a href="#">
  38.                          terms and conditions</a>.
  39. 		      </div>
  40. 		     </label>
  41. 		</div>
  42. 	     </div>
  43. 	    </form>
  44. 	   </div>
  45. 	  </div>
  46. 	 </div>
  47. 	<div class="column is-6"><img src="https://bulma.dev/placeholder/pictures/bg_4-3
  48.               .svg?primary=00d1b2" alt="">
  49.      </div>
  50.     </div>
  51.    </div>
  52.   </div>
  53.  </section>
  54. </div>

10°

Code :

  1. <div class="container is-fluid">
  2.  <section class="hero"
  3.   style="background: url('https://bulma.dev/placeholder/pictures/bg_16-4.svg?primary=00d1b2');
  4.     background-size: cover">
  5.    <div class="hero-body">
  6.     <div class="container has-text-centered">
  7.      <div class="columns">
  8.       <div class="column is-half is-one-third-desktop">
  9. 	<div class="card">
  10. 	 <div class="card-content">
  11. 	  <h2 class="title is-4 is-spaced">Bringing the Internet to the People.</h2>
  12. 	   <p class="subtitle is-6">Our mission is not to outsell Hooli with a product like their 
  13.              latest Box 3.
  14. 	   We are not in it for the money - we are in it to make the whole world decentralized.</p>
  15. 	  <div class="buttons"><a class="button is-primary is-fullwidth" href="#">Learn more</a></div>
  16. 	</div>
  17.       </div>
  18.      </div>
  19.     </div>
  20.    </div>
  21.   </div>
  22.  </section>
  23. </div>

11°

Code :

  1. <div class="container is-fluid">
  2.  <section class="hero"
  3.   style="background: url('https://bulma.dev/placeholder/pictures/bg_16-4.svg?primary=00d1b2');
  4.         background-size: cover">
  5.   <div class="hero-body">
  6.    <div class="container has-text-centered">
  7.     <div class="columns">
  8.      <div class="column is-6 is-4-desktop is-offset-3 is-offset-8-desktop">
  9.       <div class="card">
  10. 	<div class="card-content">
  11. 	 <h2 class="title is-4 is-spaced">Bringing the Internet to the People.</h2>
  12. 	  <p class="subtitle is-6">Our mission is not to outsell Hooli with a product like
  13.             their latest Box 3.
  14. 	    We are not in it for the money - we are in it to make the whole world decentralized.</p>
  15. 		<div class="buttons"><a class="button is-primary is-fullwidth" href="#">Learn more</a>
  16.         </div>
  17.        </div>
  18.       </div>
  19.      </div>
  20.     </div>
  21.    </div>
  22.   </div>
  23.  </section>
  24. </div>

12°

Code :

  1. <div class="container is-fluid">
  2.  <section class="hero">
  3.   <div class="hero-body">
  4.    <div class="container has-text-centered">
  5.     <h1 class="title">Bringing the Internet of the Future to the People</h1>
  6.      <h2 class="subtitle">Decentralized, secure, private. The PiperNet is on 
  7.        it's way to revolutionize every smartphone, PC, and smart-fridge near you.</h2>
  8. 	<div class="buttons is-centered"><a class="button is-primary" href="#">Sign up for free</a></div>
  9. 	 <div class="columns is-centered is-medium">
  10. 	  <div class="column is-10 has-text-centered"><img class="is-16by9"
  11. 	   src="https://bulma.dev/placeholder/pictures/bg_16-9.svg?primary=00d1b2" alt="">
  12.      </div>
  13.     </div>
  14.    </div>
  15.   </div>
  16.  </section>
  17. </div>

13°

Code :

  1. <div class="container is-fluid">
  2.     <section class="hero">
  3.       <div class="hero-body">
  4.         <div class="container has-text-centered">
  5.           <h1 class="title">Bringing the Internet of the Future to the People</h1>
  6.           <h2 class="subtitle">Decentralized, secure, private. The PiperNet is on it's way to revolutionize every
  7.             smartphone, PC, and smart-fridge near you.</h2>
  8.           <div class="buttons is-centered"><a class="button is-primary" href="#">Sign up for free</a></div>
  9.         </div>
  10.         <hr>
  11.         <div class="columns has-text-centered">
  12.           <div class="column is-3"><img src="../../all-css/placeholder/icons/check.svg" alt="">
  13.             <h4 class="title is-4">Security</h4>
  14.             <p>Your data is virtually unhackable compared to traditional net</p>
  15.           </div>
  16.           <div class="column is-3"><img src="../../all-css/placeholder/icons/check.svg" alt="">
  17.             <h4 class="title is-4">Privacy</h4>
  18.             <p>Nobody is tracking you when your activity when you use PiperNet</p>
  19.           </div>
  20.           <div class="column is-3"><img src="../../all-css/placeholder/icons/check.svg" alt="">
  21.             <h4 class="title is-4">Storage</h4>
  22.             <p>Store your data safely, and access it faster than ever</p>
  23.           </div>
  24.           <div class="column is-3"><img src="../../all-css/placeholder/icons/check.svg" alt="">
  25.             <h4 class="title is-4">Decentralization</h4>
  26.             <p>Decentralized design allows data to flow freely and efficiently</p>
  27.           </div>
  28.         </div>
  29.       </div>
  30.     </section>
  31.   </div>

14°

Code :

  1.  <div class="container is-fluid">
  2.     <section class="hero">
  3.       <div class="hero-body">
  4.         <div class="container has-text-centered">
  5.           <h1 class="title">The New Internet</h1>
  6.           <h2 class="subtitle">The PiperNet is on it's way to revolutionize every smartphone, PC,
  7.                   and smart-fridge near
  8.             you.</h2>
  9.           <div class="columns is-centered">
  10.             <div class="column is-7">
  11.               <form>
  12.                 <div class="field is-grouped">
  13.                   <div class="control is-expanded">
  14.                     <input class="input" type="text" placeholder="Your e-mail" required="required">
  15.                   </div>
  16.                   <div class="control is-expanded">
  17.                     <input class="input" type="password" placeholder="Password" required="required">
  18.                   </div>
  19.                   <div class="control">
  20.                     <button class="button is-primary" type="submit">Sign up</button>
  21.                   </div>
  22.                 </div>
  23.               </form>
  24.             </div>
  25.           </div><img src="https://bulma.dev/placeholder/pictures/bg_16-9.svg?primary=00d1b2" alt="">
  26.         </div>
  27.       </div>
  28.     </section>
  29.   </div>

15°

Code :

  1.  <div class="container is-fluid">
  2.     <section class="hero">
  3.       <div class="hero-body">
  4.         <div class="container has-text-centered">
  5.           <h1 class="title">The New Internet</h1>
  6.           <h2 class="subtitle">Decentralized, secure, private. The PiperNet is on it's way to 
  7.                revolutionize every smartphone, PC, and smart-fridge near you.</h2>
  8.           <div class="buttons is-centered"><a class="control button is-primary" href="#">
  9.                Sign up with Facebook</a></div>
  10.           <h3 class="subtitle is-4 has-text-centered">or register using form</h3>
  11.           <div class="columns is-centered">
  12.             <div class="column is-7">
  13.               <form>
  14.                 <div class="field is-grouped">
  15.                   <div class="control is-expanded">
  16.                     <input class="input" type="text" placeholder="Your e-mail" required="required">
  17.                   </div>
  18.                   <div class="control is-expanded">
  19.                     <input class="input" type="password" placeholder="Password" required="required">
  20.                   </div>
  21.                   <div class="control">
  22.                     <button class="button is-primary" type="submit">Submit</button>
  23.                   </div>
  24.                 </div>
  25.                 <div class="field">
  26.                   <div class="control has-text-centered">
  27.                     <label class="checkbox">
  28.                       <div class="control">
  29.                         <input type="checkbox" required="required">&nbsp; I agree to <a href="#">terms 
  30. and conditions</a>.
  31.                       </div>
  32.                     </label>
  33.                   </div>
  34.                 </div>
  35.               </form>
  36.             </div>
  37.           </div>
  38.         </div>
  39.       </div>
  40.     </section>
  41.   </div>

16°

Code :

  1. <div class="container is-fluid">
  2.     <section class="hero">
  3.       <div class="hero-body">
  4.         <div class="container has-text-centered"><a href="#"><img 
  5. 		src="../../all-css/placeholder/icons/play.svg" alt=""></a>
  6.           <h1 class="title">The New Internet</h1>
  7.           <h2 class="subtitle">Our mission is not to outsell Hooli 
  8. 		  with a product like their latest Box 3. We are not in
  9.             it for the money - we are in it to make the whole world 
  10. 			decentralized. To give you control over your data.
  11.             To change by the internet as we know it by integrating a
  12. 			very important feature into it - freedom.</h2>
  13.           <div class="buttons is-centered"><a class="button is-primary"
  14. 		  href="#">Sign up</a></div>
  15.         </div>
  16.       </div>
  17.     </section>
  18.   </div>

17°

Code :

  1. <nav class="breadcrumb container" aria-label="breadcrumbs">
  2.       <ul>
  3.         <li><a href="../../index.html">Menu</a></li>
  4.         <li><a href="../../all-index/index-headers.html">Templates</a></li>
  5.         <li class="is-active"><a href="#" aria-current="page">Les Headers</a></li>
  6.       </ul>
  7.     </nav>    <div class="container is-fluid">
  8.                 
  9.       <section class="hero">
  10.         <div class="hero-body">
  11.           <div class="container has-text-centered">
  12.             <h1 class="title">The New Internet</h1>
  13.             <h2 class="subtitle">Decentralized, secure, private. The PiperNet is on it's way
  14.                         to revolutionize every smartphone, PC, and smart-fridge near you.</h2>
  15.             <div class="buttons is-centered"><a class="control button is-primary" href="#">
  16.                 Sign up for free</a></div>
  17.             <div class="columns">
  18.               <div class="column">
  19.                 <div class="card">
  20.                   <div class="card-image">
  21.                     <figure class="image is-4by3"><img src="https://bulma.dev/placeholder/pictures/
  22.                         bg_4-3.svg?primary=00d1b2" alt=""></figure>
  23.                   </div>
  24.                   <div class="card-content">
  25.                     <p class="title is-4">Safety</p><a href="#">Read more</a>
  26.                   </div>
  27.                 </div>
  28.               </div>
  29.               <div class="column">
  30.                 <div class="card">
  31.                   <div class="card-image">
  32.                     <figure class="image is-4by3"><img src="https://bulma.dev/placeholder/pictures/
  33.                          bg_4-3.svg?primary=00d1b2" alt=""></figure>
  34.                   </div>
  35.                   <div class="card-content">
  36.                     <p class="title is-4">Speed</p><a href="#">Read more</a>
  37.                   </div>
  38.                 </div>
  39.               </div>
  40.               <div class="column">
  41.                 <div class="card">
  42.                   <div class="card-image">
  43.                     <figure class="image is-4by3"><img src="https://bulma.dev/placeholder/pictures/
  44.                        bg_4-3.svg?primary=00d1b2" alt=""></figure>
  45.                   </div>
  46.                   <div class="card-content">
  47.                     <p class="title is-4">Accessibility</p><a href="#">Read more</a>
  48.                   </div>
  49.                 </div>
  50.               </div>
  51.             </div>
  52.           </div>
  53.         </div>
  54.       </section>