Modèles de Header
1°
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>
2°
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 »</a> </div> </div> </section> </div>
3°
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"> I agree to <a href="#">terms and conditions</a>. </label> </div> </form> </div> </div> </section> </div>
4°
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 »</a></div> </div> </div> </section> </div>
5°
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>
6°
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>
7°
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 »</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>
8°
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"> 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>
9°
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"> 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"> 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>