"Registration Form"
Bulma 0.4.1 Snippet by Freesnip

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 ----------> <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.min.css"> <body class="columns" style="margin: 10px 25px;"> <div class="column is-4"> <article class="message is-info"> <div class="message-header "> <h2>Edit User</h2> </div> <div class="message-body field"> <form action=""> <div class="columns"> <div class="column"> <label for="nombre" class="label">Name: </label> <div class="control"> <input type="text" class="input" placeholder="Complete name"> </div> </div> </div> <div class="columns"> <div class="column"> <label for="usuario" class="label">User: </label> <div class="control has-icons-left"> <input type="text" class="input"> <span class="icon is-small is-left"> <i class="fa fa-user"></i> </span> </div> </div> <div class="column"> <div class="field"> <label class="label">Contraseña</label> <div class="control has-icons-right has-icons-left"> <input class="input" type="password" id="pass"> <span class="icon is-small is-left"> <i class="fa fa-refresh"></i> </span> <span class="icon is-small is-right"> <i class="fa fa-eye" id="show-pass"></i> </span> </div> </div> </div> </div> <div class="columns"> <div class="column"> <label for="email" class="label">Email: </label> <div class="control"> <input type="email" class="input" placeholder="Correo electrónico"> </div> </div> <div class="column"> <label for="tel" class="label">Phone: </label> <div class="control"> <input type="tel" class="input"> </div> </div> </div> <div class="columns"> <div class="column"> <label for="hInicio" class="label">Hora de Llegada: </label> <div class="control"> <input type="text" class="input" placeholder="00:00:00"> </div> </div> <div class="column"> <label for="hFinal" class="label">Hora de Salida: </label> <div class="control"> <input type="text" class="input" placeholder="00:00:00"> </div> </div> </div> <div class="columns"> <div class="column"> <label for="fechaExp" class="label">Fecha de Expiración: </label> <div class="control"> <input type="date" class="input" placeholder="aaaa-mm-dd"> </div> </div> <div class="column"> <label for="perfil" class="label">Perfil (Vista): </label> <div class="control has-icons-left"> <div class="select"><select> <option>Usuario</option> <option>With options</option> </select></div> <div class="icon is-small is-left"> <i class="fa fa-user"></i> </div> </div> </div> </div> <div class="columns"> <div class="column"> <label for="acceso" class="label">Date of access: </label> <div class="control"> <input type="checkbox" name="nedjelja" value="Domingo"> Sunday<br> <input type="checkbox" name="ponedjeljak"value="Lunes"> Monday<br> <input type="checkbox" name="utorak" value="Martes"> Tuesday<br> <input type="checkbox" name="srijeda" value="Miercoles"> Wednesday<br> <input type="checkbox" name="četvrtan" value="Jueves"> Thursday<br> <input type="checkbox" name="petak" value="Viernes"> Friday<br> <input type="checkbox" name="subota" value="Sabado"> Saturday<br> </div> </div> </div> <a class="button is-info" id="save"> <span class="icon"> <i class="fa fa-save"></i> </span> <span>Save</span> </a> </form> </div> </article> </div> <div class="column is-8"> </div> </body>
#save{ width: 100%; } [type="checkbox"]:not(:checked) + label:after, [type="checkbox"]:checked + label:after { content: '✔'; position: absolute; top: .1em; left: .3em; font-size: 1.3em; line-height: 0.8; color: #09ad7e; transition: all .2s; } [type="checkbox"]:not(:checked) + label:after { opacity: 0; transform: scale(0); } [type="checkbox"]:checked + label:after { opacity: 1; transform: scale(1); } [type="checkbox"]:not(:checked) + label:before, [type="checkbox"]:checked + label:before { content: ''; position: absolute; left: 0; top: 0; width: 1.25em; height: 1.25em; border: 2px solid #ccc; background: #fff; border-radius: 4px; box-shadow: inset 0 1px 3px rgba(0,0,0,.1); }

Related: See More

Black Dashboard

Questions / Comments: