Ya había hecho una entrega parcial de la hoja de presentación mostrada en los videos. Esta vez, comparto un poco la nueva vista de acuerdo a las instrucciones seguidas en clase:
Código css
@import url('https://fonts.googleapis.com/css2?family=Krona+One&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
body {
background-color: black;
color: white;
box-sizing: border-box;
}
.contenido{
display: flex;
width: auto;
justify-content: space-evenly;
align-items: center;
height: 100vh;
margin: 10% 3%;
}
.contenido__descripcion__titulo{
font-size: 36px;
font-family: "Krona One", sans-serif;
}
.contenido__descripcion{
font-size: 24px;
width: 615px;
height: 482px;
font-family: "Montserrat", sans-serif;
display: flex;
flex-direction: column;
gap: 40px;
}
.contenido__descripcion__btn{
display: flex;
justify-content: space-between;
align-items: center;
}
.contenido__descripcion__btn__style{
width: 280px;
background-color: #22d4fd;
font-size: 24px;
border-radius: 16px;
padding: 21.5px 0px;
font-family: "Montserrat", sans-serif;
font-size: 24px;
font-weight: 600;
}
.enlace{
text-decoration: none;
color: black;
}
#pregunta{
color: #22d4fd;
}
#foto-perfil{
width: 550px;
height: 550px;
}
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">
<section class="contenido__descripcion">
<h1 class="contenido__descripcion__titulo">
¡Bienvenidos(as) a mi perfil! <strong id="pregunta">¿Quien soy?</strong>
</h1>
<p class="contenido__descripcion__texto">
¡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="contenido__descripcion__btn">
<button class="contenido__descripcion__btn__style">
<a class="enlace" href="https://www.instagram.com/">Instagram</a>
</button>
<button class="contenido__descripcion__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>
Vista nueva de la presentación
