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

Lo que aprendimos en esta aula

Referente al curso HTML y CSS: Clases, Posicionamiento y Flexbox, en el capítulo Manejando los botones y actividad Haga lo que hicimos

por Estudiante
| 27.7k xp | 78 posts
@import url('https://fonts.googleapis.com/css2?family=Krona+One&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
*{
    margin: 0;
    padding: 0;
}
body{
    background-color: #003092;
    color: #fff2db;
    height: 100vh;
    box-sizing: border-box;
}
.presentacion{
    display: flex;
    align-items: center;
    margin: 10%; 
    justify-content: space-between;
}


.texto-destacado{
    color: #22D4FD
}


.presentacion_content_title{
    font-family: "Krona One", sans-serif;
    font-size:36px;
}

.presentacion_content{
    width: 780px;
}

.presentacion_content_texto{
    font-family: "Krona One", sans-serif;
    font-size:24px;
}

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

.presentacion_enlaces_link{
    width: 280px;
    background-color: #22d4fd;
    text-align: center;
    padding: 21.5px ;
    border-radius: 5px;
    font-family: "Montserrat ",sans-serif;
    font-size: 24px;
    font-weight: 600;
    text-decoration: none;
    color: black;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Portafolio</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header></header>
    <main class="presentacion">
        <section class="presentacion_content">
            <h1 class="presentacion_content_title">Eleve tu negocio digital a otro nivel <strong class="title_f">con un Front-end de calidad!</strong></h1>
            <p class="presentacion_content_texto"><strong class="texto-destacado">¡Hola! Soy Ana García</strong>, desarrolladora Front-end con especialización en React, HTML y CSS. Ayudo a pequeños negocios y diseñadores a llevar a cabo buenas ideas. ¿Hablamos?</p>
            <div class="presentacion_enlaces">
                <a class="presentacion_enlaces_link" href="https://www.instagram.com/">Instagram</a>
                <a class="presentacion_enlaces_link" href="https://github.com/">GitHub</a>
            </div>
        </section>
        <img src="Imagem.png" alt="Imgagen de Ana Garcia TRabajando">
    </main>
    <footer></footer>
</body>
</html>
1 respuesta
por Brenda Souza
| 4939.8k xp | 17817 posts
Instructor Scuba

¡Hola Estudiante, espero que estés bien!

Parece que estás trabajando en un proyecto de portafolio y tienes algunas dudas sobre cómo ajustar los botones de tu página para que se vean mejor y sean más accesibles. Vamos a ver cómo puedes mejorar el diseño de tus botones siguiendo las actividades que mencionaste.

  1. Espaciado y tamaño de los botones: Actualmente, tus botones tienen un ancho fijo de 280px y un padding de 21.5px. Puedes ajustar estos valores para que el espaciado y el tamaño sean más consistentes. Por ejemplo, podrías aumentar el margen entre los botones para que tengan más espacio entre ellos:

    .presentacion_enlaces_link {
    margin: 0 10px; /* Ajusta el margen horizontal para el espaciado */
}

  2. Mejorando la visibilidad de los botones: Para mejorar la visibilidad, podrías aumentar el tamaño de la fuente y agregar un borde o una sombra. Aquí tienes un ejemplo de cómo podrías hacerlo:

    .presentacion_enlaces_link {
    font-size: 26px; /* Aumenta el tamaño de la fuente */
    border: 2px solid #fff; /* Agrega un borde blanco */
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5); /* Agrega una sombra */
}

  3. Creando una clase común para botones: Ya tienes una clase .presentacion_enlaces_link que aplica estilos a ambos botones. Asegúrate de que esta clase incluya todos los estilos necesarios para que los botones se vean como en el diseño de Figma.

  4. Ajustando el espaciado interno de los botones: Puedes ajustar el padding para asegurarte de que el texto dentro de los botones tenga suficiente espacio alrededor:

    .presentacion_enlaces_link {
    padding: 15px 30px; /* Ajusta el padding para un mejor espaciado interno */
}

  5. Importando y aplicando la fuente correcta: Ya importaste la fuente Montserrat con el peso 600, y parece que la estás aplicando correctamente a los botones. Solo asegúrate de que no haya subrayado en los enlaces:

    .presentacion_enlaces_link {
    text-decoration: none; /* Elimina el subrayado */
}

Espero que estas sugerencias te ayuden a mejorar el diseño de tus botones. ¡Bons estudios!