work on landing page

index.html

@@ -33,12 +33,16 @@
     <div class="laser"></div>
     <div id="lightbox" onclick="closeLb()"><img src=""></div>
     <div id="all">
-      <img src="site/assets/supermedium-logo.png" class="imgfill headerglow">
+      <a href="https://supermedium.com"><img src="site/assets/supermedium-logo.png" class="imgfill headerglow"></a>
+
       <img src="site/assets/sslogo.png" class="imgfill">
+
       <h1>An open source clone of Beat Saber with 6000 songs</h1>
+
       <div id="video">
-        <img src="site/assets/sshot2.jpg">
+        <iframe width="100%" height="100%" src="https://www.youtube.com/embed/PKOPO4OqgYo" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
       </div>
+
       <section>
         <h1>
           <span class="cyan">Play now for free on </span><span class="pink"><img src="site/assets/supermedium.png" class="supermedium-h1"></span> <span class="pink">The&nbsp;Virtual&nbsp;Reality&nbsp;Browser</span>
@@ -51,12 +55,15 @@
       </section>
 
       <section>
-        <p id="intro">
+        <div id="intro">
-          <img src="site/assets/sslogosmall.png">lets you search and play community-created Beat Saber songs from Beat Saver. You can play it for free via Supermedium where it loads in seconds, and you don't need to install any mods!</p>
+          <p><img src="site/assets/sslogosmall.png">was created from the ground up to let you search and play from 6000+ community-created Beat Saber songs without having to install any mods.</p>
+          <p>We rebuilt Beat Saber entirely using <a href="https://aframe.io">A-Frame</a>, a VR web framework we built.
+          <p>And we <a href="https://github.com/supermedium/supersaber">open sourced the code</a> for the developer community to check out.</p>
+        </div>
         <div class="screenshots">
-          <img src="site/assets/sshot1.jpg">
+          <img src="site/assets/screenshots/supersaber12.jpg">
-          <img src="site/assets/sshot2.jpg">
+          <img src="site/assets/screenshots/supersaber06.jpg">
-          <img src="site/assets/sshot3.jpg">
+          <img src="site/assets/screenshots/supersaber13.jpg">
         </div>
       </section>
 
@@ -64,71 +71,66 @@
         <div id="features">
           <div>
             <h3 class="cyanglow">SLICE TO THE BEAT</h3>
-            <p>Just like in Beat Saber, swing your light sabers to the beat.</p>
+            <p>Just like in Beat Saber, slice and dice the music with light sabers.</p>
           </div>
           <div>
-            <h3 class="pinkglow">+2500 SONGS</h3>
+            <h3 class="pinkglow">+6000 SONGS</h3>
-            <p>Play from over 2500 community songs sourced from beatsaver.com!</p>
+            <p>Play from over 6000 community songs from <a href="https://beatsaver.com">BeatSaver</a>!</p>
           </div>
           <div>
             <h3 class="cyanglow">PLAY FOR FREE</h3>
-            <p>Super Saber instantly loads from start to finish in just seconds, no installs!</p>
+            <p>Loads in seconds. No mods, no installs, no wait times.</p>
           </div>
         </div>
         <div class="screenshots">
-          <img src="site/assets/sshot4.jpg">
+          <img src="site/assets/screenshots/supersaber07.jpg">
-          <img src="site/assets/sshot5.jpg">
+          <img src="site/assets/screenshots/supersaber17.jpg">
-          <img src="site/assets/sshot6.jpg">
+          <img src="site/assets/screenshots/supersaber11.jpg">
         </div>
       </section>
 
       <section class="short">
         <h2>How to Play</h2>
-        <ul>
+        <img src="site/assets/tutorial.png" width="100%">
-          <li><p>Have an HTC Vive or Oculus Rift</p></li>
+        <p style="text-align: center">Install Supermedium on a Vive or Rift and navigate to Super Saber!</p>
-          <li><p>Install Supermedium from Steam or Oculus Store</p>
-          <li><p>Navigate to Super Saber from Supermedium</p></li>
-        </ul>
-      </section>
-
-      <section>
-        <h2 class="other">Other VR Games from Supermedium</h2>
-        <div class="screenshots">
-          <a href="http://supermedium.com/" title="Sound Boxing"><img src="site/assets/game1.jpg"></a>
-          <a href="https://supermedium.github.io/supersays/src/" title="Super Says"><img src="site/assets/game2.jpg"></a>
-          <a href="https://supermedium.com/blog/oasis" title="Gunters of Oasis"><img src="site/assets/game3.jpg"></a>
-        </div>
       </section>
 
       <footer>
-        <img src="site/assets/supermedium-logo.png" class="imgfill">
+        <a href="https://supermedium.com"><img src="site/assets/supermedium-logo.png" class="imgfill"></a>
         <div class="storebuttons">
           <a href="https://www.oculus.com/experiences/rift/1629560483789871/"></a>
           <a href="https://store.steampowered.com/app/803010/Supermedium__Virtual_Reality_Browser/"></a>
         </div>
-        <p>
+        <p id="credit">
           <br>
-          <b>Super Saber</b> is shamelessly based on <b>Beat Saber</b>, an original game from by the awesome team at <a href="http://www.hyperbolicmagnetism.com/">Hyperbolic Magnetism</a></p>
+          <b>Super Saber</b> is shamelessly based on <b>Beat Saber</b>, an original game from by the awesome team at <a href="http://www.hyperbolicmagnetism.com/"><b>Hyperbolic Magnetism</b>.</a>
+          <br>
+          Support them with a purchase!
+          <br>
+          Songs from the massive <a href="https://beatsaver.com"><b>BeatSaver</b></a> community.
+        </p>
       </footer>
     </div>
 
-    <script type="text/javascript">
+    <script>
-      var lb;
+      (function () {
-      function setupLb () {
+        let lb;
-        lb = document.getElementById('lightbox');
+        function setupLb () {
-        const sshots = document.querySelectorAll('.screenshots>img');
+          lb = document.getElementById('lightbox');
-        for (let i = 0; i < sshots.length; i++){
+          const sshots = document.querySelectorAll('.screenshots>img');
-          sshots[i].addEventListener('click', showImg);
+          for (let i = 0; i < sshots.length; i++){
+            sshots[i].addEventListener('click', showImg);
+          }
         }
-      }
+        function showImg (ev) {
-      function showImg (ev) {
+          lb.querySelector('img').src = ev.target.src;
-        lb.querySelector('img').src = ev.target.src;
+          lb.classList.add('opened');
-        lb.classList.add('opened');
+        }
-      }
+        function closeLb () {
-      function closeLb () {
+          lb.classList.remove('opened')
-        lb.classList.remove('opened')
+        }
-      }
+        setupLb();
-      setupLb();
+      })();
     </script>
   </body>
 </html>

site/index.css

@@ -59,18 +59,20 @@ body {
   max-width: 1000px;
 }
 #video {
-  border: 1px solid #90e2de;
-  width: 100%;
-  max-width: 1000px;
-  margin: 60px 0;
   background: black;
+  border: 1px solid #90e2de;
   box-shadow: 0 0 40px rgba(144, 226, 222, 0.8);
+  height: 560px;
+  margin: 60px 0;
+  max-width: 1000px;
+  width: 100%;
 }
 
-#video img {
+#video iframe {
  width: 100%;
  height: 100%;
 }
+
 b {
   color: #fff;
 }
@@ -86,7 +88,7 @@ h1, h2, h3 {
   margin: 0px 0 40px 0;
 }
 section {
-  margin: 120px 0;
+  margin: 80px 0;
 }
 .short {
   margin-bottom: 9px;
@@ -100,6 +102,7 @@ a {
 h1 {
   font-size: 57px;
   font-weight: normal;
+  line-height: 57px;
   text-align: center;
 }
 h2 {
@@ -167,6 +170,9 @@ footer .storebuttons {
 .storebuttons a:first-child:hover {
   background-image: url('assets/oculushover.png');
 }
+#intro {
+  text-align: center;
+}
 #intro img {
   width: 160px;
   vertical-align: bottom;
@@ -195,7 +201,7 @@ li p {
   margin: 0;
 }
 footer {
-  margin: 100px 0;
+  margin: 80px 0;
   font-size: 14px;
   color: #aaa;
   text-align: center;
@@ -236,9 +242,6 @@ h1 span {
   .laser {
     top: 45vw;
   }
-  section {
-    margin: 10% 0;
-  }
   #video {
     margin: 5% auto;
   }
@@ -291,3 +294,7 @@ h1 span {
     top: 80px;
   }
 }
+
+#credit {
+  font-size: 16px;
+}