Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!--
- © erika-writes
- -->
- <head>
- <title>{Title}</title>
- <link rel="shortcut icon" href="{Favicon}">
- <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>
- <style type="text/css">
- body {
- font-family:lato;
- font-size:9px;
- letter-spacing:1px;
- line-height:15px;
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
- margin-bottom:80px;
- }
- a {
- color:#000;
- }
- #header {
- background-color:#fff;
- width:70px;
- margin-left:470px;
- font-family:lato;
- font-size:15px;
- font-weight:900;
- letter-spacing:2px;
- line-height:auto;
- text-align:left;
- text-transform:uppercase;
- font-style:italic;
- padding:12px;
- padding-bottom:7px;
- margin-top:50px;
- margin-bottom:-3px;
- border: .5px solid #eee;
- border-width:1px 1px 0px 1px;
- border-radius:5px;
- z-index:1;
- position:relative;
- }
- #container {
- background-color:#fff;
- width:505px;
- height:512px;
- margin: 0 auto;
- padding:30px;
- padding-right:25px;
- border: .5px solid #eee;
- border-radius:5px;
- box-shadow: 8px 8px 1px 0px #eee;
- }
- .wrapper {
- width:520px;
- height:550px;
- margin: 0 auto;
- overflow:scroll;
- margin-top:-18px;
- }
- .wrapper::-webkit-scrollbar { width: 3px; height:0px; background-color: #eee;}
- .wrapper::-webkit-scrollbar-track {padding:20px; border:1px solid #eee; background-color:#404040;}
- .wrapper::-webkit-scrollbar-thumb { border-radius: 5px; background-color: #404040;}
- #muse {
- width:150px;
- overflow:hidden;
- margin-bottom:10px;
- margin:6px;
- margin-left:10px;
- float:left;
- }
- #info {
- font-family:lato;
- font-size:10px;
- text-transform:lowercase;
- letter-spacing:1px;
- width:120px;
- height:35px;
- text-align:left;
- padding-left:5px;
- }
- .img {
- margin-top:10px;
- margin-bottom:10px;
- width:130px;
- height:auto;
- border-radius:10px;
- }
- #bio {
- font-family:lato;
- font-size:9px;
- line-height:auto;
- width:420px;
- height:300px;
- padding:10px;
- overflow-x:hidden;
- overflow-y:scroll;
- border-radius:2px;
- margin:0 auto;
- margin-top:3px;
- }
- #biotitle {
- font-family:lato;
- font-size:10px;
- line-height:auto;
- letter-spacing:2px;
- padding-bottom:7px;
- text-align:center;
- font-weight:900;
- text-transform:uppercase;
- }
- #bio::-webkit-scrollbar { width: 3px; background-color: #eee; }
- #bio::-webkit-scrollbar-track {border:1px solid #eee; background-color: #404040; }
- #bio::-webkit-scrollbar-thumb { border-radius: 5px; background-color: #404040; }
- /*SECOND BOX*/
- #header2 {
- background-color:#fff;
- width:80px;
- margin-left:470px;
- font-family:lato;
- font-size:15px;
- font-weight:900;
- letter-spacing:2px;
- line-height:auto;
- text-align:left;
- text-transform:uppercase;
- font-style:italic;
- padding:12px;
- padding-bottom:7px;
- margin-top:50px;
- margin-bottom:-3px;
- border: .5px solid #eee;
- border-width:1px 1px 0px 1px;
- border-radius:5px;
- z-index:1;
- position:relative;
- }
- #container2 {
- background-color:#fff;
- width:505px;
- height:512px;
- margin: 0 auto;
- padding:30px;
- padding-right:25px;
- border: .5px solid #eee;
- border-radius:5px;
- box-shadow: 8px 8px 1px 0px #eee;
- }
- .wrapper2 {
- width:520px;
- height:550px;
- margin: 0 auto;
- overflow:scroll;
- margin-top:-18px;
- }
- .wrapper2::-webkit-scrollbar { width: 3px; height:0px; background-color: #eee;}
- .wrapper2::-webkit-scrollbar-track {padding:20px; border:1px solid #eee; background-color:#404040;}
- .wrapper2::-webkit-scrollbar-thumb { border-radius: 5px; background-color: #404040;}
- #nav {
- position:fixed;
- left:25px;
- top:20px;
- font-family:lato;
- font-size:8.5px;
- font-weight:500;
- text-transform:lowercase;
- letter-spacing:2px;
- height:auto;
- border-left:1px solid #000;
- padding-left:15px;
- }
- #nav a {
- text-decoration:none;
- }
- #maintitle {
- font-family:lato;
- font-size:15px;
- font-weight:900;
- letter-spacing:2px;
- line-height:auto;
- text-align:left;
- text-transform:uppercase;
- font-style:italic;
- margin-bottom:10px;
- }
- /*CODES BY PAINTHEMES.TUMBLR.COM*/
- .popup_block{
- height:330px;
- display:none;
- background-color:#fff;
- border: .5px solid #eee;
- padding:10px;
- border-radius:5px;
- position:fixed;
- top:55%;
- left:740px;
- z-index: 99999;
- box-shadow: 8px 8px 1px 0px #eee;
- }
- #fade {
- display:none;
- position:fixed;
- left:0px;
- top:0px;
- width:100%;
- height:100%;
- z-index:9999;
- opacity:.5;
- }
- *html #fade {position: absolute;}
- *html .popup_block {position: absolute;}
- /*CODES BY PAINTHEMES.TUMBLR.COM*/
- </style>
- </head>
- <body>
- <div id="nav">
- <div id="maintitle">title</div>
- <a href="/">back to blog</a>
- <br><a href="https://tumblr.com/dashboard">go to dashboard</a>
- <br><a href="https://erika-writes.tumblr.com">credit</a>
- </div>
- <div id="header">open –</div>
- <div id="container">
- <div class="wrapper">
- <a href="#?w=450" rel="muse1" class="poplight">
- <div id="muse">
- <img src="https://66.media.tumblr.com/3dd7f3ef778549562413ff92e13e29f1/tumblr_prqig0WvjO1vhunmto1_r4_400.png" class="img"></a>
- <div id="info">
- <b>name</b>
- <br>faceclaim</div>
- </div>
- <!-- MUSE -->
- <a href="#?w=450" rel="muse2" class="poplight">
- <div id="muse">
- <img src="https://66.media.tumblr.com/3dd7f3ef778549562413ff92e13e29f1/tumblr_prqig0WvjO1vhunmto1_r4_400.png" class="img"></a>
- <div id="info">
- <b>name</b>
- <br>faceclaim</div>
- </div>
- <!-- MUSE -->
- <a href="#?w=450" rel="muse3" class="poplight">
- <div id="muse">
- <img src="https://66.media.tumblr.com/3dd7f3ef778549562413ff92e13e29f1/tumblr_prqig0WvjO1vhunmto1_r4_400.png" class="img"></a>
- <div id="info">
- <b>name</b>
- <br>faceclaim</div>
- </div>
- <!-- MUSE -->
- <a href="#?w=450" rel="muse4" class="poplight">
- <div id="muse">
- <img src="https://66.media.tumblr.com/3dd7f3ef778549562413ff92e13e29f1/tumblr_prqig0WvjO1vhunmto1_r4_400.png" class="img"></a>
- <div id="info">
- <b>name</b>
- <br>faceclaim</div>
- </div>
- <!-- MUSE -->
- <a href="#?w=450" rel="muse5" class="poplight">
- <div id="muse">
- <img src="https://66.media.tumblr.com/3dd7f3ef778549562413ff92e13e29f1/tumblr_prqig0WvjO1vhunmto1_r4_400.png" class="img"></a>
- <div id="info">
- <b>name</b>
- <br>faceclaim</div>
- </div>
- <!-- MUSE -->
- <a href="#?w=450" rel="muse6" class="poplight">
- <div id="muse">
- <img src="https://66.media.tumblr.com/3dd7f3ef778549562413ff92e13e29f1/tumblr_prqig0WvjO1vhunmto1_r4_400.png" class="img"></a>
- <div id="info">
- <b>name</b>
- <br>faceclaim</div>
- </div>
- <!-- MUSE -->
- <a href="#?w=450" rel="muse7" class="poplight">
- <div id="muse">
- <img src="https://66.media.tumblr.com/3dd7f3ef778549562413ff92e13e29f1/tumblr_prqig0WvjO1vhunmto1_r4_400.png" class="img"></a>
- <div id="info">
- <b>name</b>
- <br>faceclaim</div>
- </div>
- <!-- MUSE -->
- <a href="#?w=450" rel="muse8" class="poplight">
- <div id="muse">
- <img src="https://66.media.tumblr.com/3dd7f3ef778549562413ff92e13e29f1/tumblr_prqig0WvjO1vhunmto1_r4_400.png" class="img"></a>
- <div id="info">
- <b>name</b>
- <br>faceclaim</div>
- </div>
- <!-- MUSE -->
- <a href="#?w=450" rel="muse9" class="poplight">
- <div id="muse">
- <img src="https://66.media.tumblr.com/3dd7f3ef778549562413ff92e13e29f1/tumblr_prqig0WvjO1vhunmto1_r4_400.png" class="img"></a>
- <div id="info">
- <b>name</b>
- <br>faceclaim</div>
- </div>
- <!-- MUSE -->
- <a href="#?w=450" rel="muse10" class="poplight">
- <div id="muse">
- <img src="https://66.media.tumblr.com/3dd7f3ef778549562413ff92e13e29f1/tumblr_prqig0WvjO1vhunmto1_r4_400.png" class="img"></a>
- <div id="info">
- <b>name</b>
- <br>faceclaim</div>
- </div>
- <!-- MUSE -->
- <a href="#?w=450" rel="muse11" class="poplight">
- <div id="muse">
- <img src="https://66.media.tumblr.com/3dd7f3ef778549562413ff92e13e29f1/tumblr_prqig0WvjO1vhunmto1_r4_400.png" class="img"></a>
- <div id="info">
- <b>name</b>
- <br>faceclaim</div>
- </div>
- <!-- MUSE -->
- <a href="#?w=450" rel="muse12" class="poplight">
- <div id="muse">
- <img src="https://66.media.tumblr.com/3dd7f3ef778549562413ff92e13e29f1/tumblr_prqig0WvjO1vhunmto1_r4_400.png" class="img"></a>
- <div id="info">
- <b>name</b>
- <br>faceclaim</div>
- </div>
- </div> </div>
- <!-- SECOND BOX -->
- <div id="header2">closed –</div>
- <div id="container2">
- <div class="wrapper2">
- <!-- MUSE -->
- <a href="#?w=450" rel="muse13" class="poplight">
- <div id="muse">
- <img src="https://66.media.tumblr.com/3dd7f3ef778549562413ff92e13e29f1/tumblr_prqig0WvjO1vhunmto1_r4_400.png" class="img"></a>
- <div id="info">
- <b>name</b>
- <br>faceclaim</div>
- </div>
- <!-- MUSE -->
- <a href="#?w=450" rel="muse14" class="poplight">
- <div id="muse">
- <img src="https://66.media.tumblr.com/3dd7f3ef778549562413ff92e13e29f1/tumblr_prqig0WvjO1vhunmto1_r4_400.png" class="img"></a>
- <div id="info">
- <b>name</b>
- <br>faceclaim</div>
- </div>
- <!-- MUSE -->
- <a href="#?w=450" rel="muse15" class="poplight">
- <div id="muse">
- <img src="https://66.media.tumblr.com/3dd7f3ef778549562413ff92e13e29f1/tumblr_prqig0WvjO1vhunmto1_r4_400.png" class="img"></a>
- <div id="info">
- <b>name</b>
- <br>faceclaim</div>
- </div>
- <!-- MUSE -->
- <a href="#?w=450" rel="muse16" class="poplight">
- <div id="muse">
- <img src="https://66.media.tumblr.com/3dd7f3ef778549562413ff92e13e29f1/tumblr_prqig0WvjO1vhunmto1_r4_400.png" class="img"></a>
- <div id="info">
- <b>name</b>
- <br>faceclaim</div>
- </div>
- <!-- MUSE -->
- <a href="#?w=450" rel="muse17" class="poplight">
- <div id="muse">
- <img src="https://66.media.tumblr.com/3dd7f3ef778549562413ff92e13e29f1/tumblr_prqig0WvjO1vhunmto1_r4_400.png" class="img"></a>
- <div id="info">
- <b>name</b>
- <br>faceclaim</div>
- </div>
- <!-- MUSE -->
- <a href="#?w=450" rel="muse18" class="poplight">
- <div id="muse">
- <img src="https://66.media.tumblr.com/3dd7f3ef778549562413ff92e13e29f1/tumblr_prqig0WvjO1vhunmto1_r4_400.png" class="img"></a>
- <div id="info">
- <b>name</b>
- <br>faceclaim</div>
- </div>
- <!-- MUSE -->
- <a href="#?w=450" rel="muse19" class="poplight">
- <div id="muse">
- <img src="https://66.media.tumblr.com/3dd7f3ef778549562413ff92e13e29f1/tumblr_prqig0WvjO1vhunmto1_r4_400.png" class="img"></a>
- <div id="info">
- <b>name</b>
- <br>faceclaim</div>
- </div>
- <!-- MUSE -->
- <a href="#?w=450" rel="muse20" class="poplight">
- <div id="muse">
- <img src="https://66.media.tumblr.com/3dd7f3ef778549562413ff92e13e29f1/tumblr_prqig0WvjO1vhunmto1_r4_400.png" class="img"></a>
- <div id="info">
- <b>name</b>
- <br>faceclaim</div>
- </div>
- <!-- MUSE -->
- <a href="#?w=450" rel="muse21" class="poplight">
- <div id="muse">
- <img src="https://66.media.tumblr.com/3dd7f3ef778549562413ff92e13e29f1/tumblr_prqig0WvjO1vhunmto1_r4_400.png" class="img"></a>
- <div id="info">
- <b>name</b>
- <br>faceclaim</div>
- </div>
- <!-- MUSE -->
- <a href="#?w=450" rel="muse22" class="poplight">
- <div id="muse">
- <img src="https://66.media.tumblr.com/3dd7f3ef778549562413ff92e13e29f1/tumblr_prqig0WvjO1vhunmto1_r4_400.png" class="img"></a>
- <div id="info">
- <b>name</b>
- <br>faceclaim</div>
- </div>
- <a href="#?w=450" rel="muse23" class="poplight">
- <div id="muse">
- <img src="https://66.media.tumblr.com/3dd7f3ef778549562413ff92e13e29f1/tumblr_prqig0WvjO1vhunmto1_r4_400.png" class="img"></a>
- <div id="info">
- <b>name</b>
- <br>faceclaim</div>
- </div>
- <a href="#?w=450" rel="muse24" class="poplight">
- <div id="muse">
- <img src="https://66.media.tumblr.com/3dd7f3ef778549562413ff92e13e29f1/tumblr_prqig0WvjO1vhunmto1_r4_400.png" class="img"></a>
- <div id="info">
- <b>name</b>
- <br>faceclaim</div>
- </div>
- </div> </div>
- <!-- POP UP BOX -->
- <div id="muse1" class="popup_block">
- <div id="bio">
- <div id="biotitle">
- TITLE? AGE? OTHER INFO? IDK?
- </div>
- the world is your oyster. (also, this scrolls.)
- </div>
- </div>
- <!-- POP UP BOX -->
- <div id="muse2" class="popup_block">
- <div id="bio">
- <div id="biotitle">
- TITLE? AGE? OTHER INFO? IDK?
- </div>
- the world is your oyster. (also, this scrolls.)
- </div>
- </div>
- <!-- POP UP BOX -->
- <div id="muse3" class="popup_block">
- <div id="bio">
- <div id="biotitle">
- TITLE? AGE? OTHER INFO? IDK?
- </div>
- the world is your oyster. (also, this scrolls.)
- </div>
- </div>
- <!-- POP UP BOX -->
- <div id="muse4" class="popup_block">
- <div id="bio">
- <div id="biotitle">
- TITLE? AGE? OTHER INFO? IDK?
- </div>
- the world is your oyster. (also, this scrolls.)
- </div>
- </div>
- <!-- POP UP BOX -->
- <div id="muse5" class="popup_block">
- <div id="bio">
- <div id="biotitle">
- TITLE? AGE? OTHER INFO? IDK?
- </div>
- the world is your oyster. (also, this scrolls.)
- </div>
- </div>
- <!-- POP UP BOX -->
- <div id="muse6" class="popup_block">
- <div id="bio">
- <div id="biotitle">
- TITLE? AGE? OTHER INFO? IDK?
- </div>
- the world is your oyster. (also, this scrolls.)
- </div>
- </div>
- <!-- POP UP BOX -->
- <div id="muse7" class="popup_block">
- <div id="bio">
- <div id="biotitle">
- TITLE? AGE? OTHER INFO? IDK?
- </div>
- the world is your oyster. (also, this scrolls.)
- </div>
- </div>
- <!-- POP UP BOX -->
- <div id="muse8" class="popup_block">
- <div id="bio">
- <div id="biotitle">
- TITLE? AGE? OTHER INFO? IDK?
- </div>
- the world is your oyster. (also, this scrolls.)
- </div>
- </div>
- <!-- POP UP BOX -->
- <div id="muse9" class="popup_block">
- <div id="bio">
- <div id="biotitle">
- TITLE? AGE? OTHER INFO? IDK?
- </div>
- the world is your oyster. (also, this scrolls.)
- </div>
- </div>
- <!-- POP UP BOX -->
- <div id="muse10" class="popup_block">
- <div id="bio">
- <div id="biotitle">
- TITLE? AGE? OTHER INFO? IDK?
- </div>
- the world is your oyster. (also, this scrolls.)
- </div>
- </div>
- <!-- POP UP BOX -->
- <div id="muse11" class="popup_block">
- <div id="bio">
- <div id="biotitle">
- TITLE? AGE? OTHER INFO? IDK?
- </div>
- the world is your oyster. (also, this scrolls.)
- </div>
- </div>
- <!-- POP UP BOX -->
- <div id="muse12" class="popup_block">
- <div id="bio">
- <div id="biotitle">
- TITLE? AGE? OTHER INFO? IDK?
- </div>
- the world is your oyster. (also, this scrolls.)
- </div>
- </div>
- <!-- POP UP BOX -->
- <div id="muse13" class="popup_block">
- <div id="bio">
- <div id="biotitle">
- TITLE? AGE? OTHER INFO? IDK?
- </div>
- the world is your oyster. (also, this scrolls.)
- </div>
- </div>
- <!-- POP UP BOX -->
- <div id="muse14" class="popup_block">
- <div id="bio">
- <div id="biotitle">
- TITLE? AGE? OTHER INFO? IDK?
- </div>
- the world is your oyster. (also, this scrolls.)
- </div>
- </div>
- <!-- POP UP BOX -->
- <div id="muse15" class="popup_block">
- <div id="bio">
- <div id="biotitle">
- TITLE? AGE? OTHER INFO? IDK?
- </div>
- the world is your oyster. (also, this scrolls.)
- </div>
- </div>
- <!-- POP UP BOX -->
- <div id="muse16" class="popup_block">
- <div id="bio">
- <div id="biotitle">
- TITLE? AGE? OTHER INFO? IDK?
- </div>
- the world is your oyster. (also, this scrolls.)
- </div>
- </div>
- <!-- POP UP BOX -->
- <div id="muse17" class="popup_block">
- <div id="bio">
- <div id="biotitle">
- TITLE? AGE? OTHER INFO? IDK?
- </div>
- the world is your oyster. (also, this scrolls.)
- </div>
- </div>
- <!-- POP UP BOX -->
- <div id="muse18" class="popup_block">
- <div id="bio">
- <div id="biotitle">
- TITLE? AGE? OTHER INFO? IDK?
- </div>
- the world is your oyster. (also, this scrolls.)
- </div>
- </div>
- <!-- POP UP BOX -->
- <div id="muse20" class="popup_block">
- <div id="bio">
- <div id="biotitle">
- TITLE? AGE? OTHER INFO? IDK?
- </div>
- the world is your oyster. (also, this scrolls.)
- </div>
- </div>
- <!-- POP UP BOX -->
- <div id="muse21" class="popup_block">
- <div id="bio">
- <div id="biotitle">
- TITLE? AGE? OTHER INFO? IDK?
- </div>
- the world is your oyster. (also, this scrolls.)
- </div>
- </div>
- <!-- POP UP BOX -->
- <div id="muse22" class="popup_block">
- <div id="bio">
- <div id="biotitle">
- TITLE? AGE? OTHER INFO? IDK?
- </div>
- the world is your oyster. (also, this scrolls.)
- </div>
- </div>
- <!-- POP UP BOX -->
- <div id="muse23" class="popup_block">
- <div id="bio">
- <div id="biotitle">
- TITLE? AGE? OTHER INFO? IDK?
- </div>
- the world is your oyster. (also, this scrolls.)
- </div>
- </div>
- <!-- POP UP BOX -->
- <div id="muse24" class="popup_block">
- <div id="bio">
- <div id="biotitle">
- TITLE? AGE? OTHER INFO? IDK?
- </div>
- the world is your oyster. (also, this scrolls.)
- </div>
- </div>
- <!-- END -->
- </body>
Advertisement
Add Comment
Please, Sign In to add comment