Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html>
- <head>
- <!--
- ¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶777¶¶¶¶¶¶¶¶77$¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶s-m-t
- ¶¶¶¶¶¶¶¶¶¶7¶¶¶¶¶¶+¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶7¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶
- ¶¶¶¶¶¶¶¶7¶¶¶¶¶D ¶¶¶¶¶¶¶¶¶¶¶Z$7¶¶O7¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶
- ¶¶¶¶¶¶¶$¶¶¶¶N. ¶¶¶¶¶¶¶¶¶¶¶¶777777¶¶7¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶
- ¶¶¶¶¶¶$¶¶¶¶ ¶¶¶¶¶¶¶¶¶¶¶¶$777777¶¶¶..¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶. ¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶
- ¶¶¶¶¶7¶¶¶~. ¶¶¶¶¶¶¶¶¶¶¶¶77777777¶¶¶¶ D7¶¶¶¶¶¶¶.¶¶¶. ¶ N¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶
- ¶¶¶¶7¶¶¶ ?¶¶¶¶¶¶¶¶¶¶¶7777777777¶¶¶. ¶7$¶ .¶¶ ¶¶7 O¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶
- ¶¶¶¶7¶¶. ¶¶¶¶¶¶¶¶¶¶. .77,...77.. ¶. ¶.¶7. N¶ N¶O ¶¶¶¶¶O ¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶
- ¶¶¶7¶¶. ¶¶¶¶¶¶ .N 7~ 7. II...~¶¶ :¶..¶¶.Z ¶ . ¶¶¶¶¶.D. ¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶
- ¶¶¶7¶ ¶¶¶¶: ¶¶¶¶¶ .7¶ ,++ I¶ N ~¶. ¶¶. :¶¶ ¶¶¶¶¶+ ¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶
- ¶¶¶7¶ .¶?. ?¶¶¶¶¶77¶O777¶77¶¶¶¶¶¶¶¶¶¶¶¶O¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶
- ¶¶¶7¶~ ¶¶¶¶¶¶¶¶¶77D¶$77Z¶¶¶¶¶¶¶¶¶¶¶¶¶8¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶
- ¶¶¶O¶¶¶¶¶¶¶¶¶¶¶¶77$¶$7$¶¶7¶¶¶¶¶¶¶¶¶¶¶¶¶$¶¶7. .¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶
- ¶¶¶¶7¶¶¶¶¶¶¶¶¶¶¶7777O¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶O ¶¶¶ Z¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶
- ¶¶¶¶$¶¶¶¶¶¶¶¶¶77¶¶77¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶7¶. ¶¶¶.7 ¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶
- ¶¶¶¶¶7¶¶¶¶¶¶D7777D¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶$..¶¶¶ ¶¶¶..¶¶¶¶¶¶¶¶¶¶¶. ¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶
- ¶¶¶¶¶¶7¶¶¶¶$77777¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶I. ¶¶¶D .¶¶¶. ¶¶ ¶¶¶¶ .¶¶ ¶¶¶¶¶¶¶¶¶¶
- ¶¶¶¶¶¶¶7¶¶$77777¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶Z: ¶¶¶¶¶. . ¶ ¶¶. D D. ¶: ¶ N¶¶¶¶¶¶¶¶¶¶
- ¶¶¶¶¶¶¶¶877777¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶$¶ ¶¶¶¶¶¶. N¶¶¶~ ~¶..¶..¶¶¶¶¶..¶¶. +¶¶¶¶¶¶¶¶¶¶
- ¶¶¶¶¶¶¶¶¶¶777¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶7N¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶
- ¶¶¶¶¶¶¶¶¶¶¶¶¶77¶¶¶¶¶¶¶¶¶¶¶¶¶¶77¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶
- ¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶Z7$77777777¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶
- ¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶
- ¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶¶
- @2016 badmecha007, @1980 design inspo
- -----------------=========RULES:
- | 1. Do not steal or claim as your own.
- | 2. Do not use as base code. As well
- | as my coding system being fucking
- | confusing, my code is not up for
- | base use, period.
- | 3. Leave the watermark intact.
- | Do not remove it from the code
- | when customising.
- | 4. Minor modifications are fine.
- | You may take inspiration from my
- | CSS such as the rainbow border
- | (check on my blog or ask
- | for specific css if you wish)
- | but try not to take giant snippets
- | of code (+8 lines of CSS).
- | 5. Share and reblog the original
- | post in goodwill if you do use this theme.
- Big thanks to SMT tooltips for the tooltip
- java code, mahilu for the scrollbar code, themesbyeris
- for her base code, w3schools and various nameless
- peeps on jsfiddle for inspiration and help.
- ========================personal theme 1 - 80's baby==============================
- https://webdesign.tutsplus.com/tutorials/create-a-customized-html5-audio-player--webdesign-7081
- http://vanne-statprev.tumblr.com/musictab2
- mp3 player
- -->
- <meta name="color:Trimmings" content=""/>
- <meta name="color:Title" content="" />
- <meta name="image:Background" content="" />
- <meta name="color:headerBG" content="" />
- <meta name="image:headerBG" content="" />
- <title>{Title}{block:PostSummary}, {PostSummary}{/block:PostSummary}</title>
- {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
- <link rel="shortcut icon" href="{Favicon}" />
- <link href='http://fonts.googleapis.com/css?family=Carme' rel='stylesheet' type='text/css'>
- <link href='http://fonts.googleapis.com/css?family=Anaheim' rel='stylesheet' type='text/css'>
- <link href="https://fonts.googleapis.com/css?family=Play" rel="stylesheet">
- <link href='http://fonts.googleapis.com/css?family=Orbitron' rel='stylesheet' type='text/css'>
- <link href='https://fonts.googleapis.com/css?family=Archivo+Black' rel='stylesheet' type='text/css'>
- <link href='https://fonts.googleapis.com/css?family=Tinos:700' rel='stylesheet' type='text/css'>
- <link href='https://fonts.googleapis.com/css?family=Oswald:300' rel='stylesheet' type='text/css'>
- <link href='https://fonts.googleapis.com/css?family=Limelight' rel='stylesheet' type='text/css'>
- <link href='https://fonts.googleapis.com/css?family=Seaweed+Script' rel='stylesheet' type='text/css'>
- <link rel="stylesheet" href="http://malihu.github.io/custom-scrollbar/jquery.mCustomScrollbar.min.css"><!--scrollbaar stylesheet-->
- <link href="https://fonts.googleapis.com/css?family=Roboto:900" rel="stylesheet">
- <style type="text/css">
- /*http://i.imgur.com/atYtIOA.png*/
- body {
- background: #322E2B url('https://stmed.net/sites/default/files/hotline-miami-2%3A-wrong-number-hd-wallpapers-33246-5699657.png') top right fixed no-repeat ;
- background-size: cover;
- margin-left: auto;
- z-index:-999;
- margin-right: auto;
- padding: 0;
- font-family: 'Anaheim', sans-serif;
- color: {color:Text};
- }
- /* cursor: url('http://i.imgur.com/1AEV1rf.png'), auto; */
- img {
- border: 0;
- max-width: 100%;
- height: auto;
- margin-left:auto;
- margin-right: auto;
- }
- h2 {
- font-family: 'Seaweed Script', cursive;
- text-transform:lowercase;
- text-shadow: 2px 2px #000;;
- font-size:35px;
- font-weight: 900;
- line-height:90%;
- }
- #content #posts .text h2 a{
- font-family: 'Seaweed Script', cursive;
- font-size:35px;
- color:#ff0098;
- text-shadow: 2px 2px #000;
- transition: color 0.4s, box-shadow 0.2s;
- line-height:90%;
- }
- #content #posts .text h2 a:hover{
- color: #fff;
- text-shadow:
- 0px 0px 7px rgba(255, 255, 255, 1),
- 0px 0px 3px rgba(0, 255, 255, 1);
- }
- .title{
- font-family: 'Limelight', cursive;
- font-size:35px;
- font-weight: 900;
- color:#00FFA2;
- text-shadow: 0 0 10px rgba(0,67,255,1) , 0 0 20px rgba(0,127,255,1) , 0 0 30px rgba(0,174,255,1) ;
- }
- p {
- margin-bottom:5px;
- }
- #bgrnd{
- height:0px;
- width: 0px;
- z-index:-1;
- margin:auto;
- position: fixed;
- right:50%;
- top: 50%;
- transform: translateY(-50%);
- }
- .flashyborder{
- border-right:5px outset #372EA1 ;
- border-left:5px outset #372EA1;
- border-bottom:5px outset #372EA1;
- animation-name: lights;
- animation-duration: 10s;
- animation-iteration-count: infinite;
- }
- #bgrnd #blk{
- width:800px;
- height:500px;
- background: rgba(0,0,0,0.7);
- position:absolute;
- top:-190px;
- left:-300px;
- }
- @keyframes lights {
- 0% {box-shadow:
- 0 0 3px 3px #fff,
- 0 0 10px 6px #e58b50,
- 0 0 14px 9px #f95454;}
- 8% {box-shadow:
- 0 0 6px 3px #fff,
- 0 0 15px 6px #e58b50,
- 0 0 14px 9px #f95454;}
- 25% {box-shadow:
- 0 0 9px 3px #fff,
- 0 0 20px 6px #70d8a8,
- 0 0 14px 9px #e58b50;}
- 41% {box-shadow:
- 0 0 6px 3px #fff,
- 0 0 15px 6px #0ff,
- 0 0 14px 9px #70d8a8;}
- 57% {box-shadow:
- 0 0 3px 3px #fff,
- 0 0 10px 6px #9370DB,
- 0 0 14px 9px #0ff;}
- 83% {box-shadow:
- 0 0 6px 3px #fff,
- 0 0 5px 6px #cc70d8,
- 0 0 14px 9px #9370DB;}
- 100% {box-shadow:
- 0 0 3px 3px #fff,
- 0 0 10px 6px #e58b50,
- 0 0 14px 9px #f95454;}
- }
- @keyframes border {}
- .header {
- position: fixed;
- margin-left: auto;
- margin-right: auto;
- z-index:1;
- }
- #headert{
- height: 20px;
- width: 100% ;
- top: 0px;
- z-index: 1;
- background: #58D6FC;
- }
- #headerb{
- height: 20px;
- width: 100% ;
- bottom: 0px;
- z-index: 1;
- background: #E54BB4;
- }
- #headerr{
- width: 20px;
- height: 100%;
- right: 0px;
- z-index: 2;
- background: linear-gradient(to bottom, rgba(88,214,252,1) 0%,rgba(83,134,237,1) 40%,rgba(229,75,180,1) 100%);
- }
- #headerl{
- width: 20px;
- height: 100%;
- left: 0px;
- z-index: 2;
- background: linear-gradient(to bottom, rgba(88,214,252,1) 0%,rgba(83,134,237,1) 40%,rgba(229,75,180,1) 100%);
- }
- #topmid {
- height:0px;
- width: 0px;
- z-index:999;
- margin:auto;
- position: fixed;
- right:50%;
- top: 50%;
- transform: translateY(-50%);
- background: rgba(0,0,0,0.25);
- }
- #topmid #titleblock {
- height:240px;
- width:600px;
- position: fixed;
- border-top-left-radius:120px;
- border-bottom-left-radius:120px;
- top:-330px;
- left:-500px;
- z-index:9999;
- transform: rotate(-17deg);
- }
- #topmid #titleblock a{
- color:rgba(242,242,242,1);
- text-shadow: 0 0 10px rgba(0,67,255,1) , 0 0 20px rgba(0,127,255,1) , 0 0 30px rgba(0,174,255,1) , 0 0 40px #00ffc3 , 0 0 70px #00ff6a , 0 0 80px #00ff4c , 0 0 100px #00ff1d ;
- transition: text-shadow .5s;
- z-index:9999;
- }
- #topmid #titleblock a:hover {
- text-shadow: 0 0 10px rgba(0,255,25,1) , 0 0 20px rgba(0,255,85,1) , 0 0 30px rgba(0,255,148,1) , 0 0 40px #00ffff , 0 0 70px #00bbff , 0 0 80px #00bbff , 0 0 100px #00aeff ;
- }
- .titletext{
- position:fixed;
- margin-left:220px;
- font: 100px 'Seaweed Script', cursive;
- }
- #topmid #titleblock img{
- top: 12px;
- }
- .neonbars{
- z-index:-9999;
- position:fixed;
- animation-name: lights;
- animation-duration: 10s;
- animation-iteration-count: infinite;
- width:700px;
- height:0;
- }
- #neon1{
- margin-top:100px;
- }
- #neon2{
- margin-top:120px;
- }
- #sidebarm {
- height:100%;
- width: 1000px;
- margin-left: auto;
- margin-right: auto;
- z-index: 1;
- top: 25%;
- bottom:0;
- }
- .opbars {
- height: 20px;
- -webkit-box-shadow: 15px 10px 0px 0px rgba(0,0,0,1);
- -moz-box-shadow: 15px 10px 0px 0px rgba(0,0,0,1);
- box-shadow: 15px 10px 0px 0px rgba(0,0,0,1);
- text-align: right;
- letter-spacing: 5px;
- text-transform: uppercase;
- text-decoration:none;
- z-index:98;
- font: 12px 'Oswald', sans-serif;
- padding-right:.4em;
- transition: box-shadow 0.4s, background 0.4s, letter-spacing 0.8s;
- }
- .opbars:hover {
- cursor: cell;
- letter-spacing: 10px;
- }
- #topmid #redopbar {
- width:600px;
- background:red;
- position: fixed;
- top: -220px;
- left: -60px;
- color:yellow;
- }
- #topmid #redopbar:hover {
- color: red;
- background-color:cyan;
- box-shadow:
- 0 0 3px 1px #fff, /* inner white */
- 0 0 5px 3px #9370DB , /* middle magenta */
- 0 0 7px 4px #0ff; /* outer cyan */
- }
- #topmid #ylwopbar {
- background:yellow;
- position: fixed;
- top: -190px;
- left: -200px;
- width:650px;
- }
- #topmid #ylwopbar:hover {
- color: yellow;
- background-color:purple;
- box-shadow:
- 0 0 3px 1px #fff,
- 0 0 5px 3px #C182FF ,
- 0 0 7px 4px #FFFC42;
- }
- #topmid #grnopbar {
- background:green;
- position: fixed;
- color: orange;
- top: -160px;
- left: -300px;
- width:650px;
- }
- #topmid #grnopbar:hover {
- color: 00ff61;
- background-color:Fuchsia;
- box-shadow:
- 0 0 3px 1px #fff,
- 0 0 5px 3px #FF2EE7 ,
- 0 0 7px 4px #FF9CF3;
- }
- #topmid #bluopbar {
- background:blue;
- position: fixed;
- color:orange;
- top: -130px;
- width:600px;
- left:-350px;
- }
- #topmid #bluopbar:hover {
- color: blue;
- background-color: orange;
- }
- #topmid #bluopbar i{
- color: yellow;
- }
- #topmid #desc{
- width:180px;
- max-height:400px;
- min-height:20px;
- overflow: hidden;
- /* background:url('https://scontent.cdninstagram.com/t51.2885-15/s320x320/e15/11417399_440096642832305_369483626_n.jpg?ig_cache_key=MTAwMzc2NjY1MjIzMzcwNTM2NQ%3D%3D.2') center no-repeat;
- background-size:cover; */
- /* box-shadow:
- 0 0 3px 1px #fff,
- 0 0 5px 3px #9370DB ,
- 0 0 7px 4px #0ff;*/
- position:fixed;
- /* border: 3px outset red;*/
- padding: .3em .1em .3em .1em;
- transform: translate(-275px,-30px);
- font: 18px 'Limelight', cursive;
- color: yellow;
- text-align:center;
- text-transform: uppercase;
- transition: text-shadow 1s;
- /* text-shadow: 1px 1px 0px #7CACDE;
- upd test 11/09/16 \/ \/ \/ \/*/
- border: 5px outset #FF30F8;
- background: linear-gradient(#E54BB4, #FF2EFF);
- }
- #desc li::selection {
- background: #00ffc3;
- color: white;
- }
- #desc li::-moz-selection {
- background: #00ffc3;
- color: white;
- }
- .gradient{
- list-style: none;
- z-index:2;
- background:-webkit-linear-gradient(-45deg, #ffd51c 0%,#f9ec9f 16%,#fff6ad 21%,#ffd51c 34%,#ffd51c 39%,#f9ec9f 53%,#fff6ad 58%,#ffd51c 73%,#ffd51c 77%,#f9ec9f 88%,#fff6ad 92%,#f9d72a 100%);
- -webkit-background-clip: text; -webkit-text-fill-color: transparent; -webkit-text-fill-color: transparent;
- font-weight:900;
- position:absolute;
- }
- .shadow{
- text-shadow: 1px 1px #000, 2px 2px #000, 3px 3px #000;
- color:transparent;
- font-weight:900;
- }
- #desc li::selection {
- background: #00ffc3;
- color: white;
- }
- #topmid #desc:hover{
- cursor: cell;
- /*
- rainbow text font:
- text-shadow:
- 0 0 rgba(255,255,255,0),
- 1px 1px 0 red,
- 2px 2px 0 orange,
- 3px 3px 0 yellow,
- 4px 4px 0 green,
- 5px 5px 0 blue,
- 6px 6px 0 indigo,
- 7px 7px 0 violet;*/
- }
- #topmid #progmenu{
- height:300px;
- width:300px;
- position:absolute;
- margin-left:-700px;
- margin-top:3px;
- border-top:5px outset #372EA1;
- background: rgba(0,0,0,0.7) url('http://www.richardfarrar.com/downloads/cctv-lines.png') top left fixed repeat ;
- margin-top: -50px;
- }
- #progmenutitle{
- font-family: 'Seaweed Script', cursive;
- font-size: 30px;
- margin-top:-40px;
- margin-left:63px;
- color: rgba(242,242,242,1);
- text-shadow: 0 0 5px rgba(0,67,255,1) , 0 0 10px rgba(0,127,255,1) , 0 0 15px rgba(0,174,255,1) , 0 0 20px #00ffc3 , 0 0 35px #00ff6a , 0 0 40px #00ff4c , 0 0 50px #00ff1d;
- }
- #progtext{
- font-family: 'Limelight', cursive;
- font-size: 25px;
- border:3px outset #372EA1;
- margin-left:20px ;
- margin-right:20px ;
- }
- #content {
- background:url('http://www.richardfarrar.com/downloads/cctv-lines.png') top left fixed repeat;
- left:220px;
- right: 0;
- margin-left: auto;
- margin-right: auto;
- top: 320px;
- margin-top: -220px;
- position:absolute;
- width: 530px;
- height: 380px;
- overflow-y: auto;
- overflow-x: hidden;
- color: #fff;
- float: center;
- margin: auto;
- margin-top: -220px;
- border: 5px outset #372EA1;
- }
- #content #posts {
- margin: auto;
- left:70px;
- color: #FCDC0F;
- padding-top: .8em;
- padding-left: 1em;
- padding-right: 1em;
- width: 440px;
- background-attachment: inherit;
- margin-bottom: 60px;
- margin-left: 17px;
- background: rgba(0,63,102,0.5);
- border: 5px inset #E54BB4;
- }
- #content #posts .img {
- max-width: 100%;
- border:0;
- height: auto;
- }
- #content #posts .text {
- font-size:18px;
- background: rgba(0,0,0,0.1);
- line-height:90%;
- }
- #content #posts .text a{
- color:#ff0098;
- text-shadow: 2px 2px #000;
- transition: color 0.4s, box-shadow 0.2s;
- }
- #content #posts .text a:hover{
- color: #fff;
- }
- #content #posts #text img {
- display: block;
- max-width: 200px;
- height: auto;
- margin-left: auto;
- margin-right: auto;
- }
- #content #posts a {
- color:yellow;
- font: 18px 'Seaweed Script', cursive;
- text-decoration:none;
- transition: text-shadow 0.4s, color 0.4s;
- }
- #content #posts a:hover {
- text-shadow:
- 0px 0px 7px rgba(255, 255, 255, 1),
- 0px 0px 3px rgba(0, 255, 255, 1);
- }
- #content #posts .asker{
- font: 24px 'Seaweed Script', cursive;
- text-shadow: 1px 1px #000, -1px -1px #000;
- color:yellow;
- }
- #content #posts .asker:hover {
- color:red;
- text-shadow:
- 0px 0px 7px rgba(255, 255, 255, 1),
- 0px 0px 3px rgba(0, 255, 255, 1);
- }
- #content #posts .asker a{
- font: 24px 'Seaweed Script', cursive;
- text-shadow: 1px 1px #000, -1px -1px #000;
- text-decoration:none;
- color:yellow;
- font-style: italic;
- }
- #content #posts .asker a:hover {
- color:red;
- text-shadow:
- 0px 0px 7px rgba(255, 255, 255, 1),
- 0px 0px 3px rgba(0, 255, 255, 1);
- }
- #content blockquote {
- border-left: 3px inset #0ff;
- margin-left: 10px;
- padding: 0px 0px 0px 8px;
- margin-right: 0;
- }
- /*vidya code*/
- #content #posts .vidya{
- box-shadow: 0 0 3px 1px #fff, 0 0 5px 3px #ff7cbb, 0 0 7px 4px #ffb7d0;
- height: auto;
- }
- /*end vidya code*/
- /*VIDDY: embed trick add
- http://webdesignerwall.com/tutorials/css-elastic-videos
- */
- #content #posts #permabox {
- border: 3px solid {color:Trimmings};
- background: {color:Perma} url('{image:Perma}');
- margin-top:10px;
- color: #fff;
- transition: background .25s ;
- -webkit-transition: background .25s
- }
- #content #posts #permabox:hover{
- background:rgba(125, 125, 125, 0.27) ;
- }
- #content #posts #permabox a{
- color: #fff;
- font-size:15px
- text-decoration: none;
- }
- #content #posts #permabox a:hover{
- color: #03b700;
- text-decoration: none
- }
- #content #posts #permalink {
- font-size:15px;
- list-style-type: none;
- }
- #content #posts #permalink li{
- list-style-type: none;
- }
- #content #posts #tags {
- font-size: 12px;
- color: #fff;
- text-transform: uppercase;
- }
- #content #posts #tags .comma:last-child {
- display: none;
- }
- #infoblock{
- display:inline-block;
- transform: translateY(15px);
- }
- .sbars{
- box-shadow: 0px 10px 0px -3px rgba(0,0,0,1);
- letter-spacing: 5px;
- text-transform: uppercase;
- z-index:98;
- font-family: 'Play', sans-serif;
- font-size:10px;
- transition: transform 0.4s,box-shadow 0.8s, letter-spacing 0.4s, height 0.4s;
- text-align:center;
- }
- .sbars a{
- font-family: 'Play', sans-serif;
- font-size:10px;
- }
- .sbars:hover {
- cursor: cell;
- transform: translate(-5px, -7px);
- margin-left:auto;
- letter-spacing: 8px;
- margin-right:auto;
- color:#fff;
- box-shadow:
- 0 0 2px 1px #fff,
- 0 0 3px 2px #9370DB ,
- 0 0 5px 3px #0ff;
- }
- #content #posts #rebline{
- height:15px;
- width: 480px;
- transform: translate(-20px, -15px);
- background:red;
- position:fixed;
- color:yellow;
- }
- #content #posts #rebline:hover{
- color:#fff;
- }
- #content #posts #likeline{
- height:15px;
- width: 450px;
- transform: translate(-5px, 5px);
- background:blue;
- position:fixed;
- }
- #content #posts #likeline:hover{
- color:#fff;
- }
- #content #posts #permline{
- width: 415px;
- padding-left:5px;
- height:15px;
- overflow: hidden;
- text-overflow: hidden;
- transform: translate(10px, 26px);
- background:green;
- position:fixed;
- }
- #content #posts #permline:hover{
- height:45px;
- }
- #content #posts #permline a{
- font: 10px 'Play', sans-serif;
- color: yellow;
- }
- #content #posts #permline a:hover{
- color: white;
- }
- #content #posts #question{
- border: 3px outset #3d0099;
- width:80%;
- transform: translate(60px, 0);
- }
- #content #posts #cassette img{
- height:75px;
- width:75px;
- }
- #content #notecontainer {
- margin: 20px auto;
- font: 10px 'Play', sans-serif;
- width:90%;
- background: rgb(0,0,0,0.25);
- box-shadow:
- 0 0 2px 1px #fff, /* inner white */
- 0 0 3px 2px #9370DB , /* middle magenta */
- 0 0 5px 3px #0ff; /* outer cyan */
- }
- #content #notecontainer ol.notes {
- padding-top:5px;
- list-style-type: none;
- padding-left: 0;
- margin: 0;
- font: 15px 'Seaweed Script', cursive;
- text-decoration:none;
- }
- #notecontainer li{
- border-top: 2px inset #0ff;
- padding-left: 15px;
- background: -moz-linear-gradient(left, rgba(0,233,255,0.6) 0%, rgba(108,192,235,0) 86%, rgba(125,185,232,0) 100%); /* FF3.6-15 */
- background: -webkit-linear-gradient(left, rgba(0,233,255,0.6) 0%,rgba(108,192,235,0) 86%,rgba(125,185,232,0) 100%); /* Chrome10-25,Safari5.1-6 */
- background: linear-gradient(to right, rgba(0,233,255,0.6) 0%,rgba(108,192,235,0) 86%,rgba(125,185,232,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
- }
- #notecontainer li:nth-child(2n+2) {
- text-align:right;
- padding-right: 15px;
- border-top: 2px outset #FF30F8;
- padding-left: 0;
- background: -moz-linear-gradient(left, rgba(0,233,255,0) 0%, rgba(43,193,253,0) 17%, rgba(255,0,246,0.6) 100%); /* FF3.6-15 */
- background: -webkit-linear-gradient(left, rgba(0,233,255,0) 0%,rgba(43,193,253,0) 17%,rgba(255,0,246,0.6) 100%); /* Chrome10-25,Safari5.1-6 */
- background: linear-gradient(to right, rgba(0,233,255,0) 0%,rgba(43,193,253,0) 17%,rgba(255,0,246,0.6) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
- }
- #content #notecontainer li a{
- color: #0800FF;
- text-shadow: -1px -1px 0 #00FF7C, 1px -1px 0 #00FF7C, -1px 1px 0 #00FF7C, 1px 1px 0 #00FF7C;
- }
- #content #notecontainer li a:nth-child(2n+2){
- text-shadow: -1px -1px 0 #FF82FF, 1px -1px 0 #FF82FF, -1px 1px 0 #FF82FF, 1px 1px 0 #FF82FF;
- }
- #content #notecontainer img.avatar {
- margin-right: 10px;
- width: 16px;
- height: 16px;
- }
- #navigation {
- text-align: center;
- text-transform: lowercase;
- width:170px;
- padding: 5px 5px;
- text-shadow:0px 0px #000;
- }
- #navigation:hover{
- text-transform: lowercase;
- color:orange;
- opacity: 0.9;
- text-shadow:0px 0px #000;
- }
- #navigation a {
- text-align: center;
- font: 11px 'Limelight', cursive;
- background-color: #000;
- height:15px;
- text-transform: uppercase;
- padding: 2px 4px;
- margin-left: 2px;
- border: 3px inset red;
- text-decoration: none;
- color:fuchsia;
- }
- #navigation a:hover {
- color:green;
- }
- #ident {
- background: url('http://i.imgur.com/9MBwXCI.png') center no-repeat;
- background-size: contain;
- height:50px;
- width:50px;
- bottom:20px;
- z-index:99999999;
- position:fixed;
- right:20px;
- opacity:0.6;
- transition: opacity 0.6s;
- }
- #ident:hover {
- opacity:1;
- cursor: cell;
- }
- #ident2 {
- background: url('http://i.imgur.com/LUl64GJ.png') center no-repeat;
- background-size: contain;
- height:50px;
- width:50px;
- bottom:75px;
- z-index:99999999;
- position:fixed;
- right:20px;
- opacity:0.6;
- transition: opacity 0.6s;
- }
- #ident2:hover {
- opacity:1;
- cursor: cell;
- }
- #s-m-t-tooltip {
- max-width:300px;
- transform: translate(0.5em, 0.5em);
- height:18px;
- border-radius: 0px;
- padding:4px;
- color:#FFFF00;
- text-shadow: 1px 1px #000;
- border:2px solid #000;
- letter-spacing:1px;
- background: #ef3ed5; /* Old browsers */
- background: -moz-linear-gradient(top, #ef3ed5 0%, #2ec5ea 100%); /* FF3.6-15 */
- background: -webkit-linear-gradient(top, #ef3ed5 0%,#2ec5ea 100%); /* Chrome10-25,Safari5.1-6 */
- background: linear-gradient(to bottom, #ef3ed5 0%,#2ec5ea 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
- filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ef3ed5', endColorstr='#2ec5ea',GradientType=0 );
- font: 15px 'Limelight', cursive;
- z-index:99999;
- }
- #content #posts #photo{
- margin-right:auto;
- margin-left:auto;
- margin-top: 10px;
- box-shadow: 0 0 3px 1px #fff, 0 0 5px 3px #ff7cbb, 0 0 7px 4px #ffb7d0;
- transition: box-shadow 0.8s;
- }
- #content #posts #photo:hover{
- box-shadow: 0 0 6px 3px #fff, 0 0 10px 6px #ff7cbb, 0 0 14px 9px #ffb7d0;
- }
- #content #posts #photo img{
- width:100%;
- height:auto;
- }
- #content #posts #bphotoset{
- transition: box-shadow 0.8s;
- width:450px;
- margin-left: -5px;
- }
- #content #posts #bphotoset:hover{
- }
- #content #posts #bphotoset .photoset{
- margin-top:10px;
- margin-right:auto;
- margin-left:auto;
- }
- /*box-shadow: 0 0 6px 3px #fff, 0 0 10px 6px #9370DB, 0 0 14px 9px #0ff;*/
- #content #posts #bphotoset .photoset img{
- box-shadow: 0 0 3px 1px #fff, 0 0 5px 3px #9370DB, 0 0 7px 4px #0ff;
- width:100%;
- height:auto;
- }
- #audioplayer
- {
- background-color: #000;
- opacity: 0.5;
- transition: opacity 0.4s;
- }
- #audioplayer:hover
- {
- opacity: 0.8;
- }
- #playa td{
- color:red;
- font:12px 'Roboto', sans-serif;
- text-transform:uppercase;
- transition: box-shadow .6s cubic-bezier(.19,1,.22,1);
- }
- #playa td:hover{
- box-shadow:
- 0px 0px 8px 2px rgba(255,0,0,1) inset;
- }
- #playa td input[type=range]::-webkit-slider-thumb {
- box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
- border: 0px solid #000000;
- height: 20px;
- width: 39px;
- border-radius: 7px;
- background: #65001c;
- cursor: pointer;
- -webkit-appearance: none;
- margin-top: -3.6px;
- }
- .mCSB_scrollTools .mCSB_draggerRail { background:rgba(0,255,106, 0.5); width:2px; }
- .mCSB_draggerContainer { width:8px; }
- .mCSB_scrollTools .mCSB_dragger { cursor:auto; }
- .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
- width:5px;
- background:#ffffcc;
- text-align:center;
- box-shadow: 0 0 3px 1px #fff, 0 0 5px 3px #ffff1a, 0 0 7px 4px #ffff4d;
- border-radius:2px; }
- .mCSB_scrollTools { opacity:1; }
- .mCSB_container{
- padding: 20px 0px 5px;
- }
- </style>
- <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
- <script src="http://malihu.github.io/custom-scrollbar/jquery.mCustomScrollbar.min.js"></script><!--scrollbar code-->
- <script src="http://malihu.github.io/custom-scrollbar/jquery.mCustomScrollbar.concat.min.js"></script>
- <script>
- var jqscroll = $.noConflict()
- (function(jqscroll){
- jqscroll(window).on("load",function(){
- jqscroll("#content").mCustomScrollbar({
- scrollInertia:700,
- alwaysShowScrollbar: 2,
- MouseWheel:{ enable: true },
- scrollButtons:{ enable: false },
- keyboard:{ enable: true },
- scrollbarPosition:"inside",
- });
- });
- })(jQuery);
- </script>
- <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
- <script src="http://static.tumblr.com/fiw4iub/4jdnu5ta4/jquery.style-my-tooltips.js"></script><!--tooltip code-->
- <!--tooltip script-->
- <script>
- var jqttip = $.noConflict()
- (function(jqttip){
- jqttip(document).ready(function(){
- jqttip("a[title]").style_my_tooltips({
- tip_follows_cursor:true,
- tip_delay_time:10,
- tip_fade_speed:0,
- attribute:"title"
- });
- });
- })(jQuery);
- </script>
- </head>
- <body>
- <div id="headert" class="header"></div>
- <div id="headerb" class="header"></div>
- <div id="headerr" class="header"></div>
- <div id="headerl" class="header"></div>
- <div id="bgrnd">
- <div id="blk" class="flashyborder">
- <div id="content">
- {block:Posts}
- <div id="posts">
- {block:Photo}
- <div style="font: 16px 'Limelight', cursive; border: 3px inset #E54BB4; text-align:center">PHOTO:</div>
- {LinkOpenTag}<div id="photo"><img src="{PhotoURL-500}" align="center"/></div>{LinkCloseTag}
- {block:Caption}<div class="text">{Caption}</div>{/block:Caption}
- {/block:Photo}
- {block:Photoset}
- <div style="font: 16px 'Limelight', cursive; border: 3px inset #E54BB4; text-align:center">PHOTOSET:</div>
- <div id="bphotoset"><div class="photoset" align="center" >{Photoset-400}</div></div>
- {block:Caption}<div class="text">{Caption}</div>{/block:Caption}
- {/block:Photoset}
- {block:Video}
- <div style="font: 16px 'Limelight', cursive; border: 3px inset #E54BB4; text-align:center">VIDEO:</div>
- <div class="vidya" align="center">{Video-400}</div>
- {block:Caption}<div class="text">{Caption}</div>{/block:Caption}
- {/block:Video}
- {block:Audio}
- <div style="font: 16px 'Limelight', cursive; border: 3px inset #E54BB4; text-align:center">AUDIO:</div>
- <table id="title" width="100%" border="4" bordercolor="3f00ff" style="font:20px 'Seaweed Script', cursive; text-transform:lowercase;text-align:center; border: 3px inset #E54BB4; margin-top: 10px;">
- <tr>
- <td rowspan="3" style="width:110px;">{block:AlbumArt}<img src="{AlbumArtURL}" width="110">{/block:AlbumArt}</td>
- <td><i>{block:Artist}{Artist}{/block:Artist} - {block:TrackName}{TrackName}{/block:TrackName}</i></td>
- </tr>
- <tr>
- <td>{block:AudioPlayer}<div id= "audioplayer">{AudioPlayerBlack}</div>{/block:AudioPlayer}</td>
- </tr>
- <tr>
- <td>{PlayCountWithLabel}</td>
- </tr>
- </table>
- {/block:Audio}
- <!-- wtf is this
- <div class="text"></div>
- {block:Caption}<div class="text">{Caption}</div>{/block:Caption}
- -->
- {block:Quote}
- <div style="font: 16px 'Limelight', cursive; transform:translate(190px, -25px)">QUOTE:</div>
- <div class="title">“{Quote}”</div>
- {block:Source}<div class="text"><br>~ {Source}</div>{/block:Source}
- {/block:Quote}
- {block:Text}
- {block:Title}<div class="title">{Title}</div>{/block:Title}
- <div class="text">{Body}</div>
- {/block:Text}
- {block:Answer}
- <div class="asker"> > > {Asker}</div>
- <div id="question">{Question}</div>
- <div class="text">{Answer}</div>
- {block:Answer}
- {block:Chat}
- {block:Title}<div class="title">{Title}</div>{/block:Title}
- <div class="text">
- {block:Lines}
- {block:Label}<strong>{Label}</strong>{/block:Label} {Line}<br />
- {/block:Lines}
- </div> <!--text-->
- {/block:Chat}
- {block:Link}
- <div class="title"><a href="{URL}">{Name}</a></div>
- {block:Description}
- <div class="text">{Description}</div>
- {/block:Description}
- {/block:Link}
- <div id="infoblock">
- <a href="{ReblogURL}" target="_blank" title="REBLOG">
- <div id="rebline" class="sbars" align="center"><b>{block:Date}
- POSTED {MonthNumberWithZero}{DayOfMonthWithZero}-{Year} AT {24HourwithZero}{Minutes}</b>{/block:Date}
- </div>
- </a>
- <a href="{Permalink}" title="PERMALINK">
- <div id="likeline" class="sbars" align="center"><b>{block:NoteCount}{NoteCountWithLabel}{/block:NoteCount}</b></div>
- </a>
- <div id="permline" class="sbars" align="center"><b>{block:HasTags}{block:Tags}<a href="{TagURL}"><b>{Tag}</b></a><span class="comma">, </span>{/block:Tags}{/block:HasTags}<span class="comma"> </span></b></div>
- </div>
- <!--
- <div id="permabox">
- <div id="permalink">
- </div> -->
- </div> <!--posts-->
- <!--Note Container (Part 7)-->
- {block:PostNotes}
- <div id="notecontainer">{PostNotes}</div>
- {/block:PostNotes}
- <!-- </div> -->
- {/block:Posts}
- </div> <!--content-->
- </div>
- </div>
- <div id="topmid">
- <a href="/askalt"><div id="redopbar" class="opbars"><i>{AskLabel}</i></div></a>
- <a href="/about"><div id="ylwopbar" class="opbars"><i>ABOUT</i></div></a>
- <a href="/themes"><div id="grnopbar" class="opbars"><i>THEMES</i></div></a>
- <a href="/res"><div id="bluopbar" class="opbars">RESOURCES & TUTORIALS - <i>UNDER CONSTRUCTION</i></div></a>
- <div id="titleblock"><a href="http://crocketts-themes.tumblr.com/">
- <img src="http://i.imgur.com/LUl64GJ.png" width="220" height="220" style="position: absolute; z-index: 1">
- <div id="neon1" class="neonbars"></div>
- <div id="neon2" class="neonbars"></div>
- <div class="titletext">crockett's </div>
- <div class="titletext" style="margin-top:90px">themes</div>
- </a>
- </div>
- <div id="desc">
- <div class="gradient">{Description}</div>
- <div class="shadow" >{Description}</div>
- <img style="position: absolute;left:0;top: 0;width: 100%;height: auto; opacity: 0.3;filter:brightness(200%); z-index:-4" src="http://www.clipartbest.com/cliparts/RcA/67M/RcA67Me7i.png">
- {block:Pagination}
- <div id="navigation">
- {block:PreviousPage}<a href="{PreviousPage}">← {lang:Previous}</a>{/block:PreviousPage}
- {block:NextPage}<a href="{NextPage}">{lang:Next} →</a>{/block:NextPage}
- </div>
- {/block:Pagination}
- </div>
- <div id="mplayer" class="flashyborder" style="
- width:200px;
- max-height:100px;
- position: absolute;
- left: -280px;
- top:200px;
- box-shadow: 0 0 0 0 rgba(0,0,0,0)!important ;
- background: rgba(0,0,0,0.7) url('http://www.richardfarrar.com/downloads/cctv-lines.png') top left fixed repeat ;">
- <table id="playa" border="1" width="100%" height="100%">
- <tr>
- <td rowspan="2">
- <style type="text/css">
- .playerbutton{cursor:pointer;border:none;background:transparent;outline:none;display:inline}
- .gaf210codes_youtubebox,.preload_box{width:1px;height:1px;overflow:hidden;visibility:hidden;position:absolute;display:inline}
- .gaf210codes_youtubetitle{vertical-align:top;text-shadow:1px 1px #ccc; min-height:12px;}
- #gaf210codes_5TZU9_container{}
- </style>
- <script type="text/javascript" src="http://www.youtube.com/player_api"></script><script type="text/javascript">function toggleButtonPlayer_5TZU9(buttonobj){buttonobj.style.display="none";if(buttonobj.id=="gaf210codes-5TZU9-playbutton"){document.getElementById("gaf210codes-5TZU9-pausebutton").style.display="inline";}else{document.getElementById("gaf210codes-5TZU9-playbutton").style.display="inline";}}/*Youtube player code generated @ http://gaf210.imvustylez.net*/</script>
- <div id="gaf210codes_5TZU9_container"><div class="gaf210codes_youtubebox"><iframe allow="autoplay" width="250" height="250" src="https://www.youtube.com/embed/z-GmV4kwUIc?start=10?enablejsapi=1&fs=0&rel=0&showinfo=0&modestbranding=1&iv_load_policy=3&controls=0&autoplay=0&loop=0" onload="gaf210codes_5TZU9=new YT.Player(this,{events:{'onStateChange':function(event){if(event.data == 1){document.getElementById('gaf210codes_5TZU9_title').innerHTML=event.target.getVideoData().title}}}})"></iframe></div>
- <button type="button" class="playerbutton" id="gaf210codes-5TZU9-playbutton" onclick="gaf210codes_5TZU9.playVideo();toggleButtonPlayer_5TZU9(this)">
- <img src="http://i.imgur.com/uU7aL6z.png"></button>
- <button type="button" class="playerbutton" id="gaf210codes-5TZU9-pausebutton" onclick="gaf210codes_5TZU9.pauseVideo();toggleButtonPlayer_5TZU9(this)" style="display:none">
- <img src="http://i.imgur.com/egYsmvU.png"></button><div class="preload_box">
- <img src="http://i.imgur.com/uU7aL6z.png"><img src="http://i.imgur.com/egYsmvU.png"></div>
- </div>
- <td> Now Playing: </td>
- </tr>
- <tr>
- <td id="gaf210codes_5TZU9_title" class="gaf210codes_youtubetitle"></td>
- </tr>
- <tr>
- <td colspan="2">
- <input style="outline:none;border: 2px solid blue;" type="range" min="0" max="100" onchange="gaf210codes_5TZU9.setVolume(this.value)">
- </td>
- </tr>
- </table>
- </div><!--mplayer-->
- <div id="progmenu" class="flashyborder">
- <div id="progmenutitle">Current Project:</div>
- </div>
- </div> <!--topmid -->
- <!--DO NOT REMOVE THIS CODE WITHIN THIS COMMENT-->
- <a href="http://crocketts-themes.tumblr.com/" title="theme by crockett">
- <div id="ident2"></div></a>
- <a href="http://badmecha007.tumblr.com/" title="main blog">
- <div id="ident"></div></a>
- <!---->
- </body>
Advertisement
Add Comment
Please, Sign In to add comment