Login form din?mico HTML y CSS

<form action="#" method="post" class="login-form">

? ? <div class="form-title">Iniciar sesi?n</div>

? ? <input type="text" placeholder="Usuario" name="username" required />

? ? <input type="password" placeholder="Contrase?a" name="password" required />

? ? <input type="submit" value="Ingresar" />

? ? <div class="form-message">Si a?n no tienes una cuenta, <a href="#">Reg?strate aqu?</a>.</div>

?</form>

?

?<style>

?.login-form {

? max-width: 300px;

? margin: 0 auto;

? padding: 20px;

? border: 1px solid #ccc;

? border-radius: 5px;

? background-color: #f2f2f2;

}



.login-form input[type="text"], 

.login-form input[type="password"] {

? width: 100%;

? padding: 10px;

? margin: 5px 0;

? border: 1px solid #ccc;

? border-radius: 3px;

? box-sizing: border-box;

}



.login-form input[type="submit"] {

? width: 100%;

? background-color: #4CAF50;

? color: white;

? border: none;

? padding: 10px;

? border-radius: 3px;

? cursor: pointer;

}



.login-form input[type="submit"]:hover {

? background-color: #45a049;

}



.login-form .form-title {

? text-align: center;

? font-size: 24px;

? margin-bottom: 10px;

}



.login-form .form-message {

? text-align: center;

? margin-top: 10px;

? color: red;

}

</style>