index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Invitation to my niece's fourth birthday">
    <meta name="keywords" content="birthday, invitation, niece, fourth, party">
    <meta property="og:title" content="Cumpleaños de mi sobrina">
    <meta property="og:description" content="Vente a celebrar el cuarto cumpleaños de mi sobrina">
    <meta property="og:image" content="https://res.cloudinary.com/dzj5a3xyb/image/upload/v1740999824/kr9jtpvlguqqmyqazhxb.webp">
    <meta property="og:url" content="https://andryalexis.github.io/My_Niece_s_Fourth_Birthday/">
    <meta property="og:type" content="website">
    <title>My Niece's fourth birthday</title>
    <link rel="icon" href="./src/images/favicon-16x16.png" type="image/x-icon">
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/style.css">
    <link rel="stylesheet" href="./css/fonts.css">
</head>
<body>
    <main>
        <div id="particles-js"></div>
        <div id="wrapper">
            <div id="invitation">
                <div id="content">
                    <p>
                        <span>
                            El sabado
                        </span>
                        <br>
                        <time datetime="2025-03-22">22 de Marzo del 2025</time>
                        <br>
                        <span>
                            a las
                        </span>
                        <br>
                        <time datetime="16:00">16:00</time>
                        <span>
                            En el
                        </span>
                    </p>
                    <figure>
                        <img src="./src/images/kpc.webp" alt="KPC Restaurante" width="500" height="200">
                    </figure>
                    <a aria-disabled="true" id="confirm" target="_blank" href="https://docs.google.com/forms/d/1HgZDl6P9AALKM2AymYvYtrZXTqTqSBpVX6f2S4p9h2k/viewform?edit_requested=true">
                        Confirmar Asistencia
                    </a>
                </div>
                <div id="cover-page">
                    <section>
                        <video class="lazy" width="320" height="240" data-src="./src/gifs/Dancingalam.mp4" autoplay loop muted auto playsinline data-poster="./src/images/SmilingAlma_5.jpg">
                            <source type="video/mp4" data-src="./src/gifs/Dancingalam.mp4" />
                            <source type="video/webm" data-src="./src/gifs/Dancingalam.webm" />
                            Your browser does not support the video tag.
                        </video>
                        <h2>¡Ven y pásatelo bien conmigo!</h2>
                    </section>
                    <section>
                        <h1>¡Has sido invitado a mi cumpleaños!</h1>
                        <figure>
                            <img loading="eager" src="./src/images/SmilingAlma.webp" width="400" height="400" alt="Alma sonriente">
                        </figure>
                    </section>
                </div>
            </div>
        </div>
        <div id="do-scroll">
            Desliza hacia abajo para ver más
        </div>
    </main>
    <script src="./js/app.js" type="module"></script>
    <script src="https://cdn.jsdelivr.net/npm/particles.js"></script>
    <script>
        particlesJS.load('particles-js', './src/particles.json');
    </script>
    <script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@19.1.3/dist/lazyload.min.js"></script>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            var lazyLoadInstance = new LazyLoad({
                elements_selector: ".lazy"
            });
        });
    </script>
</body>
</html>