index.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Swirl</title>

    <link rel="stylesheet" href="styles.css">

    <link rel="icon" type="image/x-icon" href="/images/assets/png/sprinkles.png">

    <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=Chakra+Petch:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Preahvihear&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Winky+Sans:ital,wght@0,300..900;1,300..900&display=swap" rel="stylesheet">
</head>

<body style="
    background: #FFFACC;
    background: radial-gradient(circle, rgba(255, 250, 204, 1) 0%, rgba(253, 247, 157, 1) 30%, rgba(253, 224, 157, 1) 100%);

    ">

<!-- Navbar -->
<nav class="navbar">

    <!-- Hack Club Flag -->
    <a class="banner" href="https://hackclub.com/"><img style="position: absolute; top: 0; left: 10px; border: 0; width: 128px; z-index: 1000;" src="https://assets.hackclub.com/flag-orpheus-top.svg" alt="Hack Club"/></a>

    <div class="navbar__container">

        <ul class="navbar__menu">

            <li class="navbar__item">
                <a href="index.html" class="navbar__links">Home</a>
            </li>

            <li class="navbar__item">
                <a href="requirements.html" class="navbar__links">Requirements</a>
            </li>

            <li class="navbar__item">
                <a href="gallery.html" class="navbar__links">Gallery</a>
            </li>

            <li class="navbar__item">
                <a href="resources.html" class="navbar__links">Resources</a>
            </li>

            <li class="navbar__btn">
                <a href="https://forms.hackclub.com/swirl" style="padding: 0.25rem;" class="navbar__btn">Submit</a>
            </li>

        </ul>
    </div>
</nav>


<br><br><br><br><br><br>
<center>
    <h1 id="circle">
        <br>
        <img id= "swirl-logo" src="images/assets/svg/swirl-text.svg" alt="Swirl! Text Logo">
        <br>
        <div class = "rotate">
            Aka Boba Drops ii
        </div>
    </h1>

    <h1 id="main-text" style="text-align: center;">
        Build a website<br>
        Get free ice cream!
    </h1>

</center>
<!--
<img src="images/assets/svg/swirl-1.svg" alt="swirl logo" style="background: none; width: 350px; height: 350px; margin-top: -1000px; margin-bottom: 100px; margin-left: 20px">
<img src="images/assets/svg/swirl-1.svg" alt="swirl logo" style="background: none; width: 300px; height: 300px; margin-top: -1000px; position: absolute; float: right; margin-right: 300px">
-->
<center>
    <button><a target="_blank" href="https://forms.hackclub.com/swirl" style="text-decoration: none; color: #B875FF;"> ‎ ‎ ‎ ‎ ‎ Get your ice cream ‎ ‎ ‎ ‎ ‎ </a></button>
    <button><a target="_blank" href="https://forms.hackclub.com/swirl-workshop" style="text-decoration: none; color: #B875FF"> ‎ ‎ ‎ ‎ ‎ Run a Club Meeting ‎ ‎ ‎ ‎ ‎ </a></button>
    <br>
    <button><a target="_blank" href="https://hack.club/q9zpic" style="text-decoration: none; color: #B875FF"> ‎ ‎ ‎ ‎ ‎ Getting Started Guide ‎ ‎ ‎ ‎ ‎ </a></button>
    <br>

    <br><br><br>
    <h3>
        <img src="images/assets/other/boba/boba.png" alt="Boba Drops Logo" style="background: none; width: 50px; height: 50px; margin-bottom: -15px">
        <a target="_blank" href="https://hack.club/boba">Boba Drops</a>  is highly recommended to complete first!

    </h3>

</center>

<!--old line, looks cool doesnt fit <hr> -->

<br>
<div class="main-content">
    <h2>Who?</h2>
    <p>
        Swirl is open to all Hack Clubbers! Anyone, anywhere, who is 18 under can participate!
        Teenagers in high school who are over 18 in the USA are also allowed to submit through a club / hackathon! <br>
        Getting a Boba Drops submission approved is recommended to submit, but is optional.
    </p>

    <br>

    <h2>What?</h2>
    <p>
        Swirl is the next step after the completion of Boba Drops!
        You are expected to make a website that is packed with cool features and has something fun and unique!
        <br>It’s your time to shine and push yourself farther than ever before!
        <br>See the requirements page for more information.
    </p>
    <br>

    <h2>
        How?
    </h2>
    <p>
        Swirl will be more independent than Boba Drops, as it is all about <em> you </em> making your own unique website!
        <br>Cool features can be found all over the internet, and it is encouraged for you to do research on specific
        attributes you may want to add, just remember to not copy-paste anything, and don't claim other's code as your own!
        <br>There is a guide dedicated to Swirl and it is recommended that you check it out!
    </p>

    <br><br>

    <h2>
        Inspiration
    </h2>
    <h3>Check out these awesome websites!</h3>
    <p2>
        <li><a target="_blank" href="https://dhyans.xyz" >My Personal Website</a>
            <a target="_blank" href="https://github.com/Bluelightning26/website" >
                <img src="images/assets/other/stickers/github-sticker.png" alt="Ice Cream parrot" style="background: none; width: 30px; margin-bottom: -5px">
                GitHub Repo (Code)</a></li>

        <li><a target="_blank" href="https://swirl.hackclub.com"> Swirl <img src="images/assets/svg/swirl-1.svg" alt="swirl logo" style="background: none; width: 20px; margin-bottom: -5px">  -You are on this one right now!</a>
            <a target="_blank" href="https://github.com/hackclub/swirl" >
                <img src="images/assets/other/stickers/github-sticker.png" alt="Ice Cream parrot" style="background: none; width: 30px; margin-bottom: -5px">
                GitHub Repository</a></li>

        <!--
      <li><a href="https://dhyans.xyz" >A third website!</a>
        <a href="https://dhyans.xyz" >
            <img src="images/assets/other/stickers/github-sticker.png" alt="Ice Cream parrot" style="background: none; width: 30px; margin-bottom: -5px">
            Github Repository</a></li>
        -->
        <br>
        <h3>Check out the Gallery page to see astounding submissions by other Hack Clubbers!</h3>
    </p2>

    <center>
        <hr style="width:100px">

        <h2> Questions? Comments? Need Help?<br>
        </h2>
        <br>
        <h3>
            Join <a target="_blank" href="https://hackclub.slack.com/archives/C08FR0LMVHD">#swirl</a> on the Hack Club Slack!
        </h3>
        <p>For personal questions, feel free to reach out to us directly!
            <br>
            General Questions: <a href="mailto:dhyan@hackclub.com">dhyan@hackclub.com</a> or @<a target="_blank" href=https://hackclub.slack.com/team/U0824G9PTFE">blu</a> on Slack<br>
            Club Questions: <a href="mailto:jared@hackclub.com">jared@hackclub.com</a> or @<a target="_blank" href=https://hackclub.slack.com/team/U07HEH4N8UV">jps</a> on Slack<br>
        </p>
        <h2>
            <br>
            Now get out there and start Swirling!
            <img src="images/assets/other/icecreamparrot.gif" alt="Ice Cream parrot" style="background: none; width: 50px; margin-bottom: -5px">
            <br>
        </h2>
    </center>

    <br>
</div>

<br>
<!-- Sprinkles -->
<!--
<img src="/images/assets/svg/t/sprinkle-r.svg" class="sprinkles__img" alt="Red Sprinkle" style="background: none; margin-top: -1200px; margin-left: 3%; rotate: 90deg;">
<img src="/images/assets/svg/t/sprinkle-g.svg" class="sprinkles__img" alt="Green Sprinkle" style="background: none; margin-top: -958px; margin-left: 90%; rotate: 135deg;">
<img src="/images/assets/svg/t/sprinkle-y.svg" class="sprinkles__img" alt="Yellow Sprinkle" style="background: none; margin-top: -1744px; margin-left: 81%; rotate: 180deg;">
<img src="/images/assets/svg/t/sprinkle-b.svg" class="sprinkles__img" alt="Blue Sprinkle" style="background: none; margin-top: -1865px; margin-left: 2%; rotate: 225deg;">
<img src="/images/assets/svg/t/sprinkle-r.svg" class="sprinkles__img" alt="Red Sprinkle" style="background: none; margin-top: -413px; margin-left: 95%; rotate: 270deg;">
<img src="/images/assets/svg/t/sprinkle-o.svg" class="sprinkles__img" alt="Orange Sprinkle" style="background: none; margin-top: -1635px; margin-left: 10%; rotate: 315deg;">
<img src="/images/assets/svg/t/sprinkle-g.svg" class="sprinkles__img" alt="Green Sprinkle" style="background: none; margin-top: -102px; margin-left: 88%; rotate: 360deg;">
<img src="/images/assets/svg/t/sprinkle-g.svg" class="sprinkles__img" alt="Blue Sprinkle" style="background: none; margin-top: -1441px; margin-left: 8%; rotate: 405deg;">
<img src="/images/assets/svg/t/sprinkle-r.svg" class="sprinkles__img" alt="Red Sprinkle" style="background: none; margin-top: -1359px; margin-left: 97%; rotate: 450deg;">
<img src="/images/assets/svg/t/sprinkle-o.svg" class="sprinkles__img" alt="Orange Sprinkle" style="background: none; margin-top: -1644px; margin-left: 5%; rotate: 495deg;">
<img src="/images/assets/svg/t/sprinkle-o.svg" class="sprinkles__img" alt="Orange Sprinkle" style="background: none; margin-top: -50px; margin-left: 7%; rotate: 45deg;">
<img src="/images/assets/svg/t/sprinkle-r.svg" class="sprinkles__img" alt="Red Sprinkle" style="background: none; margin-top: -1999px; margin-left: 89%; rotate: 90deg;">
<img src="/images/assets/svg/t/sprinkle-g.svg" class="sprinkles__img" alt="Green Sprinkle" style="background: none; margin-top: -1471px; margin-left: 92%; rotate: 135deg;">
<img src="/images/assets/svg/t/sprinkle-y.svg" class="sprinkles__img" alt="Yellow Sprinkle" style="background: none; margin-top: -400px; margin-left: 19%; rotate: 180deg;">
<img src="/images/assets/svg/t/sprinkle-b.svg" class="sprinkles__img" alt="Blue Sprinkle" style="background: none; margin-top: -564px; margin-left: 12%; rotate: 225deg;">
<img src="/images/assets/svg/t/sprinkle-r.svg" class="sprinkles__img" alt="Red Sprinkle" style="background: none; margin-top: -1412px; margin-left: 18%; rotate: 270deg;">
<img src="/images/assets/svg/t/sprinkle-o.svg" class="sprinkles__img" alt="Orange Sprinkle" style="background: none; margin-top: -1819px; margin-left: 8%; rotate: 315deg;">
<img src="/images/assets/svg/t/sprinkle-g.svg" class="sprinkles__img" alt="Green Sprinkle" style="background: none; margin-top: -195px; margin-left: 20%; rotate: 360deg;">
<img src="/images/assets/svg/t/sprinkle-g.svg" class="sprinkles__img" alt="Blue Sprinkle" style="background: none; margin-top: -378px; margin-left: 10%; rotate: 405deg;">
<img src="/images/assets/svg/t/sprinkle-r.svg" class="sprinkles__img" alt="Red Sprinkle" style="background: none; margin-top: -48px; margin-left: 86%; rotate: 450deg;">
<img src="/images/assets/svg/t/sprinkle-o.svg" class="sprinkles__img" alt="Orange Sprinkle" style="background: none; margin-top: -1549px; margin-left: 87%; rotate: 495deg;">
<img src="/images/assets/svg/t/sprinkle-o.svg" class="sprinkles__img" alt="Orange Sprinkle" style="background: none; margin-top: -1950px; margin-left: 86%; rotate: 45deg;">
<img src="/images/assets/svg/t/sprinkle-r.svg" class="sprinkles__img" alt="Red Sprinkle" style="background: none; margin-top: -559px; margin-left: 6%; rotate: 90deg;">
<img src="/images/assets/svg/t/sprinkle-g.svg" class="sprinkles__img" alt="Green Sprinkle" style="background: none; margin-top: -250px; margin-left: 50%; rotate: 135deg;">
<img src="/images/assets/svg/t/sprinkle-y.svg" class="sprinkles__img" alt="Yellow Sprinkle" style="background: none; margin-top: -2126px; margin-left: 90%; rotate: 180deg;">
<img src="/images/assets/svg/t/sprinkle-b.svg" class="sprinkles__img" alt="Blue Sprinkle" style="background: none; margin-top: -1954px; margin-left: 40%; rotate: 225deg;">
<img src="/images/assets/svg/t/sprinkle-r.svg" class="sprinkles__img" alt="Red Sprinkle" style="background: none; margin-top: -838px; margin-left: 60%; rotate: 270deg;">
<img src="/images/assets/svg/t/sprinkle-r.svg" class="sprinkles__img" alt="Red Sprinkle" style="background: none; margin-top: -2037px; margin-left: 10%; rotate: 315deg;">
<img src="/images/assets/svg/t/sprinkle-g.svg" class="sprinkles__img" alt="Green Sprinkle" style="background: none; margin-top: -1526px; margin-left: 70%; rotate: 360deg;">
<img src="/images/assets/svg/t/sprinkle-g.svg" class="sprinkles__img" alt="Blue Sprinkle" style="background: none; margin-top: -1926px; margin-left: 80%; rotate: 405deg;">
<img src="/images/assets/svg/t/sprinkle-r.svg" class="sprinkles__img" alt="Red Sprinkle" style="background: none; margin-top: -1726px; margin-left: 90%; rotate: 450deg;">
<img src="/images/assets/svg/t/sprinkle-b.svg" class="sprinkles__img" alt="Blue Sprinkle" style="background: none; margin-top: -1600px; margin-left: 8%; rotate: 495deg">
<img src="/images/assets/svg/t/sprinkle-g.svg" class="sprinkles__img" alt="Green Sprinkle" style="background: none; margin-top: -1230px; margin-left: 70%">
<img src="/images/assets/svg/t/sprinkle-g.svg" class="sprinkles__img" alt="Green Sprinkle" style="background: none; margin-top: -1449px; margin-left: -20%; rotate: 71deg">
<img src="/images/assets/svg/t/sprinkle-o.svg" class="sprinkles__img" alt="Orange Sprinkle" style="background: none; margin-top: -1032px; margin-left: 10%; rotate: 97deg">
<img src="/images/assets/svg/t/sprinkle-r.svg" class="sprinkles__img" alt="Blue Sprinkle" style="background: none; margin-top: -1533px; margin-left: 9%; rotate: 33deg">
<img src="/images/assets/svg/t/sprinkle-y.svg" class="sprinkles__img" alt="Yellow Sprinkle" style="background: none; margin-top: -50px; margin-left: 80%; rotate: 0deg">
<img src="/images/assets/svg/t/sprinkle-g.svg" class="sprinkles__img" alt="Green Sprinkle" style="background: none; margin-top: -500px; margin-left: 92%; rotate: 28deg">
<img src="/images/assets/svg/t/sprinkle-o.svg" class="sprinkles__img" alt="Orange Sprinkle" style="background: none; margin-top: -410px; margin-left: 13%; rotate: 37deg">
<img src="/images/assets/svg/t/sprinkle-b.svg" class="sprinkles__img" alt="Blue Sprinkle" style="background: none; margin-top: -300px; margin-left: 15%; rotate: 423deg">
<img src="/images/assets/svg/t/sprinkle-r.svg" class="sprinkles__img" alt="Red Sprinkle" style="background: none; margin-top: -540px; margin-left: 72%; rotate: 51deg">
-->
<br><br><br><br>
<footer>
    <br>
    <img src="images/assets/other/stickers/orphmoji-yippee.png" alt="Orpheus Yippee!" style="background: none; width: 50px; margin-bottom: 2px; margin-right: 15px">
    Built & maintained by @blu for Hack Club
    <img src="images/assets/other/stickers/orphmoji-yippee.png" alt="Orpheus Yippee!" style="background: none; width: 50px; margin-bottom: 2px; margin-left: 20px">
    <img src="images/assets/svg/cherry.svg" alt="Orpheus Yippee!" style="background: none; height: 50px; margin-bottom: 2px; position: absolute; right: 20px; top: -49px">
    <br><br><br>
</footer>

</body>

</html>