diff --git a/about/index.html b/about/index.html index 40125c4..8f3bd4f 100644 --- a/about/index.html +++ b/about/index.html @@ -1,134 +1,133 @@ - -Super Saber - - + + Super Saber + + - - - - - - + + + + + + - - - - - - + + + + + + - + - - + + - - - - - - - - -
- -
- - -
- -
-
-

- Now on The Virtual Reality Browser -

- -
- - -
-
- -
-

- is a lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc efficitur et libero id interdum. Aenean id mauris cursus, fermentum lorem nec, congue nisi. Suspendisse semper vitae nisi a interdum. In finibus magna mi. Pellentesque sit amet diam dolor. Sed in venenatis magna. -

-
- - - -
-
- -
-
-
-

ONE COOL FEATURE

-

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod - tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam

+ + + + + + +
+ +
+ + +
+
-
-

+2000 SONGS

-

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

-
-
-

JUST PLAY

-

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.

-
-
-
- - - -
-
+
+

+ Play now for free on The Virtual Reality Browser +

-
-

How to Play

-
    -

  • Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam

    • -

  • Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

    -

  • Duis aute irure dolor in reprehenderit in voluptate velit esse proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    • -
-
+
+ + +
+
-
-

Other VR Games from Supermedium

-
- - - +
+

+ 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!

+
+ + + +
+
+ +
+
+
+

SLICE TO THE BEAT

+

Just like in Beat Saber, swing your light sabers to the beat.

+
+
+

+2500 SONGS

+

Play from over 2500 community songs sourced from beatsaver.com!

+
+
+

PLAY FOR FREE

+

Super Saber instantly loads from start to finish in just seconds, no installs!

+
+
+
+ + + +
+
+ +
+

How to Play

+
    +

  • Have an HTC Vive or Oculus Rift

    • +

  • Install Supermedium from Steam or Oculus Store

    +

  • Navigate to Super Saber from Supermedium

    • +
+
+ +
+

Other VR Games from Supermedium

+
+ + + +
+
+ +
+ +
+ + +
+

+
+ Super Saber is shamelessly based on Beat Saber, an original game from by the awesome team at Hyperbolic Magnetism

+
-
- -
- - \ No newline at end of file + + + diff --git a/about/style.css b/about/style.css index b6ad8d5..8d80d89 100644 --- a/about/style.css +++ b/about/style.css @@ -1,4 +1,4 @@ -body{ +body { background: url(assets/grid.jpg); background-size: 1920px auto; background-position: center 0px; @@ -8,7 +8,7 @@ body{ color: white; line-height: 30px; } -.laser{ +.laser { position: absolute; width: 100%; height: 407px; @@ -18,7 +18,7 @@ body{ background-size: contain; z-index: -1; } -#lightbox{ +#lightbox { cursor: pointer; position: fixed; top: 0; @@ -33,32 +33,32 @@ body{ justify-content: center; transition: opacity 3s; } -#lightbox.opened{ +#lightbox.opened { display: flex; opacity: 1; } -#lightbox img{ +#lightbox img { width: 100%; max-width: 1000px; border: 1px solid #005a83; box-shadow: 0 0 25px rgba(144, 226, 222, 0.6); } -#all{ +#all { width: 95%; min-width: 360px; max-width: 1000px; margin: 0 auto; } -.headerglow{ +.headerglow { background-image: url('assets/supermediumheader.png'); background-repeat: no-repeat; background-size: contain; } -.imgfill{ +.imgfill { width: 100%; max-width: 1000px; } -#video{ +#video { border: 1px solid #90e2de; width: 100%; max-width: 1000px; @@ -67,42 +67,42 @@ body{ box-shadow: 0 0 40px rgba(144, 226, 222, 0.8); } -#video img{ +#video img { width: 100%; height: 100%; } -b{ +b { color: #fff; } -a{ +a { color: #4573D3; } -a:hover{ +a:hover { color: #7EA8FF; } -h1, h2, h3{ +h1, h2, h3 { font-family: 'Teko', sans-serif; color: #fff; margin: 0px 0 40px 0; } -section{ +section { margin: 120px 0; } -.short{ +.short { margin-bottom: 9px; } -.short+section{ +.short+section { margin-top: 70px; } -a{ +a { text-decoration: none; } -h1{ +h1 { font-size: 57px; font-weight: normal; text-align: center; } -h2{ +h2 { text-align: center; font-size: 57px; background: url('assets/h2.png'); @@ -115,40 +115,40 @@ h2{ margin: 0; padding-top: 51px; } -h2.other{ +h2.other { font-size: 50px; } -.supermedium-h1{ +.supermedium-h1 { width: 400px; min-width: 55%; vertical-align: middle; margin: 20px 0; } -.cyan{ +.cyan { color: #68e0d3; } -.pink{ +.pink { color: #ff7abc; } -.cyanglow{ +.cyanglow { text-shadow: 0 0 12px #68e0d3; } -.pinkglow{ +.pinkglow { text-shadow: 0 0 12px #ff7abc; } -.storebuttons{ +.storebuttons { text-align: justify; display: flex; justify-content: space-between; } -footer .storebuttons{ +footer .storebuttons { width: 50%; margin: 0 auto; height: 70px; overflow: hidden; } -.storebuttons a{ +.storebuttons a { display: inline-block; width: 470px; height: 137px; @@ -157,134 +157,137 @@ footer .storebuttons{ background-repeat: no-repeat; transition: transform 100ms, background-image 200ms; } -.storebuttons a:hover{ +.storebuttons a:hover { background-image: url('assets/steamhover.png'); transform: scale(1.02, 1.02); } -.storebuttons a:first-child{ +.storebuttons a:first-child { background-image: url('assets/oculus.png'); } -.storebuttons a:first-child:hover{ +.storebuttons a:first-child:hover { background-image: url('assets/oculushover.png'); } -#intro img{ +#intro img { width: 160px; vertical-align: bottom; } -ul{ +ul { margin: 0; padding-left: 40px; list-style: url('assets/bullet.png'); list-style-position: outside; } -li p{ +li p { vertical-align: middle; display: inline-block; height: 50px; } -#features { +#features { display: flex; justify-content: space-between; } -#features>div{ +#features>div { width: 28%; float: left; text-align: center; } -#features p{ +#features p { margin: 0; } -footer{ +footer { margin: 100px 0; font-size: 14px; color: #aaa; text-align: center; } -.screenshots { +.screenshots { margin-top: 40px; display: flex; justify-content: space-between; } -.screenshots a{ +.screenshots a { width: 30%; } -.screenshots img{ +.screenshots img { cursor: pointer; border: 1px solid #005a83; box-shadow: 0 0 18px rgba(144, 226, 222, 0.3); width: 100%; transition: box-shadow 120ms, border-color 120ms, transform 120ms; } -.screenshots>img{ +.screenshots>img { + max-height: 300px; width: 30%; } -.screenshots img:hover{ +.screenshots img:hover { box-shadow: 0 0 30px rgba(144, 226, 222, 0.8); border-color: white; transform: scale(1.02, 1.02); } -h1 span{ +h1 span { display: block; } -@media (max-width: 1070px) { - body, body:before{ +@media (max-width: 1070px) { + body, body:before { background-size: 200% auto; } - .laser{ + .laser { top: 45vw; } - section{ + section { margin: 10% 0; } - #video{ + #video { margin: 5% auto; } - .storebuttons a { + .storebuttons a { width: 100%; } } -@media (max-width: 750px) { - h2.other{ + +@media (max-width: 750px) { + h2.other { line-height: 1em; padding-top: 90px; padding-bottom: 10px; } - footer .storebuttons{ + footer .storebuttons { width: 75%; } } -@media (max-width: 700px) { - .screenshots, #features{ + +@media (max-width: 700px) { + .screenshots, #features { display: block; } - .laser{ + .laser { display: none; - } - #features>div{ + } + #features>div { float: none; width: 100%; margin: 10% 0; } - h3{ + h3 { margin-bottom: 3%; } - .screenshots>img, .screenshots>a{ + .screenshots>img, .screenshots>a { display: block; width: 100%; margin: 5% 0; } - } -@media (max-width: 400px) { - body, body:before{ + +@media (max-width: 400px) { + body, body:before { background-size: 800px auto; background-position: -220px 0px; } - .laser{ + .laser { top: 80px; - } -} \ No newline at end of file + } +}