feat: Login Style
This commit is contained in:
23
src/assets/Avatar.svg
Normal file
23
src/assets/Avatar.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 56 KiB |
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user