Crear el logo de Instagram solo con HTML y CSS es una excelente forma de reforzar tu lógica visual, entender mejor el modelo de cajas y mejorar tu dominio de estilos.
En MGPanel queremos ayudarte a convertirte en un programador FRONTEND cada vez más sólido, por eso diseñamos estas mini–prácticas que te permiten experimentar y ver lo mucho que puedes lograr con unas pocas líneas de código.
🧩 Código HTML
<section>
<div class='cuadro'>
<div class='marco'>
<div class='circle'>
<div class='point'>
</div>
</div>
</div>
</div>
</section>🎨 Código CSS
section {
display: flex;
align-items: center;
justify-content: center;
}
.cuadro {
width: 300px;
height: 300px;
background: linear-gradient(195deg, #8737ba, #ff9a21);
border-radius: 50px;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.marco {
width: 200px;
height: 200px;
border-radius: 50px;
background-color: transparent;
border: 15px solid #fff;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.marco:before {
content: ' ';
position: absolute;
width: 20px;
height: 20px;
border-radius: 50px;
background-color: #fff;
display: flex;
align-items: center;
justify-content: center;
top: 20px;
right: 20px;
}
.circle {
width: 100px;
height: 100px;
border-radius: 50px;
background-color: transparent;
border: 15px solid #fff;
}Replica el código en tu proyecto o entorno de práctica y tendrás tu propio logo de Instagram hecho desde cero.
Analiza cómo interactúan las clases, los tamaños, los bordes y la posición de cada elemento. Entender eso es clave para dominar CSS.
👉 Ver logo de Instagram en HTML y CSS
🧠 ¡Ahora sigue tú!
A partir de aquí, prueba cambiando tamaños, colores o bordes. Añade efectos. Haz tu versión. Este tipo de ejercicios desbloquea mucha creatividad y te ayuda a dominar HTML y CSS de verdad.
Nos vemos en un próximo artículo.