Solicitud | Layouts Responsivos: Trabajando con layouts mobile

¿Podrían revisar mi código, por favor? Este es el de destacados:

.destacados {
    background-color: var(--background-azul-claro);
    padding-top: 2.5rem;
    padding-bottom: 2rem;
}

.destacados_titulo{
    color: var(--background-ceniza-medio);
    font-weight: 700;
    font-size: 1.5rem;
    font-family: var(--montserrat);
    text-transform: uppercase;
    text-align: center;
    margin-bottom: 2rem;
}

.destacados_panel{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 2rem;
}

.destacados_panel-imagen{
    width: 100%;
    box-shadow: 0 2px 10px 5 px #00000020;
    margin-bottom: .5rem ;
}

Y el HTML:

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width initial-scale=1.0">
        <meta charset="utf-8">
        <title>Home | Apeperia</title>
        <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;700&family=Open+Sans:wght@300;400;700&display=swap" rel="stylesheet">
        <link href="css/reset.css" rel="stylesheet">
        <link href="css/head.css" rel="stylesheet">
        <link href="css/llamada.css" rel="stylesheet">
        <link href="css/bases.css" rel="stylesheet">
        <link href="css/destacados.css" rel="stylesheet">
       

    </head>
    <body>
        <header class="head container">
            <img class="head__logo" src="img/logo-apeperia.svg" alt="Logo de logo-apeperia">
            <nav class="head__navegacion">
                <ul>
                    <li class="head__enlace"><a href="#">Sobre</a></li>
                    <li class="head__enlace"><a href="#">Planes</a></li>
                    <li class="head__enlace"><a href="#">Blog</a></li>
                    <li class="head__enlace"><a href="#">Destacados</a></li>
                    <li class="head__enlace"><a href="#">Institucional</a></li>
                    <li class="head__enlace"><a href="#">Contacto</a></li>
                </ul>
            </nav>
        </header>
        <main>
            <section class="llamada container">
                <h1 class="llamada__titulo">Aplicaciones en la medida</h1>
                <p class="llamada__texto">Apeperia es una empresa emergente con una manera inovadora de comprar y crear aplicaciones móviles y web.</p>
                <a class="llamada__boton boton" href="#">Conozca los planes</a>
            </section>
            <section class="destacados container">
                <h2 class="destacados_titulo"></h2>
                <a href="#" class="destacados_panel">
                    <img src="img/empezando-a-crear-logo.png" alt="" class="destacados_panel-imagen">
                    <figC class="destacados_panel-texto"></figC>
                </a>
                <a href="#" class="destacados_panel">
                    <img src="img/sugestiones-fotografias.png" alt="" class="destacados_panel-imagen">
                    <figC class="destacados_panel-texto"></figC>
                </a><a href="" class="destacados_boton"></a></section>

        </main>


    </body>
</html>

¡Hola Silviajulianarociodiazdiaz!

Gracias por compartir tu código con nosotros. Parece que estás teniendo un problema con el estilo de tus destacados en tu página web. Después de revisar tu código, noté que el título de tus destacados no se muestra en la página.

El problema parece estar en la etiqueta h2 con la clase "destacados_titulo". En tu archivo CSS, has definido el color de fuente como "var(--background-ceniza-medio)", pero no has asignado ningún texto al título en tu archivo HTML.

Para solucionar esto, simplemente agrega un texto dentro de la etiqueta h2 en tu archivo HTML. Por ejemplo, puedes agregar algo como esto:

<h2 class="destacados_titulo">Título de los destacados</h2>

Recuerda reemplazar "Título de los destacados" con el texto que deseas mostrar en tu página.

Espero que esto resuelva tu problema. Si tienes alguna otra pregunta, no dudes en preguntar. ¡Buena suerte con tu proyecto!

Espero haber ayudado y buenos estudios!

Si este post te ayudó, por favor, marca como solucionado ✓. Continúa con tus estudios! :)