Pensé en una representación de mi mismo como estudiante de platzi, implementando un botón donde me dirija a la pagina principal de Platzi, tambien le di un fondo que sea un color dark mode que me encanta y un poco de iluminucidad en los bordes. 😃
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mi Avatar</title>
</head>
<style>
* {
font: message-box;
background-color: DarkSlateGray;
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background-color: DarkSlateGray;
}
section {
width: 100%;
display: flex;
justify-content: center;
}
.card-avatar {
width: 500px;
height: 600px;
background-color: SeaGreen;
border-radius: 20px;
display: grid;
margin-top: 20px;
justify-content: center;
overflow: hidden;
box-shadow: 0px 0px 25px SeaGreen;
}
.card-avatar img{
width: 300px;
height: 300px;
box-shadow: 0px 0px 25px rgb(87, 222, 145);
border-radius: 500px;
margin-top: 10px;
object-fit: scale-down;
}
.card-avatar p{
height: 0px;
text-align: center;
}
.card-avatar p:nth-child(2){
color:rgb(255, 255, 255);
font-size: 30px;
}
.card-avatar p:nth-child(3){
margin-top: 20px;
font-weight: 200px;
font-size: 30px;
color:rgb(255, 255, 255)
}
.boton {
display: inline-block;
color: rgb(0, 0, 0);
font-size: 20px;
background-color: SpringGreen;
text-align: center;
height: 50px;
padding: 10px 20px;
border-radius: 10px;
text-decoration: none;
font-weight: bold;
margin: 20px;
}
.boton:hover {
background-color: #168d32;
}
</style>
<body>
<section>
<div class="card-avatar">
<img src="/avatar.jpg" alt="avatar">
<p>David Cevallos</p>
<p>Estudiante de Platzi</p>
<a class="boton" href="https://platzi.com/home/" target="_blank" rel="noopener noreferrer">Seguir aprendiendo</a>
</div>
</section>
</body>
</html>```
Curso de Frontend Developer
COMPARTE ESTE ARTÍCULO Y MUESTRA LO QUE APRENDISTE
0 Comentarios
para escribir tu comentario
