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

        .presentacion__enlaces{

display: flex;
justify-content: space-between;

}

.presentacion__enlaces__link{

width: 280px;
background-color: #22D4FD;
text-align: center;
padding: 21.5px 0;
border-radius: 16px;
font-family: "Montserrat", sans-serif;
font-size: 24px;
font-weight: 600;
text-decoration: none;
color: #000000;

}

1 respuesta

Hola Oliver, espero que estés bien

Parece que estás trabajando en un proyecto donde necesitas ajustar el espaciado y el tamaño de los botones usando Flexbox, además de mejorar su visibilidad. Aquí tienes algunas sugerencias que podrían ayudarte a cumplir con los objetivos de la actividad:

  1. Espaciado y tamaño de los botones: Veo que ya estás usando justify-content: space-between; para distribuir los botones uniformemente dentro del contenedor. Si necesitas ajustar el espaciado entre los botones, puedes considerar agregar márgenes a las clases de los enlaces. Por ejemplo:

    .presentacion__enlaces__link {
        margin: 0 10px; /* Ajusta el valor según sea necesario */
    }
    
  2. Visibilidad de los botones: Para mejorar la visibilidad, podrías aumentar el tamaño de la fuente y cambiar el color de fondo o del texto. También puedes agregar sombras o bordes. Aquí tienes un ejemplo:

    .presentacion__enlaces__link {
        font-size: 26px; /* Aumenta el tamaño de la fuente */
        background-color: #1A9CFC; /* Cambia el color de fondo */
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Agrega una sombra */
        border: 2px solid #ffffff; /* Agrega un borde blanco */
    }
    
  3. Clase común para los botones: Si deseas crear una clase común para los botones, asegúrate de que incluya todas las propiedades de estilo que quieres aplicar a ambos botones. Por ejemplo:

    .boton-comun {
        width: 280px;
        background-color: #22D4FD;
        text-align: center;
        padding: 21.5px 0;
        border-radius: 16px;
        font-family: "Montserrat", sans-serif;
        font-size: 24px;
        font-weight: 600;
        text-decoration: none;
        color: #000000;
    }
    

    Luego, aplica esta clase a ambos enlaces:

    <a class="boton-comun" href="https://instagram.com/">Instagram</a>
    <a class="boton-comun" href="https://github.com/">GitHub</a>
    
  4. Espaciado interno de los botones: Si necesitas ajustar el espaciado interno, puedes modificar el padding. Asegúrate de que el espaciado se vea bien visualmente y sea consistente con el diseño.

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