Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
0
respuestas

Haga lo que hicimos en el aula estilos de botones

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;
}