index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="author" content="VTresMarias">
    <title>「VTresMarias - V三人のマリア - 」</title>
    <link rel="icon" href="https://vtresmarias.github.io/media/favicon/favicon_light.png" type="image/x-icon">
    <link rel="icon" href="https://vtresmarias.github.io/media/favicon/favicon_dark.png" type="image/x-icon" media="(prefers-color-scheme: dark)">
    <link rel="apple-touch-icon" href="https://vtresmarias.github.io/media/favicon/favicon_light.png" type="image/x-icon">
    <link rel="manifest" href="pwa/pwa.json"> <!-- PWA -->
    <meta name="og:type" content="website">
    <meta name="og:title" content="「VTresMarias - V三人のマリア - 」">
    <meta name="og:image" content="https://vtresmarias.github.io/media/preview/20240128_remaster.png">
    <meta name="og:url" content="https://vtresmarias.github.io">
    <meta name="og:description" content="home of the Marias, est. 27 Dec 2022🍃🪷🌸">
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:site" content="@thebelovedmoon">
    <meta name="twitter:creator" content="@thebelovedmoon">
    <meta name="theme-color" content="#3d374c">
    <meta name="msapplication-TileColor" content="#3d374c">
    <meta name="msapplication-navbutton-color" content="#3d374c">
    <meta name="apple-mobile-web-app-status-bar-style" content="#3d374c">
    <!-- custom css -->
    <link href="style.css" rel="stylesheet" type="text/css" media="all"> <!-- inbuilt -->
    <style type="text/css">
      /* attach in-html custom css args here */
      .illust {
        pointer-events: none;
        border-radius: 15px;
        margin-bottom: 15px;
      }
      .elgBorder {
        filter: drop-shadow(2px 4px 16px #3d374c80);
      }
      .mariaSymbol {
        width: 100px;
        margin: 0 auto;
      }
      h5 {
        letter-spacing: -0.875px;
      }
    </style>
    <!-- custom scripts -->
    <script src="scripts.js" type="text/javascript"></script> <!-- inbuilt -->
    <script type="text/javascript">
      function launch() {
        // launch javascript args here
        splash();
      }
    </script>
    <script type="text/javascript">
      // attach in-html custom javascript args here
    </script>
  </head>
  <body onload="launch()">
    <div id="removeLoadBlock" class="loading">
      <img id="removeLoad" src="media/images/loading.png" alt="">
    </div>
    <div id="panelBlock"></div> <!-- panel block -->
    <div id="tarotPanel"> <!-- tarot panel -->
      <div style="text-align: center; width: 750px; max-width: 100%; margin: 0 auto;">
        <div id="tarotInfo"></div>
      </div>
    </div>
    <div id="MITPanel"> <!-- MIT panel -->
      <div style="text-align: center; width: 750px; max-width: 100%; margin: 0 auto;">
        <div id="MITInfo"></div>
      </div>
    </div>
    <div id="navPanel"> <!-- navbar panel -->
      <div style="text-align: center; width: 750px; max-width: 100%; margin: 0 auto;">
        <h2>explore the Marias</h2>
        <header>
          <div style="line-height: 62.5%;">
            <p><b>home</b></p>
            <p><a rel="noopener noreferrer" href="events">events & projects</a></p>
            <p><a rel="noopener noreferrer" href="letter">letters from the First Maria</a></p>
            <p><a rel="noopener noreferrer" href="#about" onclick="navBarClose()">about the Collective</a></p>
          </div>
        </header>
        <br>
        <div style="line-height: 75%;">
          <img class="vtmLogoPanel" src="media/svg/vtm_logoPanel.svg" alt="">
          <p style="font-size: smaller;"><i>est. 27 Dec 2022</i></p>
        </div>
        <br>
        <img id="navClosed" src="media/svg/icons/menu_close.svg" onclick="navBarClose()" alt="menu_close">
      </div>
    </div>
    <div id="mainPage">
      <div style="box-shadow: 2px 4px 100px 16px #3d374c80;">
        <header class="vtmHead">
          <div><img class="vtmLogo" src="media/svg/vtm_logo_header.svg" alt=""></div>
          <div style="width: 100px; height: 100px;"></div>
          <div><img id="navClosed" src="media/svg/icons/menu_open.svg" onclick="navBarOpen()" alt="menu_open"></div>
        </header>
        <div style="height: 100vh"></div>
        <div class="intro">
          <div style="width: 625px; max-width: 100%; margin: 0 auto; text-align: center;">
            <h1>celebrating the 1st Anniversary of the Marias</h1>
            <p>
              since 27 Dec 2022, 「VTresMarias - V三人のマリア - 」 takes pride in uplifting
              the spirits of our VTubers -- called the Marias -- as they tackle on any
              challenge that comes their way together.
            </p>
            <p>
              the Marias were chosen for their personal connections with the First Maria,
              alongside their unwavering commitment to serving their community with the
              best they can.
            </p>
            <div style="height: 125px"></div>
            <h2>the 1st Anniversary Illust</h2>
            <p>
              cementing the legacy of the Marias since their first inception, the First
              Maria🍃 has released this illust in commemoration of such an event.
            </p>
            <p>
              this has been in the works since 14 Jun 2023, and was finished 28 Jan 2024.
            </p>
            <br>
            <div style="filter: drop-shadow(2px 4px 16px #3d374c80);">
              <img class="illust" src="https://pbs.twimg.com/media/GGTtOwKWoAADDbj?format=jpg&name=large" alt="">
              <button onclick="window.open('https://mobile.x.com/i/status/1757792441099231239')">Twitter / X</button>
              <button onclick="window.open('https://www.pixiv.net/en/artworks/116082444')">pixiv</button>
              <button onclick="window.open('https://reddit.com/r/VirtualYoutubers/s/hmNcDCjXBh')">Reddit</button>
              <button onclick="window.open('https://vstream.com/c/@thebelovedmoon/p/e73a5236-bdbd-4e13-a5f1-d67dcff85759')">VStream Feed</button>
            </div>
          </div>
        </div>
        <div class="intro" style="background-image: url(media/images/vtm_story_blurred.png);">
          <div style="width: 625px; max-width: 100%; margin: 0 auto; text-align: center;">
            <h1>the story of the Marias</h1>
            <p><b><i>
              「the story of the First Maria, is also the story of what it has become.」
            </i></b></p>
            <p>
              the First Maria🍃's journey is not that easy. but with the help of those who
              have cared for her, she remained committed to achieving her goal of finding
              those who will be with her forever.
            </p>
            <p><i>
              this is also the First Maria🍃's vtuber lore.
            </i></p>
            <div style="filter: drop-shadow(2px 4px 16px #3d374c80);">
              <button onclick="window.open('story')">read the story</button>
            </div>
          </div>
        </div>
        <div id="about" class="intro" style="background-image: url(media/images/backgrounds/vtm_1.jpg); text-align: center;">
          <div style="line-height: 75%;">
            <h1>meet the Marias</h1>
            <p><i>info as of 7 Apr 2024</i></p>
          </div>
          <br>
          <div class="tableLayout" style="filter: drop-shadow(2px 4px 16px #3d374c80);">
            <div class="threeCol mariaPadding">
              <div style="width: 375px; max-width: 100%; margin: 0 auto;">
                <img src="media/pfp/vtm_aga.png" alt="">
                <h3>Mother Agatha, the First Maria🍃</h3>
                <h4>我慢 ～Perseverance～</h4>
                <h5>debuted 27 Dec 2023</h5>
                <img class="elgBorder" src="media/images/elegantborder.png" alt="">
                <p>
                  Mother Agatha was once a beloved Mother before everything fell apart due to
                  the brink of winter. she was given a mission from the Grand Lady upon her
                  resurrection to find those who will be a part of her life forever.
                </p>
                <p>
                  behind the character is thebelovedmoon -- also known as 💚🍃Aga-chuu💗🌸
                  -- the founder of this VTuber Collective. he initially used this within the
                  Horror Shop Games community, but this has evolved over using it as his
                  VTuber presence in order to represent such community.
                </p>
                <p>
                  he specializes in graphics and PR, as well as websites and programming. his
                  current ventures (alongside this) include #MamaNyoSquad, ReactSquad, and
                  AgaASMR (aka Aga's ASMR Garden).
                </p>
                <img class="elgBorder" style="transform: rotate(180deg);" src="media/images/elegantborder.png" alt="">
                <br>
                <button onclick="tarotPanelOpen(Maria1)">read the tarot</button><br>
                <button onclick="window.open('https://thebelovedmoon.github.io')">visit the website</button>
              </div>
            </div>
            <div class="threeCol mariaPadding">
              <div style="width: 375px; max-width: 100%; margin: 0 auto;">
                <img src="media/pfp/vtm_aura.png" alt="">
                <h3>Aura Ostara, the Second Maria🪷</h3>
                <h4>復活 ～Rebirth～</h4>
                <h5>debuted 30 Jun 2022</h5>
                <img class="elgBorder" src="media/images/elegantborder.png" alt="">
                <p>
                  Aura Ostara represents the Celestial Nymph Guardian who aims to protect her
                  Nimbisouls by all means necessary. she was an everyday girl before that one
                  moment changes her life forever. 
                </p>
                <p>
                  behind the character, she is a lively VTuber who dreams to connect with
                  everyone that she meets throughout the way. she mostly streams Magicka and
                  Mario Kart, but she also hosts zatsudan whenever she has time.
                </p>
                <p>
                  as of 19 Oct 2022, she's currently on indefinite hiatus; and the future
                  remains uncertain upon her return to her VTubing career.
                </p>
                <img class="elgBorder" style="transform: rotate(180deg);" src="media/images/elegantborder.png" alt="">
                <br>
                <button onclick="tarotPanelOpen(Maria2)">read the tarot</button><br>
                <button onclick="window.open('https://thebelovedmoon.github.io/auraostara')">visit the website</button>
              </div>
            </div>
            <div class="threeCol">
              <div style="width: 375px; max-width: 100%; margin: 0 auto;">
                <img src="media/pfp/vtm_hina.png" alt="">
                <h3>Hina Oujo, the Third Maria🌸</h3>
                <h4>落ち着き ～Stability～</h4>
                <h5>debuted 3 Jul 2022</h5>
                <img class="elgBorder" src="media/images/elegantborder.png" alt="">
                <p>
                  Hina Oujo is an elegant queen from a faraway land who vows to serve her
                  Chuu-nins well. she has everything under her disposal, but deep inside, she
                  needs someone who will make her feel whole after what seems to be her whole
                  heap of loneliness.
                </p>
                <p>
                  behind the character, she's formerly known as Suzu Puyotori and HinaSukii --
                  where the former has renamed to Emii Shion. she's a talented artist who has
                  made waves over X before she debuted 3 Jul 2022. she typically enjoys art
                  and zatsudan, and majorly plays League of Legends and Apex Legends -- among
                  other things.
                </p>
                <p>
                  as of 28 Jan 2024, she has decided to put everything behind as her socials
                  are closed -- forever. but her soul will always stay with the Collective for
                  the sake of the future. 💗the Third Maria will always stay with us forever.🌸
                </p>
                <img class="elgBorder" style="transform: rotate(180deg);" src="media/images/elegantborder.png" alt="">
                <br>
                <button onclick="tarotPanelOpen(Maria3)">read the tarot</button><br>
                <button onclick="window.open('https://thebelovedmoon.github.io/hinaoujo')">visit the website</button>
              </div>
            </div>
          </div>
          <div style="height: 250px"></div>
          <h1>our Core Values</h1>
          <div class="tableLayout" style="filter: drop-shadow(2px 4px 16px #3d374c80);">
            <div class="twoCol">
              <div style="width: 500px; max-width: 100%; margin: 0 auto;">
                <h2>「Universality without Borders」</h2>
                <p>
                  our primary aim is to be open to all walks of life, whether it would be
                  behind the screen or in front of a real person.
                </p>
                <p>
                  we do not permit any forms of negativity within our community and beyond.
                  we strive to protect and support each other through trying times and not
                  bring them down.
                </p>
              </div>
            </div>
            <div class="twoCol">
              <div style="width: 500px; max-width: 100%; margin: 0 auto;">
                <h2>「Acceptance without Comprehension」</h2>
                <p>
                  accompanying our aim for universality is our advocacy to accept everyone's
                  flaws. our community strives on making sure everyone is widely accepted
                  regardless of their nature.
                </p>
                <p>
                  but in order to maintain that acceptance, we have put additional measures
                  to further strengthen our bond and to stay true to our promise of uniting
                  the communities together as one.
                </p>
              </div>
            </div>
          </div>
        </div>
        <div id="about" class="intro" style="background-image: url(media/images/backgrounds/vtm_2.jpg);">
          <div style="width: 625px; max-width: 100%; margin: 0 auto; text-align: center;">
            <h2>get involved</h2>
            <p>
              do you want to support the Marias in any way possible? you can reach out to the
              First Maria through the following channels:
            </p>
            <div>
              <button onclick="window.open('mailto:jelsa14015@gmail.com', '_self')">email</button>
              <button onclick="window.open('https://mobile.x.com/thebelovedmoon')">Twitter / X</button>
              <button onclick="window.open('https://instagram.com/themoon_follow')">Instagram</button>
              <button onclick="window.open('https://twitch.tv/thebelovedmoon')">Twitch</button>
              <button onclick="window.open('https://youtube.com/@thebelovedmoon')">YouTube</button>
              <button onclick="window.open('https://vstream.com/c/@thebelovedmoon')">VStream</button>
              <button onclick="window.open('https://reddit.com/user/thebelovedmoon')">Reddit</button>
              <button onclick="window.open('https://web.facebook.com/thebelovedmoon')">Facebook</button>
              <button onclick="window.open('https://soundcloud.com/thebelovedmoon')">SoundCloud</button>
              <button onclick="window.open('https://github.com/thebelovedmoon')">GitHub</button>
            </div>
            <div style="height: 125px"></div>
            <h2>special thanks</h2>
            <p>
              Horror Shop Games / azumi212<br>
              DreamingWitch (formerly Misao302)<br>
              Kitto_jpg<br>
              GitHub / GitHub Pages
            </p>
            <div style="height: 125px"></div>
            <h2>website license</h2>
            <p>
              this website is licensed under MIT. review the following terms below for details:
            </p>
            <button onclick="MITPanelOpen(MIT)">read the MIT license</button>
          </div>
        </div>
      </div>
      <footer>
        <div style="line-height: 50%; filter: drop-shadow(2px 4px 16px #3d374c80);">
           <img class="vtmLogo" style="width: 375px;" src="media/svg/vtm_typeface_wide.svg" alt="">
          <p style="font-size: smaller; color: #fff;"><i>est. 27 Dec 2022</i></p>
        </div>
      </footer>
    </div>
  </body>
</html>