3

🎨 Tutorial: Crear una Tarjeta de Bingo con HTML y CSS

¡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! 🚀

Escribe tu comentario
+ 2