"Materilize-Login"
Materialize 0.98.2 Snippet by chapacua

Post to Facebook Tweet this

<link href="//cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/css/materialize.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/js/materialize.min.js"></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 lang="en"> <head> <meta charset="UTF-8"> <!--Import Google Icon Font--> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <!--Let browser know website is optimized for mobile--> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Mis Recetas</title> <!--Import materialize.css--> <link rel="stylesheet" href="node_modules\materialize-css\dist\css\materialize.min.css"> <!-- Estilos propios --> <link rel="stylesheet" href="css/main.css"> </head> <body> <!--Contenedor General--> <div class="container"> <div class="row"> <div class="col s8 offset-s2 m6 offset-m3"> <div class="card center-align"> <div class="card-image"> <img class="activator" src="https://o.aolcdn.com/images/dims3/GLOB/crop/5760x2880+0+480/resize/630x315!/format/jpg/quality/85/http%3A%2F%2Fo.aolcdn.com%2Fhss%2Fstorage%2Fmidas%2F1e6a11c0ceb369bee739518f2618916d%2F205881769%2Fhealth-food-for-fitness-picture-id855098134"> </div> <div class="card-tabs"> <ul class="tabs tabs-fixed-width"> <li class="tab"><a href="#test4">Ingresar</a></li> <li class="tab"><a href="#test6">Registrarse</a></li> </ul> </div> <div class="card-content grey lighten-4"> <div id="test4"> <div class="row"> <form action="" method="post"> <div class="input-field col s12"> <i class="material-icons prefix">account_circle</i> <input placeholder="ejemplo@dominio.com" id="email" name="email" type="text" class="validate"> <label for="email">Usuario</label> </div> <div class="input-field col s12"> <i class="material-icons prefix">vpn_key</i> <input placeholder="tu contraseña" id="password" name="password" type="text" class="validate"> <label for="password">Contraseña</label> </div> <div> <button type="submit" class="waves-effect waves-light btn red"><i class="material-icons right">arrow_forward</i>Ingresar</button> </div> </form> </div> </div> <div id="test6"> <div class="row"> <form action="" method="post"> <div class="input-field col s12"> <i class="material-icons prefix">assignment_ind</i> <input placeholder="ejemplo@dominio.com" id="email" name="email" type="number" class="validate"> <label for="email">Cédula</label> </div> <div class="input-field col s12"> <i class="material-icons prefix">border_color</i> <input placeholder="ejemplo@dominio.com" id="email" name="email" type="number" class="validate"> <label for="email">Nombre</label> </div> <div class="input-field col s12"> <i class="material-icons prefix">assignment_ind</i> <input placeholder="ejemplo@dominio.com" id="email" name="email" type="number" class="validate"> <label for="email">Usuario</label> </div> <div class="input-field col s12"> <i class="material-icons prefix">email</i> <input placeholder="ejemplo@dominio.com" id="email" name="email" type="text" class="validate"> <label for="email">Email</label> </div> <div class="input-field col s12"> <i class="material-icons prefix">vpn_key</i> <input placeholder="tu contraseña" id="password" name="password" type="text" class="validate"> <label for="password">Contraseña</label> </div> <div> <button type="submit" class="waves-effect waves-light btn red"><i class="material-icons right">arrow_forward</i>Ingresar</button> </div> </form> </div> </div> </div> </div> </div> </div> </div> </body> <script src="node_modules\jquery\dist\jquery.min.js"></script> <script src="node_modules\materialize-css\dist\js\materialize.min.js"></script> <script defer src="https://use.fontawesome.com/releases/v5.0.7/js/all.js"></script> <script> $(document).ready(function(){ $('.tabs').tabs(); }); </script> </html>

Related: See More

Rotating CSS Card
Login Materialize

Questions / Comments: