CSS:
*{
margin: 0;
padding: 0;
}
body{
background:linear-gradient(rgba(10, 5, 37, 0.534), rgb(109, 106, 255));
height: 100%;
width:100%;
}
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: 3%;
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: 20vw;
height:4vh;
display: block;
margin: 0 auto;
text-align: center;
}
img{
display:block;
width: 25%;
height: 35%;
margin: 0 auto;
padding: 1%;
border-radius: 40px;
border: 3px solid rgb(0, 0, 0);
}
span{
color: rgba(204, 135, 8, 0.904);
}
.texto-destacado{
color: rgb(245, 180, 100);
border: 2px solid rgb(255, 255, 255);
text-shadow:
2px 2px 0 rgba(151, 28, 28, 0.445),
-2px -2px 0 rgba(175, 21, 21, 0.418),
2px -2px 0 rgba(156, 17, 17, 0.445),
-2px 2px 0 rgba(168, 15, 15, 0.384);
margin: 0 auto;
margin-top: 2%;
margin-bottom: 2%;
text-align: center;
width: 30vw;
height: 10%;
display: block;
}
.titulo-blog{
color: aliceblue;
text-shadow:
2px 2px 0 rgba(0, 0, 0, 0.445),
-2px -2px 0 rgba(0, 0, 0, 0.418),
2px -2px 0 rgba(0, 0, 0, 0.445),
-2px 2px 0 rgba(0, 0, 0, 0.384);
text-decoration:underline red;
font-family: Georgia, 'Times New Roman', Times, serif;
font-size:xx-large;
font-weight: 500;
margin-bottom: 3%;
}
.urgente{
color: rgb(247, 51, 51);
background: linear-gradient(black 50%, rgb(109, 106, 106));
padding: 20px;
border: 2px solid rgb(255, 255, 255);
width: 30%;
height: 10%;;
display: block;
margin: 3% auto;
text-shadow:
2px 2px 0 rgba(0, 0, 0, 0.445),
-2px -2px 0 rgba(0, 0, 0, 0.418),
2px -2px 0 rgba(0, 0, 0, 0.445),
-2px 2px 0 rgba(0, 0, 0, 0.384);
font-family: 'Courier New', Courier, monospace;
}
.año{
color: rgb(181, 166, 207);
}
HTML:
<!DOCTYPE html>
<html lang="es">
<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>
<img src="Alexander.jpeg" alt="Foto de perfil de Alexander">
</section>
<section>
<h1>Portafolio de <strong>Alexander</strong></h1>
<h1 class="titulo-blog">20<strong class="año">25</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>
<p class="texto-destacado">La constancia transforma tropiezos en aprendizaje, las metas claras en dirección y la experiencia en la llave que abre nuevas oportunidades.</p>
<button><a href="https:www.instagram.com">Instagram</a></button>
<button><a href="https://github.com/">GitHub</a></button>
</section>
<section>
<p class="urgente">ATENCION: SE ESTAN HACIENDO CAMBIOS CONSTANTES YA QUE ES UNA PRACTICA DEL CURSO ONE</p>
</section>
</main>
<footer>
</footer>
</body>
</html>
RESULTADO:
