ravenclaw with spotify playlist

/* original code credit:    ; edits: squirtle@ij */
/* for help implementing your code, questions about it or if you feel you are missing due credit, please contact lamarcodem@ij  */
<link rel="stylesheet" href="https://codester.neocities.org/narratives/requests/fonts/parryhotter.css">
<link href="https://zonkos.neocities.org/font.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.2/css/font-awesome.min.css">
<link rel="stylesheet" href="https://codiefoster.neocities.org/fonts/harryp.css">

<title>TITLE</title>
<link rel="shortcut icon" href="http://i.imgur.com/9EHEQTu.png">
<style>
body {background:url(http://i.imgur.com/bVfX5Y8.jpg);}
td {font-family:consolas; font-size:10px; color:#707070; letter-spacing:1; text-align:justify;}

name {font-family: 'harry+potter', arial; font-size:20px; line-height:20px; text-shadow:#c0c0c0 0px 0px 1px; color:#E1E1E1; text-transform:uppercase; display:block; text-align:;}
q {font-family:consolas; font-size:10px; text-transform:uppercase; letter-spacing:1; text-align:justify; font-weight:bold;}

a {color:#C12F3D; text-decoration:none; transition:1.5s;}
a:hover {color:#333; transition:1.5s;}

.gif {width:200; padding:5; margin-left:350px; margin-top; 10px; background:#ffba31; box-shadow:#ccc 0px 0px 1px; border:1px solid #ffba31; -webkit-transform:rotate(-6deg);}

::-webkit-scrollbar {width: 2px; background: url(http://i.imgur.com/N7yJdVr.png);}
::-webkit-scrollbar-thumb {background:;}
</style>



<style>

@font-face{font-family: luna; src:url("https://dl.dropbox.com/s/4dm2a8qzylpcfko/Slim%20Joe.otf");}
@font-face{font-family: gingersnap; src:url("https://dl.dropbox.com/s/qjremj7bxzp9383/KGAllThingsNew.ttf");}
@font-face{font-family: sub; src:url("https://dl.dropbox.com/s/txx5tmdfgrgoavu/Love%20Me.ttf");}


/* body background color */
body {
background-image: url(http://i.imgur.com/asgx5Vh.png);
background-attachment: fixed;
background-repeat: ;
background-position: left bottom;
background-color: #324e64;
}


body, table, tr, td, div, a, a:hover {cursor:url(http://i.imgur.com/ONVDMqu.png), default;}

a {text-decoration: none; color: #ACFFE9; -moz-transition: all 1.0s ease-out; -o-transition: all 1.0s ease-out; -webkit-transition: all 1.0s ease-out; transition: all 1.0s ease-out;}
a:hover {text-decoration: none; color: #EAFF87; -moz-transition: all 1.0s ease-out; -o-transition: all 1.0s ease-out; -webkit-transition: all 1.0s ease-out; transition: all 1.0s ease-out;}

#s-m-t-tooltip {max-width: 280px; padding: 2px; margin: 0px 0px 0px 15px; background-color: rgba(252,191,220,0.3); font-family: raleway; font-size: 6pt; line-height: 8pt; font-weight: 400; letter-spacing: 1px; text-transform: uppercase; color: #646464; z-index:999999999999999999; border-top: 0px; border-left: 0px; border-right: 0px; border-bottom: 0px solid #000; border-image: repeating-linear-gradient(to right, rgba(36,211,226,1.0), rgba(35,224,174,1.0)) 10;}

::-webkit-scrollbar {width: 1px;}
::-webkit-scrollbar-track {-webkit-box-shadow: inset 1 1 1px;background-image: url();background-color:#;}
::-webkit-scrollbar-thumb {-webkit-box-shadow: inset 1 1 1px;background-image:url();border-radius:0px;background-color:#cf978b;}

.a, .b, .c, .d, .e, .f, .g, .h, .i, .j {display: none; width: 400px; height: 450px; overflow:auto; margin-left: 100px; margin-top: 300px; text-align:justify; z-index:22; overflow-x:auto; background-color:#FFFFFF; opacity: .8; border-radius: 10px; padding: 2px; font-family: anaheim; font-size: 6pt; line-height: 8pt; border-top: 0px solid #000; border-left: 0px solid #000; border-right: 0px solid #000; border-bottom: 0px solid #000; border-image: repeating-linear-gradient(to right, #000066, #00CCCC, #000066) 10;}

bar {display: block; width: 100%; position: absolute; left: 0px; margin-left: 0px; margin-right: 0px; margin-bottom: 10px; height: 20px; background: linear-gradient(left bottom, #ACFFE9, #EAFF87);
background: -webkit-linear-gradient(left bottom, rgba(207, 151, 139, 0.4), rgba(207, 202, 139, 0.4), rgba(207, 151, 139, 0.4));
background: -moz-linear-gradient(left bottom, rgba(207, 151, 139, 0.4), rgba(207, 202, 139, 0.4), rgba(207, 151, 139, 0.4));
background: -o-linear-gradient(left bottom, rgba(207, 151, 139, 0.4), rgba(207, 202, 139, 0.4), rgba(207, 151, 139, 0.4));
background: -ms-linear-gradient(left bottom, rgba(207, 151, 139, 0.4), rgba(207, 202, 139, 0.4), rgba(207, 151, 139, 0.4)); box-shadow: 0 0 1px #CCC;}


nav {display: block; margin-top: 8px; margin-left:-500px; position: relative; z-index: 100000000; font-family: gingersnap; font-size: 30pt; line-height: 30pt; text-transform: uppercase;}

name {display: block; text-align: center; margin-bottom: -8px; color: #ffba31; font-family: harry p; font-size: 52pt; line-height: 38pt; text-transform: lowercase; text-shadow:2px 1px 0px #666, 3px 2px 2px #AAA; position: relative; z-index: 999999;}

book {display: block; text-align: center; margin-bottom: -8px; color: #ffba31; font-family: harry p; font-size: 32pt; line-height: 28pt; text-transform: lowercase; text-shadow:2px 1px 0px #666, 3px 2px 2px #AAA; position: relative; z-index: 999999;}

info {display: block; text-align: right; padding-right: 10px; margin-top: 2px; margin-bottom: 2px; color: #FFF; font-family: cool; font-size: 8pt; letter-spacing: 9px; text-transform: uppercase; letter-spacing: 0.5px; position: relative; z-index: 999;}

.text {display: block; text-align: justify; padding: 3px; font-family: anaheim; font-size: 7pt; line-height: 11pt; text-transform: uppercase; letter-spacing: 0.5px; text-shadow: 0 0 1px #CCC;}

p:first-child:first-letter {color: #000; font-family: raleway; font-size: 30pt; line-height: 30pt; text-shadow: 0 0 1px #444; text-transform: uppercase; float: left; padding-right: 5px; padding-bottom: 2px; margin-top: -4px;}
story {display: block; width: 440px; text-align: justify; color: #000; font-family: raleway; font-size: 9pt; line-height: 12pt; text-transform: uppercase;}

author {display: block; text-align: right; margin-top: -10px; font-family: second; font-size: 9pt; line-height: 12pt; letter-spacing: 0.5px; text-transform: lowercase; color: #FFF;}

#z {background-color:rgba(255, 255, 255, 0.9); box-shadow: 0px 0px 2px #AAA; height: 250px; margin-top:-158px; margin-left: 100px; padding-bottom: 3px; padding-top: 3px; width: 600px;}

.main {height: 250px; overflow: auto; padding-left: 5px; padding-right: 5px; color: #555; font-family: calibri, arial; font-size: 8px; line-height: 10px; letter-spacing: 1px; text-shadow: 0px 0px 1px #666; text-transform:uppercase; text-align: justify;}
.z {background-color:rgba(255, 255, 255, 0.7); box-shadow: 0px 0px 2px #AAA; margin-bottom: 25px; margin-left: 10px; margin-top: 10px; padding-bottom: 16px; padding-left: 10px; padding-right: 10px; padding-top: 16px; width: 600px;}



</style>


<!-- SCRIPTS - DO NOT REMOVE OR ALTER -->

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
    <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
    <script>
    (function($){
    $(document).ready(function(){
    $("[title]").style_my_tooltips({
    tip_follows_cursor:true,
    tip_delay_time:90,
    tip_fade_speed:600,
    attribute:"title"
    });
    });
    })(jQuery);
</script>

<script src="http://code.jquery.com/jquery-1.10.0.min.js"></script>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>

<script>
$(document).ready(function() {
//
$('a.poplight[href^=#]').click(function() {
var popID = $(this).attr('rel'); //Get Popup Name
var popURL = $(this).attr('href'); //Get Popup href to define size
var query= popURL.split('?');
var dim= query[1].split('&');
var popWidth = dim[0].split('=')[1]; //Gets the first query string value
$('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a href="#" class="close"><img src="http://i.imgur.com/jAwBtLO.png" class="btn_close" title="close" alt="close" /></a>');
var popMargTop = ($('#' + popID).height() + 90) / 2;
var popMargLeft = ($('#' + popID).width() + 90) / 2;
//Apply Margin to Popup
$('#' + popID).css({
'margin-top' : -popMargTop,
'margin-left' : -popMargLeft
});
$('body').append('<div id="fade"></div>');
$('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer - .css({'filter' : 'alpha(opacity=80)'})
return false;
});
$('a.close, #fade').live('click', function() {
$('#fade , .popup_block').fadeOut(function() {
$('#fade, a.close').remove(); //fade them both out
});
return false;
});
});
</script>

<center>
<table width="870" cellspacing="10">
<tr><td>
<table cellspacing="20">
<tr><td>
<name>this is your subject line</name>


<link href='http://fonts.googleapis.com/css?family=Timmana' rel='stylesheet' type='text/css'>
<nav><a href="#?w=500" rel="1" class="poplight"><img src="https://codiefoster.neocities.org/pics/squirtle/gifs/K9KNm_s-200x150.gif" class="gif"></a></nav>
<div id="z">
<div class="main">
<div id="bio">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In dictum congue blandit. Sed elementum hendrerit egestas. Ut aliquam dapibus dui, nec porta felis ultricies quis. Proin quis orci at quam sodales dictum. Proin ac tincidunt odio. Etiam cursus rutrum dolor feugiat sollicitudin. Suspendisse et turpis nec metus pulvinar tincidunt. Vestibulum ornare leo eros, non rutrum nibh pellentesque nec.
<br><br>
Quisque sollicitudin diam non mattis tristique. Donec tempor vel nisi in dignissim. Pellentesque egestas ante sed neque aliquet, ac ullamcorper ante malesuada. Sed et lectus in ipsum cursus rutrum. Fusce congue tincidunt tincidunt. Etiam bibendum pharetra mattis. Aliquam erat volutpat. Donec a dapibus magna. Phasellus sed risus feugiat, auctor mauris et, feugiat erat.

Nullam quis ullamcorper sapien, in scelerisque ipsum. Suspendisse at nunc ut lacus egestas consequat. Etiam cursus purus eget porttitor commodo. Nunc cursus vulputate libero, nec suscipit tortor laoreet nec. Aenean consequat dapibus volutpat. Ut in justo sed ante volutpat accumsan. Duis pellentesque libero sit amet tempus luctus. Donec nec libero non ipsum tristique blandit ac sit amet dui. Aenean sed vestibulum dui. Curabitur at est interdum, posuere tellus a, iaculis ex. In hac habitasse platea dictumst. Aliquam malesuada tortor vel mi malesuada hendrerit.
<br><br>
Quisque auctor enim id tempus lobortis. Pellentesque sodales mi fermentum enim tristique fringilla. Donec ultricies ipsum vel augue tempor, eu eleifend tortor varius. Vestibulum egestas purus id leo commodo, a dapibus arcu porta. Pellentesque lobortis finibus metus, eu convallis odio venenatis in. Cras bibendum ex id magna vehicula, quis pulvinar ipsum aliquam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin posuere blandit odio, vitae hendrerit sem commodo nec. Nulla elementum fringilla lectus id tristique. Morbi non leo in felis dignissim fermentum non at mi. Suspendisse ornare tellus ipsum, nec vulputate mauris sagittis sed. Curabitur dictum enim mollis lacus commodo, eget eleifend ligula sagittis. Curabitur congue tellus orci, eget vehicula erat sollicitudin vel. Morbi imperdiet mi at dui consequat, vulputate tincidunt ante rhoncus. Proin viverra dolor nisi, molestie congue felis dapibus pretium. Sed ac velit id lectus convallis venenatis commodo id lorem.
<br><br>
Etiam sagittis, nibh a vestibulum semper, libero orci iaculis dolor, in porttitor nibh lorem ac augue. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur consectetur, arcu vulputate sollicitudin vulputate, quam velit imperdiet nulla, nec maximus urna lectus sed nunc. Suspendisse dolor ligula, sollicitudin eget tincidunt in, efficitur at sapien. Pellentesque rutrum odio augue, nec efficitur velit iaculis nec. Etiam arcu ex, fermentum ac placerat eu, ultrices quis elit. Quisque imperdiet lorem sit amet varius lacinia.
</default></div>

</div></div></table>

<style>
.popup_block
{display: none; background-color: #ffffff;opacity: 0.8; padding:2px; top: 50%;left: 50%;max-height: 400px;max-width: 320px;
overflow: auto;font-size: 10px;position: fixed;z-index: 9999;border: 1px solid #e6e6e6;border-radius: 4px;}

img.btn_close {margin: 0 0 0 95%;}

*html #fade {position: absolute;}
*html .popup_block {position: absolute;}

#fade { display:none;position:fixed;left:0px;top:0px;width:100%;
    height:100%; z-index:9990; background:#000; opacity:0.75;}
</style>

<!---- additional information/pictures pop-ups ----!>

<div id="1" class="popup_block">
<book>playlist</book><br><br>
<center><iframe src="https://open.spotify.com/embed/user/cherlorowitz/playlist/28ecPQcehAkpFEytFXZfrf" width="300" height="380" frameborder="0" allowtransparency="true"; style="top:50%; left:50%;"></iframe></center>
</div>
<noframes></noframes><noscript></noscript><!-- --><script type="text/javascript" src="//static.websimages.com/static/global/js/webs/usersites/p.js"></script><script type="text/javascript" src="//static.websimages.com/static/global/js/webs/usersites/escort.js"></script><script type="text/javascript">if(typeof(urchinTracker)=='function'){_uacct="UA-230305-2";_udn="none";_uff=false;urchinTracker();}</script>