index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sunforge Cards | Trading Card Game Shadowboxes</title>
    <meta name="description" content="Artist link network page - discover my creations, social media accounts, or contact me!">
    <meta name="author" content="Sunforge Cards">
    <meta name="keywords" content="Sunforge Cards, shadowbox, trading card game, TCG, Yu-Gi-Oh!, Pokémon, Magic: The Gathering, artist, art, crafts, handmade, custom, Instagram, TikTok, YouTube, tutorials, contact, email">
    <meta http-equiv=”Content-Language” content=”en-us”>

    <link rel="stylesheet" href="/style.css">

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Expletus+Sans:wght@700&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Dongle&display=swap" rel="stylesheet">
</head>

<body>
    <header class="header">
        <h1 class="header__title _font_brand">Sunforge Card<span class="header__last-letter">s</span></h1>
    </header>

    <main class="content">
        <div class="logo">
            <img
                srcset="
                    /assets/logo-4x.webp 4x,
                    /assets/logo-3x.webp 3x,
                    /assets/logo-2x.webp 2x,
                    /assets/logo-1x.webp
                "
                src="/assets/logo-2x.webp"
                class="logo__image"
                alt="Sunforge Cards Logo"
                width="200"
                height="200"
            >
        </div>

        <nav class="nav">
            <ul class="nav__list">
                <li class="nav__item">
                    <a
                        href="https://www.instagram.com/sunforgecards"
                        class="nav__link"
                        target="_blank"
                        rel="noopener noreferrer"
                        tabindex="0"
                    >
                        <img src="/assets/instagram.svg" alt="Instagram logo icon" class="nav__icon">
                        Instagram
                    </a>
                </li>

                <li class="nav__item">
                    <a
                        href="https://www.tiktok.com/@sunforgecards"
                        class="nav__link"
                        target="_blank"
                        rel="noopener noreferrer"
                        tabindex="0"
                    >
                        <img src="/assets/tiktok.svg" alt="TikTok logo icon" class="nav__icon">
                        TikTok
                    </a>
                </li>

                <li class="nav__item">
                    <a
                        href="https://www.youtube.com/c/sunforgecards"
                        class="nav__link"
                        target="_blank"
                        rel="noopener noreferrer"
                        tabindex="0"
                    >
                        <img src="/assets/youtube.svg" alt="YouTube logo icon" class="nav__icon">
                        YouTube
                    </a>
                </li>

                <li class="nav__item">
                    <a
                        href="mailto:sunforgecards@gmail.com"
                        class="nav__link"
                        target="_blank"
                        rel="noopener noreferrer"
                        tabindex="0"
                        onclick="alert('You are about to open your email client to compose a message. If this does not work, DM me on Instagram or send me an email at sunforgecards@gmail.com');"
                    >
                        <img src="/assets/gmail.svg" alt="Gmail logo icon" class="nav__icon">
                        Contact Me
                    </a>
                </li>

                <li class="nav__item">
                    <a
                        href="https://www.youtube.com/watch?v=bovwdixtTGo&list=PL3ElEA7c9FLJMNizz3Yf-CvGwRgRdzeXa"
                        class="nav__link"
                        target="_blank"
                        rel="noopener noreferrer"
                        tabindex="0"
                    >
                        <img src="/assets/book.svg" alt="Open book icon" class="nav__icon">
                        Tutorials
                    </a>
                </li>
            </ul>
        </nav>
    </main>

    <div class="background">
        <picture class="background__picture">
            <source
                srcset="
                    /assets/background-1-portrait-2560.webp 2x,
                    /assets/background-1-portrait-1920.webp
                "
                type="image/webp"
                media="(max-aspect-ratio: 1.2)"
            >

            <source
                srcset="
                    /assets/background-1-landscape-2560.webp 2x,
                    /assets/background-1-landscape-1920.webp
                "
                type="image/webp"
                media="(min-aspect-ratio: 1.2)"
            >

            <img alt="Background photo, a shadowbox made by Sunforge Cards of Exodia, from Yu-Gi-Oh!">
        </picture>

        <picture class="background__picture">
            <source
                srcset="
                    /assets/background-2-portrait-2560.webp 2x,
                    /assets/background-2-portrait-1920.webp
                "
                type="image/webp"
                media="(max-aspect-ratio: 1.2)"
            >

            <source
                srcset="
                    /assets/background-2-landscape-2560.webp 2x,
                    /assets/background-2-landscape-1920.webp
                "
                type="image/webp"
                media="(min-aspect-ratio: 1.2)"
            >

            <img alt="Background photo, a shadowbox made by Sunforge Cards of Mewtwo, from Pokemon">
        </picture>

        <picture class="background__picture">
            <source
                srcset="
                    /assets/background-3-portrait-2560.webp 2x,
                    /assets/background-3-portrait-1920.webp
                "
                type="image/webp"
                media="(max-aspect-ratio: 1.2)"
            >

            <source
                srcset="
                    /assets/background-3-landscape-2560.webp 2x,
                    /assets/background-3-landscape-1920.webp
                "
                type="image/webp"
                media="(min-aspect-ratio: 1.2)"
            >

            <img alt="Background photo, a shadowbox made by Sunforge Cards of Kykar, Wind's Fury, from Magic the Gathering">
        </picture>
    </div>
</body>
</html>