omahlama/index.html

## index.html
<!DOCTYPE html>
<html>
    <head>

        <title>Frontend/UX friendship without limits</title>
        <meta charset="utf-8">

        <style>

            * {
                box-sizing: border-box;
            }

            body, html {
                margin: 0;
                padding: 0;
            }

            #body-container {
                width: 960px;
                margin: 0 auto;
            }

            a {
                color: #222;
                text-decoration: none;
            }

            h1 {
                background: url('http://www.albinoblacksheep.com/promote/albinoblacksheep-256.png') no-repeat;
                height: 256px;
                margin: 0;
                padding-left: 258px;
                padding-top: 170px;
                font-size: 60px;
            }

            nav ul {
                margin: 0;
                padding: 0;
                list-style: none;
            }

            nav ul li {
                float: left;
                margin: 0 10px 0 0;
                padding: 10px;
                font-size: 20px;
                border: 6px solid #446699;
                background: #88aacc;
                cursor: pointer;
                border-radius: 5px;
            }

            #page-content {
                border: 3px solid #88aacc;
                background: #aaccdd;
                padding: 20px;
                float: left;
                width: 100%;
                border-radius: 5px;
            }

            #cat-image {
                float: right;
                border: 3px solid #777;
            }

            #left-link-bar,
            #right-link-bar,
            #middle-bar {
                float: left;
                width: 32.6%;
                height: 400px;
            }

            #middle-bar {
                margin: 0 10px;
            }

            #left-link-bar,
            #right-link-bar {
                background: #dddddf;
                border: 3px solid black;
                border-radius: 20px;
                color: #333;
            }

            ul.list {
                margin: 10px 20px 10px 10px;
            }

            .list li {
                padding: 0 0 10px 0;
            }

            .small-box {
                width: 50%;
                height: 150px;
                float: left;
            }

            #middle-bar-bottom {
                margin: 20px;
                float: left;
                clear: both;
            }

            footer {
                clear: both;
                width: 100%;
                text-align: center;
                padding: 20px 0 0 0;
            }

        </style>

    </head>
    <body>

        <div id="body-container">
            <header>
                <h1>Frontend/UX</h1>
            </header>

            <nav>
                <ul>
                    <li>Home</li>
                    <li>Why we exist?</li>
                    <li>What we'll be ready to do for you?</li>
                </ul>
            </nav>

            <div id="page-content">

                <div id="top-content">

                    <img id="cat-image" src="http://placekitten.com/430/330"/>

                    <h2>We happy?</h2>
                    <p>Look, just because I don't be givin' no man a foot massage don't make it right for Marsellus to throw Antwone into a glass motherfuckin' house, fuckin' up the way the nigger talks. Motherfucker do that shit to me, he better paralyze my ass, 'cause I'll kill the motherfucker, know what I'm sayin'? </p>

                    <h2>No man, I don't eat pork</h2>
                    <p>You think water moves fast? You should see ice. It moves like it has a mind. Like it knows it killed the world once and got a taste for murder. After the avalanche, it took us a week to climb out. Now, I don't know exactly when we turned on each other, but I know that seven of us survived the slide... and only five made it out. Now we took an oath, that I'm breaking now. We said we'd say it was the snow that killed the other two, but it wasn't. Nature is lethal but it doesn't hold a candle to man. </p>

                </div>

                <div id="bottom-content">
                    <div id="left-link-bar">
                    <ul class="list">
                        <li><a href="#">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</a></li>
                        <li><a href="#">Aliquam tincidunt mauris eu risus.</a></li>
                        <li><a href="#">Vestibulum auctor dapibus neque.</a></li>
                        <li><a href="#">Past the calculator swears a ludicrous horror.</a></li>
                        <li><a href="#">A total complaint pales.</a></li>
                        <li><a href="#">How can his groan push the unemployed release?</a></li>
                        <li><a href="#">The serious life fears the stake beside the monarch editor.</a></li>
                        <li><a href="#">Across the machine sighs the wine.</a></li>
                        <li><a href="#">An ocean cheeses the distributed expenditure with the ceremony.</a></li>
                    </ul>
                    </div>
                    <div id="middle-bar">
                        <div id="middle-bar-top">
                            <div class="small-box">
                                <img src="http://dummyimage.com/151x150/ffffff/000000&text=Come here?" />
                            </div>
                            <div class="small-box">
                                <img src="http://dummyimage.com/151x150/292929/e3e3e3&text=Fuck off!" />
                            </div>
                        </div>
                        <div id="middle-bar-bottom">
                            <h2>Hold on to your butts</h2>
                            <p>Look, just because I don't be givin' no man a foot massage don't make it right for Marsellus to throw Antwone into a glass motherfuckin' house, fuckin' up the way the nigger talks. Motherfucker do that shit to me, he better paralyze my ass, 'cause I'll kill the motherfucker, know what I'm sayin'? </p>
                        </div>
                    </div>
                    <div id="right-link-bar">
                        <ul class="list">
                            <li>Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.</li>
                            <li>Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.</li>
                            <li>Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.</li>
                        </ul>

                    </div>
                </div>

            </div>

            <footer>
                &copy; Futu Dudes &amp; Dudettes 2012
            </footer>

        </div>

        <!-- Include jQuery from the Google CDN -->
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.js"></script>

        <!-- Include Bootstrap JS components -->
        <script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/js/bootstrap.min.js"></script>

        <script>
            $(function() {

            });
        </script>

    </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>

	<title>Frontend/UX friendship without limits</title>
	<meta charset="utf-8">

	<style>

	* {
	box-sizing: border-box;
	}

	body, html {
	margin: 0;
	padding: 0;
	}

	#body-container {
	width: 960px;
	margin: 0 auto;
	}

	a {
	color: #222;
	text-decoration: none;
	}

	h1 {
	background: url('http://www.albinoblacksheep.com/promote/albinoblacksheep-256.png') no-repeat;
	height: 256px;
	margin: 0;
	padding-left: 258px;
	padding-top: 170px;
	font-size: 60px;
	}

	nav ul {
	margin: 0;
	padding: 0;
	list-style: none;
	}

	nav ul li {
	float: left;
	margin: 0 10px 0 0;
	padding: 10px;
	font-size: 20px;
	border: 6px solid #446699;
	background: #88aacc;
	cursor: pointer;
	border-radius: 5px;
	}

	#page-content {
	border: 3px solid #88aacc;
	background: #aaccdd;
	padding: 20px;
	float: left;
	width: 100%;
	border-radius: 5px;
	}

	#cat-image {
	float: right;
	border: 3px solid #777;
	}

	#left-link-bar,
	#right-link-bar,
	#middle-bar {
	float: left;
	width: 32.6%;
	height: 400px;
	}

	#middle-bar {
	margin: 0 10px;
	}

	#left-link-bar,
	#right-link-bar {
	background: #dddddf;
	border: 3px solid black;
	border-radius: 20px;
	color: #333;
	}

	ul.list {
	margin: 10px 20px 10px 10px;
	}

	.list li {
	padding: 0 0 10px 0;
	}

	.small-box {
	width: 50%;
	height: 150px;
	float: left;
	}

	#middle-bar-bottom {
	margin: 20px;
	float: left;
	clear: both;
	}

	footer {
	clear: both;
	width: 100%;
	text-align: center;
	padding: 20px 0 0 0;
	}

	</style>

	</head>
	<body>

	<div id="body-container">
	<header>
	<h1>Frontend/UX</h1>
	</header>

	<nav>
	<ul>
	<li>Home</li>
	<li>Why we exist?</li>
	<li>What we'll be ready to do for you?</li>
	</ul>
	</nav>

	<div id="page-content">

	<div id="top-content">

	<img id="cat-image" src="http://placekitten.com/430/330"/>

	<h2>We happy?</h2>
	<p>Look, just because I don't be givin' no man a foot massage don't make it right for Marsellus to throw Antwone into a glass motherfuckin' house, fuckin' up the way the nigger talks. Motherfucker do that shit to me, he better paralyze my ass, 'cause I'll kill the motherfucker, know what I'm sayin'? </p>

	<h2>No man, I don't eat pork</h2>
	<p>You think water moves fast? You should see ice. It moves like it has a mind. Like it knows it killed the world once and got a taste for murder. After the avalanche, it took us a week to climb out. Now, I don't know exactly when we turned on each other, but I know that seven of us survived the slide... and only five made it out. Now we took an oath, that I'm breaking now. We said we'd say it was the snow that killed the other two, but it wasn't. Nature is lethal but it doesn't hold a candle to man. </p>

	</div>

	<div id="bottom-content">
	<div id="left-link-bar">
	<ul class="list">
	<li><a href="#">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</a></li>
	<li><a href="#">Aliquam tincidunt mauris eu risus.</a></li>
	<li><a href="#">Vestibulum auctor dapibus neque.</a></li>
	<li><a href="#">Past the calculator swears a ludicrous horror.</a></li>
	<li><a href="#">A total complaint pales.</a></li>
	<li><a href="#">How can his groan push the unemployed release?</a></li>
	<li><a href="#">The serious life fears the stake beside the monarch editor.</a></li>
	<li><a href="#">Across the machine sighs the wine.</a></li>
	<li><a href="#">An ocean cheeses the distributed expenditure with the ceremony.</a></li>
	</ul>
	</div>
	<div id="middle-bar">
	<div id="middle-bar-top">
	<div class="small-box">
	<img src="http://dummyimage.com/151x150/ffffff/000000&text=Come here?" />
	</div>
	<div class="small-box">
	<img src="http://dummyimage.com/151x150/292929/e3e3e3&text=Fuck off!" />
	</div>
	</div>
	<div id="middle-bar-bottom">
	<h2>Hold on to your butts</h2>
	<p>Look, just because I don't be givin' no man a foot massage don't make it right for Marsellus to throw Antwone into a glass motherfuckin' house, fuckin' up the way the nigger talks. Motherfucker do that shit to me, he better paralyze my ass, 'cause I'll kill the motherfucker, know what I'm sayin'? </p>
	</div>
	</div>
	<div id="right-link-bar">
	<ul class="list">
	<li>Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.</li>
	<li>Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.</li>
	<li>Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.</li>
	</ul>

	</div>
	</div>

	</div>

	<footer>
	© Futu Dudes & Dudettes 2012
	</footer>

	</div>

	<!-- Include jQuery from the Google CDN -->
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.js"></script>

	<!-- Include Bootstrap JS components -->
	<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/js/bootstrap.min.js"></script>

	<script>
	$(function() {

	});
	</script>

	</body>
	</html>