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">
- <!-- currently watching blog page -->
- <!-- made by pistachi-o (nutty-themes @ tumblr) -->
- <!-- please don't remove the credit and claim it as your own -->
- <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
- <head>
- <title>{Title}</title>
- <link rel="shortcut icon" href="{Favicon}">
- <link rel="altertnate" type="application/rss+xml" href="{RSS}">
- <meta name="description" content="" />
- <meta http-equiv="x-dns-prefetch-control" content="off"/></head>
- <link href='http://fonts.googleapis.com/css?family=Droid+Serif' rel='stylesheet' type='text/css'>
- <script src="http://static.tumblr.com/whx9ghv/lq0m3ktlh/modernizr.custom.34978.js"></script>
- <link href='http://fonts.googleapis.com/css?family=Dosis' rel='stylesheet' type='text/css'>
- <style type="text/css">
- body {
- background-color: #FFFFFF;
- font-size: 10px;
- text-align: center;
- line-height: 100%;
- }
- a:link, a:active, a:visited {
- color: #033649;
- text-decoration: none;
- }
- a:hover {
- color: #9ABFC8;
- text-decoration: none;
- }
- .container {
- width: 960px;
- margin: 10px auto 30px auto;
- }
- .container a:link, a:active, a:visited {
- color: #FFFFFF;
- text-decoration: none;
- }
- .container a:hover {
- color: #FFFFFF;
- text-decoration: none;
- }
- .container label {
- font-family: 'Dosis', Arial, sans-serif;
- text-transform: uppercase;
- line-height: 200%;
- font-size: 19px;
- width: 25%;
- height: 40px;
- color: #F3F3F3;
- box-shadow: 0px 0px 0px 1px #aaa, 1px 0px 0px 0px rgba(255,255,255,0.9) inset, 0px 1px 2px rgba(0,0,0,0.2);
- float: left;
- margin-bottom: 20px;
- cursor: pointer;
- }
- .container label.label-type-all {
- border-radius: 3px 0px 0px 3px;
- background: #EEEEEE;
- }
- .container label.label-type-1 {
- background: #521515;
- }
- .container label.label-type-2 {
- background: #A6C4C5;
- }
- .container label.label-type-3 {
- background: #3D96B9;
- border-radius: 0px 3px 3px 0px;
- }
- .container input.selector-type-all:checked ~ label.label-type-all,
- .container input.selector-type-1:checked ~ label.label-type-1,
- .container input.selector-type-2:checked ~ label.label-type-2,
- .container input.selector-type-3:checked ~ label.label-type-3 {
- color: #424d71;
- text-shadow: 0px 1px 1px rgba(255,255,255,0.3);
- box-shadow: 0px 0px 0px 1px #40496e, 0 1px 5px rgba(0,0,0,0.1) inset;
- }
- .container input {
- display: none;
- }
- .items {
- position: relative;
- margin: 0px auto;
- padding-top: 20px;
- }
- .items li {
- list-style: none;
- margin: 5px;
- float: left;
- width: 200px;
- height: 230px;
- padding: 5px;
- background: #EEEEEE;
- -webkit-transition: opacity 0.6s ease-in-out;
- -moz-transition: opacity 0.6s ease-in-out;
- -o-transition: opacity 0.6s ease-in-out;
- -ms-transition: opacity 0.6s ease-in-out;
- transition: opacity 0.6s ease-in-out;
- }
- .items li img {
- display: block;
- margin: 5px 0px;
- max-width: 200px;
- text-align: center;
- }
- .items li .title1 {
- width: 200px;
- height: auto;
- padding: 5px;
- background: #521515;
- font-family: 'Dosis', sans-serif;
- line-height: 100%;
- font-size: 12px;
- letter-spacing: 2px;
- text-transform: uppercase;
- text-align: center;
- margin-left: -5px;
- margin-top: -5px;
- color: #FFF;
- }
- .items li .title2 {
- width: 200px;
- height: auto;
- padding: 5px;
- background: #A6C4C5;
- font-family: 'Dosis', sans-serif;
- line-height: 100%;
- font-size: 12px;
- letter-spacing: 2px;
- text-transform: uppercase;
- text-align: center;
- margin-left: -5px;
- margin-top: -5px;
- color: #FFF;
- }
- .items li .title3 {
- width: 200px;
- height: auto;
- padding: 5px;
- background: #3D96B9;
- font-family: 'Dosis', sans-serif;
- line-height: 100%;
- font-size: 12px;
- letter-spacing: 2px;
- text-transform: uppercase;
- text-align: center;
- margin-left: -5px;
- margin-top: -5px;
- color: #FFF;
- }
- .items li .border1 {
- margin-left: -5px;
- margin-top: 8px;
- position: relative;
- width: 200px;
- height: auto;
- padding: 5px;
- font-family: 'Dosis', sans-serif;
- line-height: 100%;
- font-size: 9px;
- letter-spacing: 2px;
- text-transform: uppercase;
- text-align: right;
- color: #FFF;
- background: #521515;
- }
- .items li .border2 {
- margin-left: -5px;
- margin-top: 8px;
- position: relative;
- width: 200px;
- height: auto;
- padding: 5px;
- font-family: 'Dosis', sans-serif;
- line-height: 100%;
- font-size: 9px;
- letter-spacing: 2px;
- text-transform: uppercase;
- text-align: right;
- color: #FFF;
- background: #A6C4C5;
- }
- .items li .border3 {
- margin-left: -5px;
- margin-top: 8px;
- position: relative;
- width: 200px;
- height: auto;
- padding: 5px;
- font-family: 'Dosis', sans-serif;
- line-height: 100%;
- font-size: 9px;
- letter-spacing: 2px;
- text-transform: uppercase;
- text-align: right;
- color: #FFF;
- background: #3D96B9;
- }
- .container input.selector-type-all:checked ~ .items li,
- .container input.selector-type-1:checked ~ .items .item-type-1,
- .container input.selector-type-2:checked ~ .items .item-type-2,
- .container input.selector-type-3:checked ~ .items .item-type-3 {
- opacity: 1;
- }
- .container input.selector-type-1:checked ~ .items li:not(.item-type-1),
- .container input.selector-type-2:checked ~ .items li:not(.item-type-2),
- .container input.selector-type-3:checked ~ .items li:not(.item-type-3) {
- opacity: 0.1;
- }
- .container input.selector-type-1:checked ~ .items li:not(.item-type-1) span,
- .container input.selector-type-2:checked ~ .items li:not(.item-type-2) span,
- .container input.selector-type-3:checked ~ .items li:not(.item-type-3) span {
- display:none;
- }
- .credits {position: fixed; padding: 5px; bottom: 5px; left: 0; z-index: 1000; font-size: 8px;}
- .credits a {color: #000;}
- a.icon {
- margin: 12px;
- background-color: transparent;
- display: inline-block;
- position: relative;
- vertical-align: top;
- height: 46px;
- width: 46px;
- z-index: 9000;
- }
- a.icon:after,
- a.icon:before {
- background: #fed;
- border: 3px solid #EEEEEE;
- content: '';
- position: absolute;
- }
- a.icon:hover:after,
- a.icon:hover:before {
- border: 3px solid #F5F5F5;
- }
- a.prev:after,
- a.prev:before {
- border-radius: 2px;
- height: 0;
- left: 15px;
- width: 32px;
- }
- a.prev:after {
- bottom: 8px;
- -webkit-transform: rotate(45deg);
- -moz-transform: rotate(45deg);
- -o-transform: rotate(45deg);
- transform: rotate(45deg);
- }
- a.prev:before {
- top: 8px;
- -webkit-transform: rotate(-45deg);
- -moz-transform: rotate(-45deg);
- -o-transform: rotate(-45deg);
- transform: rotate(-45deg);
- }
- #pagel {
- position: fixed;
- left: 0;
- top: 40%;
- }
- </style>
- <body>
- <div id="pagel">
- <a class="prev icon" title="Back To Blog" href="/"></a>
- </div>
- <div class="credits"><a href="http://nutty-themes.tumblr.com/" target="_blank">THEME BY PISTACHI-O</a></div>
- <section class="container">
- <input id="select-type-all" name="radio-set-1" type="radio" class="selector-type-all" checked="checked" />
- <label for="select-type-all" class="label-type-all">All</label>
- <input id="select-type-1" name="radio-set-1" type="radio" class="selector-type-1" />
- <label for="select-type-1" class="label-type-1">Watching</label>
- <input id="select-type-2" name="radio-set-1" type="radio" class="selector-type-2" />
- <label for="select-type-2" class="label-type-2">On Hiatus/To Watch</label>
- <input id="select-type-3" name="radio-set-1" type="radio" class="selector-type-3" />
- <label for="select-type-3" class="label-type-3">Completed Series</label>
- <ul class="items">
- <!-- Label 1 (Currently Watching) -->
- <li class="item-type-1">
- <div class="title1"><a href="/tagged/">Title (1)</a></div> <!-- Name of Show -->
- <img src="http://i.imgur.com/5LxbB.jpg" /> <!-- Image URL -->
- <div class="border1">Progess</div>
- </li>
- <!-- Label 2 (On Hiatus) -->
- <li class="item-type-2">
- <div class="title2"><a href="/tagged/">Title (To Be Aired)</a></div> <!-- Name of Show -->
- <img src="http://i.imgur.com/LGkxT.jpg" /> <!-- Image URL -->
- <div class="border2">Progess</div>
- </li>
- <!-- Label 3 (Completed) -->
- <li class="item-type-3">
- <div class="title3"><a href="/tagged/">Title (Alphas)</a></div> <!-- Name of Show -->
- <img src="http://i.imgur.com/5kB3V.jpg" /> <!-- Image URL -->
- <div class="border3">Progess</div>
- </li>
- </ul>
- </section>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement