Material design lite login page
home
Run
screen_rotation
fullscreen
cloud_download
navigate_before
<html> <head> <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> <link rel="stylesheet" href="https://code.getmdl.io/1.1.1/material.indigo-pink.min.css"> <script defer src="https://code.getmdl.io/1.1.1/material.min.js"></script> <style> .remove-padding{ padding:0px; } </style> </head> <body> <button id="show-dialog" type="button" class="mdl-button">Login</button> <dialog class="mdl-dialog remove-padding"> <div class="mdl-card mdl-shadow--6dp"> <div class="mdl-card__title mdl-color--primary mdl-color-text--white"> <h2 class="mdl-card__title-text">Login</h2> </div> <div class="mdl-card__supporting-text"> <form action="#"> <div class="mdl-textfield mdl-js-textfield"> <input class="mdl-textfield__input" type="text" id="email" /> <label class="mdl-textfield__label" for="email">Email</label> </div> <div class="mdl-textfield mdl-js-textfield"> <input class="mdl-textfield__input" type="password" id="userpass" /> <label class="mdl-textfield__label" for="userpass">Password</label> </div> </form> </div> <div class="mdl-card__actions mdl-card--border"> <button class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">Sign In </button> </div> </div> </dialog> <script> var dialog = document.querySelector('dialog'); var showDialogButton = document.querySelector('#show-dialog'); if (! dialog.showModal) { dialogPolyfill.registerDialog(dialog); } showDialogButton.addEventListener('click', function() { dialog.showModal(); }); </script> </body> </html>
<html> <head> <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> <link rel="stylesheet" href="https://code.getmdl.io/1.1.1/material.indigo-pink.min.css"> <script defer src="https://code.getmdl.io/1.1.1/material.min.js"></script> <style> .remove-padding{ padding:0px; } </style> </head> <body> <button id="show-dialog" type="button" class="mdl-button">Login</button> <dialog class="mdl-dialog remove-padding"> <div class="mdl-card mdl-shadow--6dp"> <div class="mdl-card__title mdl-color--primary mdl-color-text--white"> <h2 class="mdl-card__title-text">Login</h2> </div> <div class="mdl-card__supporting-text"> <form action="#"> <div class="mdl-textfield mdl-js-textfield"> <input class="mdl-textfield__input" type="text" id="email" /> <label class="mdl-textfield__label" for="email">Email</label> </div> <div class="mdl-textfield mdl-js-textfield"> <input class="mdl-textfield__input" type="password" id="userpass" /> <label class="mdl-textfield__label" for="userpass">Password</label> </div> </form> </div> <div class="mdl-card__actions mdl-card--border"> <button class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">Sign In </button> </div> </div> </dialog> <script> var dialog = document.querySelector('dialog'); var showDialogButton = document.querySelector('#show-dialog'); if (! dialog.showModal) { dialogPolyfill.registerDialog(dialog); } showDialogButton.addEventListener('click', function() { dialog.showModal(); }); </script> </body> </html>
Copyrights@tutorialsplane.com