"Materialize - Login Page"
Materialize 0.98.2 Snippet by rodrigowc

<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> <!--Import Google Icon Font--> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <!-- Compiled and minified CSS --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"> <!--Let browser know website is optimized for mobile--> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> </head> <body> <div class="outdiv"> <nav class="navinside"> <div class="nav-wrapper"> <a href="dashboard.php" class="brand-logo hide-on-med-and-down logo1" >Logo</a> <a href="dashboard.php" class="brand-logo hide-on-large-only logo2" >Logo</a> <ul id="nav-mobile" class="right hide-on-med-and-down"> <li><a href="#"><i class="material-icons left">live_help</i>Help</a></li> </ul> </div> </nav> <h4 class="center white-text loginh4">Login</h4> <div class="row divlogin"> <div class="col s10 m6 l4 offset-s1 offset-m3 offset-l4 divcardline"> <form action="modules/logging-in.php" method="POST"> <div class="input-field col s12 formmg" style="margin-top: 45px; margin-bottom:0px"> <i class="material-icons prefix">account_circle</i> <input id="icon_prefix" name="user" type="text" class="validate" required minlength="5"> <label for="icon_prefix">username</label> </div> <div class="input-field col s12"> <i class="material-icons prefix">lock_outline</i> <input id="icon_prefix2" type="password" name="password" class="validate" required minlength="6"> <label for="icon_prefix2">password</label> </div> <div class="col s12 mgrem" > <p> <label> <input type="checkbox" name="remember-me"/> <span>Remember me</span> </label> </p> </div> <div class="input-field col s12 divbt"> <button class="waves-effect waves-light btn blue btlg1" type="submit" name="bt-send">Login</button> <a href="views/register.php" class="waves-effect waves-light btn grey btlg2" >Sign Up</a> </div> <div class="input-field col s12"> <a href="views/recover.php" class="right">Forgot your password?</a> </div> </form> </div> </div> </div> <!-- End Div Page --> </body> </html>
.outdiv{ background-color: #00DBDE; background-image: linear-gradient(90deg, #00DBDE 0%, #FC00FF 100%); width:100%; height: 750px; overflow:hidden; } .navinside{ background: rgb(4,139,210); background: linear-gradient(90deg, rgba(4,139,210,1) 0%, rgba(13,155,212,1) 30%, rgba(21,169,214,1) 60%, rgba(27,180,215,1) 91%, rgba(37,196,218,1) 100%); } .logo1{ margin-left: 20px; font-size:28px } .logo2{ font-size:26px; } .loginh4{ margin-top: 30px; } .divcardline{ background-color: rgba(255, 255, 255, 0.9); width:35%; height:auto; border-radius:6px; } .btlg1{ width:100%; } .btlg2{ width:100%; margin-top:15px; } .mgrem{ margin-top:-10px; margin-bottom:10px; } .divlogin{ margin-top:30px; } .divbt{ margin-top: 10px; }

Related: See More


Questions / Comments: