<!DOCTYPE HTML>
<html class="no-js">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>BIGFAT - Single page portfolio template</title>
<link rel="stylesheet" type="text/css" href="style/style.css" media="all" />
<link rel="stylesheet" type="text/css" href="style/switcher.css" media="all" />
<script type="text/javascript" src="js/modernizr.js"></script>
</head>
<body class="BGribbons">
<div id="overlay"></div>
<div id="lightbulb"></div>
<div id="container">
<div id="nav" class="unit static twoWide threeHigh">
<div id="logo"></div>
<ul class="filter">
<li class="selected" id="all"><a href="#" data-filter="*"><span>All</span></a></li>
<li id="info"><a href="#" data-filter=".info"><span>Info</span></a></li>
<li id="photography"><a href="#" data-filter=".photography"><span>Photography</span></a></li>
<li id="illustration"><a href="#" data-filter=".illustration"><span>Illustration</span></a></li>
<li id="video"><a href="#" data-filter=".video"><span>Video</span></a></li>
</ul>
</div>
<div class="unit static threeWide" id="social">
<ul class="social">
<li id="stumbleupon"><a href="#"></a></li>
<li id="soundcloud"><a href="#"></a></li>
<li id="deviantart"><a href="#"></a></li>
<li id="delicious"><a href="#"></a></li>
<li id="flickr"><a href="#"></a></li>
<li id="vimeo"><a href="#"></a></li>
<li id="youtube"><a href="#"></a></li>
<li id="facebook"><a href="#"></a></li>
<li id="twitter"><a href="#"></a></li>
</ul>
</div>
<div class="unit item oneWide oneHigh info open" id="hello">
<h4 class="infoHeader">Hello</h4>
<div class="content">
<div class="column-three last">
<h1 class="center">My Name is JOE BLOGS</h1>
<p class="tagline center">I Make things</p>
</div>
</div>
</div>
<div class="unit item oneWide oneHigh info" id="who">
<h4 class="infoHeader">Who?</h4>
<div class="content cf">
<div class="column-three last">
<h1 class="center">We are BIGFAT</h1>
</div>
<div class="column">
<img src="images/bigfat4.png" />
</div>
<div class="column-two last">
<h3>Large & Loud</h3>
<p class="tagline">Design that screams</p>
<p class="bottomSection">Porttitor pulvinar elementum porttitor velit in? Facilisis tristique, pid lacus velit. Lacus
hac et vel ac cursus elementum! Porttitor magna lorem egestas platea etiam porta sagittis mattis
vut habitasse amet integer mid, nunc adipiscing nisi massa.</p>
</div>
<div class="column">
<div class="backgroundNumber"><h1>1</h1></div>
<h4 class="center">Ultra Modern</h4>
<p class="center">Using HTML5 and CSS3 technologies, BIGFAT is ahead of the game.</p>
</div>
<div class="column">
<div class="backgroundNumber"><h1>2</h1></div>
<h4 class="center">Wonderfully Unique</h4>
<p class="center">Ever seen anything like it? Thought not.</p>
</div>
<div class="column last">
<div class="backgroundNumber"><h1>3</h1></div>
<h4 class="center">Super Simple</h4>
<p class="center bottomSection">All HTML is contained in a single file, easy to edit.</p>
</div>
</div>
</div>
<div class="unit item oneWide oneHigh print illustration" id="road">
<h4>On the Road</h4>
<h5 class="categories">print, illustration</h5>
<h5 class="caption includesLink"><a href="#" class="projectLink"></a>This is a long caption that has <strong>basic</strong> <em>formatting</em>. The captions can be as long as you like. They will drop to as many lines as the image is high. Fun times. </h5>
<img class="backdrop" src="images/ontheroadthumb.jpg" />
<div class="content" image-id="images/ontheroad.png"></div>
</div>
<div class="unit item oneWide oneHigh info" id="profile">
<h4 class="infoHeader">Profile</h4>
<div class="content cf">
<div class="column-three last">
<h1>Joe Blogs</h1>
<p class="tagline">A young designer from London who can also dance.</p>
</div>
<div class="column-two">
<p>Porttitor pulvinar elementum porttitor velit in? Facilisis tristique, pid lacus velit. Lacus
hac et vel ac cursus elementum! Porttitor magna lorem egestas platea etiam porta sagittis mattis.</p>
<p class="bottomSection">Vut habitasse amet integer mid, nunc adipiscing nisi massa. Dictumst natoque, ultricies urna, nunc.</p>
</div>
<div class="column last">
<img src="images/profilepic.png" alt="me"/>
</div>
<div class="column">
<h4>Skills</h4>
<ul class="tick">
<li><strong>HTML 5</strong><br/><small>Expert</small></li>
<li><strong>CSS 3</strong><br/><small>Intermediate</small></li>
<li><strong>jQuery</strong><br/><small>Basic Knowledge</small></li>
</ul>
</div>
<div class="column">
<h4>Employment</h4>
<ul class="employment">
<li><strong>Chief Executive</strong><br/><small>Facebook<br/><span class="dark">2007-2010</span></small></li>
<li><strong>Senior Developer</strong><br/><small>Yahoo<br/><span class="dark">2005-2010</span></small></li>
<li><strong>Junior Developer</strong><br/><small>Microsoft<br/><span class="dark">2002-2005</span></small></li>
</ul>
</div>
<div class="column last">
<h4>Education</h4>
<ul class="education">
<li><strong>School of Hard Knocks</strong><br/><small>2.1 in Psychology<br/><span class="dark">1990-1993</span></small></li>
<li><strong>Winners College</strong><br/><small>A, A, B<br/><span class="dark">1988-1990</span></small></li>
</ul>
</div>
</div>
</div>
<div class="unit item oneWide oneHigh illustration print" id="nakedlunch">
<h4>Naked Lunch</h4>
<h5 class="categories">print, illustration</h5>
<h5 class="caption">This is a caption without a project link.</h5>
<img class="backdrop" src="images/nakedlunchthumb.jpg" />
<div class="content" image-id="images/nakedlunch.png"></div>
</div>
<div class="unit item oneWide oneHigh info" id="backgrounds">
<h4 class="infoHeader">Backgrounds</h4>
<div class="content">
<div class="column-three last">
<h1>Change it up</h1>
<p class="tagline">Pick a background</p>
</div>
<div class="column marginBottom">
<img src="images/ribbonsthumb.png" id="ribbons" />
</div>
<div class="column marginBottom">
<img src="images/splatthumb.png" id="splat" />
</div>
<div class="column marginBottom last">
<img src="images/squaresthumb.png" id="squares" />
</div>
<div class="column marginBottom ">
<img src="images/diamondthumb.png" id="diamond" />
</div>
<div class="column marginBottom ">
<img src="images/bubblesthumb.png" id="bubbles" />
</div>
<div class="column marginBottom last">
<img src="images/crossesthumb.png" id="crosses" />
</div>
</div>
</div>
<div class="unit item oneWide oneHigh illustration" id="man">
<h4>Man</h4>
<h5 class="categories">illustration</h5>
<h5 class="caption">This is a caption without a project link. It is also on two lines. Yay.</h5>
<img class="backdrop" src="images/manthumb.jpg" />
<div class="content" image-id="images/man.png"></div>
</div>
<div class="unit item oneWide twoHigh photography" id="alex">
<h4>Alex</h4>
<h5 class="categories">photography</h5>
<h5 class="caption includesLink"><a href="#" class="projectLink"></a>This is a caption with a project link and is also on two lines, yes it is, I think.</h5>
<img class="backdrop" src="images/alexthumb.jpg" />
<div class="content" image-id="images/alex.png"></div>
</div>
<div class="unit item oneWide oneHigh info" id="features">
<h4 class="infoHeader">Features</h4>
<div class="content cf">
<div class="column-three last">
<h1 class="center">Wowzer!</h1>
<p class="tagline center">BIGFAT is fun. Learn below.</p>
</div>
<div class="column">
<img src="images/abstra