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
2
respuestas

Haga lo que hicimos en aula

Referente al curso HTML y CSS: header, footer y variables CSS, en el capítulo Creando iconos clicables y actividad Haga lo que hicimos en aula

por Yerme Anntuaneth Li Etchebarne
| 32.9k xp | 75 posts

Ingrese aquí la descripción de esta imagen para ayudar con la accesibilidad

HTML

<!DOCTYPE html>
<html lang="es-pr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>desafio_portafolio</title>
    <link rel="stylesheet" href="style.css">

</head>
<body>
    <header></header>
    <main class="presentacion">
      <section class="presentacion__contenido">
        <h1 class="titulo-blog">
        <strong>MI PORTAFOLIO</strong>
    </h1>
    <p class="texto-destaque">
        <strong>¡Hola! Soy Yerme Li,</strong> administradora en Negocios Internacionales con 
        experiencia en Atención al cliente, Logística, Ventas y Finanzas. Me interesa
        aprender a programar y utilizar herramientas tecnológicas que ayuden a los negocios
        y diseñadores a llevar a cabo buenas ideas.
    </p>

            <div class="presentacion__enlaces">
                <h2 class="presentacion__enlaces__subtitulo">Accede a mis redes:</h2>
                <a class="presentacion__enlaces__link" href="https://www.linkedin.com/in/yerme-li-etchebarne/">
                    <img src="./assets/linkedin.png">
                    Linkedin</a>
                <a class="presentacion__enlaces__link" href="https://github.com/yermeli">
                    <img src="./assets/github.png">
                    Github</a>
                <a class="presentacion__enlaces__link" href="https://www.twitch.tv/yerme532">
                    <img src="./assets/twitch.png">
                    Twitch</a>
            </div>
        </section>  
        <img src="foto yerme.png" alt="Foto Yerme Perfil">
    </main>
    <footer></footer>
</body>
</html>
2 respuestas
por Yerme Anntuaneth Li Etchebarne
| 32.9k xp | 75 posts

CSS

@import url('https://fonts.googleapis.com/css2?family=Krona+One&family=Montserrat&display=swap');


body {
    background-color: #000000;
    color: #F6F6F6;
    height: 100vh;
    box-sizing: border-box;
}

strong {
    color: #ff00ea;
}

.texto-destaque{
    color: #c3f803;
    font-size: 24px;
    font-family: 'Montserrat', sans-serif;
}

.titulo-blog{
    color: #ff00ea;
    font-size: 36px;
    font-family: 'Krona One', sans-serif;
}


*{
    margin: 0;
    padding: 0;
}

p{
    margin: 10px;
    border: 2px solid black;
    padding: 5xp;
}


.presentacion{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 10% 25%;
}

.presentacion__contenido{
    width: 615px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

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

.presentacion__enlaces__subtitulo{
    font-family: 'Krona One', sans-serif;
    font-size: 24px;
    font-weight: 400;
}
    
.presentacion__enlaces__link{
    width: 378px;
    text-align: center;
    border-radius: 8px;
    font-size: 24px;
    font-weight: 600;
    padding: 21.5px 0;
    text-decoration: none;
    color: #F6F6F6;
    font-family: "Montserrat", sans-serif;
    border: 2px solid #ff00ea;
    display: flex;
    justify-content: center;
    gap: 10px;
}

.presentacion__enlaces__link:hover{

    background-color: #f066e4;
}
por Brenda Souza
| 4883.2k xp | 17616 posts
Instructor Scuba

¡Hola Yerme, espero que estés bien!

Parece que estás trabajando en un proyecto para organizar y estilizar los enlaces a tus redes sociales usando HTML y CSS. Aquí tienes algunos pasos para asegurarte de que todo esté en orden, basados en las instrucciones que mencionaste:

  1. HTML: Ya tienes los enlaces a LinkedIn, GitHub y Twitch en tu código. Asegúrate de que las rutas de las imágenes (src) sean correctas para que los íconos se muestren.

  2. CSS para centrar íconos y textos: Asegúrate de que tu archivo style.css tenga algo similar a lo siguiente para centrar los íconos y textos en los enlaces:

    .presentacion__enlaces__link {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px; /* Ajusta este valor según lo que veas en Figma */
    text-decoration: none;
    color: inherit;
}

  3. Efecto Hover: Para el efecto hover, agrega este código a tu CSS:

    .presentacion__enlaces__link:hover {
    border: 1px solid #0000FF; /* Borde azul */
    background-color: #272727; /* Fondo negro más claro */
    cursor: pointer;
}

  4. Verifica el espaciado y alineación: Asegúrate de que el espaciado entre los íconos y textos sea consistente y de que todo esté centrado correctamente.

  5. Verifica la accesibilidad: Asegúrate de que cada imagen tenga un atributo alt descriptivo para mejorar la accesibilidad.

Con estos ajustes, deberías poder lograr el efecto deseado en tus botones de redes sociales. Espero que esto te ayude a avanzar con tu proyecto. ¡Buena suerte con tu portafolio!

Espero haber ayudado y buenos estudios!