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>
<div class="marco">
<div class="contenedor">
<div class="lado-izquierdo">
<h1>Transformando ideas en
<span class="indentado">líneas de código</span>
</h1>
<h2>Porque cada proyecto comienza con una visión y se construye con lógica.</h2>
<p>
Estudiante de Alura LATAM, actualmente estoy profundizando en tecnologías como HTML, CSS y JavaScript.
Tengo un fuerte interés en el desarrollo de soluciones prácticas y eficientes, y disfruto del proceso de aprender algo nuevo cada día.
Me encanta investigar, experimentar y encontrar respuestas a los desafíos que surgen durante el desarrollo.
Estoy emocionado por seguir creciendo en este camino y estoy disponible para colaborar en proyectos donde pueda aportar y seguir aprendiendo.
Además, cuento con conocimientos en inglés, lo que me permite acceder a documentación y recursos internacionales con facilidad.
<br>
Tu mensaje es bienvenido.
</p>
<div class="botones">
<a href="https://www.linkedin.com/in/bryan-nrg-pl-7b44052ab/" target="_blank" >LinkedIn</a>
<a href="https://github.com/BryanNrgPl" target="_blank" >GitHub</a>
</div>
</div>
<div class="lado-derecho">
<img src="bg.jpeg" alt="imagen de un grupo de personas trabajando juntas.">
</div>
</div>
</div>
</body>
</html>
CSS:
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;500;700&display=swap');
body {
margin: 0;
padding: 0;
font-family: 'Poppins', sans-serif;
background-color: #e6ecf2;
color: #333;
}
.marco {
border: 1px solid #ddd;
margin: 50px auto;
max-width: 1100px;
padding: 40px;
background-color: #ffffff;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
border-radius: 12px;
}
.contenedor {
display: flex;
flex-direction: row;
gap: 40px;
align-items: center;
}
.lado-izquierdo {
flex: 1;
}
.lado-derecho {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
}
.lado-derecho img {
max-width: 100%;
height: auto;
border-radius: 12px;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}
h1 {
font-size: 38px;
font-weight: 400;
letter-spacing: 0.03em;
color: #2c3e50;
line-height: 1.2;
margin-bottom: 24px;
}
.indentado {
display: block;
margin-left: 80px;
margin-top: -8px;
}
p {
font-size: 16px;
line-height: 1.8;
margin-bottom: 30px;
}
h2 {
margin-top: 20px;
font-weight: 500;
color: #2563eb;
}
.botones a {
display: inline-block;
margin-right: 10px;
padding: 10px 16px;
background-color: #0077b5;
color: white;
text-decoration: none;
border-radius: 5px;
font-size: 14px;
transition: background-color 0.3s;
}
.botones a:hover {
background-color: #005f91;
}
