<!DOCTYPE html>
<html lang=“en”>
<head>
<meta charset=“UTF-8”>
<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
<title>Document</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: #0f172a;
}
.container {
display: flex;
gap: 20px;
}
.item {
position: relative;
width: 60px;
height: 120px;
}
.item::before, .item::after {
content: "";
position: absolute;
background: #38bdf8;
}
.p::before {
width: 15px;
height: 120px;
left: 0;
top: 0;
}
.p::after {
width: 45px;
height: 45px;
left: 15px;
top: 0;
border-radius: 0 20px 20px 0;
}
.l::before {
width: 15px;
height: 120px;
left: 0;
}
.l::after {
width: 60px;
height: 15px;
bottom: 0;
left: 0;
}
.a::before, .a::after {
content: "";
position: absolute;
background: #38bdf8;
}
.a::before {
width: 15px;
height: 120px;
left: 0;
}
.a::after {
width: 15px;
height: 120px;
right: 0;
}
.a {
background:
linear-gradient(#38bdf8 0 0) center 55px / 60px 15px no-repeat,
linear-gradient(#38bdf8 0 0) center 0 / 60px 15px no-repeat;
}
.t::before {
width: 60px;
height: 15px;
top: 0;
}
.t::after {
width: 15px;
height: 120px;
left: 22px;
}
.z::before {
width: 60px;
height: 15px;
top: 0;
}
.z::after {
width: 60px;
height: 15px;
bottom: 0;
}
.z {
background: linear-gradient(135deg, transparent 45%, #38bdf8 45% 55%, transparent 55%);
}
.i::before {
width: 15px;
height: 120px;
left: 22px;
}
</style>
</head>
<body>
<!-- Dibujamos a base de letras con bloques la palabra PLATZI -->
<div class=“container”>
<div class=“item p”></div>
<div class=“item l”></div>
<div class=“item a”></div>
<div class=“item t”></div>
<div class=“item z”></div>
<div class=“item i”></div>
</div>
</body>
</html>
Curso de Frontend Developer
COMPARTE ESTE ARTÍCULO Y MUESTRA LO QUE APRENDISTE
0 Comentarios
para escribir tu comentario
