Skip to content
Snippets Groups Projects
Commit 645f017a authored by Julio Galán's avatar Julio Galán
Browse files

better home.css style

parent 575bad05
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 69 additions and 31 deletions
public/home.css
+ 69
− 31
View file @ 645f017a
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap');
/* Estilos generales */
body { body {
font-family: Arial, sans-serif; font-family: 'Poppins', sans-serif;
background-color: #f4f4f4; background-color: #f4f4f9;
margin: 0; margin: 0;
padding: 0; padding: 0;
display: flex; display: flex;
flex-direction: column;
align-items: center;
justify-content: center; justify-content: center;
align-items: center;
height: 100vh; height: 100vh;
} }
h1 { /* Contenedor principal */
color: #333;
}
.container { .container {
background: white; background: white;
padding: 20px; padding: 30px;
border-radius: 10px; border-radius: 12px;
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
width: 350px; width: 100%;
max-width: 450px;
text-align: center; text-align: center;
} }
/* Título */
h1 {
color: #333;
font-size: 26px;
font-weight: 600;
margin-bottom: 20px;
}
/* Lista de tareas */
ul { ul {
list-style: none; list-style: none;
padding: 0; padding: 0;
margin: 0;
} }
li { li {
background: #e3f2fd; background: #eaf2ff;
margin: 10px 0; margin: 10px 0;
padding: 10px; padding: 12px;
border-radius: 5px; border-radius: 8px;
font-size: 16px; font-size: 16px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
transition: transform 0.2s ease-in-out;
} }
li:hover {
transform: scale(1.02);
}
/* Tareas completadas */
.completed { .completed {
text-decoration: line-through; text-decoration: line-through;
color: #777; color: #777;
background: #d3f9d8;
} }
/* Fecha de tarea */
.task-date { .task-date {
font-size: 12px; font-size: 12px;
color: #777; color: #555;
} }
/* Formularios */
form { form {
display: inline; display: flex;
gap: 10px;
margin-top: 15px;
}
/* Input de nueva tarea */
input[name="task"] {
font-size: 16px;
padding: 12px;
flex: 1;
border: 1px solid #ccc;
border-radius: 6px;
box-sizing: border-box;
} }
/* Botón de agregar tarea */
button { button {
font-size: 16px;
padding: 12px 16px;
background: #007bff; background: #007bff;
color: white; color: white;
border: none; border: none;
padding: 5px 10px;
cursor: pointer; cursor: pointer;
border-radius: 5px; border-radius: 6px;
transition: background 0.3s ease-in-out;
} }
button:hover { button:hover {
background: #0056b3; background: #0056b3;
} }
.delete-btn { /* Botones de completar y eliminar */
background: #dc3545;
}
.delete-btn:hover {
background: #c82333;
}
.complete-btn { .complete-btn {
background: #28a745; background: #28a745;
} }
...@@ -82,16 +109,27 @@ button:hover { ...@@ -82,16 +109,27 @@ button:hover {
background: #218838; background: #218838;
} }
.delete-btn {
background: #dc3545;
}
.delete-btn:hover {
background: #c82333;
}
/* Botón de cerrar sesión */
.logout { .logout {
display: block; display: block;
margin-top: 15px; margin-top: 20px;
color: white; color: white;
text-decoration: none; text-decoration: none;
background: #dc3545; background: #dc3545;
padding: 8px 12px; padding: 12px;
border-radius: 5px; font-size: 16px;
border-radius: 6px;
transition: background 0.3s ease-in-out;
} }
.logout:hover { .logout:hover {
background: #c82333; background: #c82333;
} }
\ No newline at end of file
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment