Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
1
respuesta

10 Haga lo que hicimos en el aula

html

<!DOCTYPE html>
<html lang="es-mx">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <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__contenido">
            <h1 class="presentacion__contenido__titulo">
                Eleve tu negocio digital a otro nivel <strong class="titulo-destaque">con un Front-end de calidad!</strong>
            </h1>
            <p class="presentacion__contenido__texto">
                ¡Hola! Soy Ana García, 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">
                <h2 class="presentacion__enlaces__subtitulos">Accede a mis redes:</h2>
                <a class="presentacion__enlaces__link" href="https://www.instagram.com/">
                <img src="./assets/instagram.png">    Instagram
                </a>
                <a class="presentacion__enlaces__link" href="https://www.github.com/">
                <img src="./assets/github.png">    Github
                </a>
                <a class="presentacion__enlaces__link" href="https://www.linkedin.com/">
                <img src="./assets/linkedin.png">    LinkedIn
                </a>
                <a class="presentacion__enlaces__link" href="https://www.twitch.tv/">
                <img src="./assets/twitch.png">    Twitch
                </a>
            </div>
        </section>
            <img src="Rectangle 47.png" alt="Imagen de Ana Garcia trabajando.">

    </main>
    <footer></footer>
</body>
</html>

CSS

@import url('https://fonts.googleapis.com/css2?family=Krona+One&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

* {
    padding: 0;
    margin: 0;
}
body {
    background-color: #000000;
    color: #f6f6f6;
    height: 100vh; 
    box-sizing: border-box;
}

.titulo-destaque{
    color: #22d4fd;
}

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

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

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

.presentacion__contenido__texto{
    font-size: 24px;
    font-family: "Montserrat", sans-serif;
}

.presentacion__enlaces{
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    align-items: center;
    gap: 32px; 
    /*padding: 10px 20px;
    font-size: 16px;
    margin: 5px; */
}

.presentacion__enlaces__subtitulos{
    font-family: "krona one", sans-serif;
    font-size: 24px;
    font-weight: 400;
}

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

.presentacion__enlaces__link:hover{
    cursor: pointer;
    background-color: #272727;
}
1 respuesta

Hola, Jhon ,

Gracias por compartir tu código con nosotros. Recuerda que estamos aquí para ayudarte. Si necesitas ayuda, no dudes en buscarnos en el foro.

¡Gracias nuevamente!

Saludos,

Si este post te ayudó, por favor, marca como solucionado ✓. Continúa con tus estudios!