index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

   <!-- SEO Meta Tags -->
   <title>Spandan's Sticker</title>
   <meta name="description" content="This website takes you where your QR journey begins once you scan that holographic Spandan sticker!">
   <meta name="keywords" content="Stickers, Spandan's Stickers, Custom Stickers, Unique Designs, Sticker Collection">
   <meta name="author" content="Spandan Saxena">

   <!-- Open Graph Meta Tags for Social Media Sharing -->
   <meta property="og:title" content="Spandan's Sticker">
   <meta property="og:description" content="Discover what's with the Spandan sticker which you found somewhere!">
   <meta property="og:image" content="https://i.ibb.co/kqVKR2T/og-image.webp">
   <meta property="og:url" content="https://github.com/the-rebooted-coder/Digital-Sticker">
   <meta property="og:type" content="website">
   
   <!-- Twitter Card Meta Tags -->
   <meta name="twitter:card" content="summary_large_image">
   <meta name="twitter:title" content="Spandan's Sticker">
   <meta name="twitter:description" content="This website takes you where your QR journey begins once you scan that holographic Spandan sticker!">
   <meta name="twitter:image" content="https://i.ibb.co/kqVKR2T/og-image.webp"> <!-- Replace with your image URL -->

   <!-- Favicon -->
   <link rel="icon" href="favicon.ico" type="image/x-icon"> <!-- Ensure favicon.ico exists in your project root -->

    <title>Spandan's Sticker</title>
    <!-- Import Poppins Font from Google Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap" rel="stylesheet">
    <style>
        /* Global Styles */
        body {
            font-family: 'Poppins', sans-serif;
            background-color: #000; /* Full black background */
            color: #fff; /* White text */
            padding: 20px;
            margin: 0;
        }

        h1 {
            text-align: center;
            margin-bottom: 40px;
            color: #fff;
        }

        .card-container {
            display: flex;
            justify-content: center;
            gap: 20px;
            flex-wrap: wrap;
        }

        .card {
            width: 300px;
            height: 400px;
            perspective: 1000px;
            cursor: pointer;
        }

        .card-inner {
            position: relative;
            width: 100%;
            height: 100%;
            transition: transform 0.8s;
            transform-style: preserve-3d;
        }

        .card.flipped .card-inner {
            transform: rotateY(180deg);
        }

        .card-front, .card-back {
            position: absolute;
            width: 100%;
            height: 100%;
            backface-visibility: hidden;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        }

        .card-front img, .card-back img {
            width: 100%;
            height: 100%;
            object-fit: contain; /* Ensure full image is visible without cropping */
            background-color: #000000; /* Black background behind images */
        }

        .card-back {
            transform: rotateY(180deg);
        }

        /* Responsive Design */
        @media (max-width: 650px) {
            .card {
                width: 80%;
                height: 300px;
            }
        }

        /* Optional: Add some hover effect for better UX */
        .card:hover .card-inner {
            /* Optionally, you can add a subtle scale effect on hover */
            /* transform: scale(1.05); */
        }
    </style>
</head>
<body>
    <h1>Tap to know me</h1>
    <div class="card-container">
        <!-- Card 1 -->
        <div class="card" onclick="flipCard(this)">
            <div class="card-inner">
                <div class="card-front">
                    <img src="./assets/front-image.webp" alt="Sticker side">
                </div>
                <div class="card-back">
                    <img src="./assets/back-image.webp" alt="Sticker back-side">
                </div>
            </div>
        </div>
    </div>

    <script>
        function flipCard(card) {
            card.classList.toggle('flipped');
        }
    </script>
</body>
</html>