watchparty/website/index.html

<!DOCTYPE html>
<html>
  <head>
    <link rel="apple-touch-icon" sizes="57x57" href="./icons/apple-icon-57x57.png" />
    <link rel="apple-touch-icon" sizes="60x60" href="./icons/apple-icon-60x60.png" />
    <link rel="apple-touch-icon" sizes="72x72" href="./icons/apple-icon-72x72.png" />
    <link rel="apple-touch-icon" sizes="76x76" href="./icons/apple-icon-76x76.png" />
    <link rel="apple-touch-icon" sizes="114x114" href="./icons/apple-icon-114x114.png" />
    <link rel="apple-touch-icon" sizes="120x120" href="./icons/apple-icon-120x120.png" />
    <link rel="apple-touch-icon" sizes="144x144" href="./icons/apple-icon-144x144.png" />
    <link rel="apple-touch-icon" sizes="152x152" href="./icons/apple-icon-152x152.png" />
    <link rel="apple-touch-icon" sizes="180x180" href="./icons/apple-icon-180x180.png" />
    <link rel="icon" type="image/png" sizes="192x192" href="./icons/android-icon-192x192.png" />
    <link rel="icon" type="image/png" sizes="32x32" href="./icons/favicon-32x32.png" />
    <link rel="icon" type="image/png" sizes="96x96" href="./icons/favicon-96x96.png" />
    <link rel="icon" type="image/png" sizes="16x16" href="./icons/favicon-16x16.png" />
    <link rel="icon" href="./icons/favicon.ico" />
    <link rel="manifest" href="./manifest.json" />
    <meta name="msapplication-TileImage" content="./icons/ms-icon-144x144.png" />
    <link rel="stylesheet" type="text/css" href="./font.css" />
    <link rel="stylesheet" type="text/css" href="./styles/index.css" />
    <script src="./scripts/Stickied.js"></script>
    <title>Watch Party</title>
  </head>
  <body>
    <header data-header-visible="false">
      <brand data-font="serif">WATCH PARTY</brand>
      <spacer></spacer>
      <a href="./beta/#request" data-font="sans">GET CHROME EXTENSION</a>
      <a href="https://www.paypal.me/Ayushya" data-font="sans">SUPPORT WATCH PARTY</a>
    </header>
    <section class="landing">
      <a href="./beta/#request" class="get" data-font="sans">GET CHROME EXTENSION</a>
      <a href="#" class="brand" data-font="serif">
        <span>
          WATCH PARTY
        </span>
      </a>
    </section>
    <section class="intro">
      <div class="inner">
        <img src="./media/intro.gif" />
        <div class="supports" data-font="sans">Watch your favorites, with your favorite people</div>
        <div class="supports" data-font="sans">Watch Party Works With</div>
        <div class="supported" data-font="sans">
          <div class="netflix"></div>
          <div class="hulu"></div>
          <div class="disney"></div>
          <div class="prime"></div>
          <div class="youtube"></div>
        </div>
      </div>
    </section>
    <section class="features">
      <div class="inner" data-font="sans">
        <feature>
          <img src="./media/hideable.gif" data-color="rgb(100,100,100)" />
          <div>
            Hide the chat - focus on the show, while staying synced. Built to not be in your way
            but, also be there when you need it.
          </div>
        </feature>
        <feature>
          <img src="./media/noauth.gif" />
          <div>
            No signup or login required. Just ready to go.
          </div>
        </feature>
        <feature>
          <img src="./media/giphy.gif" />
          <div>
            When words aren't enough, use a GIF from Giphy
          </div>
        </feature>
        <feature>
          <img src="./media/timed.gif" />
          <div>
            What happens in Watch Party, stays in Watch Party - for 24 hours - then it's gone.
          </div>
        </feature>
        <feature>
          <img src="./media/beforeorafter.gif" />
          <div>
            Start the party before the show, or after the show. Just do what you want.
          </div>
        </feature>
        <feature>
          <img src="./media/track.jpeg" />
          <div>
            Watch Party syncs your video with your party. Know when they pause and play.
          </div>
        </feature>
      </div>
    </section>
    <footer data-font="sans">
      <div class="inner">
        <footerline>
          <div>
            © Ayushya Amitabh, 2020
          </div>
          <spacer></spacer>
          <div>
            Built with ❤️ for <a href="https://www.google.com/chrome/">Google Chrome</a> using
            <a href="https://firebase.google.com/">Firebase</a>,
            <a href="https://material-ui.com/">Material-UI</a>,
            <a href="https://reactjs.org/">React JS</a> ,
            <a href="https://nodejs.org/en/">Node.js</a> & <a href="https://giphy.com/">Giphy</a>
          </div>
        </footerline>
        <footerline>
          <a href="./beta/#request" data-font="sans">GET CHROME EXTENSION</a>
          <spacer></spacer>
          <a href="https://www.paypal.me/Ayushya" data-font="sans">SUPPORT WATCH PARTY</a>
        </footerline>
      </div>
    </footer>
  </body>
</html>