<!--

made with 💖 by six n bamden <3

-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width" initial-scale=1>
    <meta property="og:title" content="examples" />
    <meta property="og:type" content="website" />
    <meta property="og:url" content="https://examples.icu" />
    <meta property="og:image" content="https://files.catbox.moe/pwm1jw.jpg" />
    <meta property="og:description" content="click me! | made by six and bamden &gt;.&lt;" />
    <meta http-equiv="cache-control" content="no-cache" />
    <meta name="theme-color" content="#add8e6">
    <title>ex :3</title>
    <script src="https://unpkg.com/typewriter-effect@latest/dist/core.js"></script>

    <style>
        @import url('https://fonts.googleapis.com/css2?family=Kanit:wght@300&display=swap');
    </style>

    
    <style>
         ::selection {
        color: #000000;
        background: #ff000000;
        }
        #preloader {
            background: rgb(0, 0, 0);
            border: 0.72px solid #000000;
            color: white;
            cursor: pointer;
            display: flex;
            height: 100%;
            justify-content: center;
            left: 0;
            position: absolute;
            top: 0;
            transition: opacity 300ms ease;
            width: 100%;
            z-index: 999;
            align-items: center;
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            text-shadow: 0 0 15px #2a7dbd;
            font-size: 25px; 
        }
        #preloader.hidden {
            display: none;
        }
        #background-video {
            height: 100%;
            left: 0;
            object-fit: cover;
            opacity: 0;
            pointer-events: none;
            position: fixed;
            top: 0;
            transition: opacity 0.5s ease-out;
            user-select: none;
            width: 100%;
            z-index: -1;
        }
        #background-video.show {
            opacity: 1;
        }
        body {
            align-items: center;
            display: flex;
            font-family: "Kanit", serif;
            font-style: normal;
            font-weight: 300;
            height: 100vh;
            justify-content: center;
            margin: 0;
            overflow: hidden;
        }
        @keyframes fadeIn {
            from {
                opacity: 0;
            }
            to {
                opacity: 1;
            }
        }
        @keyframes slideInSlightly {
            from {
                transform: translateY(20%);
                opacity: 0;
            }
            to {
                transform: translateY(0);
                opacity: 1;
            }
        }
        #content-box {
            align-items: center;
            animation: none;
            background: rgba(15, 15, 15, 0.123);
            backdrop-filter: blur(15px);
            border: 1px solid rgba(27, 27, 27, 0.3);
            border-radius: 15px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.67);
            display: flex;
            flex-direction: column;
            height: 300px;
            width: 400px;
            justify-content: center;
            opacity: 0;
            transition: opacity 0.5s ease-out;
            -webkit-backdrop-filter: blur(15px);
        }
        #content-box.show {
            animation: slideInSlightly 0.5s ease-in-out, fadeIn 0.5s ease-in-out;
            opacity: 1;
        }
        #profile-picture-container {
            position: relative;
            width: 100px;
            height: 100px;
        }
        #profile-picture {
            border-radius: 50%;
            height: 100px;
            width: 100px;
        }
        #overlay-image {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 120px;
            height: 120px;
            transform: translate(-50%, -50%);
            z-index: 1;
        }
        #name {
            color: white;
            font-size: 1.5em;
            margin-top: 10px;
            text-shadow: 0 0 10px #2a7dbd;
        }
        #typewriter {
            color: #ffffff;
            font-size: 1em;
            margin-top: 5px;
            text-shadow: 0 0 10px #2a7dbd;
        }
        .social-icons {
            display: flex;
            justify-content: space-between;
            margin-top: 20px;
            max-width: 200px;
            width: 100%;
        }
        .social-icons a {
            margin: 0;
            transition: transform 0.3s;
        }
        .social-icons a:hover {
            transform: scale(1.2);
        }
        .social-icons img {
            height: 40px;
            width: 40px;
        }
        .social-icons svg {
            fill: white;
            filter: drop-shadow(0px 0px 5px #2a7dbd);
            opacity: 0;
            transform: translateY(20px);
            transition: transform 0.3s, fill 0.3s, filter 0.3s;
        }
        .social-icons svg.animate {
            opacity: 1;
            transform: translateY(0);
            transition: transform 0.5s ease-out, opacity 0.5s ease-out;
        }
        .social-icons svg:hover {
            fill: white;
            filter: drop-shadow(0px 0px 10px white);
            transform: scale(1.2);
        }
    </style>
</head>
<body>
    <div id="preloader" class="preloader" onclick="startAnimations()">click me.. >.< </div>
    <video id="background-video" autoplay loop muted playsinline>
        <source src="https://r2.fakecrime.bio/backgrounds/002bdd24-83fd-4d33-ab3c-539fae140945.mp4" type="video/mp4">
    </video>
    <audio loop id="background-audio" src="https://r2.fakecrime.bio/tracks/audios/c50f1f7b-b623-4be3-b06f-12f6926ca899.mp3"></audio> 
    <div id="content-box">
        <div id="profile-picture-container">
            <img id="profile-picture" src="https://files.catbox.moe/pwm1jw.jpg" alt="Profile Picture">
            <img id="overlay-image" src="https://cdn.discordapp.com/avatar-decoration-presets/a_8552f9857793aed0cf816f370e2df3be.png?size=240&passthrough=true" alt="Overlay Image">
        </div>
        <div style="background-image: url(/media/bluesparkle.gif)" id="name">bamden! >.< </div>
        <div id="typewriter"></div>
        <div class="social-icons">
            <a href="https://youtube.com/@exampIes" target="_blank">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="30" height="30">
                    <path d="M19.615 3.184c-3.604-.246-11.631-.245-15.23 0-3.897.266-4.356 2.62-4.385 8.816.029 6.185.484 8.549 4.385 8.816 3.6.245 11.626.246 15.23 0 3.897-.266 4.356-2.62 4.385-8.816-.029-6.185-.484-8.549-4.385-8.816zm-10.615 12.816v-8l8 3.993-8 4.007z"></path>
                </svg>
            </a>
            <a href="https://www.roblox.com/users/501157427/profile" target="_blank">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="30" height="30">
                    <path d="M18.926 23.998 0 18.892 5.075.002 24 5.108ZM15.348 10.09l-5.282-1.453-1.414 5.273 5.282 1.453z"></path>
                </svg>
            </a>
            <a href="https://tiktok.com/@bamdens" target="_blank">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="30" height="30">
                    <path d="M12.525.02c1.31-.02 2.61-.01 3.91-.02.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9 1.12-3.72 2.58-4.96 1.66-1.44 3.98-2.13 6.15-1.72.02 1.48-.04 2.96-.04 4.44-.99-.32-2.15-.23-3.02.37-.63.41-1.11 1.04-1.36 1.75-.21.51-.15 1.07-.14 1.61.24 1.64 1.82 3.02 3.5 2.87 1.12-.01 2.19-.66 2.77-1.61.19-.33.4-.67.41-1.06.1-1.79.06-3.57.07-5.36.01-4.03-.01-8.05.02-12.07z"></path>
                </svg>
            </a>
            <a href="https://instagram.com/bamdens" target="_blank">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="30" height="30">
                    <path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"></path>
                </svg>
            </a>
            <a href="https://discord.gg/swattingg" target="_blank">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="30" height="30" class="fill-[#4D4FB7] drop-shadow-[0_0_3.5px_#4D4FB7]">
                    <path d="M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189Z"></path>
                </svg>
            </a>
        </div>
    </div>
    <script>
        function startAnimations() {
            document.querySelectorAll('.social-icons svg').forEach(svg => {
                svg.classList.add('animate');
            });
            let preloader = document.querySelector('.preloader');
            preloader.style.opacity = 0;
            setTimeout(() => {
                preloader.style.display = "none";
            }, 300);
            document.getElementById('background-video').classList.add('show');
            document.getElementById('content-box').classList.add('show');
            document.getElementById('background-audio').play(); 
        }

        var audio = document.getElementById("background-audio");
        audio.volume = 0.1;
    </script>
    <script>

    </script>
    <!-- 
     ADD 
        .deleteAll()
        .typeString('[text]')
        .pauseFor(1000)
    to add more text to the typewriter effect
    -->
    <script>
        var app = document.getElementById('typewriter');
        var typewriter = new Typewriter(app, {
            loop: true,
            cursor: '|'
        });
        typewriter
            .typeString('hiya!! ^-^')
            .pauseFor(1000)
            .deleteAll()
            .typeString('six smells :3') 
            .pauseFor(1000)
            .deleteAll()
            .typeString('<3')
            .pauseFor(1000)
            .deleteAll()
            .start();
    </script>
        <script>
            fetch(`https://api.lanyard.rest/v1/users/856844803849453579`)
                .then(response => response.json())
                .then(data => {
        const avatarHash = data.data.discord_user.avatar;
        const avatarUrl = `https://cdn.discordapp.com/avatars/856844803849453579/${avatarHash}.webp`;
  
        const avatarImage = document.getElementById("profile-picture");
        avatarImage.src = avatarUrl;
    })
   </script>
   <script> 

        let title = document.title 
            window.addEventListener('blur', () => {
            document.title = 'ex :('
})
        window.addEventListener('focus', () => {
        document.title = title
})

   </script>
   <script> 

fetch("https://raw.githubusercontent.com/adryd325/oneko.js/8fa8a1864aa71cd7a794d58bc139e755e96a236c/oneko.js")
            .then(x => x.text())
            .then(s => s.replace("./oneko.gif", "https://raw.githubusercontent.com/adryd325/oneko.js/14bab15a755d0e35cd4ae19c931d96d306f99f42/oneko.gif")
                .replace("(isReducedMotion)", "(false)"))
            .then(eval);

            
   </script>
<script disable-devtool-auto src='https://cdn.jsdelivr.net/npm/disable-devtool@latest'></script>
</body>
</html>
