codeimpossible/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
  <script src="http://code.jquery.com/jquery.min.js"></script>
  <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">
  <link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
  <link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap-responsive.css" rel="stylesheet" type="text/css" />
  <script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap.js"></script>
  <link href='http://fonts.googleapis.com/css?family=Iceland' rel='stylesheet' type='text/css'>

<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <div class="container">
    <div class="row">
      &nbsp;
    </div>
    <div class="row">
      <div class="span2 offset2">
        <div class="well no-bg thick-border box right-only text-right branding">
          <i class="icon-shield large"></i>
          <div class="title">
            <span>Frag Castle<br />Games</span>
          </div>

          <div class="social-media">
            <a href="://twitter.com/fragcastle">
              <i class="icon-twitter"></i>
            </a>
            <a href="://github.com/fragcastle">
              <i class="icon-github"></i>
            </a>
            <a href="://plus.google.com/100742122293567187710/posts">
              <i class="icon-google-plus"></i>
            </a>
          </div>

          <div class="navigation">
            <ul class="nav nav-pills nav-stacked">
              <li class="active"><a href="#">Home</a></li>
              <li><a href="#">Blog</a></li>
              <li><a href="#">Games</a></li>
              <li><a href="#">Open Source</a></li>
            </ul>
          </div>
        </div>
      </div>
      <div id="content" class="span8">
        <div style="display: none">
          <h2>Welcome.</h2>
          <p>Good day, weary traveller.</p>
        </div>
        <div>
          <h2>Games</h2>
          <p>We make these.</p>
          <div class="row">
            <div class="span3 offset1">
              <div class="game teaser rock-kickass"></div>
            </div>
            <div class="span3 offset1">
              <div class="game teaser final-frontier"></div>
            </div>
          </div>
        </div>
        <div style="display: none">
          <h2>Pax Lessons Learned</h2>
          <p class="lead">It’s been a little over a week since our debut at PAX East 2013 in the Indie Mini-booth and John and I have had a lot of time to reflect on what we learned from our experience there. I thought it would be helpful to give our view on what worked and what didn’t.</p>

          <div class="author pull-right">
            by jared barboza
          </div>

          <div class="clearfix"></div>

          <hr />

          <h3>Gameplay, Gameplay, Gameplay</h3>
          <p>“This is PAX man! Nobody wants to see cutscenes!” Straight from the horses mouth. This was the first excited gamer that came to our booth to play our alpha of Rock Kickass. Our gameplay at that point consisted of the first few levels which are pretty cutscene heavy.</p>
          <p>So we removed them, and instead started players out at a level that was further along, with no cutscenes. People instantly got our concept and were engaged right from the start!</p>

          <h3>Buttons!!!!</h3>
          <p>We spent money on a lot of different marketing shwag items: stress balls, download flyers, buttons, and shirts. The most successful, the item most grabbed by people when visiting, and the one that got more peoples attention when walking by were the buttons! We bought 500 buttons for about $120 and they were the best marketing investment we made by far.</p>

          <h3>Condensed Elevator Pitch</h3>
          <p>An elevator pitch is something you can express in about thirty seconds. At PAX, you have about one tenth of that time to snare a potential gamers interest. As the day went on our pitch was constantly wittled away until we had a solid, 6 word sentence to assault people with.</p>
          <p>It would have been helpful to have this already before we started but we were able to refine it as the day went on.</p>

          <h3>Consistency</h3>
          <p>Throughout the day, during the lulls in activity John and I would talk about our pitch, how people received various parts of the game and how we were handling press questions. The idea was that we wanted to give a consistent message to the press and to our potential customers. This was very important as there was never a time when we were both free to handle a press interview, we each had to do them on our own.</p>
          <p>Take time to communicate with your partner(s) throughout the day to make sure you are both on the same page.</p>
          <p>In the end it’s all about having fun. This is why we got into this industry, because making games and playing games are fun for us. Interact with people, share your games, laugh and joke with them because if you’re not having fun then they won’t want to talk to you.</p>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

## main.css
#content {
  padding-top: 20px;
}

i[class^="icon-"].large {
  font-size: 64px;
}

.text-right {
  text-align: right;
}

.title {
  font-family: 'Iceland', cursive;
  font-size: 26px
}

.box.right-only {
  border-left: none;
  border-top: none;
  border-bottom: none;
}

.well.no-bg {
  background: none;
}

.thick-border {
  border-width: 2px!important;
}

.icon-github {
  color: #000;
}

.icon-google-plus {
  color: maroon;
}

body {
  font-size: 16px;
}

.branding .navigation {
  padding-top: 20px;
}

.game {
  height: 230px;
  width: 230px;
}

.game.teaser {
  overflow: hidden;
  border-radius: 15px;
  box-shadow: 2px 2px 5px 2px;
}

.game.rock-kickass {
  background: url( http://fragcastle.com/assets/site/img/portfolio/rockkickass.png ) no-repeat -24px 1px;
}

.game.final-frontier {
  background: url( http://fragcastle.com/assets/site/img/portfolio/finalfrontier.png ) no-repeat;
}
	<!DOCTYPE html>
	<html>
	<head>
	<script src="http://code.jquery.com/jquery.min.js"></script>
	<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">
	<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
	<link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap-responsive.css" rel="stylesheet" type="text/css" />
	<script src="http://getbootstrap.com/2.3.2/assets/js/bootstrap.js"></script>
	<link href='http://fonts.googleapis.com/css?family=Iceland' rel='stylesheet' type='text/css'>

	<meta charset=utf-8 />
	<title>JS Bin</title>
	</head>
	<body>
	<div class="container">
	<div class="row">

	</div>
	<div class="row">
	<div class="span2 offset2">
	<div class="well no-bg thick-border box right-only text-right branding">
	<i class="icon-shield large"></i>
	<div class="title">
	<span>Frag Castle<br />Games</span>
	</div>

	<div class="social-media">
	<a href="://twitter.com/fragcastle">
	<i class="icon-twitter"></i>
	</a>
	<a href="://github.com/fragcastle">
	<i class="icon-github"></i>
	</a>
	<a href="://plus.google.com/100742122293567187710/posts">
	<i class="icon-google-plus"></i>
	</a>
	</div>

	<div class="navigation">
	<ul class="nav nav-pills nav-stacked">
	<li class="active"><a href="#">Home</a></li>
	<li><a href="#">Blog</a></li>
	<li><a href="#">Games</a></li>
	<li><a href="#">Open Source</a></li>
	</ul>
	</div>
	</div>
	</div>
	<div id="content" class="span8">
	<div style="display: none">
	<h2>Welcome.</h2>
	<p>Good day, weary traveller.</p>
	</div>
	<div>
	<h2>Games</h2>
	<p>We make these.</p>
	<div class="row">
	<div class="span3 offset1">
	<div class="game teaser rock-kickass"></div>
	</div>
	<div class="span3 offset1">
	<div class="game teaser final-frontier"></div>
	</div>
	</div>
	</div>
	<div style="display: none">
	<h2>Pax Lessons Learned</h2>
	<p class="lead">It’s been a little over a week since our debut at PAX East 2013 in the Indie Mini-booth and John and I have had a lot of time to reflect on what we learned from our experience there. I thought it would be helpful to give our view on what worked and what didn’t.</p>

	<div class="author pull-right">
	by jared barboza
	</div>

	<div class="clearfix"></div>

	<hr />

	<h3>Gameplay, Gameplay, Gameplay</h3>
	<p>“This is PAX man! Nobody wants to see cutscenes!” Straight from the horses mouth. This was the first excited gamer that came to our booth to play our alpha of Rock Kickass. Our gameplay at that point consisted of the first few levels which are pretty cutscene heavy.</p>
	<p>So we removed them, and instead started players out at a level that was further along, with no cutscenes. People instantly got our concept and were engaged right from the start!</p>

	<h3>Buttons!!!!</h3>
	<p>We spent money on a lot of different marketing shwag items: stress balls, download flyers, buttons, and shirts. The most successful, the item most grabbed by people when visiting, and the one that got more peoples attention when walking by were the buttons! We bought 500 buttons for about $120 and they were the best marketing investment we made by far.</p>

	<h3>Condensed Elevator Pitch</h3>
	<p>An elevator pitch is something you can express in about thirty seconds. At PAX, you have about one tenth of that time to snare a potential gamers interest. As the day went on our pitch was constantly wittled away until we had a solid, 6 word sentence to assault people with.</p>
	<p>It would have been helpful to have this already before we started but we were able to refine it as the day went on.</p>

	<h3>Consistency</h3>
	<p>Throughout the day, during the lulls in activity John and I would talk about our pitch, how people received various parts of the game and how we were handling press questions. The idea was that we wanted to give a consistent message to the press and to our potential customers. This was very important as there was never a time when we were both free to handle a press interview, we each had to do them on our own.</p>
	<p>Take time to communicate with your partner(s) throughout the day to make sure you are both on the same page.</p>
	<p>In the end it’s all about having fun. This is why we got into this industry, because making games and playing games are fun for us. Interact with people, share your games, laugh and joke with them because if you’re not having fun then they won’t want to talk to you.</p>
	</div>
	</div>
	</div>
	</div>
	</body>
	</html>
	#content {
	padding-top: 20px;
	}

	i[class^="icon-"].large {
	font-size: 64px;
	}

	.text-right {
	text-align: right;
	}

	.title {
	font-family: 'Iceland', cursive;
	font-size: 26px
	}

	.box.right-only {
	border-left: none;
	border-top: none;
	border-bottom: none;
	}

	.well.no-bg {
	background: none;
	}

	.thick-border {
	border-width: 2px!important;
	}

	.icon-github {
	color: #000;
	}

	.icon-google-plus {
	color: maroon;
	}

	body {
	font-size: 16px;
	}

	.branding .navigation {
	padding-top: 20px;
	}

	.game {
	height: 230px;
	width: 230px;
	}

	.game.teaser {
	overflow: hidden;
	border-radius: 15px;
	box-shadow: 2px 2px 5px 2px;
	}

	.game.rock-kickass {
	background: url( http://fragcastle.com/assets/site/img/portfolio/rockkickass.png ) no-repeat -24px 1px;
	}

	.game.final-frontier {
	background: url( http://fragcastle.com/assets/site/img/portfolio/finalfrontier.png ) no-repeat;
	}