From b648829d1ae45d3bbddc46ea92fed97b0d2199ae Mon Sep 17 00:00:00 2001
From: "maria.ruiz" <zs22016128@estudiantes.uv.mx>
Date: Thu, 13 Mar 2025 06:24:59 +0000
Subject: [PATCH] Actualizar Interfaz/estilos/Artistas.css
---
Interfaz/estilos/Artistas.css | 41 +++++++++++++++++++++++++++++------
1 file changed, 34 insertions(+), 7 deletions(-)
diff --git a/Interfaz/estilos/Artistas.css b/Interfaz/estilos/Artistas.css
index ac8821a..d08c586 100644
--- a/Interfaz/estilos/Artistas.css
+++ b/Interfaz/estilos/Artistas.css
@@ -1,3 +1,6 @@
+@import url('https://fonts.googleapis.com/css2?family=Lilita+One&display=swap');
+
+
body {
font-family: 'Trebuchet MS', sans-serif;
background-color: #d9d9d9;
@@ -13,7 +16,7 @@ body {
left: 0;
width: 100vw;
height: 100vh;
- z-index: -1; /* Para que quede de fondo */
+ z-index: -1;
}
.linea {
@@ -38,20 +41,30 @@ body {
left: 0;
width: 100vw;
height: 100vh;
- background: rgba(140, 144, 150, 0.76);
+ background: rgba(221, 221, 223, 0.40) !important;
backdrop-filter: blur(10px);
z-index: 0;
}
.titulo {
position: relative;
- z-index: 1;
+ z-index: 10;
color: rgb(64, 64, 64);
font-size: 20px;
text-align: center;
margin-top: 60px;
}
+.titulo h1{
+ font-family: "Lilita One", sans-serif;
+ text-align: center;
+ font-weight: 400;
+ font-style: normal;
+ font-size: 60px;
+ font-weight: bold;
+ color: #333;
+}
+
#pelicula {
display: flex;
justify-content: center;
@@ -102,8 +115,8 @@ body {
.back-button {
position: absolute;
- top: 60px;
- left: 40px;
+ top: 20px; /* Ajusta la posición superior */
+ left: 20px; /* Ajusta la posición a la izquierda */
font-size: 24px;
color: white;
text-decoration: none;
@@ -113,12 +126,26 @@ body {
width: 50px;
height: 50px;
border-radius: 50%;
- background: rgba(255, 255, 255, 0.1); /* Un leve fondo para mejor visibilidad */
+ background: rgba(0, 0, 0, 0.5); /* Fondo oscuro para mejor visibilidad */
transition: background 0.3s ease, transform 0.2s ease;
+ cursor: pointer; /* Asegura que se vea como botón */
}
.back-button:hover {
- background: rgba(255, 255, 255, 0.3); /* Efecto hover más visible */
+ background: rgba(255, 255, 255, 0.2); /* Mejora la visibilidad al pasar el mouse */
+ transform: scale(1.1); /* Efecto hover */
+}
+
+.arrow {
+ font-size: 30px; /* Tamaño más grande */
+ font-weight: bold; /* Hace que se vea más */
+ color: white; /* Asegura que sea visible */
+ pointer-events: none; /* Permite que el clic también funcione en el contenedor */
+}
+
+
+.back-button:hover {
+ background: rgba(232, 225, 225, 0.3); /* Efecto hover más visible */
transform: scale(1.1); /* Aumenta ligeramente el tamaño */
}