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>