¡Hola! 🌟 Aquí tienes un tutorial paso a paso para crear una tarjeta estilo bingo con HTML y CSS. Asegúrate de seguir cada paso y ¡no dudes en añadir tu propio toque personal! 😊
🎨 Tutorial: Crear una Tarjeta de Bingo con HTML y CSS
Paso 1: Estructura Básica de HTML
Primero, vamos a establecer la estructura básica de nuestro documento HTML. Esto incluye la declaración del tipo de documento, el idioma, y la inclusión de etiquetas importantes como y .
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Tarjeta de Bingo</title><style>/* Agregaremos estilos aquí más adelante */</style></head><body><section><divclass="card"><divclass="word">B</div><divclass="word">I</div><divclass="word">N</div><divclass="word">G</div><divclass="word">O</div><divclass="number">2</div><!-- Más números y la celda vacía aquí --></div></section></body></html>
Paso 2: Estilos CSS
Ahora, vamos a añadir estilos para hacer que nuestra tarjeta de bingo se vea increíble. 🖌️
<style>section {
display: flex;
justify-content: center;
}
.card {
width: 500px;
height: 500px;
border-radius: 20px;
background-color: cadetblue;
margin-top: 30px;
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: repeat(6, 1fr);
overflow: hidden;
}
.word {
background-color: beige;
color: brown;
font-family: 'Segoe UI';
font-size: 30px;
display: flex;
justify-content: center;
align-items: center;
}
.number, .empty {
margin: 10px;
border-radius: 5px;
background-color: rgb(45, 50, 73);
color: palegreen;
font-family: Impact;
font-size: 25px;
display: flex;
justify-content: center;
align-items: center;
}
.empty {
background-color: transparent;
grid-column: 3;
grid-row: 4;
}
.emptyimg {
max-width: 80%;
max-height: 100%;
width: auto;
height: auto;
border-radius: 50px;
}
</style>
Paso 3: Añadir Contenido HTML
Vamos a llenar nuestra tarjeta con letras y números. También añadiremos una imagen en la celda central vacía. 📷
<body>
<section>
<divclass="card">
<divclass="word">B</div>
<divclass="word">I</div>
<divclass="word">N</div>
<divclass="word">G</div>
<divclass="word">O</div>
<divclass="number">2</div>
<divclass="number">6</div>
<divclass="number">5</div>
<divclass="number">1</div>
<divclass="number">9</div>
<divclass="number">15</div>
<divclass="number">10</div>
<divclass="number">11</div>
<divclass="number">19</div>
<divclass="number">20</div>
<divclass="number">35</div>
<divclass="number">34</div>
<divclass="number">38</div>
<divclass="number">39</div>
<divclass="number">41</div>
<divclass="number">45</div>
<divclass="number">47</div>
<divclass="number">42</div>
<divclass="number">44</div>
<divclass="number">50</div>
<divclass="number">52</div>
<divclass="number">55</div>
<divclass="number">57</div>
<divclass="number">60</div>
<divclass="empty">
<img src="https://apuestas.com.co/wp-content/uploads/2021/12/Betplay-review.jpg" alt="betplay">
</div>
</div>
</section>
</body>
Paso 4: Distribuir las Celdas
Usamos CSS Grid para distribuir las celdas de nuestra tarjeta. Aquí está el código para organizar las celdas:
<style>.word:nth-child(1) { grid-column: 1; grid-row: 1; }
.word:nth-child(2) { grid-column: 2; grid-row: 1; }
.word:nth-child(3) { grid-column: 3; grid-row: 1; }
.word:nth-child(4) { grid-column: 4; grid-row: 1; }
.word:nth-child(5) { grid-column: 5; grid-row: 1; }
.number:nth-child(6) { grid-column: 1; grid-row: 2; }
.number:nth-child(7) { grid-column: 1; grid-row: 3; }
.number:nth-child(8) { grid-column: 1; grid-row: 4; }
.number:nth-child(9) { grid-column: 1; grid-row: 5; }
.number:nth-child(10) { grid-column: 1; grid-row: 6; }
.number:nth-child(11) { grid-column: 2; grid-row: 2; }
.number:nth-child(12) { grid-column: 2; grid-row: 3; }
.number:nth-child(13) { grid-column: 2; grid-row: 4; }
.number:nth-child(14) { grid-column: 2; grid-row: 5; }
.number:nth-child(15) { grid-column: 2; grid-row: 6; }
.number:nth-child(16) { grid-column: 3; grid-row: 2; }
.number:nth-child(17) { grid-column: 3; grid-row: 3; }
.number:nth-child(18) { grid-column: 3; grid-row: 5; }
.number:nth-child(19) { grid-column: 3; grid-row: 6; }
.number:nth-child(20) { grid-column: 4; grid-row: 2; }
.number:nth-child(21) { grid-column: 4; grid-row: 3; }
.number:nth-child(22) { grid-column: 4; grid-row: 4; }
.number:nth-child(23) { grid-column: 4; grid-row: 5; }
.number:nth-child(24) { grid-column: 4; grid-row: 6; }
.number:nth-child(25) { grid-column: 5; grid-row: 2; }
.number:nth-child(26) { grid-column: 5; grid-row: 3; }
.number:nth-child(27) { grid-column: 5; grid-row: 4; }
.number:nth-child(28) { grid-column: 5; grid-row: 5; }
.number:nth-child(29) { grid-column: 5; grid-row: 6; }
</style>
¡Listo! 🎉
¡Y ahí lo tienes! Una tarjeta de bingo estilizada utilizando HTML y CSS. Puedes personalizar los colores, fuentes, y contenido a tu gusto. ¡Diviértete creando! 🚀
Se ve increíble
Gracias por verlo
Muy útil