Untitled
unknown
plain_text
7 months ago
3.6 kB
0
Indexable
Never
/* Estilos generales */ body { font-family: Arial, sans-serif; font-size: 16px; margin: 0; padding: 0; } h1, h2, h3 { margin: 0; } ul { margin: 0; padding: 0; list-style: none; } a { color: #333; text-decoration: none; } a:hover { text-decoration: underline; } /* Estilos de la cabecera */ header { background-color: #f2f2f2; padding: 20px; } header h1 { margin: 0; } nav ul { display: flex; } nav ul li { margin-right: 20px; } /* Estilos de la sección de introducción */ #intro { background-color: #e6e6e6; padding: 20px; } #ver-mas { margin-top: 20px; padding: 10px; background-color: #333; color: #fff; border: none; cursor: pointer; } #ver-mas:hover { background-color: #666; } /* Estilos de la sección de actividades */ #actividades { display: flex; flex-wrap: wrap; background-color: #fff; padding: 20px; } .actividad { flex-basis: calc(33.33% - 20px); margin-right: 20px; margin-bottom: 20px; padding: 20px; background-color: #f2f2f2; text-align: center; } .actividad img { max-width: 100%; margin-bottom: 10px; } .actividad h3 { margin-bottom: 0; } .actividad p { margin-top: 5px; margin-bottom: 0; } .actividad button { margin-top: 10px; padding: 10px; background-color: #333; color: #fff; border: none; cursor: pointer; } .actividad button:hover { background-color: #666; } /* Estilos del pie de página */ footer { background-color: #333; color: #fff; padding: 20px; text-align: center; } /* Estilos de los botones */ button { background-color: #008CBA; border: none; color: white; padding: 10px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer; } /* Estilos de las actividades */ .actividad { display: inline-block; margin: 20px; text-align: center; width: 200%; } .actividad img { width: 200px; height: 200px; } .actividad h3 { margin: 10px 0; } .actividad p { margin: 5px 0; } #actividades { display: flex; flex-wrap: wrap; justify-content: center; } .actividad { margin: 10px; width: 33%; } #ver-mas { background-color: #0e0b35; border: none; color: white; padding: 10px; text-align: center; text-decoration: none; display: block; font-size: 16px; margin: 20px auto; max-width: 300px; cursor: pointer; } /* Estilos del contenido extra */ #mas-info { margin: 20px 0; background-color: #f2f2f2; padding: 10px; border-radius: 5px; box-shadow: 2px 2px 5px #888; } #mas-info { position: relative; /* establece la posición relativa para que pueda ajustar el texto */ margin: 20px 0; background-color: #f2f2f2; padding: 10px; border-radius: 5px; box-shadow: 2px 2px 5px #888; } #mas-info h2 { position: absolute; /* establece la posición absoluta para que pueda ajustar el texto */ top: -20px; /* ajusta la posición superior del texto para que no descuadre todo */ left: 20px; /* ajusta la posición izquierda del texto para que se vea bien */ background-color: #f2f2f2; padding: 0 10px; } .contenedor { display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100vh; }