<!doctype html> <html itemscope="" itemtype="http://schema.org/WebPage" lang="ja"> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <meta http-equiv="content-style-type" content="text/css"> <meta http-equiv="content-script-type" content="text/javascript"> <title>Material Design</title> <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"> <style> .login { width: 100%; margin-top: 20px; } .mdl-textfield { width: 100%; } .p-10{ padding: 0 10px 10px 10px; } .b-r-2{ border-radius:2px; } </style> <script defer src="https://code.getmdl.io/1.1.1/material.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> </head> <body class="mdl-color--grey-50"> <div class="mdl-layout mdl-js-layout mdl-layout--fixed-header"> <main class="mdl-layout__content"> <div class="mdl-grid "> <div class="mdl-cell mdl-cell--2-col mdl-cell--hide-tablet mdl-cell--hide-phone"></div> <div class="mdl-cell mdl-cell--8-col mdl-color--white p-10 b-r-2"> <h4>サービス名にログイン</h4> <p class="mdl-color-text--red-A700">メールアドレスとパスワードが<br>一致していません。</p> <form action="" method="POST"> <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label"> <input class="mdl-textfield__input" type="text" id="email" name="email" value=""> <label class="mdl-textfield__label" for="email">メールアドレス</label> </div> <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label"> <input class="mdl-textfield__input" type="password" id="password" name="password"> <label class="mdl-textfield__label" for="password">パスワード</label> </div> <button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored mdl-js-ripple-effect login">ログイン</button> <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label"> <a href="#">またはアカウント新規登録</a> </div> </form> </div> <div class="mdl-cell mdl-cell--2-col mdl-cell--hide-tablet mdl-cell--hide-phone"></div> </div> </main> </div> </body> </html>
0 コメント:
コメントを投稿