logo

Headers

Modèles de Header

Code :

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

Code :

<div class="container is-fluid">
 <section class="hero">
  <div class="hero-body">
   <div class="container has-text-centered">
    <h2 class="subtitle">The New Internet</h2>
     <h1 class="title">We've built a decentralized internet where information is totally free
     </h1>
      <a href="#">Read more &raquo;</a>
   </div>
  </div>
 </section>
</div>

Code :

<div class="container is-fluid">
 <section class="hero">
  <div class="hero-body">
   <div class="container has-text-centered">
    <h1 class="title">The New Internet</h1>
     <h2 class="subtitle">We've built a decentralized internet where information is totally
         free in every sense of the word.</h2>
     <form>
	<div class="columns is-centered">
	 <div class="column is-7 is-5-desktop">
	  <div class="field is-grouped">
	   <div class="control is-expanded">
	    <input class="input" type="text" placeholder="Your e-mail" required="required">
	   </div>
	     <div class="control is-expanded">
	      <input class="input" type="password" placeholder="Password" required="required">
	   </div>
	     <div class="control">
	      <button class="button is-primary" type="submit">Submit</button>
	   </div>
	   </div>
           </div>
	   </div>
	   <div class="control has-text-centered-tablet">
	    <label class="checkbox">
	     <input type="checkbox" required="required">&nbsp; I agree to 
              <a href="#">terms and conditions</a>.
	    </label>
	   </div>
     </form>
    </div>
   </div>
 </section>
</div>

Code :

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

Code :

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

Code :

<div class="container is-fluid">
 <section class="hero">
  <div class="hero-body">
   <div class="container">
    <div class="columns is-vcentered">
     <div class="column is-6"> 
      <h1 class="title is-spaced">The New Internet</h1>
	<p class="subtitle">We've built a decentralized internet where information
           is totally free in every sense
	of the word.</p>
	 <div class="buttons"><a class="button is-primary" href="#">Sign up for free
            </a><a class="button is-text"
		href="#">Read more</a></div>
	</div>
	 <div class="column is-6"><img src="https://bulma.dev/placeholder/pictures/
                      bg_4-3.svg?primary=00d1b2" alt="">
     </div>
    </div>
   </div>
  </div>
 </section>
</div>

Code :

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

Code :

<div class="container is-fluid">
 <section class="hero">
  <div class="hero-body">
   <div class="container">
    <div class="columns is-vcentered">
     <div class="column is-6">
      <h1 class="title is-spaced">The New Internet</h1>
	<p class="subtitle">We've built a decentralized internet where information is totally 
         free in every sense of the word.</p>
	 <form>
	  <div class="field has-addons">
	   <div class="control">
            <input class="input" type="text" placeholder="Your e-mail">
	 </div>
	   <div class="control">
	    <button class="button is-primary">Submit</button>
	   </div>
	</div>
	   <div class="field"></div>
	    <div class="control">
	     <label class="checkbox">
	      <div class="control">
		<input type="checkbox" required="required">&nbsp; I agree to <a href="#">terms 
                 and conditions</a>.
	  </div>
	 </label>
	</div>
       </form>
      </div>
	<div class="column is-6"><img src="https://bulma.dev/placeholder/pictures/
            bg_4-3.svg?primary=00d1b2" alt="">
     </div>
    </div>
   </div>
  </div>
 </section>
</div>

Code :

<div class="container is-fluid">
 <section class="hero">			
  <div class="hero-body">
   <div class="container">
    <div class="columns is-vcentered">
     <div class="column is-6">
      <h1 class="title">The New Internet</h1>
        <p class="subtitle">We've built a decentralized internet where information
          is totally free in every sense of the word.</p>
	<div class="columns">
	 <div class="column is-half-desktop">
	  <form>
	   <div class="field">
	    <div class="control">
	     <input class="input" type="text" placeholder="Login">
	    </div>
           </div>
	      <div class="field">
	       <div class="control">
		<input class="input" type="password" placeholder="Password">
	       </div>
	      </div>
		 <div class="field">
		  <div class="control">
		   <input class="input" type="password" placeholder="Repeat password">
		  </div>
		 </div>
	          <div class="field">
		   <div class="control">
		    <button class="button is-primary">Sign up</button>
		   </div>
		  </div>
		   <div class="field">
		    <div class="control">
		     <label class="checkbox">
		      <div class="control">
		       <input type="checkbox" required="required">&nbsp; I agree to <a href="#">
                         terms and conditions</a>.
		      </div>
		     </label>
		</div>
	     </div>
	    </form>
	   </div>
	  </div>
	 </div>
	<div class="column is-6"><img src="https://bulma.dev/placeholder/pictures/bg_4-3
              .svg?primary=00d1b2" alt="">
     </div>
    </div>
   </div>
  </div>
 </section>
</div>

10°

Code :

<div class="container is-fluid">
 <section class="hero"
  style="background: url('https://bulma.dev/placeholder/pictures/bg_16-4.svg?primary=00d1b2');
    background-size: cover">
   <div class="hero-body">
    <div class="container has-text-centered">
     <div class="columns">
      <div class="column is-half is-one-third-desktop">
	<div class="card">
	 <div class="card-content">
	  <h2 class="title is-4 is-spaced">Bringing the Internet to the People.</h2>
	   <p class="subtitle is-6">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 class="buttons"><a class="button is-primary is-fullwidth" href="#">Learn more</a></div>
	</div>
      </div>
     </div>
    </div>
   </div>
  </div>
 </section>
</div>

11°

Code :

<div class="container is-fluid">
 <section class="hero"
  style="background: url('https://bulma.dev/placeholder/pictures/bg_16-4.svg?primary=00d1b2');
        background-size: cover">
  <div class="hero-body">
   <div class="container has-text-centered">
    <div class="columns">
     <div class="column is-6 is-4-desktop is-offset-3 is-offset-8-desktop">
      <div class="card">
	<div class="card-content">
	 <h2 class="title is-4 is-spaced">Bringing the Internet to the People.</h2>
	  <p class="subtitle is-6">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 class="buttons"><a class="button is-primary is-fullwidth" href="#">Learn more</a>
        </div>
       </div>
      </div>
     </div>
    </div>
   </div>
  </div>
 </section>
</div>

12°

Code :

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

13°

Code :

<div class="container is-fluid">
    <section class="hero">
      <div class="hero-body">
        <div class="container has-text-centered">
          <h1 class="title">Bringing the Internet of the Future to the People</h1>
          <h2 class="subtitle">Decentralized, secure, private. The PiperNet is on it's way to revolutionize every
            smartphone, PC, and smart-fridge near you.</h2>
          <div class="buttons is-centered"><a class="button is-primary" href="#">Sign up for free</a></div>
        </div>
        <hr>
        <div class="columns has-text-centered">
          <div class="column is-3"><img src="../../all-css/placeholder/icons/check.svg" alt="">
            <h4 class="title is-4">Security</h4>
            <p>Your data is virtually unhackable compared to traditional net</p>
          </div>
          <div class="column is-3"><img src="../../all-css/placeholder/icons/check.svg" alt="">
            <h4 class="title is-4">Privacy</h4>
            <p>Nobody is tracking you when your activity when you use PiperNet</p>
          </div>
          <div class="column is-3"><img src="../../all-css/placeholder/icons/check.svg" alt="">
            <h4 class="title is-4">Storage</h4>
            <p>Store your data safely, and access it faster than ever</p>
          </div>
          <div class="column is-3"><img src="../../all-css/placeholder/icons/check.svg" alt="">
            <h4 class="title is-4">Decentralization</h4>
            <p>Decentralized design allows data to flow freely and efficiently</p>
          </div>
        </div>
      </div>
    </section>
  </div>

14°

Code :

 <div class="container is-fluid">
    <section class="hero">
      <div class="hero-body">
        <div class="container has-text-centered">
          <h1 class="title">The New Internet</h1>
          <h2 class="subtitle">The PiperNet is on it's way to revolutionize every smartphone, PC,
                  and smart-fridge near
            you.</h2>
          <div class="columns is-centered">
            <div class="column is-7">
              <form>
                <div class="field is-grouped">
                  <div class="control is-expanded">
                    <input class="input" type="text" placeholder="Your e-mail" required="required">
                  </div>
                  <div class="control is-expanded">
                    <input class="input" type="password" placeholder="Password" required="required">
                  </div>
                  <div class="control">
                    <button class="button is-primary" type="submit">Sign up</button>
                  </div>
                </div>
              </form>
            </div>
          </div><img src="https://bulma.dev/placeholder/pictures/bg_16-9.svg?primary=00d1b2" alt="">
        </div>
      </div>
    </section>
  </div>

15°

Code :

 <div class="container is-fluid">
    <section class="hero">
      <div class="hero-body">
        <div class="container has-text-centered">
          <h1 class="title">The New Internet</h1>
          <h2 class="subtitle">Decentralized, secure, private. The PiperNet is on it's way to 
               revolutionize every smartphone, PC, and smart-fridge near you.</h2>
          <div class="buttons is-centered"><a class="control button is-primary" href="#">
               Sign up with Facebook</a></div>
          <h3 class="subtitle is-4 has-text-centered">or register using form</h3>
          <div class="columns is-centered">
            <div class="column is-7">
              <form>
                <div class="field is-grouped">
                  <div class="control is-expanded">
                    <input class="input" type="text" placeholder="Your e-mail" required="required">
                  </div>
                  <div class="control is-expanded">
                    <input class="input" type="password" placeholder="Password" required="required">
                  </div>
                  <div class="control">
                    <button class="button is-primary" type="submit">Submit</button>
                  </div>
                </div>
                <div class="field">
                  <div class="control has-text-centered">
                    <label class="checkbox">
                      <div class="control">
                        <input type="checkbox" required="required">&nbsp; I agree to <a href="#">terms 
and conditions</a>.
                      </div>
                    </label>
                  </div>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>

16°

Code :

<div class="container is-fluid">
    <section class="hero">
      <div class="hero-body">
        <div class="container has-text-centered"><a href="#"><img 
		src="../../all-css/placeholder/icons/play.svg" alt=""></a>
          <h1 class="title">The New Internet</h1>
          <h2 class="subtitle">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. To give you control over your data.
            To change by the internet as we know it by integrating a
			very important feature into it - freedom.</h2>
          <div class="buttons is-centered"><a class="button is-primary"
		  href="#">Sign up</a></div>
        </div>
      </div>
    </section>
  </div>

17°

Code :

<nav class="breadcrumb container" aria-label="breadcrumbs">
      <ul>
        <li><a href="../../index.html">Menu</a></li>
        <li><a href="../../all-index/index-headers.html">Templates</a></li>
        <li class="is-active"><a href="#" aria-current="page">Les Headers</a></li>
      </ul>
    </nav>    <div class="container is-fluid">
                
      <section class="hero">
        <div class="hero-body">
          <div class="container has-text-centered">
            <h1 class="title">The New Internet</h1>
            <h2 class="subtitle">Decentralized, secure, private. The PiperNet is on it's way
                        to revolutionize every smartphone, PC, and smart-fridge near you.</h2>
            <div class="buttons is-centered"><a class="control button is-primary" href="#">
                Sign up for free</a></div>
            <div class="columns">
              <div class="column">
                <div class="card">
                  <div class="card-image">
                    <figure class="image is-4by3"><img src="https://bulma.dev/placeholder/pictures/
                        bg_4-3.svg?primary=00d1b2" alt=""></figure>
                  </div>
                  <div class="card-content">
                    <p class="title is-4">Safety</p><a href="#">Read more</a>
                  </div>
                </div>
              </div>
              <div class="column">
                <div class="card">
                  <div class="card-image">
                    <figure class="image is-4by3"><img src="https://bulma.dev/placeholder/pictures/
                         bg_4-3.svg?primary=00d1b2" alt=""></figure>
                  </div>
                  <div class="card-content">
                    <p class="title is-4">Speed</p><a href="#">Read more</a>
                  </div>
                </div>
              </div>
              <div class="column">
                <div class="card">
                  <div class="card-image">
                    <figure class="image is-4by3"><img src="https://bulma.dev/placeholder/pictures/
                       bg_4-3.svg?primary=00d1b2" alt=""></figure>
                  </div>
                  <div class="card-content">
                    <p class="title is-4">Accessibility</p><a href="#">Read more</a>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

 

Une idée ? Partagez-la !

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