HTML, CSS and JavaScript playground

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
        
<style>
@import url(http://static.tumblr.com/jw8fmba/Arxm3bwmu/socialico.css);
</style>
<style>
@import url (http://pastebin.com/raw.php?i=sc4rCApa);    
</style>
            
    </head>
    <style type="text/css">
        body {
            padding: 0;
            margin: 0;
            list-style: none;
            background-color: #FEFEFE;
            background-attachment: fixed;
            background-image:url('http://25.media.tumblr.com/tumblr_lsdjv9k5E21r2gm7fo4_250.jpg');
        }
        a {
            text-decoration: none;
            color: black;
        }
        
        #middle {
            width: 100%;
            height: 250px;
            background-image:url('http://api.thumbr.it/whitenoise-361x370.png?background=d8dadbff&noise=757475&density=56&opacity=15');
        }
        .title {
            text-align: center;
            font-family: fjalla one;
            font-size: 36px;
            color: #AAAAAA;
            padding-bottom: 4px;
            padding-top: 20px;
            margin-bottom: 5px;
            width: auto;
            margin: auto;
            text-transform: uppercase;
            letter-spacing: 2px;
        }
        .description {
            margin: auto;
            text-align: center;
            font-family: cambria;
            font-size: 14px;
            color: #808080;
            width: auto;
            height: 200px;
            padding: 10px;
            overflow: hidden;
        }
        
        .desc {
            overflow: auto;
            height: 110px;
        }
        #another {
            color: white;
            width: auto;
            height: 800px;
            background-color: #DDDDDD;
            padding-top: 50px;
            padding-left: 50px;
            background-image:url('http://api.thumbr.it/whitenoise-361x370.png?background=d8dadbff&noise=757475&density=56&opacity=15');
        }
       
              img {
    z-index:1;
    position: relative;
}       
.half {
           z-index:99999;
            background-image: url(http://farm6.staticflickr.com/5349/10292175643_454e0b97d4_o.png);
            background-repeat:no-repeat;
            padding: 0px;
            position: relative;
        }
        .half {
            height: 18px;
            width: 76px;
            margin: auto;
        }
        .f1 {
            float:left;
            box-shadow: 1px 1px 2px #777;
            -moz-box-shadow: 1px 1px 2px #777;
            -webkit-shadow: 1px 1px 2px #777;
            position: relative;
            width: 139px;
            height: 200px;
            overflow: hidden;
            margin-right: 10px;
            margin-bottom: 10px;
        }
        .f2 {
            z-index:99999;
            float: left;
            width: 139px;
            background-color: #fff;
            /* CHANGES FILM TITLE HOVER BACKGROUND COLOR */
            height: 25px;
            padding: 15px 0px;
            padding-bottom: 15px;
            position: absolute;
            bottom: -55px;
            text-align: center;
            font-family: roboto condensed;
            /* CHANGES FILM TITLE HOVER FONT */
            font-style: none;
            font-size: 10px;
            /* CHANGES FILM TITLE HOVER FONT SIZE */
            text-transform: uppercase;
            letter-spacing:1px;
            color: black;
            /* CHANGES FILM TITLE HOVER TEXT COLOR */
            transition-duration: 0.6s;
            -moz-transition-duration: 0.6s;
            -webkit-transition-duration: 0.6s;
            -o-transition-duration: 0.6s;
        }
        .f2 a {
            color: black;
        }
        /* CHANGES FILM TITLE HOVER LINK COLOR */
        .f2 a:visited {
            color: #268E00;
        }
        .f3 {
           z-index:99999;
            float: left;
            width: 20px;
            left: -50px;
            padding: 5px 0px;
            margin-top: 50px;
            padding-left: 5px;
            background-color: white;
            position: absolute;
            transition-duration: 0.6s;
            -moz-transition-duration: 0.6s;
            -webkit-transition-duration: 0.6s;
            -o-transition-duration: 0.6s;
        }
        .f1:hover .f2 {
            bottom: 0px;
            transition-duration: 0.6s;
            -moz-transition-duration: 0.6s;
            -webkit-transition-duration: 0.6s;
            -o-transition-duration: 0.6s;
        }
        .f1:hover .f3 {
            left: 0px;
            transition-duration: 0.6s;
            -moz-transition-duration: 0.6s;
            -webkit-transition-duration: 0.6s;
            -o-transition-duration: 0.6s;
        }
        .yr {
            font-style: normal;
        }
        .moreinfo a {
            font-size: 8px;
        } 
        
        .genre_icons {
            font-family:'untitled-font-3';
            font-weight: normal;
            font-size: 15px;
            color: black;
            line-height: 100%;
            border:none;
            opacity: .89;
        }
        
        .social_icons {
     font-family:'SocialicoRegular';
     font-weight: normal;
     font-size: 27px;
     line-height: 100%;
     text-transform: uppercase;
     color: white;
     margin-left: 20px;
     border: none;
     opacity: .89;
 }
 .socialiconss {
     float:right;
     display: block;
     margin-top: 5px;
     margin-right: 10px;
 }
 .tumblrcontrolbuttons {
     float:left;
     display: block;
     margin-top: 5px;
     margin-left: 5px;
 }
 @-moz-document url-prefix() {
     .genre_icons, .social_icons {
         display: none !important;
     }
 }
 .face:hover {
     color:#3b5998 !important;
 }
 .twit:hover {
     color:#00bcf5 !important;
 }
 .drib:hover {
     color:#f05c93 !important;
 }
 .you:hover {
     color:#c4302b !important;
 }
 .vimeo:hover {
     color:#44bbff !important;
 }
 .skype:hover {
     color:#23c8f3 !important;
 }
 .google:hover {
     color:#d03b25 !important;
 }
 .flickr:hover {
     color:#ff0084 !important;
 }
 .rss:hover {
     color:#f94600 !important;
     border-bottom:0px;
 }
 .follow:hover {
     color: black;
     !important;
 }
 .dash {
     text-transform: none !important;
 }
 .dash:hover {
     color: black !important;
 }
        
    </style>
    
    <body>

</div>
  
    
  
    
 
    </body>

</html>