public/browsers.html
<!DOCTYPE html>
<html>
<head>
<title>GTFO!!!</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {margin: 0 auto;}
#container {
height: 100%;
padding-bottom: 100px;
padding-left: 50px;
padding-right: 50px;
margin: 40px;
}
h1 {
clear: both;
margin: 20px;
font-size: 60px;
}
#browsers {
margin: 20px;
}
#browsers ul {
list-style: none outside none;
margin: 0;
padding: 0;
}
#browsers ul li {
float: left;
}
#browsers ul li a {
margin: 15px;
padding: 15px;
}
#gtfo {
width: 600px;
margin: 0 auto;
}
</style>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-498639-4']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</head>
<body>
<!-- This file lives in public/browsers.html -->
<div id="container">
<h1>Get a better browser</h1>
<div id="browsers">
<ul>
<li><a href="http://www.mozilla.com/"><img alt="Mozilla Firefox" height="150" src="/assets/Firefox.png" width="150" /></a></li>
<li><a href="http://www.google.com/chrome/"><img alt="Google Chrome" height="150" src="/assets/Chrome.png" width="150" /></a></li>
<li><a href="http://www.apple.com/safari/"><img alt="Apple Safari" height="150" src="/assets/Safari.png" width="150" /></a></li>
<li><a href="http://www.opera.com/"><img alt="Opera" height="150" src="/assets/Opera.png" width="150" /></a></li>
<li><a href="http://www.microsoft.com/IE9"><img alt="Microsoft IE 9" height="150" src="/assets/IE9.png" width="150" /></a></li>
</ul>
</div>
<h1>Or......</h1>
<div id="gtfo">
<img alt="GTFO!!!" src="/assets/GTFO.jpeg" height="300" width="480" />
</div>
</div>
</body>
</html>