<link href="//cdnjs.cloudflare.com/ajax/libs/bulma/0.4.1/css/bulma.min.css" rel="stylesheet" id="bootstrap-css">
<script src=""></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html>
<html>
<head>
<meta name="author" content="Hamza Ouzine">
<meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE-edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Hello World</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.2/css/bulma.css">
</head>
<body class="container">
<div class="container">
<div class="block">
<button class="button">Buttun</button>
<button class="button is-white">Buttun</button>
<button class="button is-light">Buttun</button>
<button class="button is-dark">Buttun</button>
<button class="button is-black">Buttun</button>
<button class="button is-link">Buttun</button>
</div>
<div class="block">
<a class="button is-primary">Buttun</a>
<a class="button is-info">Buttun</a>
<a class="button is-danger">Buttun</a>
<a class="button is-warning">Buttun</a>
<a class="button is-success">Buttun</a>
</div>
<div class="block">
<a class="button is-primary is-outlined">Buttun</a>
<a class="button is-info is-outlined">Buttun</a>
<a class="button is-danger is-outlined">Buttun</a>
<a class="button is-warning is-outlined">Buttun</a>
<a class="button is-success is-outlined">Buttun</a>
</div>
<div class="block">
<a class="button is-primary is-inverted">Buttun</a>
<a class="button is-info is-inverted">Buttun</a>
<a class="button is-danger is-inverted">Buttun</a>
<a class="button is-warning is-inverted">Buttun</a>
<a class="button is-success is-inverted">Buttun</a>
</div>
<div class="block">
<a href="#" class="button is-hovered">Hovered Btn</a>
<a href="#" class="button is-focused">Focused Btn</a>
<a href="#" class="button is-active">Active Btn</a>
<a href="#" class="button is-loading">Loading Btn</a>
<a href="#" class="button" disabled>Disabled Btn</a>
</div>
</div>
<div class="block">
<div class="box">
<h1 class="title">Hello Pretty</h1>
<p>Lorem ipsum dolor sit amet. Duis aute irure dolor in reprehenderit in.</p>
</div>
</div>
<div class="block">
<div class="notification">
<button class="delete"></button>
Lorem ipsum dolor sit amet. Duis aute irure dolor in reprehenderit in.?
</div>
<div class="notification is-primary">
<button class="delete"></button>
Lorem ipsum dolor sit amet. Duis aute irure dolor in reprehenderit in.?
</div>
<div class="notification is-info">
<button class="delete"></button>
Lorem ipsum dolor sit amet. Duis aute irure dolor in reprehenderit in.?
</div>
<div class="notification is-danger">
<button class="delete"></button>
Lorem ipsum dolor sit amet. Duis aute irure dolor in reprehenderit in.?
</div>
<div class="notification is-success">
<button class="delete"></button>
Lorem ipsum dolor sit amet. Duis aute irure dolor in reprehenderit in.?
</div>
<div class="notification is-warning">
<button class="delete"></button>
Lorem ipsum dolor sit amet. Duis aute irure dolor in reprehenderit in.?
</div>
</div>
<div class="block">
<span class="tag">Hello pretty</span>
<span class="tag is-black">Hello pretty</span>
<span class="tag is-dark">Hello pretty</span>
<span class="tag is-light">Hello pretty</span>
<span class="tag is-white">Hello pretty</span>
<span class="tag is-primary">Hello pretty</span>
<span class="tag is-info">Hello pretty</span>
<span class="tag is-success">Hello pretty</span>
<span class="tag is-danger">Hello pretty</span>
<span class="tag is-warning">Hello pretty</span>
</div>
<div class="block">
<article class="message">
<div class="message-header">
<p>About Us</p>
</div>
<div class="message-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</article>
<article class="message is-primary">
<div class="message-header">
<p>About Us</p>
</div>
<div class="message-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</article>
<article class="message is-info">
<div class="message-header">
<p>About Us</p>
</div>
<div class="message-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</article>
<article class="message is-success">
<div class="message-header">
<p>About Us</p>
</div>
<div class="message-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</article>
<article class="message is-warning">
<div class="message-header">
<p>About Us</p>
</div>
<div class="message-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</article>
<article class="message is-danger">
<div class="message-header">
<p>About Us</p>
</div>
<div class="message-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</article>
</div>
<div class="block">
<nav class="nav">
<div class="nav-left">
<a href="#" class="nav-item"><h1 class="title is-4">OZN | Adm.inc</h1></a>
</div>
<div class="nav-center">
<a href="#" class="nav-item"><span class="icon"> <i class="fa fa-github"></i></span></a>
<a href="#" class="nav-item"><span class="icon"> <i class="fa fa-twitter"></i></span></a>
</div>
<div class="nav-right nav-menu is-active">
<a href="#" class="nav-item">Home</a>
<a href="#" class="nav-item">About Us</a>
<a href="#" class="nav-item">Services</a>
<a href="#" class="nav-item">Contact</a>
</div>
</nav>
</div>
<div class="block">
<aside class="menu">
<p class="menu-label">
label 1
</p>
<ul class="menu-list">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
<p class="menu-label">
label 2
</p>
<ul class="menu-list">
<li><a href="#" class="is-active">Link 4</a>
<ul>
<li><a href="#">Link 5</a></li>
<li><a href="#">Link 6</a></li>
<li><a href="#">Link 7</a></li>
</ul>
</li>
</ul>
<p class="menu-label">
label 3
</p>
<ul class="menu-list">
<li><a href="#">Link 8</a></li>
</ul>
</aside>
</div>
<div class="block">
<section class="hero">
<div class="hero-body">
<div class="container">
<h1 class="title">Hero Title</h1>
<h2 class="subtitle">Hero Subtitle</h2>
</div>
</div>
</section>
<section class="hero is-primary">
<div class="hero-body">
<div class="container">
<h1 class="title">Hero Title</h1>
<h2 class="subtitle">Hero Subtitle</h2>
</div>
</div>
</section>
<section class="hero is-info">
<div class="hero-body">
<div class="container">
<h1 class="title">Hero Title</h1>
<h2 class="subtitle">Hero Subtitle</h2>
</div>
</div>
</section>
<section class="hero is-success">
<div class="hero-body">
<div class="container">
<h1 class="title">Hero Title</h1>
<h2 class="subtitle">Hero Subtitle</h2>
</div>
</div>
</section>
<section class="hero is-danger">
<div class="hero-body">
<div class="container">
<h1 class="title">Hero Title</h1>
<h2 class="subtitle">Hero Subtitle</h2>
</div>
</div>
</section><section class="hero is-warning">
<div class="hero-body">
<div class="container">
<h1 class="title">Hero Title</h1>
<h2 class="subtitle">Hero Subtitle</h2>
</div>
</div>
</section>
</div>
<div class="block">
<div class="card">
<div class="card-centent">
<p class="title">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<footer class="card-footer">
<p class="card-footer-item">
<span><a href="#"><i class="fa fa-twitter"></i> Twitter</a></span>
</p>
<p class="card-footer-item">
<span><a href="#"><i class="fa fa-facebook"></i> Facebook</a></span>
</p>
<p class="card-footer-item">
<span><a href="#"><i class="fa fa-youtube"></i> Youtube</a></span>
</p>
</footer>
</div>
</div>
<div class="block">
<nav class="pagination">
<a href="#" class="pagination-previous" disabled>Previous</a>
<a href="#" class="pagination-next">Next Page</a>
<ul class="pagination-list">
<li>
<a href="#" class="pagination-link is-current">1</a>
</li>
<li>
<a href="#" class="pagination-link">2</a>
</li>
<li>
<a href="#" class="pagination-link">3</a>
</li>
<li>
<a href="#" class="pagination-link">4</a>
</li>
</ul>
</nav>
</div>
<div class="block">
<nav class="level">
<div class="level-left">
<p class="level-item"><a href="#"><strong>All</strong></a></p>
<p class="level-item"><a href="#">Published</a></p>
<p class="level-item"><a href="#">Draft</a></p>
<p class="level-item"><a href="#">Deleted</a></p>
<p class="level-item"><a href="#" class="button is-primary">New</a></p>
</div>
<div class="level-right">
<div class="level-item">
<div class="field">
<p class="control">
<input type="text" class="input" placeholder="Search Posts">
</p>
</div>
</div>
</div>
</nav>
</div>
<div class="block">
<form>
<div class="field">
<label class="label">Name</label>
<input type="text" class="input" placeholder="Enter Your Name">
</div>
<div class="field">
<label class="label">Name</label>
<input type="text" class="input is-success" placeholder="Enter Your Name">
</div>
<div class="field">
<label class="label">Name</label>
<input type="text" class="input is-danger" placeholder="Enter Your Name">
</div>
<div class="field">
<label class="label">Package</label>
<p class="control">
<span class="select">
<select>
<option>Select dropdown</option>
<option>Simple</option>
<option>Standard</option>
<option>Super</option>
</select>
</span>
</p>
</div>
<div class="field">
<label class="label">Message</label>
<p class="control">
<textarea class="textarea" placeholder="Textarea"></textarea>
</p>
</div>
</form>
</div>
<div class="block">
<div class="field has-addons">
<p class="control">
<input type="text" class="input" placeholder="Enter Keywords...">
</p>
<p class="control">
<a href="#" class="button is-warning">Search!</a>
</p>
</div>
</div>
<div class="block">
<div class="field has-addons">
<p class="control">
<span class="select">
<select>
<option>$</option>
<option>£</option>
<option>Dh</option>
</select>
</span>
</p>
<p class="control">
<input type="text" class="input" placeholder="Enter Amount...">
</p>
<p class="control">
<a href="#" class="button is-warning">Pay!</a>
</p>
</div>
</div>
<div class="block">
<table class="table is-striped is-bordered is-narrow">
<thead>
<tr class="is-selected">
<th>Name</th>
<th>Email</th>
<th>Phone</th>
</tr>
</thead>
<tbody>
<tr>
<td>Rick Grimes</td>
<td>Rick Grimes@gmail.com</td>
<td>+2126-000-000-000</td>
</tr>
<tr>
<td>Darly Grimes</td>
<td>darlygrimes@gmail.com</td>
<td>+2126-000-000-000</td>
</tr>
<tr>
<td>Glen Rhee</td>
<td>glenrhee@gmail.com</td>
<td>+2126-000-000-000</td>
</tr>
<tr>
<td>Meilleur Hunter</td>
<td>meilleurhunter@gmail.com</td>
<td>+2126-000-000-000</td>
</tr>
</tbody>
</table>
</div>
<div class="block">
<div class="columns">
<div class="column">
<p class="notification">First Column</p>
</div>
<div class="column">
<p class="notification">second Column</p>
</div>
<div class="column">
<p class="notification">third Column</p>
</div>
</div>
</div>
<div class="block">
<div class="columns">
<div class="column is-3">
<p class="notification">3 Column</p>
</div>
<div class="column is-6">
<p class="notification">6 Column</p>
</div>
<div class="column is-3">
<p class="notification">3 Column</p>
</div>
</div>
</div>
<p>All Rights Reserved To Hamza Ouzine</p>
<a class="button is-success" href="https://www.facebook.com/ouziine" target="blank">My Facebook</a>
</body>
</html>
.block{
margin-top: 50px;
}
