Bienvenido a la Universidad
/* Estilos del icono de WhatsApp */
.whatsapp-link {
position: fixed; /* Posición fija */
bottom: 20px; /* Distancia desde el borde inferior */
right: 20px; /* Distancia desde el borde derecho */
z-index: 1000; /* Capa sobre otros elementos */
}
.whatsapp-link img {
width: 60px; /* Tamaño del icono */
height: auto;
}
.whatsapp-link::before {
content: ''; /* Crea un pseudo-elemento */
position: absolute; /* Establece la posición absoluta */
top: 0; /* Alinea el fondo con la parte superior */
left: 0; /* Alinea el fondo con el lado izquierdo */
width: 100%; /* Ancho completo */
height: 100%; /* Altura completa */
background-color: #333; /* Color de fondo detrás del icono (gris oscuro) */
opacity: 0.5; /* Opacidad del fondo */
z-index: -1; /* Coloca el fondo detrás del icono */
}
/* Estilos del banner */
.banner {
background: linear-gradient(135deg, #3498db, #9b59b6); /* Fondo degradado */
color: #fff; /* Color del texto */
text-align: center; /* Centra el contenido */
padding: 50px 0; /* Espacio interno */
}
.logo img {
height: 200px; /* Tamaño del logo */
margin-bottom: 20px; /* Espacio inferior */
}
.banner h1 {
font-size: 2.5em; /* Tamaño del título */
}
.banner p {
font-size: 1.2em; /* Tamaño del texto */
}
/* Estilos del menú */
nav {
background-color: #2c3e50; /* Color de fondo del menú */
padding: 20px 0; /* Espaciado interno */
text-align: center; /* Centra el contenido */
position: relative; /* Establece la posición relativa */
display: flex; /* Utiliza flexbox para alinear los elementos */
justify-content: center; /* Centra los elementos horizontalmente */
}
nav::after {
content: ''; /* Crea un pseudo-elemento */
position: absolute; /* Establece la posición absoluta */
top: 0; /* Alinea el fondo con la parte superior del menú */
left: 0; /* Alinea el fondo con el lado izquierdo del menú */
width: 100%; /* Ancho completo */
height: 100%; /* Altura completa */
background-color: #34495e; /* Color de fondo detrás del menú */
opacity: 0.5; /* Opacidad del fondo */
z-index: -1; /* Coloca el fondo detrás del menú */
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
display: flex; /* Utiliza flexbox para alinear los elementos */
}
nav ul li {
margin: 0 10px; /* Margen entre elementos */
position: relative; /* Establece posición relativa para submenús */
}
nav ul li a {
color: #fff; /* Color del texto */
text-decoration: none;
padding: 10px 20px; /* Espaciado interno */
border-radius: 5px; /* Bordes redondeados */
transition: background-color 0.3s; /* Transición suave */
display: block;
}
nav ul li a:hover {
background-color: #34495e; /* Color de fondo al pasar el ratón */
}
/* Estilos del submenu */
.submenu-content {
display: none;
position: absolute;
top: 100%; /* Aparece debajo del elemento padre */
left: 0;
background-color: #2c3e50; /* Color de fondo del submenu */
padding: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
z-index: 1000; /* Se superpone a otros elementos */
}
.submenu-active .submenu-content {
display: block;
}
.submenu-content li {
margin: 5px 0; /* Espacio entre elementos */
}
.submenu-content li a {
color: #fff; /* Color del texto */
text-decoration: none;
display: block;
padding: 5px 10px; /* Espaciado interno */
transition: background-color 0.3s; /* Transición suave */
}
.submenu-content li a:hover {
background-color: #34495e; /* Color de fondo al pasar el ratón */
}
