drags-and-nerds/index.html

<!DOCTYPE html>
<html lang="fr" data-theme="dark">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Drags and Nerds &mdash; OFF</title>
        <link rel="icon" type="image/x-icon" href="assets/favicon.jpg">
    <!--OPENGRAPH-->
        <meta property="og:title" content="Drags and Nerds">
        <meta property="og:description" content="Drag shows, musique électronique, synthés vidéos et autre performances nerds">
        <meta property="og:url" content="https://drags-nerds.net/">
        <meta property="og:image" content="https://drags-nerds.net/assets/favicon.jpg">
        <meta property="og:type" content="website">
    <!--STYLE-->
        <link rel="stylesheet" href="style/typo.css">

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

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

        <link rel="stylesheet" href="style/reduced.css">
    </head>
    <body>
        <main>
            <section tabindex="-1" id="seeYouLater" class="floating">
                <h1>
                    Merci à touxes !
                </h1>
                <div>
                    <p>
                        Drags and Nerds c'est fini...<br><strong>pour l'instant !</strong>
                        <br><br>
                        On revient bientôt avec toujours plus de drags et de nerds !
                        <br><br>
                        En attendant tu peux aller voir<br>les sites et projets de nos copaines
                        <br><br>
                        Si tu veux rejoindre la team, <br>
                        n'hésite pas à nous contacter ^^
                    </p>
                </div>
            </section>

            <div id="colorBtnContainer" aria-hidden="true">
                <svg tabindex="-1" class="icon" viewBox="0 0 34.01 34.53">
                    <path d="M10.91,27.58c-1.85-1.07-3.31-2.52-4.37-4.36-1.07-1.84-1.6-3.89-1.6-6.16s.53-4.32,1.6-6.15c1.07-1.84,2.52-3.29,4.37-4.36,1.85-1.07,3.91-1.6,6.17-1.6s4.29.53,6.14,1.6c1.85,1.07,3.3,2.52,4.37,4.37,1.07,1.85,1.6,3.89,1.6,6.14s-.53,4.29-1.6,6.14c-1.07,1.85-2.52,3.31-4.37,4.37-1.85,1.07-3.89,1.6-6.14,1.6s-4.32-.53-6.17-1.6ZM20.51,22.94c1.03-.59,1.85-1.41,2.44-2.44s.89-2.18.89-3.43-.3-2.4-.89-3.43-1.41-1.85-2.44-2.44c-1.04-.59-2.18-.89-3.43-.89s-2.43.3-3.46.89c-1.03.59-1.85,1.41-2.44,2.44-.59,1.03-.89,2.18-.89,3.43s.3,2.4.89,3.43c.59,1.03,1.41,1.85,2.44,2.44,1.03.59,2.19.89,3.46.89s2.4-.3,3.43-.89Z"/>
                    <path d="M15.29.08l3.31-.08-.15,3.71h-2.86s-.31-3.63-.31-3.63Z"/>
                    <path d="M19.13,34.43l-3.97.1.18-4.45h3.42s.37,4.35.37,4.35Z"/>
                    <path d="M30.95,28.29l-2.37,2.49-2.61-2.83,2.08-2.1,2.9,2.44Z"/>
                    <path d="M33.93,15.34l.08,3.31-3.71-.15v-2.86s3.63-.31,3.63-.31Z"/>
                    <path d="M28.48,3.38l2.47,2.35-2.81,2.59-2.08-2.07,2.42-2.87Z"/>
                    <path d="M5.79,30.92l-2.49-2.37,2.83-2.62,2.1,2.09-2.45,2.9Z"/>
                    <path d="M.08,18.76l-.08-3.35,3.76.15v2.89s-3.68.31-3.68.31Z"/>
                    <path d="M3.46,5.82l2.29-2.41,2.53,2.74-2.02,2.03-2.8-2.37Z"/>
                </svg>
                <label class="switch" tabindex="0">
                    <input type="checkbox">
                    <span class="slider"></span>
                </label>
                <svg tabindex="-1" class="icon" viewBox="0 0 31.8 30.75">
                    <path d="M4.06,8.45l-2.47,1.39-1.58-2.84,2.41-1.39-2.41-1.39L1.58,1.39l2.47,1.35V0h3.23v2.74l2.51-1.35,1.55,2.84-2.38,1.39,2.38,1.39-1.55,2.84-2.51-1.39v2.8h-3.23v-2.8Z"/>
                    <path d="M31.8,18.58c0-2.12-.52-4.11-1.57-5.97-1.03-1.8-2.48-3.26-4.36-4.39-.06-.03-.1-.07-.16-.11-1.64-.96-3.35-1.5-5.11-1.67,0,1.22-.12,2.45-.42,3.71-.13.54-.28,1.07-.45,1.6-.49,1.51-1.16,3.01-2.03,4.49-1.18,2.01-2.55,3.73-4.1,5.15-.04.04-.09.07-.13.11-1.41,1.26-2.93,2.21-4.58,2.86.11.21.22.42.34.62.88,1.38,2.03,2.54,3.43,3.5.26.18.52.37.8.53,1.96,1.14,4,1.72,6.13,1.74,2.13.01,4.13-.5,5.97-1.55,1.85-1.05,3.35-2.55,4.49-4.5s1.72-4,1.73-6.12ZM22.95,24.51c-1.04.59-2.15.88-3.34.87-.68,0-1.34-.13-1.98-.34,2-1.74,3.67-3.72,4.97-5.94.9-1.55,1.62-3.2,2.15-4.95.3.34.57.69.79,1.08.59,1.03.88,2.15.87,3.34-.01,1.19-.33,2.33-.97,3.41s-1.47,1.92-2.5,2.51Z"/>
                </svg>
            </div>

            <section id="contactSection" class="floating">
                <h1>
                    Nous contacter :
                </h1>
                <nav aria-label="informations de contact de la team drags and nerds">
                  <a tabindex="0" href="https://signal.me/#eu/jPBmn2MoCUWsKN0eJbWl_3w-HuPNu2SndVwaWZX3iC9HBnQEi4FPSZefIkfS86T8" class="textBtn">Vega</a>
                  <a tabindex="0" href="mailto:urazoriapro@gmail.com" class="textBtn">Urazoria</a>
                </nav>
            </section>

            <footer id="webRing" class="solid" aria-label="les copaines du LOL">
                <a tabindex="0" href="https://drags-nerds.net" aria-label="drags and nerds, collectif d'organisation d'évènements queer et nerds inclusifs">
                  <img id="flashDNN" src="/assets/webRings/DNNwebring.gif" alt="les mots drags, and et nerds qui défilent dans tous les sens sur un fond rose et vert fluo qui clignote">
                  <img id="reducedDNN" src="/assets/webRings/dnn-reduced-motion.png" alt="les lettres #, D, et, N en gros pixel blanc sur fond noir avec un léger effet 3D, alternée entre vert et rose, toujours fluo ">
                </a>
                <a tabindex="0" href="https://berthe.cc" aria-label="berthe.cc">
                    <img src="/assets/webRings/berthe.cc.png" alt="une créature étrange verte et rouge avec 4 grands yeux et un inscription blanche : berthe.cc">
                </a>
                <a tabindex="0" href="https://murmure.cafe" aria-label="murmure.café, collectif de réappropriation du web et des réseaux">
                    <img src="/assets/webRings/murmure-cafe-webring.png" alt="une une tasse de café pixélisées en couleurs pastel avec des chevrons, quelques gouttes de café renversées et une écriture noire : murmure.café">
                </a>
                <a tabindex="0" href="https://labolyon.fr" aria-label="laboratoire ouvert lyonnais, hackerspace ">
                    <img src="/assets/webRings/labolyon.fr.png" alt="LOL en morse dans un cadre épais, en jaune sur fond noir">
                </a>
                <a tabindex="0" href="https://peertube.1312.media/"  aria-label="the 1312 media collective">
                  <img src="/assets/webRings/1312.media-webring.png" alt="le logo antifasciste et un texte rouge très large, the 1312 media collective">
                </a>
            </footer>
        </main>
        <aside tabindex="-1">
            <img tabindex="-1" id="texture" src="assets/background-noise.png" alt="un léger grain animé qui texture le fond">
            <video tabindex="-1" id="gradient" src="assets/background.webm" autoplay muted loop aria-label="un gradient de couleur rose, vert, noir et blanc"></video>
        </aside>

        <script type="module" src="js/main.js"></script>
    </body>
</html>