"header + body + footer"
Bulma 0.4.1 Snippet by jackweb178

Post to Facebook Tweet this

<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> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Balde!</title> <!-- cdn --> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css"> <!-- cdn --> <!-- css --> <link rel="stylesheet" type="text/css" href="bulma-0.7.1/css/bulma.min.css"> <link rel="stylesheet" type="text/css" href="bulma-0.7.1/css/style.css"> <!-- css --> </head> <body class="has-navbar-fixed-top"> <nav class="navbar is-fixed-top is-transparent is-expanded" style="border-bottom:4px solid #07caad "> <div class="navbar-brand"> <a class="navbar-item" href="image/talibadio.png"> <img src="https://www.cjoint.com/doc/18_05/HErw0jU5Sk8_talibadio-logo.png" width="112" height="28"> </a> <div class="navbar-burger burger" data-target="navbarExampleTransparentExample"> <span></span> <span></span> <span></span> </div> </div> <div id="navbarExampleTransparentExample" class="navbar-menu"> <div class="navbar-start"> <a class="navbar-item" href="#">A propos</a> </div> <div class="navbar-end"> <div class="navbar-item"> <div class="field is-grouped"> <p class="control"> <a class="navbar-item" href="#"> <span class="icon"> <i class="fas fa-user-circle"></i> </span> <span> S'inscrire </span> </a> </p> <p class="control"> <a class="navbar-item" href="#"> <span class="icon"> <i class="fas fa-toggle-on"></i> </span> <span>Se connecte</span> </a> </p> </div> </div> </div> </div> </nav> <section class="hero is-small " style="margin-top: 8px;"> <div class="hero-body"> <div class="container"> <div class="columns is-mobile is-centered"> <div class="column is-6-desktop is-6-tablet is-12-mobile "> <form method="post" action=""> <div class="field"> <label class="label">Pseudo</label> <div class="control has-icons-left has-icons-right"> <!-- is-success --><input class="input" type="text" placeholder="Text input" value="el-a-k-balde.000webhostapp.com"> <span class="icon is-small is-left"> <i class="fas fa-user"></i> </span> <span class="icon is-small is-right"> <i class="fas fa-check"></i> </span> </div> <!-- <p class="help is-success">This username is available</p> --> </div> <div class="field"> <label class="label">Email</label> <div class="control has-icons-left has-icons-right"> <!-- is-danger --><input class="input " type="email" placeholder="Email input" value="talibadio"> <span class="icon is-small is-left"> <i class="fas fa-envelope"></i> </span> <span class="icon is-small is-right"> <i class="fas fa-exclamation-triangle"></i> </span> </div> <!-- <p class="help is-danger">This email is invalid</p> --> </div> <div class="field"> <label class="label">Mot de pass</label> <p class="control has-icons-left"> <input class="input" type="password" placeholder="Password"> <span class="icon is-small is-left"> <i class="fas fa-lock"></i> </span> </p> </div> <div class="field"> <label class="label">Confirmer</label> <p class="control has-icons-left"> <input class="input is-couleur_de_mon_choix" type="password" placeholder="Password_confirm"> <span class="icon is-small is-left"> <i class="fas fa-lock"></i> </span> </p> </div> <div class="field"> <div class="control"> <label class="checkbox"> <input type="checkbox"> Se souvenir de moi </label> </div> </div> <div class="field is-grouped"> <div class="control"> <button class="button is-primary">Submit</button> </div> </div> </form> </div><!-- column --> </div><!-- columns --> </div><!-- container --> </div><!-- hero-body --> </section> <footer class="footer has-background-light is-transparent " style="border-top:4px solid #07caad " <div class="container"> <div class="content has-text-centered"> <p> <span><i class="far fa-copyright"></i></span> <strong> Copie right 2018</strong> </p> </div> </div> </footer> </body> </html>
.columns-2{ margin-top: 30px; } .footer{ margin-top:20px; }

Related: See More

BLK• Design System

Questions / Comments: