Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html>
- <head>
- <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"></a>');
- var popMargTop = ($('#' + popID).height() + 80) / 2;
- var popMargLeft = ($('#' + popID).width() + 80) / 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>
- <!-- Codes by aloneprayer.tumblr.com
- Please do not remove credits or claim them as your own!
- You are free to slightly alter though. -->
- <title>{Title}</title>
- <link rel="shortcut icon" href="{Favicon}">
- <style type="text/css">
- ::-webkit-scrollbar {
- width:4px;
- height:4px;
- }
- ::-webkit-scrollbar-track {
- background-color:transparent;
- }
- ::-webkit-scrollbar-button {
- background-color:black;
- height:4px;
- width:4px;
- }
- ::-webkit-scrollbar-thumb {
- background-color:black;
- height:4px;
- width:4px;
- }
- /*---popups---*/
- .popup_block{
- display:none;
- background:#fff;
- padding:20px;
- font-size: 11px;
- float:left;
- position:fixed;
- top:50%;left:50%;
- z-index: 99999;
- -webkit-box-shadow: 0px 0px 20px #000; /* delete for solid white */
- -moz-box-shadow: 0px 0px 20px #000; /* delete for solid white */
- box-shadow: 0px 0px 20px #000; /* delete for solid white */
- }
- *html #fade {position: absolute;}
- *html .popup_block {position: absolute;}
- #fade {
- display:none;
- position:fixed;
- left:0px;
- top:0px;
- width:100%;
- height:100%;
- z-index:9999;
- background:#000; /* change to #fff for solid white */
- opacity:0.5; /* change to opacity:1; */
- }
- /*---end popups---*/
- body {
- margin:0;
- background-color:black;
- color:white;
- font-family:calibri,sans-serif;
- font-size:10px;
- line-height:1.1;
- }
- a {
- color:white;
- text-decoration:none;
- -webkit-transition:0.5s ease-in-out;
- -moz-transition:all 0.5s ease-in-out;
- -o-transition:all 0.5s ease-in-out;
- }
- a:hover {
- color:#dfdfdf;
- -webkit-transition:0.5s ease-in-out;
- -moz-transition:all 0.5s ease-in-out;
- -o-transition:all 0.5s ease-in-out;
- }
- #s {
- position:fixed;
- float:left;
- top:0; left:0;
- height:100%;
- padding:100px;
- background-color:white;
- }
- #s .bar {
- position:relative;
- float:left;
- width:100px;
- top:200px;
- text-align:center;
- }
- .bar .t {
- font-size:16px;
- font-weight:700;
- font-family:arial;
- text-transform:lowercase;
- letter-spacing:-1px;
- color:black;
- }
- .bar .li {
- font-size:8px;
- text-transform:uppercase;
- letter-spacing:1px;
- font-weight:700;
- }
- .bar .li a {
- background-color:black;
- padding:2px 4px;
- margin:2px;
- display:inline-block;
- }
- #m {
- position:absolute;
- float:left;
- top:0;
- left:300px;
- padding:20px;
- }
- #m .tab {
- float:left;
- display:inline-block;
- margin:20px;
- padding:5px;
- width:340px;
- }
- .tab .av {
- display:inline-block;
- }
- .tab .av img {
- width:150px;
- height:200px;
- }
- .tab .info {
- display:inline-block;
- width:180px;
- vertical-align:top;
- padding-left:5px;
- }
- .info .name {
- font-family:arial;
- font-size:16px;
- font-weight:700;
- letter-spacing:-1px;
- text-transform:lowercase;
- text-align:left;
- margin-bottom:5px;
- }
- .info .desc {
- text-align:justify;
- overflow:auto;
- height:180px;
- }
- .desc .li {
- text-align:left;
- display:block;
- font-size:8px;
- text-transform:uppercase;
- letter-spacing:1px;
- margin:5px 0 0 0;
- }
- .desc .li a {
- display:inline-block;
- margin:0 4px 0 0;
- }
- </style>
- </head>
- <body>
- <div id="s">
- <div class="bar">
- <div class="t">
- THE MUSE CRUISE
- </div>
- <div class="li">
- <a href="/">back</a> <a href="/ask">ask</a> <a href="http://aloneprayer.tumblr.com/">©</a>
- </div>
- </div>
- </div>
- <div id="m">
- <!-- DIVIDER -->
- <div class="tab">
- <div class="av">
- <img src="http://i114.photobucket.com/albums/n260/Sammywolf/billh150200_zpsaxn8uzxl.png" />
- </div>
- <div class="info">
- <div class="name">
- bill halifax
- </div>
- <div class="desc">
- <div class="li"> fc: wyatt russell
- </div>
- <p>Forgotten member of the 27 Club, back from the dead for reasons unknown.</p>
- <a href="/tagged/m: halifax">TAG</a> /
- <a href="/tagged/a: halifax">AES</a> /
- <a href="#?w=300" rel="halifax" class="poplight">INFO</a>
- </div>
- </div>
- </div>
- <!-- DIVIDER -->
- <div class="tab">
- <div class="av">
- <img src="http://i114.photobucket.com/albums/n260/Sammywolf/leonine150200_zpsogvyv0yj.png" />
- </div>
- <div class="info">
- <div class="name">
- leonine
- </div>
- <div class="desc">
- <div class="li"> fc: dakota johnson/jane wiedlin
- </div>
- <p>Knight of the realm, fish out of water.</p>
- <a href="/tagged/m: leonine">TAG</a> /
- <a href="/tagged/a: leonine">AES</a> /
- <a href="#?w=300" rel="leo" class="poplight">INFO</a>
- </div>
- </div>
- </div>
- <!-- DIVIDER -->
- <div class="tab">
- <div class="av">
- <img src="http://i114.photobucket.com/albums/n260/Sammywolf/callum150200_zpsxbrhr6dw.png" />
- </div>
- <div class="info">
- <div class="name">
- callum ashurst
- </div>
- <div class="desc">
- <div class="li"> fc: dave franco
- </div>
- <p>Scientologist.</p>
- <a href="/tagged/m: callum">TAG</a> /
- <a href="/tagged/a: callum">AES</a> /
- <a href="#?w=300" rel="callum" class="poplight">INFO</a>
- </div>
- </div>
- </div>
- <!-- DIVIDER -->
- <div class="tab">
- <div class="av">
- <img src="http://i114.photobucket.com/albums/n260/Sammywolf/mari150200_zpsvoe8ljzy.png" />
- </div>
- <div class="info">
- <div class="name">
- anita marie eterna
- </div>
- <div class="desc">
- <div class="li"> FC: ashley madekwe
- </div>
- <p>Social media demon, @marionetta. </p>
- <a href="/tagged/m: marionetta">TAG</a> /
- <a href="/tagged/a: marionetta">AES</a> /
- <a href="#?w=300" rel="mari" class="poplight">INFO</a>
- </div>
- </div>
- </div>
- <!-- DIVIDER -->
- </div>
- </body>
- <!-- BEGIN POPUP BOX -->
- <div id="halifax" class="popup_block">
- PRONOUNS: he/him
- ALIGNMENT: neutral good
- </div>
- <!-- END POPUP BOX -->
- <!-- BEGIN POPUP BOX -->
- <div id="leo" class="popup_block">
- PRONOUNS: they/them
- ALIGNMENT: lawful good
- </div>
- <!-- END POPUP BOX -->
- <!-- BEGIN POPUP BOX -->
- <div id="callum" class="popup_block">
- PRONOUNS: he/him
- ALIGNMENT: lawful evil
- </div>
- <!-- END POPUP BOX -->
- <!-- BEGIN POPUP BOX -->
- <div id="riley" class="popup_block">
- PRONOUNS: she/her, they/them
- ALIGNMENT: chaotic evil
- </div>
- <!-- END POPUP BOX -->
- </div></div></div></div></div></div></div></div></div></div>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement