game concept

HTML <body>

<div id="home" class="window_center">
  <div class="window">
    <div class="wbox">
      <i class="fa fa-globe" style="margin-bottom:15px;" aria-hidden="true"></i>
      <h1 style="margin-bottom:20px;">Welcome to Orbity.</h1>
      <input class="button alt play_anon" type="button" style="width:55%;" value="Play Now!">
      <div style="margin-bottom:10px;">- or Login -</div>
      <input id="login_name" style="width:35%;" type="text" placeholder="Username / Email">
      <input id="login_pass" style="width:35%;" type="password" placeholder="Password">
      <input id="main_login" class="button" style="width:72%;" type="button" value="Login">
      <a style="display:block; color:#FFF; margin-bottom:10px;" href="/signup.php">- or Signup -</a>
      <input class="button alt2" type="button" style="width:55%;" value="Begin an Adventure">
      <p style="font-size:0.75em; color:#999; margin-top:20px;">Enjoy your flight.</p>
    </div>
  </div>
</div>

<div id="respawn" class="window_center">
  <div class="window">
    <div class="wbox">
      <i class="fa fa-frown-o" style="margin-bottom:15px;" aria-hidden="true"></i>
      <h1 style="margin-bottom:20px;">You crashed.</h1>
      <input class="button alt play_anon" type="button" style="width:55%;" value="Respawn">
      <p>Score: 92,310</p>
      <p>You were taken out by: Joe</p>
      <p>Time alive: 6 minutes 32 seconds</p>
      <p style="font-size:0.75em; color:#999; margin-top:20px;">Enjoy your flight.</p>
    </div>
  </div>
</div>

<div id="nav" class="nwrapper">
	<div class="nav">
		<ul class="lnav">
			<li class="logo">
				<img src="http://orbit.notomono.onnix.net/images/ship.png" alt="">
				<a href="/" title="Orbity | An Online Multiplayer Space Orbiting Game">Orbity.io</a>
			</li>
			<li><a href="#" data-featherlight="/how-to-play.php">How to Play <i class="fa fa-question-circle" aria-hidden="true"></i></a></li>
			<li><a href="#" data-featherlight="/leaderboards.php">Leaderboards <i class="fa fa-line-chart" aria-hidden="true"></i></a></li>
			<li><a href="#" data-featherlight="/feedback.php">Feedback <i class="fa fa-comment-o"></i></a></li>
			<li><a class="perk_link" href="#" data-featherlight="/perks.php">Perks <span class="fa fa-bolt"></span></a></li>
		</ul>
		<ul class="rnav">
			<li><a href="#" data-featherlight="#login">Login <i class="fa fa-sign-in" aria-hidden="true"></i></a> | <a href="#" data-featherlight="#signup .test">Signup <i class="fa fa-chevron-circle-right" aria-hidden="true"></i></a></li>
			<li><small>v0.0.1 | <a href="#" data-featherlight="/changelog.php">Changelog</a></small></li>
			<li><small>© 2016 <a style="text-decoration:none; color:#1CC1F7;" href="http://www.2dio.com" target="_blank" title="A two-man dev studio in Seattle, WA">2Dio Studio</a></small></li>
		</ul>
		<div class="clear"></div>
	</div>
</div>

</div>

CSS <style>

* {padding:0; margin:0; box-sizing:border-box;}
body {background: #F9F9F9 url('http://orbit.notomono.onnix.net/images/bg.jpg') repeat; font-family:monospace; cursor:crosshair;} /*overflow:hidden;*/

a {text-decoration:none; color:#1CC1F7;}
a:hover {opacity:0.9;}
.clear {clear:both;}

.perk_link {color:#F96145; transition:color 150ms ease-in;}
	.perk_link:hover {color:#FF4522;}

/* Game */

.game_wrapper {position:fixed; width:100%; height:calc(100% - 35px);}

/* Homepage / Space */

.space-bg {background-color:#000; z-index:-5;}

.space-bg, .stars, .twinkle, .clouds {
	position:fixed;
	width:100%;
	height:100%;
}

.stars {
  top:0; right:0; bottom:0; left:0; margin:auto;
	background:#000 url('http://orbit.notomono.onnix.net/images/stars.png') repeat top center;
  width:1920px; height:1920px;
	z-index:-4;
	opacity:0.5;
  animation:spin 1440s linear infinite;
}

.twinkle{
	background:transparent url('http://orbit.notomono.onnix.net/images/twinkle.png') repeat top center;
	z-index:-3;
	animation:move-twink-back 200s linear infinite;
  opacity:0.4;
}

.clouds{
	background:transparent url('http://orbit.notomono.onnix.net/images/clouds.png') repeat top center;
	z-index:-2;
	animation:move-clouds-back 200s linear infinite;
}

@keyframes move-twink-back {
		from {background-position:0 0;}
		to {background-position:-10000px 5000px;}
}
@-webkit-keyframes move-twink-back {
		from {background-position:0 0;}
		to {background-position:-10000px 5000px;}
}
@-moz-keyframes move-twink-back {
		from {background-position:0 0;}
		to {background-position:-10000px 5000px;}
}
@-ms-keyframes move-twink-back {
		from {background-position:0 0;}
		to {background-position:-10000px 5000px;}
}

@keyframes move-clouds-back {
		from {background-position:0 0;}
		to {background-position:10000px 0;}
}
@-webkit-keyframes move-clouds-back {
		from {background-position:0 0;}
		to {background-position:10000px 0;}
}
@-moz-keyframes move-clouds-back {
		from {background-position:0 0;}
		to {background-position:10000px 0;}
}
@-ms-keyframes move-clouds-back {
		from {background-position: 0;}
		to {background-position:10000px 0;}
}

/* Homepage / Earth */
 
.earth-bg {
	position:relative; top:50%; transform: translateY(-50%);
  margin:auto;
	max-width:1000px;
}
	.earth-bg img.bgrotate {width:100%; min-width:500px; animation:spin 600s linear infinite;}

@-moz-keyframes spin {
	from { -moz-transform: rotate(0deg); }
	to { -moz-transform: rotate(359deg); }
}
@-webkit-keyframes spin {
		from { -webkit-transform: rotate(0deg); }
		to { -webkit-transform: rotate(359deg); }
}
@keyframes spin {
		from {transform:rotate(0deg);}
		to {transform:rotate(359deg);}
}

/* Homepage / Earth Orbiters */

.horbiter {
	position:absolute; top:0; right:0; bottom:0; left:0; margin:auto;
}

.horbit1{
	animation: orbit1 80s linear infinite; /* Chrome, Firefox 16+, IE 10+, Safari 5 */
}

@keyframes orbit1 {
	from { 	transform: rotate(0deg) translateX(525px) rotate(180deg); }
	to   {  transform: rotate(360deg) translateX(525px) rotate(180deg); }
}

.horbit2{
	animation: orbit2 100s linear infinite; /* Chrome, Firefox 16+, IE 10+, Safari 5 */
}

@keyframes orbit2 {
	from { 	transform: rotate(0deg) translateX(575px) rotate(180deg); }
	to   {  transform: rotate(360deg) translateX(575px) rotate(180deg); }
}

.navbutton {display:none; position:absolute; top:0; right:0; z-index:1; width:50px; height:50px; font-size:16px; text-align:center; color:#FFF; opacity:0.8;}
	.navbutton .fa {position:relative; top:50%; transform:translateY(-50%);}

/* Centered Lightbox Window */

.window_center {display:none; position:absolute; top:50%; right:0; left:0; max-width:500px; margin:auto; color:#333; transform: translateY(-50%);}
.window {width:500px; height:500px; border-radius:250px; text-align:center; color:#FFF; background-color:rgba(0, 0, 0, 0.5); box-shadow: 0px 0px 75px 10px rgba(0,0,0,0.5);}
	.window .wbox {position:relative; top:50%; transform: translateY(-50%);}

#home {display:block;}
	#home .fa-globe {font-size:1.5em; animation:spin 60s linear infinite;}
	#home h1 {font-size:1.2em; font-weight:normal;}
	#home .wbox {}
		#home .wbox input {font-family:monospace; border-radius:5px; line-height:22px; border:1px solid #555; padding:15px; margin-bottom:10px; text-align:center; width:75%; transition:background-color 250ms; opacity:0.9;}
			#home .wbox input:focus {border:1px solid #81bc00;}
			#home .button {border:none; background-color:#81bc00; color:#FFF;}
				#home .button.alt {background-color:#4DBAE7;}
				#home .button.alt2 {background-color:#3f84a0;}
			#home .button:hover {background-color:#21bc00; cursor:pointer;}
				#home .button.alt:hover {background-color:#1CC1F7;}
		#home p.foot {font-size:0.7em; color:#999;}

/* Home Window / Welcome / Main */

.content.form {width:400px; text-align:center; color:#333; background-color:#FFF; padding:25px;}
	.content.form h1 {font-size:1em;}
	.content.form h2 {font-size:1.3em;}
	.content.form p {font-size:1.2em;}
		.content.form .fa {font-size:1.5em; margin:10px 0;}
			.content.form .fa-globe {-webkit-animation:spin 300s linear infinite; -moz-animation:spin 300s linear infinite; animation:spin 300s linear infinite;}
		.content.form input {border-radius:5px; line-height:22px; border:1px solid #1CC1F7; transition:all 0.3s; padding:15px; margin-bottom:10px; width:75%; font-family:monospace; outline:0;}
		.content.form input:focus {border:1px solid #3f84a0;}
		.content.form .button {border:none; background-color:#81bc00; color:#FFF; font-size:1.1em;}
				.content.form .button.alt {background-color:#4DBAE7;}
			.content.form .button:hover {background-color:#21bc00; cursor:pointer;}
				.content.form .button.alt:hover {background-color:#1CC1F7;}
		.content.form p.foot {font-size:0.7em; color:#999;}

/* Bottom Nav / Footer */

.nwrapper {position:fixed; bottom:0; width:100%; min-width:1024px; background-color:rgba(0, 0, 0, 0.75);}
.nav {margin:0 auto; max-width:1024px; height:35px; line-height:35px;}
	.nav ul {margin:0; padding:0; list-style:none;}
		.nav ul li {display:inline-block; margin-left:25px;}
			.nav ul li:first-child {margin-left:0;}
		.nav ul li.logo {position:relative;}
			.nav ul li.logo a {color:white; font-size:1.2em; vertical-align:middle;}
			.nav ul li.logo img {position:absolute; top:8px; left:-5px; width:5px; transform: rotate(-60deg); -webkit-transform: rotate(-60deg); -ms-transform: rotate(-60deg);}
	.nav ul.lnav {float:left; color:#777;}
	.nav ul.rnav {float:right; color:#777;}

@media (max-device-width: 1024px){
	html {-webkit-text-size-adjust:100%;}
  input {-webkit-appearance:none;}
  input[type="checkbox"] {-webkit-appearance:checkbox;}
  input[type="radio"] {-webkit-appearance:radio;}
  
  .game_wrapper {height:100%;}
  
  .earth-bg {top:0;}
  
  .navbutton {display:block;}
  
  .window {width:100vw; height:100vh; border-radius:0; background-color:rgba(0, 0, 0, 0.35); box-shadow:none;}
  .window_center {max-width:initial;}
  
  
  #nav {transform:translate3d(0, 100%, 0); transition: transform 200ms ease-out}
  	#nav.nopen {transform:translate3d(0, 0, 0);}
  .nwrapper {min-width:100%; height:100%; background-color:rgba(0, 0, 0, 0.9);}
  .nav {height:auto; position:relative; top:50%; transform:translateY(-50%);}
		.nav ul li {margin:0; width:100%;}
  		.nav ul li.logo img {display:none;}
		.nav ul.lnav, .nav ul.rnav {float:none; width:100%; text-align:center;}
			.nav ul.lnav {line-height:50px;}
			.nav ul.rnav {margin-top:20px;}
}

JS <script> (jQuery supported)

Give us some feedback, any feedback, we just want feedback!

game concept

Branch Project