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 html y clases

@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{
height: 100vh;
box-sizing: border-box;
background-color: #000000;
color: #F6F6F6;
}

.titulo-destaque {
color: #22D4FD; ;
}

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

.presentacion-contenido {
width: 615px;
}

.presentacion-contenido-titulo {
font-family: "Krona One", sans-serif;
font-weight: 700;
font-size: 36px;
line-height: 56px;
margin-bottom: 24px;
color: #F6F6F6;
}

.presentacion-contenido-texto {
font-family: "Montserrat", sans-serif;
font-weight: 400;
font-size: 24px;
line-height: 36px;
color: #F6F6F6;
}

.presentacion-enlaces {
display: flex;
justify-content: space-between;
}

.presentacion-enlaces-link {
margin-top: 40px;
width: 200px;
display: block;
background-color: #EF7722;
text-align: center;
padding: 21.5px 0px;
border-radius: 16px;
color: #fff;
font-family: "Montserrat", sans-serif;
font-size: 24px;
font-weight: 600;
text-decoration: none;
text-shadow: #000000 1px 1px 2px;
}

.presentacion-enlaces-link:hover {
background-color: #22D4FD;
transition: background-color 0.3s;
}

1 respuesta

Hola Andrés, espero que estés bien

¡Gracias por compartir tu código! Parece que estás trabajando en el estilo de una página web utilizando CSS. Veo que has importado fuentes de Google y has aplicado estilos a diferentes clases. Aquí hay algunas cosas que podrías considerar o verificar para asegurarte de que tu código funcione como esperas:

  1. Verificar la Importación de Fuentes: Asegúrate de que la URL de Google Fonts esté correctamente copiada y que las fuentes se carguen sin problemas en tu proyecto. Puedes probar abriendo la URL directamente en tu navegador para ver si se carga.

  2. Estructura HTML: Asegúrate de que tu HTML tenga las clases correctas aplicadas a los elementos. Por ejemplo:

    <div class="presentacion">
        <div class="presentacion-contenido">
            <h1 class="presentacion-contenido-titulo">Título de Ejemplo</h1>
            <p class="presentacion-contenido-texto">Este es un texto de ejemplo para la presentación.</p>
        </div>
        <div class="presentacion-enlaces">
            <a href="#" class="presentacion-enlaces-link">Enlace 1</a>
            <a href="#" class="presentacion-enlaces-link">Enlace 2</a>
        </div>
    </div>
    
  3. Prueba de Estilos: Asegúrate de que el archivo CSS esté correctamente vinculado en tu archivo HTML. Puedes hacerlo con una etiqueta <link> en la sección <head> de tu documento HTML:

    <link rel="stylesheet" href="styles.css">
    
  4. Inspeccionar Elementos: Usa las herramientas de desarrollo de tu navegador (como el Inspector de Elementos en Chrome) para verificar si los estilos se están aplicando correctamente a los elementos.

  5. Transiciones y Hover: Veo que has añadido una transición al efecto hover en los enlaces. Asegúrate de que el cambio de color sea visible y que el efecto de transición sea el deseado.

Espero que estos consejos te sean útiles. ¡Sigue adelante con tu proyecto!

Espero haber ayudado y buenos estudios!