diff --git a/about/assets/bullet.png b/about/assets/bullet.png new file mode 100644 index 0000000..a9ba021 Binary files /dev/null and b/about/assets/bullet.png differ diff --git a/about/assets/favicon.png b/about/assets/favicon.png new file mode 100644 index 0000000..eca1181 Binary files /dev/null and b/about/assets/favicon.png differ diff --git a/about/assets/game1.jpg b/about/assets/game1.jpg new file mode 100644 index 0000000..76c028c Binary files /dev/null and b/about/assets/game1.jpg differ diff --git a/about/assets/game2.jpg b/about/assets/game2.jpg new file mode 100644 index 0000000..2937966 Binary files /dev/null and b/about/assets/game2.jpg differ diff --git a/about/assets/game3.jpg b/about/assets/game3.jpg new file mode 100644 index 0000000..3d66a54 Binary files /dev/null and b/about/assets/game3.jpg differ diff --git a/about/assets/grid.jpg b/about/assets/grid.jpg new file mode 100644 index 0000000..846667a Binary files /dev/null and b/about/assets/grid.jpg differ diff --git a/about/assets/h2.png b/about/assets/h2.png new file mode 100644 index 0000000..23ada3f Binary files /dev/null and b/about/assets/h2.png differ diff --git a/about/assets/laser.png b/about/assets/laser.png new file mode 100644 index 0000000..0c2185f Binary files /dev/null and b/about/assets/laser.png differ diff --git a/about/assets/logorender2.png b/about/assets/logorender2.png new file mode 100644 index 0000000..fec5c27 Binary files /dev/null and b/about/assets/logorender2.png differ diff --git a/about/assets/oculus.png b/about/assets/oculus.png new file mode 100644 index 0000000..137a2f2 Binary files /dev/null and b/about/assets/oculus.png differ diff --git a/about/assets/oculushover.png b/about/assets/oculushover.png new file mode 100644 index 0000000..53e1414 Binary files /dev/null and b/about/assets/oculushover.png differ diff --git a/about/assets/sshot1.jpg b/about/assets/sshot1.jpg new file mode 100644 index 0000000..e087b11 Binary files /dev/null and b/about/assets/sshot1.jpg differ diff --git a/about/assets/sshot2.jpg b/about/assets/sshot2.jpg new file mode 100644 index 0000000..1d58272 Binary files /dev/null and b/about/assets/sshot2.jpg differ diff --git a/about/assets/sshot3.jpg b/about/assets/sshot3.jpg new file mode 100644 index 0000000..97abd06 Binary files /dev/null and b/about/assets/sshot3.jpg differ diff --git a/about/assets/sshot4.jpg b/about/assets/sshot4.jpg new file mode 100644 index 0000000..f5ebb78 Binary files /dev/null and b/about/assets/sshot4.jpg differ diff --git a/about/assets/sshot5.jpg b/about/assets/sshot5.jpg new file mode 100644 index 0000000..ebf518a Binary files /dev/null and b/about/assets/sshot5.jpg differ diff --git a/about/assets/sshot6.jpg b/about/assets/sshot6.jpg new file mode 100644 index 0000000..53a4fc8 Binary files /dev/null and b/about/assets/sshot6.jpg differ diff --git a/about/assets/sslogo.png b/about/assets/sslogo.png new file mode 100644 index 0000000..916e3e2 Binary files /dev/null and b/about/assets/sslogo.png differ diff --git a/about/assets/sslogosmall.png b/about/assets/sslogosmall.png new file mode 100644 index 0000000..7ac30b6 Binary files /dev/null and b/about/assets/sslogosmall.png differ diff --git a/about/assets/steam.png b/about/assets/steam.png new file mode 100644 index 0000000..42d8eb5 Binary files /dev/null and b/about/assets/steam.png differ diff --git a/about/assets/steamhover.png b/about/assets/steamhover.png new file mode 100644 index 0000000..f40835c Binary files /dev/null and b/about/assets/steamhover.png differ diff --git a/about/assets/supermedium-logo.png b/about/assets/supermedium-logo.png new file mode 100644 index 0000000..17391cf Binary files /dev/null and b/about/assets/supermedium-logo.png differ diff --git a/about/assets/supermedium.png b/about/assets/supermedium.png new file mode 100644 index 0000000..f273d10 Binary files /dev/null and b/about/assets/supermedium.png differ diff --git a/about/assets/supermediumheader.png b/about/assets/supermediumheader.png new file mode 100644 index 0000000..03acaed Binary files /dev/null and b/about/assets/supermediumheader.png differ diff --git a/about/index.html b/about/index.html new file mode 100644 index 0000000..2783e4f --- /dev/null +++ b/about/index.html @@ -0,0 +1,120 @@ + + + +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.

+
+
+
+ + + +
+
+ +
+

How to Play

+ +
+ +
+

Other VR Games from Supermedium

+
+ + + +
+
+ + +
+ + \ No newline at end of file diff --git a/about/style.css b/about/style.css new file mode 100644 index 0000000..dd0f437 --- /dev/null +++ b/about/style.css @@ -0,0 +1,263 @@ +body{ + background: url(assets/grid.jpg); + background-size: 1920px auto; + background-position: center 0px; + background-color: #03080c; + margin: 0; + font: 24px arial, sans-serif; + color: white; + line-height: 30px; +} +.laser{ + position: absolute; + width: 100%; + height: 407px; + top: 510px; + background-image: url('assets/laser.png'); + background-repeat: repeat-x; + background-size: contain; + z-index: -1; +} + +#all{ + width: 95%; + min-width: 360px; + max-width: 1000px; + margin: 0 auto; +} +.headerglow{ + background-image: url('assets/supermediumheader.png'); + background-repeat: no-repeat; + background-size: contain; +} +.imgfill{ + width: 100%; + max-width: 1000px; +} +#video{ + border: 1px solid #90e2de; + width: 100%; + max-width: 1000px; + margin: 60px 0; + background: black; + box-shadow: 0 0 40px rgba(144, 226, 222, 0.8); +} + +#video img{ + width: 100%; + height: 100%; +} +b{ + color: #fff; +} +a{ + color: #4573D3; +} +a:hover{ + color: #7EA8FF; +} +h1, h2, h3{ + font-family: 'Teko', sans-serif; + color: #fff; + margin: 0px 0 40px 0; +} +section{ + margin: 120px 0; +} +.short{ + margin-bottom: 9px; +} +.short+section{ + margin-top: 70px; +} +a{ + text-decoration: none; +} +h1{ + font-size: 57px; + font-weight: normal; + text-align: center; +} +h2{ + text-align: center; + font-size: 57px; + background: url('assets/h2.png'); + background-position: center 0px; + background-repeat: no-repeat; + line-height: 173px; + color: #001927; + text-shadow: 0 0 2px #fff; + font-weight: bold; + margin: 0; + padding-top: 51px; +} +h2.other{ + font-size: 50px; +} + +.supermedium-h1{ + width: 400px; + min-width: 55%; + vertical-align: middle; + margin: 20px 0; +} +.cyan{ + color: #68e0d3; +} +.pink{ + color: #ff7abc; +} +.cyanglow{ + text-shadow: 0 0 12px #68e0d3; +} +.pinkglow{ + text-shadow: 0 0 12px #ff7abc; +} +.storebuttons{ + text-align: justify; + display: flex; + justify-content: space-between; +} +footer .storebuttons{ + width: 50%; + margin: 0 auto; + height: 70px; + overflow: hidden; +} +.storebuttons a{ + display: inline-block; + width: 470px; + height: 137px; + background-image: url('assets/steam.png'); + background-size: contain; + background-repeat: no-repeat; + transition: transform 100ms, background-image 200ms; +} +.storebuttons a:hover{ + background-image: url('assets/steamhover.png'); + transform: scale(1.02, 1.02); +} +.storebuttons a:first-child{ + background-image: url('assets/oculus.png'); +} +.storebuttons a:first-child:hover{ + background-image: url('assets/oculushover.png'); +} +#intro img{ + width: 160px; + vertical-align: bottom; +} +ul{ + margin: 0; + padding-left: 40px; + list-style: url('assets/bullet.png'); + list-style-position: outside; +} +li p{ + vertical-align: middle; + display: inline-block; + height: 50px; +} +#features { + display: flex; + justify-content: space-between; +} +#features>div{ + width: 28%; + float: left; + text-align: center; +} +#features p{ + margin: 0; +} +footer{ + margin: 100px 0; + font-size: 14px; + color: #aaa; + text-align: center; +} +.screenshots { + margin-top: 40px; + display: flex; + justify-content: space-between; +} +.screenshots a{ + width: 30%; +} +.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:hover{ + box-shadow: 0 0 30px rgba(144, 226, 222, 0.8); + border-color: white; + transform: scale(1.02, 1.02); +} + +h1 span{ + display: block; +} + +@media (max-width: 1070px) { + body, body:before{ + background-size: 200% auto; + } + .laser{ + top: 45vw; + } + section{ + margin: 10% 0; + } + #video{ + margin: 5% auto; + } + .storebuttons a { + width: 100%; + } + +} +@media (max-width: 750px) { + h2.other{ + line-height: 1em; + padding-top: 90px; + padding-bottom: 10px; + } + + footer .storebuttons{ + width: 75%; + } +} +@media (max-width: 700px) { + .screenshots, #features{ + display: block; + } + .laser{ + display: none; + } + #features>div{ + float: none; + width: 100%; + margin: 10% 0; + } + h3{ + margin-bottom: 3%; + } + .screenshots a{ + display: block; + width: 100%; + margin: 5% 0; + } + +} +@media (max-width: 400px) { + body, body:before{ + background-size: 800px auto; + background-position: -220px 0px; + } + .laser{ + top: 80px; + } +} \ No newline at end of file