HTML :
<!DOCTYPE html>
<html lang="es">
<html>
<head>
<link rel="stylesheet" href="style.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Portafolio Alexander</title>
</head>
<body>
<header>
</header>
<main>
<section>
<br>
<img src="Alexander.jpeg" alt="Foto de perfil de Alexander">
</section>
<section>
<h1>Portafolio de <strong>Alexander</strong></h1>
<p>Soy un Full Stack Developer con una marcada inclinación hacia el backend. Aunque tengo experiencia desarrollando aplicaciones completas, mi verdadera pasión reside en la lógica del servidor y en optimizar el manejo de datos. Mi formación en <strong> Digital House </strong>, complementada con mi especialización actual en <span>Alura ONE (Oracle Next Education)</span>, me ha permitido trabajar en proyectos que integran tanto el frontend como el backend. Me enfoco en diseñar soluciones eficientes y escalables, siempre con la visión de transformar desafíos en oportunidades tecnológicas.</p>
<br>
<button><a href="https:www.instagram.com">Instagram</a></button>
<br>
<button><a href="https://github.com/">GitHub</a></button>
</section>
</main>
<footer>
</footer>
</body>
</html>
CSS:
body{
background:linear-gradient(rgba(10, 5, 37, 0.534), rgb(109, 106, 255));
padding: 20px;
height: 1080px;
width: 1920px;
}
p{
color: rgb(217, 214, 238);
text-shadow:
2px 2px 0 black,
-2px -2px 0 black,
2px -2px 0 black,
-2px 2px 0 black;
border: 2px solid white;
font-size: larger;
background-color: rgb(0, 0, 0);
padding: 10px;
border-radius: 10px;
}
h1 {
font-weight: 100;
text-shadow:
2px 2px 0 black,
-2px -2px 0 black,
2px -2px 0 black,
-2px 2px 0 black;
font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif ;
color: white;
font-size: xx-large;
display: block;
margin: 0 auto;
text-align: center;
text-decoration:underline red;
}
strong{
color: rgb(160, 70, 70);
}
a{
text-shadow:
2px 2px 0 black,
-2px -2px 0 black,
2px -2px 0 black,
-2px 2px 0 black;
font-size: medium;
color: rgb(255, 255, 255);
font-weight: bold;
}
button{
background-color: rgb(108, 27, 184);
border: 1px solid white;
border-radius: 10px;
width: 440px;
height: 40px;
display: block;
margin: 0 auto;
text-align: center;
}
img{
display:block;
width: 400px;
height: 400px;
margin: 0 auto;
padding: 10px;
border-radius: 40px;
border: 3px solid rgb(0, 0, 0);
}
span{
color: rgba(204, 135, 8, 0.904);
}
Resultado:
