Añadir SEO
This commit is contained in:
parent
8dd706b0d2
commit
429cc7cbf1
GPG key ID:
8CEC888F3808979D
12 changed files with 373 additions and 24 deletions
418
web/styles.css
Normal file
418
web/styles.css
Normal file
|
|
@ -0,0 +1,418 @@
|
|||
/* Estilos básicos de reset */
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* Estilos generales */
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
color: #333;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
/* Encabezado y navegación */
|
||||
header {
|
||||
background-color: #A10F2B;
|
||||
color: #fff;
|
||||
padding: 1rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
header nav ul {
|
||||
list-style: none;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
header nav ul li {
|
||||
margin: 0 1rem;
|
||||
}
|
||||
|
||||
header nav ul li a {
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
header nav ul li a:hover {
|
||||
color: #FFD700;
|
||||
}
|
||||
|
||||
/* Banner principal */
|
||||
.banner {
|
||||
color: #fff;
|
||||
padding: 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.evento {
|
||||
background-color: #fafafa;
|
||||
border-left: 4px solid #A10F2B;
|
||||
padding: 1rem;
|
||||
margin-top: 1.5rem;
|
||||
border-radius: 5px;
|
||||
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.evento h3 {
|
||||
color: #A10F2B;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.evento p {
|
||||
margin: 0.3rem 0;
|
||||
}
|
||||
|
||||
/* Estilo para la sección "ÚNETE" */
|
||||
#unete {
|
||||
padding: 2rem 3rem;
|
||||
background-color: #f9f9f9;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
#unete h2 {
|
||||
color: #A10F2B;
|
||||
font-size: 2rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
#unete p {
|
||||
font-size: 1rem;
|
||||
line-height: 1.6;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.form-container {
|
||||
background-color: #fff;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 8px;
|
||||
padding: 1.5rem;
|
||||
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.form-container h3 {
|
||||
color: #A10F2B;
|
||||
font-size: 1.6rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.form-wrapper {
|
||||
margin-top: 1.5rem;
|
||||
position: relative;
|
||||
height: 500px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
iframe {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
/* Estilo para la sección de contacto */
|
||||
#contacto {
|
||||
padding: 2rem 3rem;
|
||||
background-color: #fff;
|
||||
color: #333;
|
||||
margin-top: 3rem;
|
||||
}
|
||||
|
||||
#contacto h2 {
|
||||
color: #A10F2B;
|
||||
font-size: 1.8rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
#contacto p {
|
||||
font-size: 1rem;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/* Estilo para el botón de contacto */
|
||||
|
||||
.button {
|
||||
display: inline-block; /* Asegúrate de que el botón sea un bloque en línea */
|
||||
padding: 12px 25px;
|
||||
background-color: #0056b3;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
border-radius: 5px;
|
||||
font-weight: bold;
|
||||
margin-top: 20px;
|
||||
margin-left: auto; /* Esto coloca el botón a la izquierda */
|
||||
margin-right: auto; /* Y lo alinea a la derecha, efectivamente centrando */
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
.button:hover {
|
||||
background-color: #003d7a;
|
||||
}
|
||||
|
||||
.cta {
|
||||
background-color: #f7f7f7;
|
||||
padding: 30px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.cta-button {
|
||||
background-color: #e60000;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Contenedor de las propuestas */
|
||||
.proposal-container {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
gap: 20px;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.proposal {
|
||||
background-color: #f4f4f4;
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.proposal h2 {
|
||||
color: #333;
|
||||
font-size: 1.5rem;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.proposal i {
|
||||
font-size: 3rem;
|
||||
color: #0056b3;
|
||||
}
|
||||
|
||||
.proposal p {
|
||||
color: #555;
|
||||
font-size: 1rem;
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
/* Adaptación para pantallas pequeñas */
|
||||
@media (max-width: 768px) {
|
||||
.proposal-container {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.proposal-container {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* General layout of the Ideology section */
|
||||
#ideologia {
|
||||
background-color: #f4f1ec; /* Tono pergamino claro */
|
||||
padding: 3rem 2rem;
|
||||
color: #2e2e2e;
|
||||
border-top: 5px solid #8b0000;
|
||||
border-bottom: 5px solid #8b0000;
|
||||
}
|
||||
|
||||
/* Título principal */
|
||||
#ideologia h2 {
|
||||
text-align: center;
|
||||
font-size: 3rem;
|
||||
color: #4b0000;
|
||||
margin-bottom: 2rem;
|
||||
border-bottom: 2px solid #4b0000;
|
||||
display: inline-block;
|
||||
padding-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
/* Cada bloque ideológico */
|
||||
.ideology-item {
|
||||
background-color: #ffffff;
|
||||
border-left: 6px solid #8b0000;
|
||||
padding: 2rem;
|
||||
margin-bottom: 2.5rem;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
||||
border-radius: 12px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
/* Animación al pasar el ratón */
|
||||
.ideology-item:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
/* Título de cada ítem */
|
||||
.ideology-item h3 {
|
||||
font-size: 2rem;
|
||||
margin-bottom: 1rem;
|
||||
color: #4b0000;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Línea decorativa debajo de los títulos */
|
||||
.ideology-item h3::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 60px;
|
||||
height: 3px;
|
||||
background-color: #8b0000;
|
||||
left: 0;
|
||||
bottom: -6px;
|
||||
}
|
||||
|
||||
/* Cuerpo del texto */
|
||||
.ideology-item div {
|
||||
font-size: 1.15rem;
|
||||
line-height: 1.8;
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width: 768px) {
|
||||
#ideologia {
|
||||
padding: 2rem 1rem;
|
||||
}
|
||||
|
||||
.ideology-item {
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
#ideologia h2 {
|
||||
font-size: 2.2rem;
|
||||
}
|
||||
|
||||
.ideology-item h3 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.ideology-item div {
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.banner .button {
|
||||
display: inline-block;
|
||||
padding: 0.5rem 1.5rem;
|
||||
background-color: #FFD700;
|
||||
color: #333;
|
||||
margin-top: 1rem;
|
||||
text-decoration: none;
|
||||
border-radius: 5px;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
.banner .button:hover {
|
||||
background-color: #FF6347; /* Color ligeramente más oscuro al pasar el ratón */
|
||||
}
|
||||
|
||||
/* Secciones */
|
||||
.content {
|
||||
padding: 2rem;
|
||||
background-color: #fff;
|
||||
margin: 2rem auto;
|
||||
max-width: 800px;
|
||||
border-radius: 5px;
|
||||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Sombra más suave */
|
||||
}
|
||||
|
||||
h2 {
|
||||
color: #A10F2B;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.ideology-item {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.ideology-item h3 {
|
||||
color: #FFD700;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style-type: disc;
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
/* Formularios */
|
||||
form input, form textarea, form button {
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin-bottom: 1rem;
|
||||
padding: 0.5rem;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
form button {
|
||||
background-color: #A10F2B;
|
||||
color: #fff;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
form button:hover {
|
||||
background-color: #870d23;
|
||||
}
|
||||
|
||||
/* Pie de página */
|
||||
footer {
|
||||
background-color: #333;
|
||||
color: #fff;
|
||||
padding: 1rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
footer a {
|
||||
color: #FFD700;
|
||||
text-decoration: none;
|
||||
transition: color 0.3s ease;
|
||||
}
|
||||
|
||||
footer a:hover {
|
||||
color: #FF6347;
|
||||
}
|
||||
|
||||
|
||||
/* Ajustes para dispositivos móviles */
|
||||
@media (max-width: 768px) {
|
||||
.banner {
|
||||
padding: 1rem; /* Reduce el padding en pantallas pequeñas */
|
||||
}
|
||||
|
||||
.banner .button {
|
||||
padding: 0.5rem 1rem; /* Botón más pequeño en pantallas móviles */
|
||||
}
|
||||
|
||||
.banner h2 {
|
||||
font-size: 1.5rem; /* Reduce el tamaño del texto en móviles */
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.banner {
|
||||
padding: 1rem; /* Reduce aún más el padding en pantallas muy pequeñas */
|
||||
}
|
||||
|
||||
.banner h2 {
|
||||
font-size: 1.2rem; /* Texto aún más pequeño en pantallas pequeñas */
|
||||
}
|
||||
|
||||
.banner .button {
|
||||
font-size: 0.9rem; /* Botón más pequeño en pantallas muy pequeñas */
|
||||
padding: 0.4rem 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Loading…
Add table
Add a link
Reference in a new issue