That's What She Said

by alinktothepast

HTML

<div class="errbody">
        <h1>ThatsWhatSheSaid</h1>
            <p class="slogan">Discovering New Out-of-Context Jokes One Day At A Time</p>
        <ul id="bar">
            <li><a href="#">One Liners</a></li>
            <li><a href="#">Out of Context</a></li>
            <li><a href="#">Michael Scott Quotes</a></li>
            <li><a href="#">Friendly Websites</a></li>
        </ul>
    
    <div class="content">
        
        
        <div class="usersubmit">
            
            <div class="submittitle">Check out this silly video of these people!<p class="submitby">Submitted by <a href="#">Wo0tm0fo934</a>
                </div>
            
             <div class="submitmedia">

        <div class="iframe">
                <iframe width="560" height="315" src="http://www.youtube.com/embed/82D5Itvom4M" frameborder="0" allowfullscreen></iframe>
                </div></div></div>
            <div class="submitdesc">
      
                
                <ul id="embed">
                    <li>URL:<input type="text" name="getURL" width=100 /></li>
                    <li>Embed:<input type="text" name="embed" /></li>
                    <li>Share:<img src="http://s.ytimg.com/yt/img/pixel-vfl3z5WfW.gif"><img src="http://s.ytimg.com/yt/img/pixel-vfl3z5WfW.gif"><img src="http://s.ytimg.com/yt/img/pixel-vfl3z5WfW.gif"></li>
                </ul>
  
<p class="desc">
    Content contentContent contentContent contentContent contentContent contentContent contentContent contentContent contentContent contentContent contentContent contentContent contentContent contentContent contentContent contentContent contentContent contentContent contentContent contentContent contentContent contentContent contentContent contentContent contentContent contentContent contentContent contentContent content.
                </p>
    </div>
</div>

CSS

body
{
background-color: #FFF;
}
.errbody
{
    position: relative;
    width: 100%;
    text-align: center;
}
h1
{
    position: relative;
    font: bold 72px sans-serif;
    text-shadow: 1px 2px 6px;
}
.slogan
{
    position: relative;
    font: normal 28px sans-serif;
    color: #FF5F46;
}
#bar
{
    position: relative;
    background-color: #FFEBDB;
    text-align: center;
    width: 100%;
    margin-bottom: 0px;
}
#bar li
{
    display: inline;
    margin-top: 10px;
    margin-right: 50px;
    font: bold 38px sans-serif;
    font-size: 25px;
}
#bar a
{
    color: #B21800;
    text-decoration: none;
}
#bar a:hover
{
    color: #FF9174;
    text-decoration: underline;
}
.content
{
    position: relative;
    padding: 50px 10px;
    background-color: #FFF;

}
.usersubmit
{
    position: relative;
    width: 100%;
}
.submitmedia, .submitdesc
{
    position: relative;
    float: left;
    width: 50%;
    text-align: left;
}
.submittitle, .submitby
{
    position: relative;
    float: left;
    width: 100%;
    font-size: 28px;
    font-family: sans-serif;
    text-align: left;
}
.submitby
{
    font-size: 10px;
}
    
.iframe
{
    position: relative;
    float: left;
}
#embed
{
    position: relative;
    padding: 25px;
}
#embed li
{
    padding: 5px;
    background-color: #FFF3DD;
}
.desc
{
    position: relative;
    padding: 25px;
    padding-top: 10px;
    padding-right: 50px;
    float: left;
    font: normal 14px sans-serif;
}