Saludos! A continuación, adjunto mi proyecto. Estoy atento a cualquier sugerencia!
Código html
<!DOCTYPE html>
<html lang="es-col">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Prueba</title>
<link rel="stylesheet" href="/css/styles.css">
</head>
<body>
<header></header>
<main class="contenido-perfil">
<section class="descripcion-texto">
<h1 class="titulo">
¡Bienvenidos(as) a mi perfil! <strong id="pregunta">¿Quien soy?</strong>
</h1>
<p class="descripcion">
¡Hola! Soy Alejandro Ospina, desarrollador backend, y coordinador de proyectos en Colombina SA.
Cuento con una especialización en java-spring y actualmente estoy estudiando con Alura Latam.
Tengo más de 3 años de experiencia en el sector educativo, 2 años desarrollando software empíricamente
y poco más de un año en el sector energético. Soy una persona muy enfocada en el aprendizaje continuo,
pues soy un fiel creyente de que cualquier conocimiento es valioso para cualquier ámbito profesional.
</p>
<div class="btns">
<button class="btn-style">
<a class="enlace" href="https://www.instagram.com/">Instagram</a>
</button>
<button class="btn-style">
<a class="enlace" href="https://www.github.com/">Github</a>
</button>
</div>
</section>
<img id="foto-perfil" src="/img/92472300_3046939528697099_114877365712060416_n.jpg" alt="imagen">
</main>
<footer></footer>
</body>
</html>
Hoja de estilos
body {
background-color: black;
color: white;
}
.contenido-perfil{
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
display: flex;
width: auto;
justify-content: space-evenly;
align-items: center;
height: 700px;
}
.titulo{
font-size: 36px;
}
.descripcion{
font-size: 24px;
}
.descripcion-texto{
width: 615px;
height: 482px;
}
.btns{
display: flex;
justify-content: space-between;
align-items: center;
}
.btn-style{
width: 280px;
height: 79px;
background-color: #22d4fd;
font-size: 24px;
border-radius: 16px;
}
.enlace{
text-decoration: none;
}
#pregunta{
color: #22d4fd;
}
#foto-perfil{
width: 550px;
height: 550px;
}
Vista parcial
