index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <!--
MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMF1+;;7TMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM
MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM,+>;;:;?TMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM
MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM^(;::::;;;<TMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM
MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM#:<:::::::::;;;?7MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM
MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM5<::::::;::::::::;;;;?WMMMMMMMMMMMMMMMMMMMMMMMMMMMMM
MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMB53<_::::::::::;;:;:;::;;;;;;zTMMMMMMMMMMMMMMMMMMMMMMMMMM
MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM9"=<_::::::::::::::;::::;:;;;;:;;;;;>>?TMMMMMMMMMMMMMMMMMMMMMMMM
MMMMMMMMMMMMMMMMMMMMMMMMMMMMMM#9C<:::::::::::::::::::;:;;;;;;;;;;;;;;;;>>>>??MMMMMMMMMMMMMMMMMMMMMMM
MMMMMMMMMMMMMMMMMMMMMMMMMMM9>::;::::::::::::;:::;:;;;:;:;;:;;;;;;;;;>>>>>>???=dMMMMMMMMMMMMMMMMMMMMM
MMMMMMMMMMMMMMMMMMMMMMMM#5;;;;;;;;;;;;;:;;:;:;;:;;::;;;;;;;;;;;;;>>>>>>??????==dMMMMMMMMMMMMMMMMMMMM
MMMMMMMMMMMMMMMMMMMMMMM@<<;;;;;;;;;;:;;;;;;;;:;;;;;;;;;;;;;;>;>>>>>???????====llMMMMMMMMMMMMMMMMMMMM
MMMMMMMMMMMMMMMMMMMMMM$<>>>>>;>;;;;;;;;;;;;;;;;;;;;;;;;;>>>>>>>?????????=====lllvMMMMMMMMMMMMMMMMMMM
MMMMMMMMMMMMMMMMMMMMM#???????>?>>>>>>>>>;>;;>>>>;>>>>>>>>?>?????????=====llllltttdMMMMMMMMMMMMMMMMMM
MMMMMMMMMMMMMMMMMMMMMF1===?????????????????>?>???????????????=?======llllllttttrrOMMMMMMMMMMMMMMMMMM
MMMMMMMMMMMMMMMMMMMMMF+lllll=l=======??=??==?=??=??=========l=lllllllllttttttrrrvtMMMMMMMMMMMMMMMMMM
MMMMMMMMMMMMMMMMMMMMMF1ttttltltllllllllllllllllllllllllllltllttltttttrtrrrrrvvzzzvMMMMMMMMMMMMMMMMMM
MMMMMMMMMMMMMMMMMMMMMN.zrrrrrrrrrtrttttttttttttttttttttrtrrrrrtrrrrrrvvvvvzzuuuuVjMMMMMMMMMMMMMMMMMM
MMMMMMMMMMMMMMMMMMMMMMN(jwOOCCC71<<<<<<<<<<<<<<<<<<<<<<<<<<<<?+++1117CCOOOwVXuZVZMMMMMMMMMMMMMMMMMMM
MMMMMMMMMMMMMMMMMMMM#5(:::::::::::::::::::::::::;::;;:::::::;:;;;;;;;;;;;;>;>;><+TMMMMMMMMMMMMMMMMMM
MMMMMMMMMMMMMMMMMM"<:::;;:;::;::;::;::::::;;:;:;::;::;;;:;;;;;;:;;;;;;>>>>>>>>>????zMMMMMMMMMMMMMMMM
MMMMMMMMMMMMMMMM@<<;;;;:;;:;;:;:;:;::;;:;;::;:;:;:;;:;:;;;;;;;;;;;;;>>;>>>>>?????????zMMMMMMMMMMMMMM
MMMMMMMMMMMMMMM5<;;;;;;;;;;:;;;;:;:;::;::;:::;:;:;:;;:;;;:;;;;;;;;>>>>>>>>??>??????===vMMMMMMMMMMMMM
MMMMMMMMMMMMMMC>>>;>;;;;;;;;;;:;;:;:;;:;:;;;;;;:;;;:;;;;;;;;;;;>>>>>>>>??????????====llvMMMMMMMMMMMM
MMMMMMMMMMMMMD+?>>>>>>;;;;;;;;;;;;;;jggJ;;;;;;;;;;;;;;;;;;;+jga+>>>>>??>??????====lllllO?MMMMMMMMMMM
MMMMMMMMMMMMN+?????>?>>>>>>;;;;;;;;+M@MN>;;;;;;;;;;;;;;;>>>dH@M@>>??????????=====llllltttMMMMMMMMMMM
MMMMMMMMMMMMFz==????????>>>>>>>>>>>;?HH6>;;;;;;;;>;>>>>>>>>+TMBI????????======lllllltttrOdMMMMMMMMMM
MMMMMMMMMMMMF(l====????????????>?>>>>?>>>?>>>>>>>>?>>??>????????????=======llllltttttrrrOdMMMMMMMMMM
MMMMMMMMMMMMFxlll=======?????????????????????????????????????=?=======llllllllttttrrrrvzZdMMMMMMMMMM
MMMMMMMMMMMMN(zttllllll=l=========?=???????==?=?==?==?========l=lllllllllttttttrrrrrvzzwzMMMMMMMMMMM
MMMMMMMMMMMMMpJrrrttttlllllllzgQQQmga&zzl=l====l===l=ll=lllzuaQQQkkmmOtttttrrrrrvvzzuuuXdMMMMMMMMMMM
MMMMMMMMMMMMMB<?OrrrrrrtttttwW@@@@@@@@@@@HHQmmmQQQQQQQQQHH@@@@@@@@@@HNwrrrrrvvzzzuzwVV><??HMMMMMMMMM
MMMMMMMMMM@>_:::::;<<<<?+111dH@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@HHHHK1<<<<<<>;;;;;;;;>>><+TMMMMMMM
MMMMMMMM3_::::::::::::::::::dHH@H@H@H@@@@@@@@@@@@@@@@@@@@@@@H@HHHHHHHHD;;;;;;;;;>>;>>>>>>>>>??OMMMMM
MMMMMM^(;:::;:;:;:::::::::::?MHHHH@HHHHHH@HH@H@HH@HH@@HH@HHH@HHHHHHHH#>;;;;;;;;;>>;>>>>>>>?????1dMMM
MMM#C-;;;:;;:;:;:;:;:;:::::::?TMHHHHHHHHHHH@HHH@HH@HHHHHHHHHHHHHHHM#6;;;;;;;;;>>;>>>>>>>???????==vMM
MME(;;;;;;:;::;::;::;::;:;;:::::?TWMMHHHHHHHHHHHHHHHHHHHHH###MMBYC;;;;;;;;;;>>>>;>>>>>????>????==1?M
ME(;>;;;;;;;;:;:;:;::;::;::;:;;::;:::;<?TTYWHMMMMMMMMHHBYTC<;:;;;;;;;;;;;;;>>;>>>>>>>????????===llz?
E<>>>;;;;;;;;;:;;:;;::;::;::;:::;::::::::;:::::::::::;:;;:;;;;;;;;;;;;;;>>>>>>>>>>?????????====llll1
(??>>>>;;;;;;;;;;;:;;:;;:;::;:;:;:;;;:;;::;;:;:;;:;;;:;;;;;;;;;;;;;;;;>>>>>>>>>>??>??????=====lllltt
+???>>>>>>;;;;;;;;;;;;;:;;:;;;:;:;:;:;;:;;:;;;;:;;:;;;:;;;;;;;;;;;;;>>>>>>>>>>??????????====lllllttr
1=?????>>>>>>;;;;;;;;;;;;;;;:;;;;;:;;:;;:;:;;:;;:;;;;;;;;;;;;;;;;>>>>>>>>>>???????????====lllllttrrv
ll=???????>>>>>>>>;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;>>>>>>>>>>???????????=====lllllltttrrvv
1ll===?????????>>>>>>>>>;;>;;;;;;;;;;;;;;;;;;;;;;;;;;;>>>>>>>>>>>?>???????????======llllllttttrrrvzO
(zlll======?????????>?>>>>>>>>>>>>>>;>>;>>;>>>>>>>>>>>>>>>????????????????======lllllllttttrrrrvzuXq
#(rtlllll====?????????????????>?>>?>>>>?>>?>>?>>???????????????????=?=======llllllllttttrrrrrzzzXXqM
MNv1rttttllll========?=?????????????????????????????????????=?=========llllllllttttttrrrrrvzzuXOQMMM
MMMeJ1rrrttttllllllll=l========================?==?=======l==ll=llllllllltttttttrtrrrrvzzzuuVZqMMMMM
MMMMMmvOvvrrrtttttttllltllllllll=l=l=l=l==l=l=ll=llllllllllllllltltttttttrtrrrrrvvvzzuuuuuXAgMMMMMMM
MMMMMMMg,wzuzzvvrrrrrrtttttttlllttlltltlltlltlllllllttttttttttrttrttrrrrrvvvzzzuzuuuXkkmgNMMMMMMMMMM
MMMMMMMMMMNNmZwOXzzzzzzvvvvrrrrrrrrrrrrrrrrrrtrrrrrtrrrrrrrvrvvvvvvzzzzuuzuuuuXVXXqgNMMMMMMMMMMMMMMM
MMMMMMMMMMMMMMMMNmgQvZXuuuuuuzzzzzzzzzvvzvvvvzzvvvvzzzzzzzuuzuuuuuuuuVXVXXXggNMMMMMMMMMMMMMMMMMMMMMM
MMMMMMMMMMMMMMMMMMMMMMMMMNNmaggkwkkXuuVVXuuXXkkXuuZuXVuVCXwkwQggggNNMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM
     -->
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="icon" href="images/favicon.ico" />
    <meta name="twitter:card" content="summary" />
    <meta name="twitter:site" content="@omesis_ray" />

    <meta property="og:title" content="おめシスのホームページ" />
    <meta property="og:locale" content="ja_JP" />
    <meta
      name="description"
      content="バーチャル双子Youtuber「おめがシスターズ」のおめがレイ、おめがリオのホームページです！"
    />
    <meta
      property="og:description"
      content="バーチャル双子Youtuber「おめがシスターズ」のおめがレイ、おめがリオのホームページです！"
    />
    <meta property="og:site_name" content="おめシスのホームページ" />
    <meta
      property="og:image"
      content="https://omegasisters.github.io/homepage/images/ogp.png"
    />
    <script type="application/ld+json">
      {
        "description": "バーチャル双子Youtuber「おめがシスターズ」のおめがレイ、おめがリオのホームページです！",
        "@type": "WebSite",
        "url": "/",
        "name": "おめシスのホームページ",
        "image": "/homepage/images/ogp.png",
        "headline": "おめシスのホームページ",
        "@context": "https://schema.org"
      }
    </script>

    <!-- Normalize -->
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css"
    />

    <!-- Share -->
    <script
      defer
      src="https://platform.twitter.com/widgets.js"
      id="twitter-wjs"
    ></script>

    <!-- Styles -->
    <link
      rel="stylesheet"
      href="https://use.fontawesome.com/releases/v5.12.0/css/fontawesome.css"
    />
    <link
      rel="stylesheet"
      href="https://use.fontawesome.com/releases/v5.12.0/css/brands.css"
    />
    <link
      rel="stylesheet"
      href="https://use.fontawesome.com/releases/v5.12.0/css/solid.css"
    />

    <link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.min.css" />
    <link rel="stylesheet" href="./css/index.css" />

    <script src="./index.js" defer></script>
    <link rel="manifest" href="./manifest.webmanifest" />

    <!-- Drawer -->
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/drawer/3.2.2/css/drawer.min.css"
    />

    <title>
      おめシスのホームページ |
      第１回おめシスのホームページをプルリクだけで更新していったらどうなるの？企画
    </title>
  </head>

  <body
    style="background-color: #1e2a55"
    class="drawer drawer--top drawer--navbarTopGutter"
  >
    <header class="drawer-navbar drawer-navbar--fixed" role="banner">
      <div class="drawer-container">
        <div class="drawer-navbar-header">
          <button type="button" class="drawer-toggle drawer-hamburger">
            <span class="sr-only">メニュー</span>
            <span class="menu-icon">Ω</span>
          </button>
        </div>
        <nav class="drawer-nav" role="navigation">
          <ul id="header_contents" class="drawer-menu drawer-menu--right">
            <!--      各項目へのジャンプ用ヘッダです。-->
            <!--      section_titleクラスを付与したh2要素をジャンプ用タイトルとして使用する想定です。-->
            <li>
              <a class="drawer-menu-item" href="#section_description"
                >おめシスって？</a
              >
            </li>
            <li>
              <a class="drawer-menu-item" href="#section_movie">おすすめ動画</a>
            </li>
            <li>
              <a class="drawer-menu-item" href="#section_discography"
                >ディスコグラフィー</a
              >
            </li>
            <li><a class="drawer-menu-item" href="#section_link">リンク</a></li>
            <li><a class="drawer-menu-item" href="#section_3d">3Dモデル</a></li>
          </ul>
        </nav>
      </div>
    </header>
    <main role="main">
      <div class="main" id="top-anchor">
        <div class="section hero">
          <figure class="hero__bg">
            <video class="hero__inner__bg" autoplay playsinline loop muted>
              <source src="./images/walk_omesis.webm" type="video/webm" />
              <source
                src="./images/walk_omesis_small.mp4"
                type="video/mp4"
                media="all and (max-width: 1000px)"
              />
              <source src="./images/walk_omesis.mp4" type="video/mp4" />
              <img
                src="./images/walk_omesis_placeholder.jpg"
                title="Your browser does not support the <video> tag"
              />
            </video>
          </figure>
          <div class="hero__container">
            <div class="hero__logo">
              <h1 class="logo">Ω Sisters</h1>
              <div class="logo-sub">おめがシスターズ</div>
            </div>
            <div class="guide_for_scroll">
              <a href="#section_description">
                <i class="fas fa-angle-double-down"></i>
              </a>
            </div>
          </div>
        </div>

        <div class="section firstview">
          <h1 class="section_title do-omega" id="section_firstview">
            おめがってるー？！
          </h1>
          <div class="box">
            <i class="fab fa-youtube"></i>
            <a
              href="https://www.youtube.com/channel/UCNjTjd2-PMC8Oo_-dCEss7A?sub_confirmation=1"
              target="_blank"
              rel="noopener noreferrer"
              >おめがシスターズ [Ω Sisters]</a
            >
          </div>
          <div class="video_box">
            <div class="video_wrapper">
              <iframe
                class="video lazy"
                title="【バーチャル双子Youtuber】はじめまして！おめがシスターズです！【自己紹介】"
                data-src="https://www.youtube.com/embed/GgHx7ljXs08"
                frameborder="0"
                allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
                allowfullscreen
              ></iframe>
            </div>
          </div>
        </div>
        <div class="section introduction">
          <h2 class="section_title" id="section_description">おめシスって？</h2>
          <div class="box about-us">
            <p>
              姉が赤いリボンのおめがレイ、<br
                class="br-sp"
              />妹が青いリボンのおめがリオ。
            </p>
            <p>
              バーチャルを武器にした個性的な企画から、歌動画にゲーム実況と幅広いジャンルの動画をYouTubeに投稿し活動している。
            </p>
          </div>

          <div class="box playlist">
            <h2 class="section_title" id="section_movie">
              ⭐【初心者向け】<br class="br-sp" />すごい面白い動画
            </h2>

            <!-- Swiper -->
            <div class="swiper-container">
              <div class="videos swiper-wrapper" id="beginner-playlist"></div>
              <!-- Add Pagination -->
              <div class="swiper-pagination"></div>
              <!-- Add Arrows -->
              <div class="swiper-button-next"></div>
              <div class="swiper-button-prev"></div>
            </div>

            <a
              href="https://www.youtube.com/channel/UCNjTjd2-PMC8Oo_-dCEss7A/videos"
              target="_blank"
              rel="noopener noreferrer"
            >
              他の動画も見る
            </a>
          </div>

          <div class="section discography">
            <h2 class="section_title" id="section_discography">
              ディスコグラフィー
            </h2>
            <div class="box">
              <h3 style="margin-bottom: 1em;">
                シンクロニティ by おめシス × BACK-ON
              </h3>
              <a href="./synchronity.html">
                <img
                  src="https://i.gyazo.com/76ce4b6e0d4c1080b2319d28b9559246.jpg"
                  width="300"
                />
              </a>
            </div>
            <div id="preact-music"></div>
          </div>
        </div>
      </div>

      <div class="section links">
        <h2 class="section_title" id="section_link">リンク</h2>
        <div class="box">
          <h2><i class="fab fa-youtube"></i>YouTube</h2>
          <a
            href="https://www.youtube.com/channel/UCNjTjd2-PMC8Oo_-dCEss7A?sub_confirmation=1"
            target="_blank"
            rel="noopener noreferrer"
            >おめがシスターズ [Ω Sisters]</a
          >
        </div>
        <div class="box">
          <h2><i class="fab fa-twitter"></i>Twitter</h2>

          <div class="profiles">
            <div class="profile omesis_ray">
              <a
                href="https://twitter.com/omesis_ray"
                target="_blank"
                rel="noopener noreferrer"
                class="omesis_ray"
              >
                <div class="image">
                  <img
                    class="lazy"
                    src="./images/ray_icon_mini.jpg"
                    data-src="./images/ray_icon.jpg"
                    alt="omesis_ray"
                  />
                </div>

                <div>
                  <h3>おめがレイ</h3>
                  @omesis_ray
                </div>
              </a>
              <a
                class="twitter-timeline"
                data-height="500"
                data-dnt="true"
                data-theme="dark"
                href="https://twitter.com/omesis_ray?ref_src=twsrc%5Etfw"
                data-chrome="nofooter noscrollbar"
              >
                Tweets by omesis_ray
              </a>
            </div>

            <div class="profile omesis_rio">
              <a
                href="https://twitter.com/omesis_rio"
                target="_blank"
                rel="noopener noreferrer"
                class="omesis_rio"
              >
                <div class="image">
                  <img
                    class="lazy"
                    src="./images/rio_icon_mini.jpg"
                    data-src="./images/rio_icon.jpg"
                    alt="omesis_rio"
                  />
                </div>

                <div>
                  <h3>おめがリオ</h3>
                  @omesis_rio
                </div>
              </a>
              <a
                class="twitter-timeline"
                data-height="500"
                data-dnt="true"
                data-theme="dark"
                href="https://twitter.com/omesis_rio?ref_src=twsrc%5Etfw"
                data-chrome="nofooter noscrollbar"
              >
                Tweets by omesis_rio
              </a>
            </div>
          </div>
        </div>
        <div class="box">
          <h2><i class="fas fa-gifts"></i>FANBOX</h2>
          <a
            href="https://www.pixiv.net/fanbox/creator/31737746"
            target="_blank"
            rel="noopener noreferrer"
            >pixiv FANBOX</a
          >
        </div>
        <div class="box">
          <h2><i class="fab fa-line"></i>LINE STORE</h2>
          <a
            href="https://store.line.me/stickershop/author/753404"
            target="_blank"
            rel="noopener noreferrer"
            >LINEスタンプ</a
          >
        </div>
        <div class="box">
          <h2><i class="fas fa-envelope"></i>Contact</h2>
          <a
            href="https://upd8.jp/contact_us/index.html?sc=%E3%81%8A%E3%82%81%E3%81%8C%E3%82%B7%E3%82%B9%E3%82%BF%E3%83%BC%E3%82%BA%20[%CE%A9%20Sisters]"
            target="_blank"
            rel="noopener noreferrer"
            >お問い合わせはこちらから</a
          >
        </div>
        <div class="box">
          <h2><i class="fab fa-github"></i>GitHub</h2>
          <a
            href="https://github.com/omegasisters/homepage"
            target="_blank"
            rel="noopener noreferrer"
            >プルリク待ってます！！！！</a
          >
        </div>
        <div class="box">
          <a
            class="share-button"
            href="https://twitter.com/intent/tweet?text=%23おめシスはいいぞ &url=https://omegasisters.github.io/homepage"
          >
            #おめシスはいいぞ
          </a>
        </div>

        <div class="c-alpha">
          <a class="c-alpha__link" href="./alpha.html">
            α
          </a>
        </div>
      </div>

      <div class="section exotic">
        <h2 class="section_title" id="section_3d">3Dモデル</h2>
        <div id="preact"></div>
      </div>
    </main>

    <a href="#top-anchor">
      <div class="c-unchan c-unchan--fixedBottom">
        <div class="fukidashi" ontouchstart="">トップに戻る</div>
        <div class="c-unchan__inner">
          <div class="c-unchan__tsuno">
            <div class="c-unchan__tsuno__inner"></div>
          </div>
          <div class="c-unchan__toguro c-unchan__toguro--top"></div>
          <div class="c-unchan__toguro c-unchan__toguro--middle">
            <div class="c-unchan__eye c-unchan__eye--left">
              <div></div>
            </div>
            <div class="c-unchan__eye c-unchan__eye--right">
              <div></div>
            </div>
          </div>
          <div class="c-unchan__toguro c-unchan__toguro--bottom"></div>
          <div class="c-unchan__mouth">
            <div class="c-unchan__mouth__inner">
              <div></div>
            </div>
          </div>
        </div>
      </div>
    </a>

    <script
      src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
      integrity="sha256-pasqAKBDmFT4eHoN2ndd6lN370kFiGUFyTiUHWhU7k8="
      crossorigin="anonymous"
      defer
    ></script>
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/iScroll/5.2.0/iscroll.min.js"
      defer
    ></script>
    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/drawer/3.2.2/js/drawer.min.js"
      defer
    ></script>
    <script type="text/javascript" src="./assets/js/navbar.js" defer></script>
    <script type="text/javascript" src="./assets/js/lazyload.js" defer></script>
    <script src="https://unpkg.com/swiper/js/swiper.min.js" defer></script>
    <script
      type="text/javascript"
      src="./assets/js/ytplaylist.js"
      defer
    ></script>
    <script
      type="text/javascript"
      src="./assets/js/lucky_rayrio.js"
      defer
    ></script>
    <script
      type="text/javascript"
      src="./assets/preact_build/bundle.js"
    ></script>
    <script
      type="text/javascript"
      src="./assets/js/console_unchan.js"
      defer
    ></script>
  </body>
</html>