chasinglogic/index.css

## index.css
#navbar {
    width:100%;
    float:left;
    margin: 0 0 lem 0;
    padding: 0;
    background-color: black;
    position:absolute;
}
#navbar ul {
    list-style: None;
    margin: 0 auto;
    padding: 0;
    width:350px;
}
#navbar ul li {
    float:left;
}
#navbar ul li a {
    background-color: black;
    color:#FFFFFF;
    text-decoration:none;
    padding: 8px 15px;
    font-weight: bold;
    text-align: center;
    opacity: 0.5;
    display:block;
}
h4 {
    font-size:35px;
    text-align:center;
}
#titlebar {
    float:left;
    margin: 0 0 lem 0;
    padding:0;
    width:100%;
}
.textbox {
    float:left;
    display:inline-block;
    width:300px;
    height:400px;
}
.textbox p {
    display:inline-block;
    margin-left:30px;
    margin-top:10px;
    padding:0;
    text-align:center;
}
.button {
    height:50px;
    width:100px;
    border:solid;
    border-width:1px;
    display:inline-block;
    margin-left:30px;
    margin-top:10px;
    padding:0;
    text-align:center;
    opacity:0.5;
}
#container {
    text-align:center;
    position:relative;
    float:left;
    width:100%;
    height:350px;
}
#container2 {
    text-align:center;
    float:left;
    width:100%;
}
#b4 {
    background-color:#a8a8a8;
}
#b3 {
    background-color:#FF4500;
}
#b2 {
    background-color:#37FDFC;
}
#b1 {
    background-color:#FF3030;
}
#boxOne {
}
#boxTwo {
}
#boxThree {
}
#boxFour {
}

## index.html
<!DOCTYPE html>
<head>
    <title>Chasing Logic Studios</title>
    <script type="text/javascript" src="/js/jQuery.min.js"></script>
    <script type="text/javascript" src="index.js"></script>
    <link rel="stylesheet" type="text/css" href="index.css" />
</head>

<body>
    <div id="navbar">
        <ul>
            <li><a href="chasinglogic.com">Home</a>

            </li>
            <li><a href="chasinglogic.com/blog">Blog</a>

            </li>
            <li><a href="chasinglogic.com/links">Social Media</a>

            </li>
            <li><a href="chasinglogic.com/email">Contact</a>

            </li>
        </ul>
    </div>
    <div id="titlebar">
         <h4>Welcome to Chasing Logic Studios</h4>

    </div>
    <div id="container">
        <div class="button" id="b1"></div>
        <div class="button" id="b2"></div>
        <div class="button" id="b3"></div>
        <div class="button" id="b4"></div>
    </div>
    <div id=container2>
        <div class="textbox" id="boxOne">
             <h3>Who we are</h3>

            <p>We are two friends who grew up modding games together. We've played extensively with the source engine and are huge Valve fans. We don't want to be the next Valve but we do want to make great games. Ones that inspired us Much like the first time we played through Half-Life.</p>
        </div>
        <div class="textbox" id="boxTwo">
             <h3>What's our goal</h3>

            <p>Our goal is to focus on what we think is important the the future of gaming. It can be summed up in three simple points.</p>
            <ul>
                <li>Openness - Games should be pay what you want. A developer is making an experience and you shouldn't pay $60 up front for what might be a bad one. A good game will inspire you and you can show your gratitude by helping the developer continue making games.</li>
                <li>Cross Platform - You shouldn't be limited on what kind of games you can play simply because of your Operating System. Mac, Linux, Windows: Everyone likes to play games.</li>
                <li>Community - Who is always right? The customer. If the customer doesn't feel involved in your company why should they support you? This is what's most important to us. We want people to feel a part of Chasing Logic not just beholden to it.</li>
            </ul>
        </div>
        <div class="textbox" id="boxThree">
             <h3>How do we get there</h3>

            <p>First off. We're going to need your help, at the end of the day we are just two dudes with a passion and drive. Unfortunately, the way the world works is that passion and drive alone aren't enough anymore. Money is the only universal language so you could help out that way, or as the old saying goes Time is Money so if you have a skillset that you want to contribute then don't hesitate to email! We do read em all folks.</p>
        </div>
    </div>
    <div id='footer'>
        <div id="boxFour">
             <h2>Thank you for your time and we hope that if nothing else we gave you some food for thought! (But seriously we're broke as shit so every dollar helps!)</h2>

        </div>
    </div>
</body>

## index.js
$(document).ready(function () {
    $('#navbar ul li a').mouseenter(function () {
        $(this).fadeTo('fast', 1);
        $(this).mouseleave(function () {
            $(this).fadeTo('fast', 0.5);
        });
    });
    $('.textbox').fadeOut('fast');
    $('#footer').fadeOut('fast');
    $('#container2').hide;
    //$('#b1').click(function () {
    //$(this).fadeTo('slow', 1);
    //$('#boxOne').fadeIn('slow');
});
});
	#navbar {
	width:100%;
	float:left;
	margin: 0 0 lem 0;
	padding: 0;
	background-color: black;
	position:absolute;
	}
	#navbar ul {
	list-style: None;
	margin: 0 auto;
	padding: 0;
	width:350px;
	}
	#navbar ul li {
	float:left;
	}
	#navbar ul li a {
	background-color: black;
	color:#FFFFFF;
	text-decoration:none;
	padding: 8px 15px;
	font-weight: bold;
	text-align: center;
	opacity: 0.5;
	display:block;
	}
	h4 {
	font-size:35px;
	text-align:center;
	}
	#titlebar {
	float:left;
	margin: 0 0 lem 0;
	padding:0;
	width:100%;
	}
	.textbox {
	float:left;
	display:inline-block;
	width:300px;
	height:400px;
	}
	.textbox p {
	display:inline-block;
	margin-left:30px;
	margin-top:10px;
	padding:0;
	text-align:center;
	}
	.button {
	height:50px;
	width:100px;
	border:solid;
	border-width:1px;
	display:inline-block;
	margin-left:30px;
	margin-top:10px;
	padding:0;
	text-align:center;
	opacity:0.5;
	}
	#container {
	text-align:center;
	position:relative;
	float:left;
	width:100%;
	height:350px;
	}
	#container2 {
	text-align:center;
	float:left;
	width:100%;
	}
	#b4 {
	background-color:#a8a8a8;
	}
	#b3 {
	background-color:#FF4500;
	}
	#b2 {
	background-color:#37FDFC;
	}
	#b1 {
	background-color:#FF3030;
	}
	#boxOne {
	}
	#boxTwo {
	}
	#boxThree {
	}
	#boxFour {
	}
	<!DOCTYPE html>
	<head>
	<title>Chasing Logic Studios</title>
	<script type="text/javascript" src="/js/jQuery.min.js"></script>
	<script type="text/javascript" src="index.js"></script>
	<link rel="stylesheet" type="text/css" href="index.css" />
	</head>

	<body>
	<div id="navbar">
	<ul>
	<li><a href="chasinglogic.com">Home</a>

	</li>
	<li><a href="chasinglogic.com/blog">Blog</a>

	</li>
	<li><a href="chasinglogic.com/links">Social Media</a>

	</li>
	<li><a href="chasinglogic.com/email">Contact</a>

	</li>
	</ul>
	</div>
	<div id="titlebar">
	<h4>Welcome to Chasing Logic Studios</h4>

	</div>
	<div id="container">
	<div class="button" id="b1"></div>
	<div class="button" id="b2"></div>
	<div class="button" id="b3"></div>
	<div class="button" id="b4"></div>
	</div>
	<div id=container2>
	<div class="textbox" id="boxOne">
	<h3>Who we are</h3>

	<p>We are two friends who grew up modding games together. We've played extensively with the source engine and are huge Valve fans. We don't want to be the next Valve but we do want to make great games. Ones that inspired us Much like the first time we played through Half-Life.</p>
	</div>
	<div class="textbox" id="boxTwo">
	<h3>What's our goal</h3>

	<p>Our goal is to focus on what we think is important the the future of gaming. It can be summed up in three simple points.</p>
	<ul>
	<li>Openness - Games should be pay what you want. A developer is making an experience and you shouldn't pay $60 up front for what might be a bad one. A good game will inspire you and you can show your gratitude by helping the developer continue making games.</li>
	<li>Cross Platform - You shouldn't be limited on what kind of games you can play simply because of your Operating System. Mac, Linux, Windows: Everyone likes to play games.</li>
	<li>Community - Who is always right? The customer. If the customer doesn't feel involved in your company why should they support you? This is what's most important to us. We want people to feel a part of Chasing Logic not just beholden to it.</li>
	</ul>
	</div>
	<div class="textbox" id="boxThree">
	<h3>How do we get there</h3>

	<p>First off. We're going to need your help, at the end of the day we are just two dudes with a passion and drive. Unfortunately, the way the world works is that passion and drive alone aren't enough anymore. Money is the only universal language so you could help out that way, or as the old saying goes Time is Money so if you have a skillset that you want to contribute then don't hesitate to email! We do read em all folks.</p>
	</div>
	</div>
	<div id='footer'>
	<div id="boxFour">
	<h2>Thank you for your time and we hope that if nothing else we gave you some food for thought! (But seriously we're broke as shit so every dollar helps!)</h2>

	</div>
	</div>
	</body>
	$(document).ready(function () {
	$('#navbar ul li a').mouseenter(function () {
	$(this).fadeTo('fast', 1);
	$(this).mouseleave(function () {
	$(this).fadeTo('fast', 0.5);
	});
	});
	$('.textbox').fadeOut('fast');
	$('#footer').fadeOut('fast');
	$('#container2').hide;
	//$('#b1').click(function () {
	//$(this).fadeTo('slow', 1);
	//$('#boxOne').fadeIn('slow');
	});
	});