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> <!-- DEFAULT VARIABLES -->
- <title>{Title}</title>
- <meta name="color:background" content="#fafafa" />
- <meta name="color:postbg" content="#fafafa" />
- <meta name="color:border" content="#fafafa" />
- <meta name="color:text" content="#443b3b" />
- <meta name="color:title" content="#443b3b" />
- <meta name="color:link" content="#555252" />
- <meta name="color:desc" content="#ffffff" />
- <meta name="color:highlight" content="#555252" />
- <meta name="color:Top" content="#fafafa" />
- <meta name="color:top background" content="#1f1f1f" />
- <meta name="color:entry hover" content="#1f1f1f" />
- <meta name="color:entries" content="#FFFFFC"/>
- <meta name="color:tradeShow" content="#fafafa" />
- <meta name="color:holiday" content="#1f1f1f" />
- <meta name="color:meeting" content="#1f1f1f" />
- <meta name="color:birthday" content="#FFFFFC"/>
- <meta name="image:slide 1" content="#FFFFFC"/>
- <meta name="image:slide 2" content="#FFFFFC"/>
- <meta name="image:slide 3" content="#FFFFFC"/>
- <meta name="image:slide 4" content="#FFFFFC"/>
- <meta name="image:slide 5" content="#FFFFFC"/>
- <meta name="text:tag 1" content="Awards">
- <meta name="text:PhotoURL 1" content="http://40.media.tumblr.com/c1d24e5417fa3be38ae41f65712d5613/tumblr_njthlyftRj1tg80flo1_1280.jpg">
- <meta name="text:Type 1" content="awards">
- <meta name="text:Title 1" content="121314 jhope awards">
- <link rel="shortcut icon" href="{Favicon}">
- <link rel="alternate" type="application/rss+xml" href="{RSS}">
- <link rel="shortcut icon" href="{Favicon}">
- <title>{Title}</title>
- <link rel="shortcut icon" href="{Favicon}">
- <link rel="alternate" type="application/rss+xml" href="{RSS}">
- {block:Description}
- <meta name="description" content="{MetaDescription}" />
- {/block:Description}
- <!--Fonts-->
- <link href='http://fonts.googleapis.com/css?family=Questrial' rel='stylesheet' type='text/css'>
- <link href='http://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'>
- <link href='http://fonts.googleapis.com/css?family=Montserrat+Alternates|Righteous|Montserrat|Open+Sans' rel='stylesheet' type='text/css'>
- <link href='http://fonts.googleapis.com/css?family=Roboto:400,500,700,700italic,900,900italic|Roboto+Condensed' rel='stylesheet' type='text/css'>
- <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
- <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
- <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
- <script>
- $('a.nextDay').click(function() {
- $('li.current').next().addClass('current').prev().removeClass('current');
- });
- $('a.prevDay').click(function() {
- $('li.current').prev().addClass('current').next().removeClass('current');
- });
- $('a.today').click(function(){
- $('li.current').removeClass('current');
- $('li.today').addClass('current');
- });
- $('a.expand').click(function(){
- $(this).parent().toggleClass('open');
- $(this).toggleClass('open');
- });
- </script>
- <script type="text/javascript" src="http://static.tumblr.com/ifqwhnb/GBsm20q7d/jquery.nivo.slider.pack.js"></script>
- <script type="text/javascript">
- var $nv4wp = jQuery.noConflict();
- $nv4wp(window).load(function() {
- $nv4wp('#slider').nivoSlider({
- effect:'random',
- slices:15, // For slice animations
- boxCols: 4, // For box animations
- boxRows: 2, // For box animations
- animSpeed:500, // Slide transition speed
- pauseTime:3000, // How long each slide will show
- startSlide:0, // Set starting Slide (0 index)
- directionNav:true, //Next & Prev
- directionNavHide:true, //Only show on hover
- controlNav:true, // 1,2,3... navigation
- controlNavThumbs:false, // Use thumbnails for Control Nav
- controlNavThumbsFromRel:false, // Use image rel for thumbs
- controlNavThumbsSearch: '.jpg', // Replace this with...
- controlNavThumbsReplace: '_thumb.jpg', // ...this in thumb Image src
- keyboardNav:true, //Use left & right arrows
- pauseOnHover:true, //Stop animation while hovering
- manualAdvance:false, //Force manual transitions
- captionOpacity:0.8, //Universal caption opacity
- prevText: '', // Prev directionNav text
- nextText: '', // Next directionNav text
- beforeChange: function(){}, // Triggers before a slide transition
- afterChange: function(){}, // Triggers after a slide transition
- slideshowEnd: function(){}, // Triggers after all slides have been shown
- lastSlide: function(){}, // Triggers when last slide is shown
- afterLoad: function(){} // Triggers when slider has loaded
- });
- });
- </script>
- <script type="text/javascript">
- function changeNavigation(id) {document.getElementById('liuc').innerHTML=document.getElementById(id).innerHTML}
- </script>
- <style type="text/css">
- body{
- background:{color:Background};
- background-image:url('');
- background-repeat:repeat;
- background-attachment:fixed;
- background-position:bottom right;
- line-height:110%;
- font-family: 'roboto';
- font-size: 12px;
- letter-spacing: px;
- color:{color:text};
- height: 100%;
- }
- a:link, a:visited, a:active{
- color:{color:link};
- outline: none;
- -moz-outline-style: none;
- text-decoration:none;
- }
- a img{
- border:none;
- }
- blockquote{
- padding:0px;
- padding-left:5px;
- margin:5px;
- border-left:1px dotted #288992;
- }
- blockquote img{
- display:block;
- }
- blockquote p{
- padding:0px;
- margin:0px;
- }
- blockquote blockquote{
- position:relative;
- left:-5px;
- margin-top:0px;
- margin-right:0px;
- padding-right:0px;
- }
- ul.chat, .chat ol, .chat li {
- list-style:none;
- margin:0px;
- padding:0px;
- }
- #content {
- width:1100px;
- margin: 0px auto;
- }
- .cont {
- margin:auto;
- padding:0;
- display: -webkit-flex;
- display: -moz-flex;
- display: -ms-flex;
- display: flex;
- -webkit-flex-flow: row wrap;
- -moz-flex-flow: row wrap;
- -ms-flex-flow: row wrap;
- flex-flow: row wrap;
- -webkit-justify-content: space-around;
- -moz-justify-content: space-around;
- -ms-justify-content: space-around;
- justify-content: space-around;
- -webkit-align-items: stretch;
- -moz-align-items: stretch;
- -ms-align-items: stretch;
- align-items: stretch;
- width:100%;
- height:auto;
- background-color:{color:content};
- }
- .infobox{
- background-color:{color:content};
- margin:10px;
- position:relative;
- z-index:9999!important;
- -webkit-flex: 2 500px;
- -moz-flex: 2 500px;
- -ms-flex: 2 500px;
- flex: 2 500px;
- }
- .entryinfo{
- {block:IndexPage}
- {/block:IndexPage}
- {block:PermalinkPage}
- Width:500px;
- {/block:PermalinkPage}
- background-color:transparent;
- overflow:hidden;
- }
- .photo {
- border:20px solid {color:entries};
- }
- .entry{
- {block:IndexPage}
- margin:70px 10px 90px 10px;
- position:relative;
- -webkit-flex: 3 300px;
- -moz-flex: 3 300px;
- -ms-flex: 3 300px;
- flex: 3 300px;
- {/block:IndexPage}
- {block:PermalinkPage}
- width:500px;
- margin-left:-50px;
- margin-top:50px;
- {/block:PermalinkPage}
- }
- /* The Nivo Slider styles */
- #slider {position:relative;z-index:50;}
- #slider img {position:absolute; top:0px; left:0px; display:none;}
- #slider a {border:0; display:block;}
- .nivoSlider {position:relative; width: 1100px; height:350px;}
- .nivoSlider img {position:absolute; top:0px; left:0px;}
- /* If an image is wrapped in a link */
- .nivoSlider a.nivo-imageLink {position:absolute; top:0px; left:0px; width:100%; height:100%; border:0;
- padding:0;margin:0; z-index:6; display:none;}
- /* The slices and boxes in the Slider */
- .nivo-slice {display:block;position:absolute;z-index:5;height:100%;}
- .nivo-box {display:block;position:absolute;z-index:5;}
- /* Caption styles */
- .nivo-caption {display:none}
- .nivo-caption p {padding:0 20px;margin:0;font-size:14px;}
- .nivo-caption a {display:inline !important;}
- .nivo-html-caption {display:none;}
- /* Direction nav styles (e.g. Next & Prev) */
- .nivo-directionNav a {display:none;}
- .nivo-prevNav {display:none;}
- .nivo-nextNav {display:none;}
- /*============================*/
- /*=== Custom Slider Styles ===*/
- /*============================*/
- .slider {width:100%;}
- .slider img {position:absolute;top:0px;left:0px;display:none;}
- .slider a {border:0;display:block;}
- .nivo-controlNav {display:none;}
- .nivo-directionNav a {display:none;}
- a.nivo-nextNav {display:none;}
- a.nivo-prevNav {display:none;}
- .nivo-caption {font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;}
- .nivo-caption a {color:#efe9d1; text-decoration:underline;}
- /*Top Bar*/
- .topbar {
- padding:40px 0px 20px 0px;
- }
- .topbar h1{
- font-family: 'Pacifico', cursive;
- color:{color:title};
- font-size:44px;
- }
- body {
- -webkit-font-smoothing: antialiased !important;
- webkit-text-stroke: 1px rgba(0,0,0,0.1);
- }
- .type {
- width:400px;
- text-align:;
- color: {color:title};
- line-height:0.65;
- font-family: 'Montserrat';
- font-weight: bold;
- }
- .type span:nth-child(1) {
- font-size: 70px;
- }
- .type span:nth-child(2) {
- font-family: 'Roboto', sans-serif;
- text-transform:uppercase;
- font-weight: 400;
- line-height:.95;
- font-size: 15px;
- letter-spacing:2px;
- position: relative;
- font-weight:bold;
- z-index: 1;
- }
- .type span:nth-child(3) {
- font-size: 70px;
- margin-top:-12px;
- }
- /* POSTS/DATA TITLE*/
- .bar {
- width:1090;
- padding:10px 0px 0px 20px;
- border-left:1px solid {color:border};
- border-top:1px solid {color:border};
- font-family: 'Montserrat';
- font-weight:700;
- margin-top:0px;
- }
- .recent {
- width:35%;
- height:400px;
- display:inline-block;
- }
- .recent1 {
- width:500px;
- height:400px;
- position:absolute;
- margin-left:50px;
- display:inline-block;
- }
- .iconimg {
- width:80px;
- height:55px;
- display:inline-block;
- overflow:hidden;
- margin:5px 5px 0px 0px;
- }
- .iconimg img{
- width:100px;
- }
- h1{
- font-family: 'Montserrat';
- font-weight:bold;
- font-size:13px;
- }
- /* Google fonts - Open Sans */
- /* links */
- /* wrapper */
- .wrapper {
- width: 400px;
- margin: 0px auto 100px auto;
- padding: 0;
- overflow: hidden;
- position: relative;
- }
- /* lists */
- .row ul {
- margin: 0;
- padding: 0;
- }
- .row ul li {
- margin: 0;
- font-size: 12px;
- font-weight: normal;
- list-style: none;
- display: inline-block;
- width: 33%;
- box-sizing: border-box;
- }
- @media only screen and (max-width: 767px) and (min-width: 480px) {
- .row ul li {
- font-size: 13px;
- }
- }
- @media only screen and (max-width: 479px) {
- .row ul li {
- font-size: 13px;
- }
- }
- .title ul li {
- padding: 15px 13px;
- }
- .row ul li {
- padding: 5px 10px;
- }
- /* rows */
- .row {
- padding: 10px 0;
- height: 30px;
- font-size: 0;
- position: relative;
- overflow: hidden;
- -webkit-transition: all 0.2s ease-out;
- transition: all 0.2s ease-out;
- border-top: 1px solid rgba(0, 0, 0, 0.1);
- }
- .row:hover {
- background:#fafafa;
- height: 65px;
- }
- @media only screen and (max-width: 767px) {
- .row:hover {
- height: 85px;
- }
- }
- @media only screen and (max-width: 359px) {
- .row:hover {
- height: 105px;
- }
- }0
- .title {
- padding: 15px 0 0px 0;
- height: 45px;
- font-size: 0;
- background-color: rgba(255, 255, 255, 0.1);
- border-left: 3px solid rgba(255, 255, 255, 0.1);
- }
- .title:hover {
- height: 45px;
- background-color: rgba(255, 255, 255, 0.1);
- border-left: 3px solid rgba(255, 255, 255, 0.1);
- }
- @media only screen and (max-width: 767px) {
- .title-hide {
- display: none;
- }
- }
- .nfl {
- }
- .nfl:hover {
- border-left: 3px solid #4fc0d2;
- }
- .mlb {
- border-left: 3px solid #1d6e4b;
- }
- .mlb:hover {
- border-left: 3px solid #52d29a;
- }
- .nhl {
- border-left: 3px solid rgba(157, 121, 25, 0.7);
- }
- .nhl:hover {
- border-left: 3px solid rgba(231, 196, 104, 0.7);
- }
- .pga {
- border-left: 3px solid #952f12;
- }
- .pga:hover {
- border-left: 3px solid #eb7655;
- }
- /* row one - fadeIn */
- .row-fadeIn-wrapper {
- opacity: 0;
- font-size: 0;
- height: 0;
- overflow: hidden;
- position: relative;
- -webkit-transition: all 0.2s ease-out;
- transition: all 0.2s ease-out;
- -webkit-animation: fadeIn 0.4s ease-out 2s 1 alternate;
- animation: fadeIn 0.4s ease-out 2s 1 alternate;
- -webkit-animation-fill-mode: forwards;
- animation-fill-mode: forwards;
- }
- .row-fadeIn-wrapper:hover {
- height: 35px;
- }
- @media only screen and (max-width: 767px) {
- .row-fadeIn-wrapper:hover {
- height: 55px;
- }
- }
- @media only screen and (max-width: 359px) {
- .row-fadeIn-wrapper:hover {
- height: 75px;
- }
- }
- .fadeIn {
- padding: 20px 0;
- font-size: 0;
- position: absolute;
- -webkit-transition: all 0.2s ease-out;
- transition: all 0.2s ease-out;
- width: 100%;
- }
- .fadeIn:hover {
- }
- /* row two - fadeOut */
- .row-fadeOut-wrapper {
- font-size: 0;
- overflow: hidden;
- position: relative;
- -webkit-transition: all 0.2s ease-out;
- transition: all 0.2s ease-out;
- -webkit-animation: fadeOut 0.4s ease-out 8s 1 alternate;
- animation: fadeOut 0.4s ease-out 8s 1 alternate;
- -webkit-animation-fill-mode: forwards;
- animation-fill-mode: forwards;
- opacity: 1;
- height: 65px;
- }
- .row-fadeOut-wrapper:hover {
- height: 100px;
- }
- /* update content */
- .update-row {
- -webkit-animation: update 0.5s ease-out 12s 1 alternate;
- animation: update 0.5s ease-out 12s 1 alternate;
- }
- .update1 {
- position: absolute;
- top: 25px;
- display: inline-block;
- opacity: 1;
- -webkit-animation: update1 1s ease-out 12s 1 alternate;
- animation: update1 1s ease-out 12s 1 alternate;
- -webkit-animation-fill-mode: forwards;
- animation-fill-mode: forwards;
- }
- .update2 {
- position: absolute;
- top: 25px;
- display: inline-block;
- opacity: 0;
- -webkit-animation: update2 4s ease-out 13s 1 alternate;
- animation: update2 4s ease-out 13s 1 alternate;
- -webkit-animation-fill-mode: forwards;
- animation-fill-mode: forwards;
- }
- /* more content */
- ul.more-content li {
- position: relative;
- top: 8px;
- font-size: 13px;
- margin: 0;
- padding: 10px 13px;
- display: block;
- height: 50px;
- width: 100%;
- color: rgba(128, 128, 128, 0.9);
- }
- @media only screen and (max-width: 767px) {
- ul.more-content li {
- font-size: 11px;
- }
- }
- /* small content */
- .small {
- color: rgba(102, 102, 102, 0.9);
- font-size: 10px;
- padding: 0 10px;
- margin: 0;
- }
- @media only screen and (max-width: 767px) {
- .small {
- display: none;
- }
- }
- /* keyframe animations */
- @-webkit-keyframes fadeIn {
- from {
- opacity: 0;
- padding: 0;
- }
- to {
- opacity: 1;
- padding: 0 0 65px 0;
- }
- }
- @keyframes fadeIn {
- from {
- background: rgba(255, 255, 255, 0.1);
- opacity: 0;
- padding: 0;
- }
- to {
- background:#fafafa;
- opacity: 1;
- padding: 0 0 65px 0;
- }
- }
- @-webkit-keyframes fadeOut {
- from {
- background: rgba(51, 51, 51, 0.1);
- opacity: 1;
- height: 65px;
- }
- to {
- background: rgba(255, 255, 255, 0.1);
- opacity: 0;
- height: 0;
- }
- }
- @keyframes fadeOut {
- from {
- background:#fafafa;
- opacity: 1;
- height: 65px;
- }
- to {background:#fafafa;
- opacity: 0;
- height: 0;
- }
- }
- @-webkit-keyframes update {
- 0% {
- background: rgba(51, 51, 51, 0.1);
- }
- 50% {
- background: rgba(255, 255, 255, 0.1);
- }
- 100% {
- background: rgba(51, 51, 51, 0.1);
- }
- }
- @keyframes update {
- 0% {
- background: rgba(51, 51, 51, 0.1);
- }
- 50% {
- background: rgba(255, 255, 255, 0.1);
- }
- 100% {
- background: rgba(51, 51, 51, 0.1);
- }
- }
- @-webkit-keyframes update1 {
- 0% {
- opacity: 0;
- }
- 0% {
- opacity: 1;
- }
- 100% {
- opacity: 0;
- }
- }
- @keyframes update1 {
- 0% {
- opacity: 0;
- }
- 0% {
- opacity: 1;
- }
- 100% {
- opacity: 0;
- }
- }
- @-webkit-keyframes update2 {
- 0% {
- opacity: 0;
- color: rgba(255, 255, 255, 0.9);
- }
- 20% {
- opacity: 1;
- color: #52d29a;
- }
- 100% {
- opacity: 1;
- color: rgba(255, 255, 255, 0.9);
- }
- }
- @keyframes update2 {
- 0% {
- opacity: 0;
- color: rgba(255, 255, 255, 0.9);
- }
- 20% {
- opacity: 1;
- color: #52d29a;
- }
- 100% {
- opacity: 1;
- color: rgba(255, 255, 255, 0.9);
- }
- }
- /* Tooltip http://codepen.io/chinchang/pen/lICaq */
- .hint { position: relative; display: inline-block; }
- .hint:before, .hint:after {
- position: absolute;
- opacity: 0;
- z-index: 1000000;
- -webkit-transition: 0.3s ease;
- -moz-transition: 0.3s ease;
- pointer-events: none;
- }
- .hint:hover:before, .hint:hover:after {
- opacity: 1;
- }
- .hint:before {
- content: '';
- position: absolute;
- background: transparent;
- border: 6px solid transparent;
- position: absolute;
- }
- .hint:after {
- content: attr(data-hint);
- background: rgba(0, 0, 0, 0.8);
- color: white;
- padding: 8px 20px;
- font-size: 12px;
- white-space: nowrap;
- }
- /* top */
- .hint--top:before {
- bottom: 100%;
- left: 37%;
- margin: 0 0 -18px 0;
- border-top-color: rgba(0, 0, 0, 0.8);
- }
- .hint--top:after {
- bottom: 100%;
- left: 12%;
- margin: 0 0 -6px -10px;
- }
- .hint--top:hover:before {
- margin-bottom: -10px;
- }
- .hint--top:hover:after {
- margin-bottom: 2px;
- }
- /* default: bottom */
- .hint--bottom:before {
- top: 100%;
- left: 37%;
- margin: -14px 0 0 0;
- border-bottom-color: rgba(0, 0, 0, 0.8);
- }
- .hint--bottom:after {
- top: 100%;
- left: 12%;
- margin: -2px 0 0 -10px;
- }
- .hint--bottom:hover:before {
- margin-top: -6px;
- }
- .hint--bottom:hover:after {
- margin-top: 6px;
- }
- /*AUDIO*/
- #acont{
- z-index:2;
- display:block;
- width: 100px;
- height:100px;
- background-color:#ffffff;
- opacity:0.7;
- position:absolute;
- }
- #acont:hover{
- -webkit-transition: all 0.2s ease-in-out;
- -moz-transition: all 0.2s ease-in-out;
- -o-transition: all 0.2s ease-in-out;
- transition: all 0.2s ease-in-out;
- opacity:0.6;}
- #audioplayer{
- width:20px;
- height:20px;
- overflow:hidden;
- margin: 38px 0px 0px 35px;
- background-color:transparent;}
- .atext {
- background-color:{color:audio info};
- font-family: {font:body}!important;
- font-size: 8px;
- line-height: 7px;
- letter-spacing: 2px;
- color: {color:link}!important;
- margin-top:-5px;
- margin-left: 101px;
- text-transform:;
- height:18px;
- text-decoration: none;
- display: block;
- padding: 25px 5px 41px 6px;
- width:390px;
- text-align:center;}
- .atext:hover {
- color:{color:link};
- background-color:{color:entries};
- -webkit-transition: opacity 0.7s linear;
- opacity: 0.9s;
- -webkit-transition: all 0.6s ease-out;
- -moz-transition: all 0.6s ease-out;
- transition: all 0.6s ease-out;
- }
- .audio{
- position:absolute;
- width:40px;
- height:40px;}
- .aimg{
- width:330px;
- height:100px;
- overflow:hidden;
- position:absolute;}
- .aimg img{
- float:left;
- opacity:0.6;
- margin-top:-30px;
- width:350px;
- margin-left:-10px;
- -webkit-filter: blur(3px); filter: blur(3px);
- }
- .audpost {
- display:block;
- width:100%;
- }
- h1 {font-family: sans-serif; font-size: 40px; color: #DB485E; text-align: center; opacity: 0.3; margin-top: 20px;}
- /*Drop down: http://cssmenumaker.com/blog/stunning-free-jquery-dropdown-menus*/
- span.dropBottom,span.dropRight {
- display: block;
- box-shadow:inset 2px 0px 0px #FF9;
- position: absolute;
- left: 0px;
- width:100%;
- height: 100%;
- top: 0px;
- }
- span.dropBottom {
- box-shadow:inset 0px 2px 0px #FF9;
- position: absolute;
- width: 100%;
- bottom: 0px;
- }
- .pagnav {
- float:right;
- margin-top:-20px;
- z-index:9999!important;
- }
- .pagnav ul {
- margin:0;
- padding:0;
- z-index:9999;
- list-style:none;
- }
- .pagnav ul ul {
- opacity:0;
- position:absolute;
- top:160%;
- visibility:hidden;
- transition:all .4s ease;
- -webkit-transition:all .4s ease;
- }
- .pagnav ul ul ul {
- top:0%;
- left:160%;
- }
- .pagnav ul ul li:hover > ul {
- top:0%;
- left:100%;
- opacity:1;
- visibility:visible;
- }
- .pagnav ul li:hover > ul {
- opacity:1;
- top:100%;
- visibility:visible;
- }
- .pagnav ul li {
- background:rgba(255,255,255,0.6);
- float:left;
- position:relative;
- }
- .pagnav ul ul li {
- float:none;
- }
- .pagnav ul li {
- cursor: pointer;
- }
- .pagnav ul a {
- text-transform:uppercase;
- font-family: 'Questrial', sans-serif;
- text-decoration:none;
- display:block;
- font-size:12px;
- color:#FF9;
- letter-spacing:1px;
- padding:10px 15px;
- width:6em;
- text-align:center;
- }
- .pagnav ul li:hover {
- background:rgba(255,255,255,0.9);
- }
- .pagnav ul li a:hover {
- }
- /* Pagination http://tympanus.net/codrops/2014/05/28/arrow-navigation-styles/*/
- nav a {
- position: fixed;
- top: 50%;
- display: block;
- outline: none;
- text-align: left;
- z-index: 1000;
- -webkit-transform: translateY(-50%);
- transform: translateY(-50%);
- }
- nav a.prev {
- left: 0;
- }
- nav a.next {
- right: 0;
- }
- nav a svg {
- display: block;
- margin: 0 auto;
- padding: 0;
- }
- /*--------------------*/
- /* Fillpath (http://www.nizuka.fr/)*/
- /*--------------------*/
- .color-10 { background: #f3cf3f; }
- .nav-fillpath a {
- width: 100px;
- height: 100px;
- }
- .nav-fillpath .icon-wrap {
- position: relative;
- display: block;
- width: 100%;
- height: 100%;
- }
- .nav-fillpath a::before,
- .nav-fillpath a::after,
- .nav-fillpath .icon-wrap::before,
- .nav-fillpath .icon-wrap::after {
- position: absolute;
- left: 50%;
- width: 1px;
- height: 50%;
- background: #000;
- content: '';
- -webkit-transition: -webkit-transform 0.3s;
- transition: transform 0.3s;
- -webkit-backface-visibility: hidden;
- backface-visibility: hidden;
- }
- .nav-fillpath .icon-wrap::before,
- .nav-fillpath .icon-wrap::after {
- z-index: 100;
- height: 0;
- background: #fff;
- -webkit-transition: height 0.3s, -webkit-transform 0.3s;
- transition: height 0.3s, transform 0.3s;
- }
- .nav-fillpath a::before,
- .nav-fillpath .icon-wrap::before {
- top: 50%;
- -webkit-transform: translateX(-50%) rotate(-135deg);
- transform: translateX(-50%) rotate(-135deg);
- -webkit-transform-origin: 50% 0%;
- transform-origin: 50% 0%;
- }
- .nav-fillpath a.next::before,
- .nav-fillpath a.next .icon-wrap::before {
- -webkit-transform: translateX(-50%) rotate(135deg);
- transform: translateX(-50%) rotate(135deg);
- -webkit-transform-origin: 50% 0%;
- transform-origin: 50% 0%;
- }
- .nav-fillpath a::after,
- .nav-fillpath .icon-wrap::after {
- top: 50%;
- -webkit-transform: translateX(-50%) rotate(-45deg);
- transform: translateX(-50%) rotate(-45deg);
- -webkit-transform-origin: 0 0;
- transform-origin: 0 0;
- }
- .nav-fillpath a.next::after,
- .nav-fillpath a.next .icon-wrap::after {
- -webkit-transform: translateX(-50%) rotate(45deg);
- transform: translateX(-50%) rotate(45deg);
- -webkit-transform-origin: 100% 0%;
- transform-origin: 100% 0%;
- }
- .nav-fillpath h3 {
- position: absolute;
- top: 50%;
- margin: 0;
- color: #000;
- text-transform: uppercase;
- font-weight: 300;
- font-size: 0.85em;
- opacity: 0;
- -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
- transition: transform 0.3s, opacity 0.3s;
- }
- .nav-fillpath a.prev h3 {
- left: 100%;
- -webkit-transform: translateY(-50%) translateX(-50%);
- transform: translateY(-50%) translateX(-50%);
- }
- .nav-fillpath a.next h3 {
- right: 100%;
- text-align: right;
- -webkit-transform: translateY(-50%) translateX(50%);
- transform: translateY(-50%) translateX(50%);
- }
- .nav-fillpath a:hover .icon-wrap::before,
- .nav-fillpath a:hover .icon-wrap::after {
- height: 50%;
- }
- .nav-fillpath a:hover::before,
- .nav-fillpath a:hover .icon-wrap::before {
- -webkit-transform: translateX(-50%) rotate(-125deg);
- transform: translateX(-50%) rotate(-125deg);
- }
- .nav-fillpath a.next:hover::before,
- .nav-fillpath a.next:hover .icon-wrap::before {
- -webkit-transform: translateX(-50%) rotate(125deg);
- transform: translateX(-50%) rotate(125deg);
- }
- .nav-fillpath a:hover::after,
- .nav-fillpath a:hover .icon-wrap::after {
- -webkit-transform: translateX(-50%) rotate(-55deg);
- transform: translateX(-50%) rotate(-55deg);
- }
- .nav-fillpath a.next:hover::after,
- .nav-fillpath a.next:hover .icon-wrap::after {
- -webkit-transform: translateX(-50%) rotate(55deg);
- transform: translateX(-50%) rotate(55deg);
- }
- .nav-fillpath a:hover h3 {
- opacity: 1;
- -webkit-transform: translateY(-50%) translateX(0);
- transform: translateY(-50%) translateX(0);
- }
- #pagibar {
- width:100%;
- background-color:white;
- height:10px;
- font-family:arial;
- padding:15px;
- margin-left:px;
- left:0px;
- bottom:0px;
- }
- #pagina a:link{
- font-weight: bold;
- font-family:inconsolata;
- background-color:{color:entries};
- padding:10px;
- margin-left:2px;
- margin-right:2px;
- }
- #pagina a:visited {
- padding:5px;}
- #pagina a:active {
- color: #fff;}
- #pagina:hover{
- background:;}
- .day {
- width:200px!important;
- padding:10px;
- border-top: 1px solid rgba(0, 0, 0, 0.1);
- border-left: 5px solid #fff;
- display: table-cell;
- line-height:10px;
- }
- .day:hover{
- background:#fafafa;
- }
- .calendar{
- font-size:15px;
- float:left;
- padding:15px;
- margin-left:-10px;
- background-color:#fafafa;
- }
- .schedtext {
- margin-top:10px;
- padding-left:40px;
- position:absolute;
- }
- .sched big {
- text-transform:uppercase;
- font-size:15px;
- font-weight:bold;
- }
- .sched small {
- text-transform:uppercase;
- font-size:12px;
- }
- .schedcont{
- margin-top:-20px;
- }*/
- .disc {
- font-size:8px;
- background-color:#fafafa;
- font-family: 'Questrial', sans-serif;
- }
- .asker {
- width:100%;
- padding:10px;
- background-color:#fafafa;
- color:;
- height:50px;
- background-image:url('');
- }
- .asktitle {
- text-transform:uppercase;
- font-size:20px;
- }
- .port{
- margin:auto;
- }
- .port img {
- padding:2px;
- margin-right:5px;
- float:left;
- border:1px solid rgba(0,0,0,0.2);
- }
- </style>
- </head>
- <body>
- <div id="content">
- <div class="topbar">
- <div class="type">
- <span></span>
- <span>hello, <span style="font-family:'Pacifico'; font-weight:bold;font-size:25px; text-transform:none;margin-top:9px;">Chen!</span></span>
- <span></span>
- </div>
- <div class="pagnav">
- <ul>
- <li><a href="#">Home</a></li>
- <li><a href="#">Tutorials</a><span class="dropBottom"></span>
- <ul>
- <li><a href="#">Design</a><span class="dropRight"></span>
- <ul>
- <li><a href="#">Photoshop</a></li>
- <li><a href="#">Illustrator</a></li>
- <li><a href="#">Web Design</a><span class="dropRight"></span>
- </li>
- </ul>
- </li>
- <li><a href="#">Articles</a></li>
- <li><a href="#">Interviews</a></li>
- </ul>
- </li>
- <li><a href="#">About</a></li>
- <li><a href="#">Contact</a></li>
- </ul>
- </div>
- </div>
- <div id="slide"><div id="slider">
- <a href="link" target="_blank"><img src="{image:slide 1}" width="351" height="156" /></a>
- <a href="link" target="_blank"><img src="{image:slide 2}"width="351" height="156" /></a>
- <a href="link" target="_blank"><img src="{image:slide 3}"width="351" height="156" /></a>
- <a href="link" target="_blank"><img src="{image:slide 4}"width="351" height="156" /></a>
- </div></div>
- <br><br>
- <!--HR/POSTS-->
- <div class="bar">POSTS
- </div>
- <div class="cont">
- <!-- Text -->
- {block:Posts}
- {block:Text}
- <div class="entry">
- <div class="entryinfo">
- {block:Title}<font style="text-align:right; FONT-WEIGHT: normal; COLOR: {color:title}; font:bold 25px 'montserrat', serif; text-transform:uppercase; letter-spacing:5px;">{Title}</font><br>{/block:Title}
- {block:IndexPage}{Body}{/block:IndexPage}
- {block:PermalinkPage}{Body}{/block:PermalinkPage}</div>
- </div>
- {/block:Text}
- <!-- Photo -->
- {block:Photo}
- <div class="entry">
- <div class="entryinfo photo">
- <center>{LinkOpenTag}
- <img src="{PhotoURL-HighRes}" alt="{PhotoAlt}" width="100%">
- {LinkCloseTag}</center>
- </div>
- {block:Caption}
- <div class="caption">
- {caption}
- </div>{/block:Caption}
- </div>
- {/block:Photo}
- <!-- Photoset -->
- {block:Photoset}
- <div class="entry">
- <div class="entryinfo">
- <center>{Photoset}</center>
- {block:Caption}
- <div class="caption">
- {caption}
- </div>{/block:Caption}
- </div>
- </div>
- {/block:Photoset}
- <!-- Quote -->
- {block:Quote}
- <div class="entry">
- <div class="entryinfo">
- <div class="quotesymbol"></div>
- <div style="border-left:1px solid #F1F1F1; margin-left:37px; padding:9px;"><span class="quote"><font style="text-align:right; FONT-WEIGHT: normal; COLOR: {color:links}; font:normal 15px 'arial', serif; text-transform:uppercase; letter-spacing:5px;">{quote}</font><br>
- {block:Source}— <FONT style="FONT-WEIGHT: normal; FONT-SIZE: 5pt; TEXT-TRANSFORM: uppercase; COLOR: {color:link}; font-style:; LINE-HEIGHT: 8pt; LETTER-SPACING: 3pt; text-transform:;">{Source}</font>{/block:Source}
- </div>
- {block:Caption}
- <div class="caption">
- {caption}
- </div>{/block:Caption}
- </div>
- </div>
- {/block:Quote}
- <!-- Link -->
- {block:Link}
- <div class="entry">
- <div class="entryinfo">
- <a href="{URL}" target="_blank"><font style="text-align:justify; FONT-WEIGHT: normal; COLOR: {color:links}; font:normal 20px 'montserrat', serif; text-transform:uppercase; letter-spacing:5px;">{Name}</font></a>
- {block:Description}<p>{Description}</p>{/block:Description}
- {block:Caption}
- <div class="caption">
- {caption}
- </div>{/block:Caption}
- </div>
- </div>
- {/block:Link}
- <!-- Chat -->
- {block:Chat}
- <div class="entry">
- <div class="entryinfo">
- {block:Title}<font style="text-align:justify; FONT-WEIGHT: normal; COLOR: {color:links}; font:normal 15px 'arial', serif; text-transform:uppercase; letter-spacing:5px;">{title}</font>{/block:Title}
- {block:Lines}
- {block:Label}{Label}{/block:Label} {Line}</br>
- {/block:Lines}
- <br>
- {block:Caption}
- <div class="caption">
- {caption}
- </div>{/block:Caption}
- </div>
- </div>
- {/block:Chat}
- {block:Audio}
- <div class="entry">
- <div class="entryinfo">
- <div class="audpost">
- <div class="audio"><div id="acont"><div id="audioplayer">{AudioPlayerWhite}</div></div>
- <div class="aimg"><img src="http://static.tumblr.com/jn9hrij/20Ul2zzsr/albumart.jpg"></div>{block:AlbumArt}<div class="aimg"><img src="{AlbumArtURL}"></div>{/block:AlbumArt}</div>
- </div>
- <br><br><br><br><br>
- {block:Caption}
- <div class="caption">
- {caption}
- </div>{/block:Caption}
- </div>
- </div>
- {/block:Audio}
- <!-- Video -->
- {block:Video}
- <div class="entry">
- <div class="entryinfo">
- <div class="videoWrapper">
- {block:IndexPage}<center>{VideoEmbed-400}</center> {/block:IndexPage}
- {block:PermalinkPage}<center>{Video-500}</center>{/block:PermalinkPage}
- </div>
- {block:Caption}
- <div class="caption">
- {caption}
- </div>{/block:Caption}
- </div>
- </div>
- {/block:Video}
- <!-- Message -->
- {block:Answer}
- <div class="entry">
- <div class="entryinfo">
- <div class="asker"><div class="port"><img src="{AskerPortraitURL-40}"><div class="asktitle">{Asker} asked:</div></div>
- </div>
- <div class="question">{Question}</div>
- <div class="answer">{Answer}</div>
- {block:Caption}
- <div class="caption">
- {caption}
- </div>{/block:Caption}
- </div>
- </div>
- {/block:Answer}
- <!-- Permalink page -->
- {block:PermalinkPage}
- <div style="margin-left:-60px; margin-top:-10px;
- font-family:inconsolata; font-family:"><div class="entry">
- POST NOTES:<br>
- {block:PostNotes}
- {PostNotes}</div></div>
- {/block:PostNotes}
- {/block:PermalinkPage}
- <!-- Other -->
- {block:ContentSource}
- <!-- {SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}"
- width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />
- {/block:SourceLogo}
- {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
- {/block:ContentSource}
- {/block:Posts}
- </div>
- <!--HR/POSTS-->
- <div class="bar">OTHER
- </div>
- <br>
- <div class="recent">
- <main class="row title">
- <ul>
- <li>RECENT</li>
- </ul>
- </main>
- <a href="#" class="hint hint--top" data-hint="150509"><div class="iconimg"><img src="http://41.media.tumblr.com/72640104646ad56fe78885f9a3b5dcf1/tumblr_nluo2xAjIc1rup1hro1_1280.jpg" title="title"></div></a>
- <a href="#" class="hint hint--top" data-hint="150509"><div class="iconimg"><img src="http://41.media.tumblr.com/72640104646ad56fe78885f9a3b5dcf1/tumblr_nluo2xAjIc1rup1hro1_1280.jpg" title="title"></div></a>
- <a href="#" class="hint hint--top" data-hint="150509"><div class="iconimg"><img src="http://41.media.tumblr.com/72640104646ad56fe78885f9a3b5dcf1/tumblr_nluo2xAjIc1rup1hro1_1280.jpg" title="title"></div></a>
- <a href="#" class="hint hint--top" data-hint="150509"><div class="iconimg"><img src="http://41.media.tumblr.com/72640104646ad56fe78885f9a3b5dcf1/tumblr_nluo2xAjIc1rup1hro1_1280.jpg" title="title"></div></a>
- <a href="#" class="hint hint--top" data-hint="150509"><div class="iconimg"><img src="http://41.media.tumblr.com/72640104646ad56fe78885f9a3b5dcf1/tumblr_nluo2xAjIc1rup1hro1_1280.jpg" title="title"></div></a>
- <a href="#" class="hint hint--top" data-hint="150509"><div class="iconimg"><img src="http://41.media.tumblr.com/72640104646ad56fe78885f9a3b5dcf1/tumblr_nluo2xAjIc1rup1hro1_1280.jpg" title="title"></div></a>
- <a href="#" class="hint hint--top" data-hint="150509"><div class="iconimg"><img src="http://41.media.tumblr.com/72640104646ad56fe78885f9a3b5dcf1/tumblr_nluo2xAjIc1rup1hro1_1280.jpg" title="title"></div></a>
- <a href="#" class="hint hint--top" data-hint="150509"><div class="iconimg"><img src="http://41.media.tumblr.com/72640104646ad56fe78885f9a3b5dcf1/tumblr_nluo2xAjIc1rup1hro1_1280.jpg" title="title"></div></a>
- <a href="#" class="hint hint--top" data-hint="150509"><div class="iconimg"><img src="http://41.media.tumblr.com/72640104646ad56fe78885f9a3b5dcf1/tumblr_nluo2xAjIc1rup1hro1_1280.jpg" title="title"></div></a>
- <a href="#" class="hint hint--top" data-hint="150509"><div class="iconimg"><img src="http://41.media.tumblr.com/72640104646ad56fe78885f9a3b5dcf1/tumblr_nluo2xAjIc1rup1hro1_1280.jpg" title="title"></div></a>
- <a href="#" class="hint hint--top" data-hint="150509"><div class="iconimg"><img src="http://41.media.tumblr.com/72640104646ad56fe78885f9a3b5dcf1/tumblr_nluo2xAjIc1rup1hro1_1280.jpg" title="title"></div></a>
- <a href="#" class="hint hint--top" data-hint="150509"><div class="iconimg"><img src="http://41.media.tumblr.com/72640104646ad56fe78885f9a3b5dcf1/tumblr_nluo2xAjIc1rup1hro1_1280.jpg" title="title"></div></a>
- <a href="#" class="hint hint--bottom" data-hint="150509"><div class="iconimg"><img src="http://41.media.tumblr.com/72640104646ad56fe78885f9a3b5dcf1/tumblr_nluo2xAjIc1rup1hro1_1280.jpg" title="title"></div></a>
- <a href="#" class="hint hint--bottom" data-hint="150509"><div class="iconimg"><img src="http://41.media.tumblr.com/72640104646ad56fe78885f9a3b5dcf1/tumblr_nluo2xAjIc1rup1hro1_1280.jpg" title="title"></div></a>
- <a href="#" class="hint hint--bottom" data-hint="150509"><div class="iconimg"><img src="http://41.media.tumblr.com/72640104646ad56fe78885f9a3b5dcf1/tumblr_nluo2xAjIc1rup1hro1_1280.jpg" title="title"></div></a>
- <a href="#" class="hint hint--bottom" data-hint="150509"><div class="iconimg"><img src="http://41.media.tumblr.com/72640104646ad56fe78885f9a3b5dcf1/tumblr_nluo2xAjIc1rup1hro1_1280.jpg" title="title"></div></a>
- </div>
- <div class="recent1">
- <main class="row title">
- <ul>
- <li>RECENT</li>
- </ul>
- </main>
- <div class="sched">
- <div class="day">
- <a href="/">
- <div class="calendar"><i class="fa fa-calendar"></i></div>
- <div class="schedtext"><big>INKIGAYO</big><br>
- <small> 150410 / MUSIC SHOW
- </small>
- </div>
- </a>
- </div>
- <div class="day">
- <a href="/">
- <div class="calendar"><i class="fa fa-calendar"></i></div>
- <div class="schedtext"><big>ICN <i class="fa fa-plane"></i> SFO</big><br>
- <small> 150410 / AIRPORT
- </small>
- </div>
- </a>
- </div>
- <div></div>
- <div class="day">
- <a href="/">
- <div class="calendar"><i class="fa fa-calendar"></i></div>
- <div class="schedtext"><big>INKIGAYO</big><br>
- <small> 150410 / MUSIC SHOW
- </small>
- </div>
- </a>
- </div>
- <div class="day">
- <a href="/">
- <div class="calendar"><i class="fa fa-calendar"></i></div>
- <div class="schedtext"><big>ICN <i class="fa fa-plane"></i> SFO</big><br>
- <small> 150410 / AIRPORT
- </small>
- </div>
- </a>
- </div>
- <div></div>
- <div class="day">
- <a href="/">
- <div class="calendar"><i class="fa fa-calendar"></i></div>
- <div class="schedtext"><big>INKIGAYO</big><br>
- <small> 150410 / MUSIC SHOW
- </small>
- </div>
- </a>
- </div>
- <div class="day">
- <a href="/">
- <div class="calendar"><i class="fa fa-calendar"></i></div>
- <div class="schedtext"><big>ICN <i class="fa fa-plane"></i> SFO</big><br>
- <small> 150410 / AIRPORT
- </small>
- </div>
- </a>
- </div>
- <div></div>
- <div class="day">
- <a href="/">
- <div class="calendar"><i class="fa fa-calendar"></i></div>
- <div class="schedtext"><big>INKIGAYO</big><br>
- <small> 150410 / MUSIC SHOW
- </small>
- </div>
- </a>
- </div>
- <div class="day">
- <a href="/">
- <div class="calendar"><i class="fa fa-calendar"></i></div>
- <div class="schedtext"><big>ICN <i class="fa fa-plane"></i> SFO</big><br>
- <small> 150410 / AIRPORT
- </small>
- </div>
- </a>
- </div>
- </div>
- </div>
- </div>
- </div>
- {block:Pagination}
- <nav class="nav-fillpath">
- {block:PreviousPage}
- <a class="prev" href="{PreviousPage}">
- <span class="icon-wrap"></span>
- <h3><strong>PREV</strong> PAGE</h3>
- </a>
- {/block:PreviousPage}
- {block:NextPage}
- <a class="next" href="{NextPage}">
- <span class="icon-wrap"></span>
- <h3><strong>NEXT</strong> PAGE</h3>
- </a>
- </nav>
- {/block:NextPage}
- <div id="pagibar">
- <div style="margin-top:-5px;"> <div id="pagina"><center>
- <b>{CurrentPage}</b> OUT OF <b>{TotalPages}</b>
- </center>
- </div></div>
- </div> {block:Pagination}
- <br>
- <br>
- <br>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement