Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
- <head>
- <!---- theme by jasnahdavar
- ------ DO NOT steal/redistribute/remove credit
- ------ ASK ME if you want to use as a base code i promise i'm nice
- ------ images are 140px x 209px . these dimensions are based on the imdb dimensions, but you can change that if you want
- ------ if your summary runs over a scrollbar will automatically appear
- ------ PLEASE don't forget to go to the end of the code and replace the text that says YOURURLHERE with your tumblr url for the askbox to work!!!
- ------>
- <title>{Title}</title>
- <link rel="shortcut icon" href="{Favicon}">
- <link rel="altertnate" type="application/rss+xml" href="{RSS}">
- <link href='http://fonts.googleapis.com/css?family=Fenix' rel='stylesheet' type='text/css'>
- <link href='http://fonts.googleapis.com/css?family=Fondamento' rel='stylesheet' type='text/css'>
- <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" type="text/javascript"></script>
- <script type="text/javascript">// <![CDATA[
- $(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">
- ::-webkit-scrollbar-thumb:vertical {
- background-color:#cfcfcf; /*slider color*/
- height:50px;
- }
- ::-webkit-scrollbar-thumb:horizontal {
- background-color:#cfcfcf; /*slider color*/
- height:100px !important;
- }
- ::-webkit-scrollbar {
- height:10px;
- width:7px;
- background-color:#eeeeee; /*bg color*/
- }
- body {
- background: #FFFFFF;
- font-size: 11px;
- color: #000000;
- font-family:helvetica;
- }
- a:link, a:active, a:visited {
- color: #000; /* LINK COLOR */
- text-decoration: none;
- -webkit-transition: all 0.3s ease-out;
- -moz-transition: all 0.3s ease-out;
- transition: all 0.3s ease-out;
- }
- a:hover {
- color: #000; /* LINK HOVER */
- text-decoration: underline;
- -webkit-transition: all 0.3s ease-out;
- -moz-transition: all 0.3s ease-out;
- transition: all 0.3s ease-out;
- }
- .popup_block{
- display:none;
- background:#FFF;
- padding:20px;
- border:2px solid #AAA;
- float:left;
- position:fixed;
- top:50%;left:50%;
- max-height:600px;
- overflow:auto;
- z-index: 99999;
- -webkit-box-shadow: 0px 0px 20px #000;
- -moz-box-shadow: 0px 0px 20px #000;
- box-shadow: 0px 0px 20px #000;}
- img.btn_close {float: right;margin: -20 -20px 0 0;}
- *html #fade {position: absolute;}
- *html .popup_block {position: absolute;}
- #fade {display:none;background:#000;position:fixed;left:0;top:0;
- width:100%;height:100%;opacity:0.8;z-index:9999;}
- #credit {
- position:fixed;
- right:10px;
- bottom:10px;
- }
- #credit a {
- color:#999;
- font-weight:bold;
- }
- #credit a:hover {
- text-decoration:none;
- color:#000;
- }
- /* TITLE */
- #title {
- position:fixed;
- height:50px;
- top:50%;
- margin-top:-280px;
- font-size:50px;
- font-family:arial;
- width:500px;
- left:50%;
- z-index:2;
- color:#666; /* title color */
- margin-left:-250px;
- }
- #title::first-letter {
- color:#000; /* title first letter color */
- }
- /* NAVLINKS */
- #navlinks {
- position:fixed;
- width:100px;
- left:50%;
- margin-left:270px;
- top:50%;
- margin-top:-200px;
- height:460px;
- }
- #navlinks a {
- padding-left:5px;
- border-left:10px solid #999; /* navlinks border color
- ----------------------------- looks best when it matches the box border
- -*/
- margin-bottom:10px;
- display:block;
- }
- #navlinks a:hover {
- text-decoration:none;
- border-left:20px solid #999; /* navlinks hver border color */
- }
- /* DESCRIPTION */
- #desc {
- position:fixed;
- width:125px;
- left:50%;
- margin-left:-400px;
- bottom:50%;
- margin-bottom:-200px;
- text-align:right;
- padding:5px;
- color:#666; /* description color */
- }
- /* ---- CONTAINER ------------*/
- #container {
- position:fixed;
- background:#fff; /* background */
- border:4px solid #999; /* border */
- height:450px;
- width:500px;
- top:50%;
- left:50%;
- margin-top:-230px;
- margin-left:-255px;
- border-radius:10px;
- padding:10px;
- overflow:auto;
- }
- /* FILMS */
- .film {
- width:140px;
- height:209px;
- /*-- height and width should match height and width of image --*/
- display:inline-block;
- margin:10px;
- }
- .film img{
- width:140px;
- height:209px;
- /*--- !!! HEIGHT AND WIDTH OF IMAGES !!! ---*/
- }
- .film:hover .info{
- opacity:1;
- -webkit-transition:0.6s;
- -moz-transition:0.6s;
- transition:0.6s;
- width:130px;
- height:205px;
- overflow:auto;
- margin-top:-209px;
- }
- .info {
- height:205px;
- margin-top:-209px;
- width:0px;
- background:#fff; /* film info background */
- opacity:0;
- z-index:1000000;
- position:absolute;
- padding:5px;
- overflow:auto;
- }
- .filmtitle {
- text-align:center;
- text-transform:uppercase;
- font-size:14px;
- font-weight:bold;
- color:#4d7794; /* FILM TITLE COLOR */
- }
- .year {
- text-align:center;
- text-transform:uppercase;
- font-size:12px;
- font-weight:bold;
- color:#82a0b4; /* FILM YEAR COLOR */
- }
- .rating {
- margin-top:5px;
- text-align:center;
- color:#ffcc00; /* RATING COLOR */
- }
- .watched {
- text-align:left;
- font-size:9px;
- margin-top:5px;
- font-style:italic;
- color:#79afc2; /* DATE WATCHED COLOR */
- }
- .summary {
- text-align:left;
- margin-top:7px;
- font-size:10px;
- margin-left:5px;
- color:#808080; /* SUMMARY TEXT COLOR */
- }
- strong {
- color:#476bb2; /* BOLD TEXT COLOR */
- }
- </style>
- </head>
- <body>
- <div id="title">films</div>
- <div id="navlinks">
- <a href="/">home</a>
- <a class="poplight" href="#?w=300" rel="box1">recommend</a>
- <a href="http://tumblr.com">dash</a>
- </div>
- <div id="desc">
- <!------ write a short description here ----------->
- </div>
- <!--------- films container ------------------------------------------>
- <div id="container">
- <div class="film">
- <img src="URL">
- <div class="info">
- <div class="filmtitle">TITLE</div>
- <div class="year">YEAR</div>
- <div class="rating">☆☆☆☆☆<!--- copy or remove as many stars as you want ---></div>
- <div class="watched">watched:DATE</div>
- <div class="summary"><strong>summary:</strong>write a summary here</div>
- </div>
- </div>
- <!----- to add more films copy the following code -------->
- <div class="film">
- <img src="URL">
- <div class="info">
- <div class="filmtitle">TITLE</div>
- <div class="year">YEAR</div>
- <div class="rating">☆☆☆☆☆</div>
- <div class="watched">watched:DATE</div>
- <div class="summary">
- <strong>summary:</strong> summary here
- </div>
- </div>
- </div>
- <!----------- copy more films in the below space -------------------------------->
- <!------------ copy more films in the above space ------------------------------->
- </div>
- <!--- DO NOT REMOVE CREDIT
- ----- PLEASE GO UNDER THE </BODY> TAG AND SEARCH FOR THE TEXT THAT SAYS YOURURLHERE. REPLACE IT WITH YOUR URL FOR THE ASKBOX TO WORK
- ----->
- <div id="credit">
- <a href="http://jasnahdavar.tumblr.com">JD.</a>
- </div>
- </body>
- <div class="popup_block" id="box1"><iframe frameborder="0" height="150px" id="ask_form" scrolling="no" src="http://www.tumblr.com/ask_form/YOURURLHERE.tumblr.com" width="300px" style="background-color: transparent; overflow: hidden;"></iframe></div>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement