Entrar ¿Aún no tienes acceso?
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 en el aula estilos de botones

Referente al curso HTML y CSS: header, footer y variables CSS, en el capítulo Preparando el layout del proyecto y actividad Haga lo que hicimos en aula

por Daniela Andrea Deborah Puebla Mosca
| 37.3k xp | 17 posts
Office Manager

1 - Agregando un subtítulo a la página

<div class="presentacion__enalces">
                    <h2 class="presentacion__enalces__subtitulo">Accede a mis redes</h2>
                        <a class="presentacion__enalces__link" href="https://www.instagram.com/dandrea3232/">
                        <img src="./assets/instagram.png">Instagram</a>
                        <a class="presentacion__enalces__link" href="https://github.com/Danny3431">
                        <img src="./assets/github.png">GitHub</a>
                        <a class="presentacion__enalces__link" 
 </div>

2 - Cambiando la disposición de los elementos con Flexbox

    display: flex;
    justify-content: space-between;
    flex-direction: column;
    align-items: center;
    gap: 32px;
}

3 - Ajustando la alineación y el espaciado de los elementos

.presentacion__enlaces {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    gap: 32px;
}

4 - Creando una clase para el subtítulo

<h2 class="presentacion__enalces__subtitulo">Accede a mis redes</h2>

5 - Estilizando el subtítulo

.presentacion__enalces__subtitulo{
    font-family: var(--fuente-krona);
    font-size: 1.5rem;
    font-weight: 400px;
}

6 - Modificando el estilo de los botones

.presentacion__enalces__link{
    /* background-color: #22D4FD; */ /* Código comentado */
    width: 50%;
    text-align: center;
    border-radius: 8px;
    font-size: 1.5rem;
    font-weight: 600;
    padding: 21.5px 0;
    text-decoration: none;
    color: var(--color-terciario);
    font-family: var(--fuente-montserrat);
    border: 2px solid #22D4FD;
    display: flex;
    justify-content: center;
    gap: 10px;
}
1 respuesta
por Brenda Souza
| 5953.8k xp | 21701 posts
Instructor

Hola Daniela, espero que estés bien

Parece que estás trabajando en una actividad para estilizar una página web que comparte tus redes sociales. Aquí tienes algunos consejos y ejemplos para abordar cada uno de los puntos que mencionaste:

  1. Agregando un subtítulo a la página:
    Asegúrate de que el subtítulo esté correctamente colocado dentro de la <div> que contiene los enlaces. Tu código HTML parece estar bien en este aspecto.

  2. Cambiando la disposición de los elementos con Flexbox:
    Ya has utilizado flex-direction: column; en tu clase .presentacion__enalces, lo cual es correcto para alinear los elementos verticalmente. Asegúrate de que no haya errores tipográficos en el nombre de la clase, ya que en tu código hay una pequeña diferencia entre "enalces" y "enlaces".

  3. Ajustando la alineación y el espaciado de los elementos:
    Has incluido align-items: center; y gap: 32px;, lo cual debería centrar los elementos y añadir espacio entre ellos. Verifica que estás aplicando estos estilos a la clase correcta.

  4. Creando una clase para el subtítulo:
    Parece que ya has añadido la clase presentacion__enalces__subtitulo al subtítulo <h2>. Asegúrate de que esta clase esté correctamente escrita y aplicada.

  5. Estilizando el subtítulo:
    Tu CSS para .presentacion__enalces__subtitulo debería tener el siguiente aspecto, basado en las instrucciones:

    .presentacion__enalces__subtitulo {
    font-family: 'Krona One', sans-serif;
    font-size: 24px;
    font-weight: 400;
}

    Asegúrate de que la fuente 'Krona One' esté correctamente importada en tu proyecto.

  6. Modificando el estilo de los botones:
    Aquí tienes un ejemplo de cómo debería verse tu CSS para los enlaces:

    .presentacion__enalces__link {
    width: 378px;
    text-align: center;
    border-radius: 8px;
    font-size: 1.5rem;
    font-weight: 600;
    padding: 21.5px 0;
    text-decoration: none;
    color: #F6F6F6; /* Texto blanco */
    font-family: var(--fuente-montserrat);
    border: 2px solid #22D4FD; /* Borde cian */
    display: flex;
    justify-content: center;
    gap: 10px;
}

    Asegúrate de que el color del texto y el borde sean los correctos.

Espero que estas sugerencias te sean útiles. ¡Bons estudios!