bklik/material-form.html Secret

## material-form.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Material Form HTML/CSS Only</title>
    <link rel="stylesheet" href="material.css" />
  </head>
  <body>
    <section class="card">
      <form class="material">
        <header>
          <h1>Create New Accout</h1>
          <h2>Fill out the following form to create your new accout.</h2>
        </header>
        <div class="card-content form-content">
          <div class="field">
            <input type="name" name="name" id="name" />
            <label for="name">Name</label>
          </div>
          <div class="field">
            <input type="email" name="email" id="email" />
            <label for="email">Email</label>
          </div>
          <div class="field">
            <input type="tel" name="phone" id="phone" />
            <label for="phone">Phone</label>
            <div class="hint">Example: (555) 321-4321</div>
          </div>
          <div class="field">
            <input type="password" name="password" id="password" />
            <label for="password">Password</label>
          </div>
          <div class="password-criteria">
            <p><strong>Password Criteria</strong></p>
            <ul>
              <li>Must be at least 12 characters long.</li>
              <li>Must contain at least one capital letter.</li>
              <li>Must contain at least one number.</li>
              <li>Must contain at least one symbol.</li>
            </ul>
          </div>
          <div class="field">
            <input type="password" name="confirm" id="confirm" />
            <label for="confirm">Confirm Password</label>
          </div>
        </div>
        <footer>
          <button class="material flat">Cancel</button>
          <button class="material primary" type="submit">Create Account</button>
        </footer>
      </form>
    </section>
  </body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Material Form HTML/CSS Only</title>
	<link rel="stylesheet" href="material.css" />
	</head>
	<body>
	<section class="card">
	<form class="material">
	<header>
	<h1>Create New Accout</h1>
	<h2>Fill out the following form to create your new accout.</h2>
	</header>
	<div class="card-content form-content">
	<div class="field">
	<input type="name" name="name" id="name" />
	<label for="name">Name</label>
	</div>
	<div class="field">
	<input type="email" name="email" id="email" />
	<label for="email">Email</label>
	</div>
	<div class="field">
	<input type="tel" name="phone" id="phone" />
	<label for="phone">Phone</label>
	<div class="hint">Example: (555) 321-4321</div>
	</div>
	<div class="field">
	<input type="password" name="password" id="password" />
	<label for="password">Password</label>
	</div>
	<div class="password-criteria">
	<p><strong>Password Criteria</strong></p>
	<ul>
	<li>Must be at least 12 characters long.</li>
	<li>Must contain at least one capital letter.</li>
	<li>Must contain at least one number.</li>
	<li>Must contain at least one symbol.</li>
	</ul>
	</div>
	<div class="field">
	<input type="password" name="confirm" id="confirm" />
	<label for="confirm">Confirm Password</label>
	</div>
	</div>
	<footer>
	<button class="material flat">Cancel</button>
	<button class="material primary" type="submit">Create Account</button>
	</footer>
	</form>
	</section>
	</body>
	</html>