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

Desafio: Portafolio Listo

Resultado

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Portafolio</title>
</head>
<body>
    <header></header>
    <main>
        <div class="container">
            <div class="text-content">
                <h1>
                    Eleve tu negocio digital a otro nivel <strong>con un Front-end de calidad!</strong>
                </h1>
                <p>
                    ¡Hola! Soy Hernan, desarrollador 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="buttons">
                    <a href="https://www.instagram.com/" class="btn">Instagram</a>
                    <a href="https://github.com/HernanTrullo" class="btn">GitHub</a>
                </div>
            </div>
            <div class="image-content">
                <img src="imagen.jpg" alt="Imagen de Hernan">
            </div>
        </div>
    </main>
    <footer></footer>
</body>
</html>

CSS

body {
    font-family: Arial, sans-serif;
    background-color: #000;
    color: #fff;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.container {
    display: flex;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

.text-content {
    flex: 1;
    padding-right: 20px;
}

h1 {
    font-size: 2em;
    line-height: 1.2;
}

h1 strong {
    color: #00BFFF;
}

p {
    font-size: 1.2em;
    line-height: 1.5;
}

.buttons {
    margin-top: 20px;
}

.btn {
    display: inline-block;
    background-color: #00BFFF;
    color: #000;
    padding: 10px 20px;
    margin-right: 10px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
}

.image-content {
    flex: 1;
    position: relative;
}

.image-content img {
    max-width: 100%;
    border-radius: 10px;
}

.image-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 2px solid #00BFFF;
    border-radius: 10px;
    box-sizing: border-box;
    transform: translate(15px, 15px);
    z-index: -1;
}
1 respuesta

Hola, Hernan,

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!