Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
1
respuesta

Haga lo que hicimos

@import url('https://fonts.googleapis.com/css2?family=Krona+One&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

*{
padding: 0%;
margin: 0%;
}

body {
background-color: #154D71;
color: white;
--text-align: center;
height: 100vh;
box-sizing: border-box;
}

h1 strong {
color: #FFF9AF;
}

a {
display: inline-block;
background-color: #33A1E0;
color: black;
padding: 10px 20px;
margin-top: 10px;
text-decoration: none;
border-radius: 5px;
font-weight: bold;
}

a:hover {
color: #1C6EA4;
}

main {
padding: 20px;
position: relative;
}

footer {
padding: auto;
font-size: 0.9em;
color: chartreuse;
}

img {
display: block;
margin: 20px auto;
max-width: 100%;
}

.presentacion{
display: flex;
align-items: center;
margin: 10%;
justify-content: space-between;
}

.presentacion_contenido{
width: 615px;
}

.presentacion_contenido_titulo{
font-size: 36px;
font-family: "Krona One", sans-serif;
}

.presentacion__contenido__texto{
font-size: 24px;
font-family: "Montserrat", sans-serif;
}

Ingrese aquí la descripción de esta imagen para ayudar con la accesibilidad

1 respuesta

Hola Alberto, espero que estés bien

Parece que estás trabajando en el diseño de una página web. Aquí hay algunos puntos que podrías considerar para mejorar o ajustar tu diseño:

  1. Alineación del texto: Veo que has definido --text-align: center; en el body, pero no lo estás utilizando en ningún lugar. Si deseas centrar el texto, asegúrate de aplicarlo correctamente, por ejemplo, text-align: center; en los elementos específicos.

  2. Padding en el footer: Estás usando padding: auto;, lo cual no es válido en CSS. Si deseas centrar el contenido verticalmente, considera usar padding: 10px; o algo similar.

  3. Uso de variables CSS: Si estás usando variables CSS como --text-align, asegúrate de aplicarlas correctamente en los elementos necesarios. Por ejemplo, podrías definirlas en :root y usarlas en los selectores correspondientes.

  4. Consistencia en las fuentes: Asegúrate de que las fuentes se carguen correctamente desde Google Fonts y se apliquen a los elementos deseados.

  5. Accesibilidad: No olvides añadir descripciones alternativas a las imágenes para mejorar la accesibilidad.

  6. Hover en enlaces: El color de los enlaces al pasar el cursor podría no tener suficiente contraste con el fondo. Asegúrate de que sea legible.

Espero que estos consejos te sean útiles para mejorar tu diseño. ¡Bons estudios!