feat: Login Style

This commit is contained in:
2026-01-22 16:02:11 -05:00
parent 0b50aa6a5b
commit 8d12d80fdc
3 changed files with 53 additions and 15 deletions

23
src/assets/Avatar.svg Normal file

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 56 KiB

View File

@@ -19,6 +19,11 @@
/* background: linear-gradient(135deg, #2c3e50 0%, #3498db 100%); */
}
.loginForm {
display: flex;
flex-direction: column;
gap: 30px;
}
.formWrapper {
width: 100%;
max-width: 400px;
@@ -29,6 +34,17 @@
backdrop-filter: blur(10px);
}
.formWrapperTitle {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
}
.loginAvatar {
width: 150px;
}
.container h1 {
color: ;
text-align: center;
@@ -71,11 +87,3 @@
font-weight: 600;
color: #555;
}
.container img {
width: 100%;
height: 150px;
object-fit: cover;
border-radius: 8px;
margin-bottom: 20px;
}

View File

@@ -1,5 +1,6 @@
import React, { useState } from "react";
import styles from './Login.module.css'
import Avatar from "../../assets/Avatar.svg"
const Login = () => {
@@ -24,15 +25,21 @@ const Login = () => {
return (
<div className={styles.container}>
<div className={styles.formWrapper}>
<form onSubmit={handleSubmit}>
<h1>Inicia Sesión.</h1>
<img src="https://picsum.photos/300/200?random=1" alt="Imagen"/>
<form className={styles.loginForm} onSubmit={handleSubmit}>
<div className={styles.formWrapperTitle}>
<h1>Inicia Sesión.</h1>
<img className={styles.loginAvatar} src={Avatar} alt="Imagen"/>
</div>
<label>Usuario:</label>
<input type="text" value={user} onChange={handleUserChange}/>
<div>
<label>Usuario:</label>
<input type="text" value={user} onChange={handleUserChange}/>
</div>
<label>Contraseña</label>
<input type="password" value={password} onChange={handlePasswordChange}/>
<div>
<label>Contraseña</label>
<input type="password" value={password} onChange={handlePasswordChange}/>
</div>
<input type="submit" value="Iniciar sesión"/>
</form>