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

<!DOCTYPE html>
<html lang="es-mx">
<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>
        <title>TITULO: Mi Primer Pagina HTML</title>
    </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 Rafael Zavala,</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://www.github.com/">GitHub</a>
            </div>
        </section>
        <img src="imagen.png" alt="Imagen de Ana Garcia trabajando.">    
    </main>
    <footer>
        <p>© 2024 Primer Pagina HTML</p>
    </footer>
 
</body>
</html>
@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: black;
    color: white;
    font-family: 'Comic Sans MS', sans-serif;
    height: 100vh;
    box-sizing: border-box;
}    

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

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

.presentacion__contenido {
    width: 615px;
}

.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 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, Rafael,

Gracias por compartir tu experiencia con nosotros. Recuerda que estamos aquí para ayudarte. Si necesitas más 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!