diff options
Diffstat (limited to 'index.html')
| -rw-r--r-- | index.html | 48 |
1 files changed, 25 insertions, 23 deletions
@@ -7,33 +7,35 @@ <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet"> - <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200" /> + <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200" /> <link href="css/styles.css" rel="stylesheet"/> </head> <body> <main> - <h1 class="title">Log in</h1> - <form class="form" name="login" method="post"> - <label class="form__label" for="username">Usuario</label> - <div class="input-container"> - <input id="username" class="form__input" name="username" type="text" required/> - <span id="icon-check__username" class="material-symbols-outlined form__input-icon icon-check">check_circle</span> - <span id="icon-cancel__username" class="material-symbols-outlined form__input-icon icon-cancel">cancel</span> - </div> - <p id="input-error__username" class="form__input-error">El usuario tiene que ser de 4 a 16 digitos y solo puede contener numeros, letras y guion bajo.</p> - <label class="form__label" for="password">Contraseña</label> - <div class="input-container"> - <input id="password" class="form__input" name="password" type="password" required/> - <span id="icon-check__password" class="material-symbols-outlined form__input-icon icon-check">check_circle</span> - <span id="icon-cancel__password" class="material-symbols-outlined form__input-icon icon-cancel">cancel</span> - </div> - <p id="input-error__password" class="form__input-error">La contraseña tiene que ser de 4 a 12 dígitos</p> - <p class="form__error-text"><span class="material-symbols-outlined icon-warning">warning</span> <b>Error:</b> Por favor rellena el formulario correctamente</p> - <div class="form__submit"> - <input class="form__submit__button" type="submit" value="Enviar"/> - </div> - <p class="form__success-send-text">Formulario enviado exitosamente!</p> - </form> + <section> + <h1 class="title">Log in</h1> + <form class="form" name="login" method="post"> + <label class="form__label" for="username">Usuario</label> + <div class="input-container"> + <input id="username" class="form__input" name="username" type="text" required/> + <span id="icon-check__username" class="material-symbols-outlined form__input-icon icon-check">check_circle</span> + <span id="icon-cancel__username" class="material-symbols-outlined form__input-icon icon-cancel">cancel</span> + </div> + <p id="input-error__username" class="form__input-error">El usuario tiene que ser de 4 a 16 digitos y solo puede contener numeros, letras y guion bajo.</p> + <label class="form__label" for="password">Contraseña</label> + <div class="input-container"> + <input id="password" class="form__input" name="password" type="password" required/> + <span id="icon-check__password" class="material-symbols-outlined form__input-icon icon-check">check_circle</span> + <span id="icon-cancel__password" class="material-symbols-outlined form__input-icon icon-cancel">cancel</span> + </div> + <p id="input-error__password" class="form__input-error">La contraseña tiene que ser de 4 a 12 dígitos</p> + <p class="form__error-text"><span class="material-symbols-outlined icon-warning">warning</span> <b>Error:</b> Por favor rellena el formulario correctamente</p> + <div class="form__submit"> + <input class="form__submit__button" type="submit" value="Enviar"/> + </div> + <p class="form__success-send-text">Formulario enviado exitosamente!</p> + </form> + </section> </main> <script src="js/login.js"></script> </body> |