1 files changed, 40 insertions, 0 deletions
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..47d74c2
--- /dev/null
+++ b/index.html
@@ -0,0 +1,40 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8"/>
+    <title>Login</title>
+    <link href="css/normalize.css" rel="stylesheet"/>
+    <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 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>
+    </main>
+    <script src="js/login.js"></script>
+  </body>
+</html>