API tools faq
paste
Advertisement
louistrps

3 STRIKES - A THEME BY LOUISTRPS

louistrps
Jan 21st, 2017
1,200
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 33.66 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2.  
  3.  
  4. "3 STRIKES" - A THEME BY LOUISTRPS
  5.  
  6. STEALING IS SUPER UNCOOL!
  7.  
  8. DON'T REMOVE THE CREDIT, DON'T REDISTRIBUTE,
  9. DON'T USE AS A BASE, DON'T CLAIM AS YOUR OWN!
  10.  
  11. I'LL FIND YOU.
  12.  
  13. YOU'LL BE IN TROUBLE.
  14.  
  15.  
  16. EST. 2K17
  17.  
  18.  
  19. -->
  20.  
  21.  
  22. <html>
  23. <head>
  24.  
  25. <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
  26. <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
  27. <link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
  28. <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
  29. <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet">
  30. <link href="https://fonts.googleapis.com/css?family=Indie+Flower" rel="stylesheet">
  31. <link href="https://fonts.googleapis.com/css?family=Homemade+Apple" rel="stylesheet">
  32.  
  33.  
  34. <title>{Title}</title>
  35. <link rel="shortcut icon" href="{Favicon}">
  36. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  37. {block:Description}
  38. <meta name="description" content="{MetaDescription}" />
  39. {/block:Description}
  40.  
  41.  
  42. <!--IMAGES-->
  43.  
  44. <meta name="image:background" content=""/>
  45. <meta name="image:sidebar 1" content=""/>
  46. <meta name="image:sidebar 2" content=""/>
  47.  
  48. <!--TITLE-->
  49.  
  50. <meta name="text:title" content="title" />
  51.  
  52. <!--LINKS -->
  53.  
  54. <meta name="text:link 1" content="/" />
  55. <meta name="text:link 2" content="/" />
  56. <meta name="text:link 3" content="/" />
  57. <meta name="text:link 4" content="/" />
  58.  
  59.  
  60. <!--COLORS -->
  61.  
  62. <meta name="color:background color" content=""/>
  63. <meta name="color:post background" content=""/>
  64. <meta name="color:container background" content=""/>
  65. <meta name="color:sidebar background" content=""/>
  66. <meta name="color:description background" content=""/>
  67. <meta name="color:accent 1" content=""/>
  68. <meta name="color:accent 2" content=""/>
  69. <meta name="color:accent 3" content=""/>
  70.  
  71. <meta name="color:link color" content=""/>
  72. <meta name="color:link icons" content=""/>
  73. <meta name="color:links hover" content=""/>
  74. <meta name="color:title color" content=""/>
  75. <meta name="color:text" content=""/>
  76. <meta name="color:description text" content=""/>
  77. <meta name="color:bold" content=""/>
  78. <meta name="color:italic" content=""/>
  79. <meta name="color:underline" content=""/>
  80.  
  81.  
  82. <!--FONT SIZES-->
  83. <meta name="if:10px font" content="0"/>
  84. <meta name="if:11px font" content="0"/>
  85. <meta name="if:12px font" content="1"/>
  86.  
  87.  
  88.  
  89.  
  90. </head>
  91.  
  92. <style type="text/css">
  93.  
  94. /* SCROLLBAR */
  95.  
  96. ::-webkit-scrollbar {
  97. width: 3px;
  98. height: 2px;
  99.  
  100. }
  101. ::-webkit-scrollbar-button {
  102. width: 0px;
  103. height: 0px;
  104. }
  105. ::-webkit-scrollbar-thumb {
  106. background: {color:post background};
  107. border: 0px none #ffffff;
  108. border-radius: 50px;
  109. position:absolute;
  110. top:20px;
  111. }
  112.  
  113. ::-webkit-scrollbar-thumb:active {
  114. background: {color:post background};
  115. }
  116. ::-webkit-scrollbar-track {
  117. background: {color:accent 1};
  118. border: 0px none #ffffff;
  119. border-radius: 50px;
  120. }
  121. ::-webkit-scrollbar-track:hover {
  122. background: {color:accent 1};
  123. }
  124. ::-webkit-scrollbar-track:active {
  125. background: {color:accent 1};
  126. }
  127. ::-webkit-scrollbar-corner {
  128. background: transparent;
  129. }
  130.  
  131. /* BASICS */
  132.  
  133. body {
  134. background-image:url({image:background});
  135. background-color:{color:background color};
  136. font-family: 'Roboto', sans-serif;
  137. background-size: cover;
  138. {block:If10pxFont} font-size:10px; {/block:If10pxFont}
  139. {block:If11pxFont} font-size:11px; {/block:If11pxFont}
  140. {block:If12pxFont} font-size:12px; {/block:If12pxFont}
  141. line-height:11px;
  142. color:{color:text};
  143.  
  144. }
  145.  
  146. h, h1, h2 {
  147. font-family: 'Roboto', sans-serif;
  148. font-size:15px;
  149. line-height:15px;
  150. text-align:right;
  151. color:{color:text};
  152. margin-top:0px;
  153. font-weight:700;
  154. background:{color:accent 3};
  155. padding:10px;
  156. text-transform:uppercase;
  157.  
  158. }
  159.  
  160.  
  161.  
  162. b, strong {
  163. color:{color:bold};
  164.  
  165. }
  166.  
  167. i, em {
  168. color:{color:italic};
  169.  
  170. }
  171.  
  172. u {
  173.  
  174. color:{color:underline};
  175. }
  176.  
  177. a {
  178. text-decoration:none;
  179. color: {color:link color};
  180. font-weight: bold;
  181. font-family: 'Roboto', sans-serif;
  182. }
  183.  
  184. blockquote {
  185. padding:2px 7px;
  186. MARGIN:3PX 0 3PX 8PX;
  187. border-left: 2px solid {color:accent 1};
  188.  
  189. }
  190.  
  191. /* CONTAINER */
  192.  
  193.  
  194. #container {
  195. width:712px;
  196. height:535px;
  197. position: absolute;
  198. margin: auto;
  199. top: 0; left: 0; bottom: 0; right: 0;
  200. background-size: cover;
  201. background:{color:container background};
  202. -webkit-box-shadow: 6px 6px 11px 0px rgba(51,48,51,.8);
  203. -moz-box-shadow: 6px 6px 11px 0px rgba(51,48,51,.8);
  204. box-shadow: 6px 6px 11px 0px rgba(51,48,51,.8);
  205.  
  206. }
  207.  
  208. /* SIDEBAR */
  209.  
  210. #sidebar {
  211. width:250px;
  212. height:500px;
  213. background:{color:sidebar background};
  214.  
  215.  
  216.  
  217. }
  218.  
  219. #sidebarimg1 {
  220. width:100px;
  221. height:100px;
  222. border-radius:100%;
  223. position:relative;
  224. top:10px;
  225. left:68px;
  226.  
  227. }
  228.  
  229. #sidebarimg1 img {
  230.  
  231. width:100px;
  232. height:100px;
  233. border-top:5px solid {color:accent 2};
  234. border-left:5px solid {color:accent 2};
  235. border-right:5px solid {color:accent 1};
  236. border-bottom:5px solid {color:accent 1};
  237. border-radius:100%;
  238. -webkit-transition: all .6s ease;
  239. -moz-transition: all .6s ease;
  240. -o-transition: all .6s ease;
  241. -ms-transition: all .6s ease;
  242. transition: all .6s ease;
  243.  
  244. }
  245.  
  246. #sidebarimg1 img:hover {
  247. transform: rotate(30deg);
  248. -ms-transform: rotate(30deg);
  249. -webkit-transform: rotate(30deg);
  250. -o-transform: rotate(30deg);
  251. -moz-transform: rotate(30deg);
  252. filter: grayscale(100%);
  253. }
  254.  
  255. #sidebarimg2 {
  256. width:100px;
  257. height:100px;
  258. border-radius:100%;
  259. position:relative;
  260. left:68px;
  261. top:40px;
  262. -webkit-transition: all .6s ease;
  263. -moz-transition: all .6s ease;
  264. -o-transition: all .6s ease;
  265. -ms-transition: all .6s ease;
  266. transition: all .6s ease;
  267. }
  268.  
  269. #sidebarimg2 img {
  270. width:100px;
  271. height:100px;
  272. border-bottom:5px solid {color:accent 2};
  273. border-right:5px solid {color:accent 2};
  274. border-left:5px solid {color:accent 1};
  275. border-top:5px solid {color:accent 1};
  276. border-radius:100%;
  277. -webkit-transition: all .6s ease;
  278. -moz-transition: all .6s ease;
  279. -o-transition: all .6s ease;
  280. -ms-transition: all .6s ease;
  281. transition: all .6s ease;
  282.  
  283. }
  284.  
  285. #sidebarimg2 img:hover {
  286. transform: rotate(-30deg);
  287. -ms-transform: rotate(-30deg);
  288. -webkit-transform: rotate(-30deg);
  289. -o-transform: rotate(-30deg);
  290. -moz-transform: rotate(-30deg);
  291. filter: grayscale(100%);
  292. }
  293.  
  294. #descriptionblock {
  295. width:150px;
  296. padding:10px;
  297. height:200px;
  298. -webkit-box-shadow: 3px 3px 0px 0px {color:accent 2};
  299. -moz-box-shadow: 3px 3px 0px 0px {color:accent 2};
  300. box-shadow: 3px 3px 0px 0px {color:accent 2};
  301. position:relative;
  302. left:38px;
  303. top:30px;
  304. background:{color:description background}
  305.  
  306. }
  307.  
  308. #descriptiontext {
  309. width:150px;
  310. height:200px;
  311. text-align:justify;
  312. overflow:hidden;
  313. {block:If10pxFont} font-size:10px; {/block:If10pxFont}
  314. {block:If11pxFont} font-size:11px; {/block:If11pxFont}
  315. {block:If12pxFont} font-size:12px; {/block:If12pxFont}
  316.  
  317. {block:If10pxFont} line-height:10px; {/block:If10pxFont}
  318. {block:If11pxFont} line-height:11px; {/block:If11pxFont}
  319. {block:If12pxFont} line-height:12px; {/block:If12pxFont}
  320. font-family:Arial;
  321. color:{color:description text};
  322.  
  323.  
  324. }
  325.  
  326.  
  327.  
  328. /*CHAT POSTS*/
  329.  
  330.  
  331.  
  332. .answer span,.convo li {
  333. margin:0 0 5px;
  334. border-radius:1em;
  335. padding:.5em 10px;
  336. max-width:75%;
  337. clear:both;
  338. position:relative;
  339.  
  340. }
  341.  
  342. .answer .them,.user_1,.user_3,.user_5,.user_7,.user_9,.user_11 {
  343. float:left;
  344. background:{color:accent 2};
  345. color:{color:text};
  346. left:3px;
  347.  
  348. }
  349.  
  350. .me::after,.user_1::after,.user_3::after,.user_5::after,.user_7::after,.user_9::after,.user_11::after {
  351. content:"";
  352. position:absolute;
  353. left:-.5em;
  354. bottom:0;
  355. width:.5em;
  356. height:1em;
  357. border-right:.5em solid {color:accent 2};
  358. border-bottom-right-radius:1em .5em;
  359.  
  360.  
  361. }
  362. .answer .me,.user_2,.user_4,.user_6,.user_8,.user_10,.user_12 {
  363. right:3px;
  364. float:right;
  365. background-color:{color:accent 1};
  366. color:{color:description text};
  367.  
  368. }
  369.  
  370. .them::after,.user_2::after,.user_4::after,.user_6::after,.user_8::after,.user_10::after,.user_12::after {
  371. content:"";
  372. position:absolute;
  373. right:-.5em;
  374. bottom:0;
  375. width:.5em;
  376. height:1em;
  377. border-left:.5em solid {color:accent 1};
  378. border-bottom-left-radius:1em .5em;
  379.  
  380.  
  381. }
  382.  
  383. .me p,.answer,.asked span{padding:0;margin:0}.answer{overflow:hidden}
  384. .asked p {
  385. text-align: left;
  386. margin: 0 0px 10px 0px;
  387. padding: 0;
  388. color: #666666;
  389. font-family: 'Inconsolata', Inconsolata;
  390. {block:If10pxFont} font-size:10px; {/block:If10pxFont}
  391. {block:If11pxFont} font-size:11px; {/block:If11pxFont}
  392. {block:If12pxFont} font-size:12px; {/block:If12pxFont}
  393. line-height: 0px;
  394. }
  395. .footerright .viasrc {
  396. float: left;
  397. }
  398. .asked a {
  399. margin:0;padding:0;
  400. }
  401. .user_4{background-color:#55caff;color:#fff}.user_4::after{border-color:#55caff}.user_6{background-color:#60f246;color:#fff}.user_6::after{border-color:#60f246}.user_5{background-color:#9ff3fc;color:#000}.user_5::after{border-color:#9ff3fc}.user_3{background-color:#25c413;color:#fff}.user_3::after{border-color:#25c413}.user_7{background-color:#9b9b9b;color:#fff}.user_7::after{border-color:#9b9b9b}.user_8{background-color:#0d9321;color:#fff}.user_8::after{border-color:#0d9321}.user_9{background-color:#606060;color:#fff}.user_9::after{border-color:#606060}
  402. .convo {
  403. overflow: hidden;
  404. list-style-type: none;
  405. padding: 0;
  406. margin: 0;
  407. }
  408.  
  409. /*TITLE*/
  410.  
  411. #titlebar {
  412. width:432px;
  413. line-height:px;
  414. padding:15px;
  415. background:{color:accent 2};
  416. position:absolute;
  417. z-index:999;
  418. left:250px;
  419. color:{color:title color};
  420. text-align:center;
  421.  
  422. -webkit-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.75);
  423. -moz-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.75);
  424. box-shadow: 0 4px 2px -1px gray;
  425.  
  426.  
  427. }
  428.  
  429.  
  430.  
  431.  
  432. @-webkit-keyframes hvr-buzz-out {
  433. 10% {
  434. -webkit-transform: translateX(3px) rotate(2deg);
  435. transform: translateX(3px) rotate(2deg);
  436. }
  437. 20% {
  438. -webkit-transform: translateX(-3px) rotate(-2deg);
  439. transform: translateX(-3px) rotate(-2deg);
  440. }
  441. 30% {
  442. -webkit-transform: translateX(3px) rotate(2deg);
  443. transform: translateX(3px) rotate(2deg);
  444. }
  445. 40% {
  446. -webkit-transform: translateX(-3px) rotate(-2deg);
  447. transform: translateX(-3px) rotate(-2deg);
  448. }
  449. 50% {
  450. -webkit-transform: translateX(2px) rotate(1deg);
  451. transform: translateX(2px) rotate(1deg);
  452. }
  453. 60% {
  454. -webkit-transform: translateX(-2px) rotate(-1deg);
  455. transform: translateX(-2px) rotate(-1deg);
  456. }
  457. 70% {
  458. -webkit-transform: translateX(2px) rotate(1deg);
  459. transform: translateX(2px) rotate(1deg);
  460. }
  461. 80% {
  462. -webkit-transform: translateX(-2px) rotate(-1deg);
  463. transform: translateX(-2px) rotate(-1deg);
  464. }
  465. 90% {
  466. -webkit-transform: translateX(1px) rotate(0);
  467. transform: translateX(1px) rotate(0);
  468. }
  469. 100% {
  470. -webkit-transform: translateX(-1px) rotate(0);
  471. transform: translateX(-1px) rotate(0);
  472. }
  473.  
  474. }
  475. @keyframes hvr-buzz-out {
  476. 10% {
  477. -webkit-transform: translateX(3px) rotate(2deg);
  478. transform: translateX(3px) rotate(2deg);
  479. }
  480. 20% {
  481. -webkit-transform: translateX(-3px) rotate(-2deg);
  482. transform: translateX(-3px) rotate(-2deg);
  483. }
  484. 30% {
  485. -webkit-transform: translateX(3px) rotate(2deg);
  486. transform: translateX(3px) rotate(2deg);
  487. }
  488. 40% {
  489. -webkit-transform: translateX(-3px) rotate(-2deg);
  490. transform: translateX(-3px) rotate(-2deg);
  491. }
  492. 50% {
  493. -webkit-transform: translateX(2px) rotate(1deg);
  494. transform: translateX(2px) rotate(1deg);
  495. }
  496. 60% {
  497. -webkit-transform: translateX(-2px) rotate(-1deg);
  498. transform: translateX(-2px) rotate(-1deg);
  499. }
  500. 70% {
  501. -webkit-transform: translateX(2px) rotate(1deg);
  502. transform: translateX(2px) rotate(1deg);
  503. }
  504. 80% {
  505. -webkit-transform: translateX(-2px) rotate(-1deg);
  506. transform: translateX(-2px) rotate(-1deg);
  507. }
  508. 90% {
  509. -webkit-transform: translateX(1px) rotate(0);
  510. transform: translateX(1px) rotate(0);
  511. }
  512. 100% {
  513. -webkit-transform: translateX(-1px) rotate(0);
  514. transform: translateX(-1px) rotate(0);
  515. }
  516. }
  517.  
  518.  
  519.  
  520. #titlebar-inside {
  521.  
  522. font-family: 'Source Sans Pro', sans serif;
  523. text-transform:uppercase;
  524. font-weight:700;
  525. padding:10px;
  526. font-size:9px;
  527. letter-spacing:3px;
  528. background:{color:accent 1};
  529. line-height:10px;
  530. text-align:center;
  531. display: inline-block;
  532. vertical-align: middle;
  533.  
  534. -webkit-transform: perspective(1px) translateZ(0);
  535. transform: perspective(1px) translateZ(0);
  536. box-shadow: 0 0 1px transparent;
  537. position: relative;
  538. -webkit-transition-property: color;
  539. transition-property: color;
  540. -webkit-transition-duration: 0.5s;
  541. transition-duration: 0.5s;
  542. -webkit-box-shadow: 3px 3px 0px 0px {color:title color};
  543. -moz-box-shadow: 3px 3px 0px 0px {color:title color};
  544. box-shadow: 3px 3px 0px 0px {color:title color};
  545. }
  546.  
  547.  
  548. #titlebar-inside:hover, #titlebar-inside:focus, #titlebar-inside:active {
  549. -webkit-animation-name: hvr-buzz-out;
  550. animation-name: hvr-buzz-out;
  551. -webkit-animation-duration: 0.75s;
  552. animation-duration: 0.75s;
  553. -webkit-animation-timing-function: linear;
  554. animation-timing-function: linear;
  555. -webkit-animation-iteration-count: 1;
  556. animation-iteration-count: 1;
  557. }
  558.  
  559.  
  560.  
  561.  
  562.  
  563.  
  564.  
  565. #titlebar a {
  566. color:{color:title color};
  567. }
  568.  
  569.  
  570.  
  571.  
  572. /*LINKS*/
  573.  
  574. @-webkit-keyframes hvr-pulse {
  575. 25% {
  576. -webkit-transform: scale(1.1);
  577. transform: scale(1.1);
  578. }
  579. 75% {
  580. -webkit-transform: scale(0.9);
  581. transform: scale(0.9);
  582. }
  583. }
  584. @keyframes hvr-pulse {
  585. 25% {
  586. -webkit-transform: scale(1.1);
  587. transform: scale(1.1);
  588. }
  589. 75% {
  590. -webkit-transform: scale(0.9);
  591. transform: scale(0.9);
  592. }
  593. }
  594.  
  595.  
  596.  
  597. #link2 {
  598. width:40px;
  599. height:40px;
  600. border-radius:100%;
  601. background:{color:accent 2};
  602. position:absolute;
  603. left:-20px;
  604. top:70px;
  605. display: inline-block;
  606. vertical-align: middle;
  607. -webkit-transform: perspective(1px) translateZ(0);
  608. transform: perspective(1px) translateZ(0);
  609. box-shadow: 0 0 1px transparent;
  610. -webkit-transition-duration: 1s;
  611. transition-duration: 1s;
  612. }
  613.  
  614. #link2:hover, #link2:focus, #link2:active {
  615. -webkit-animation-name: hvr-pulse;
  616. animation-name: hvr-pulse;
  617. -webkit-animation-duration: 1s;
  618. animation-duration: 1s;
  619. -webkit-animation-timing-function: linear;
  620. animation-timing-function: linear;
  621. -webkit-animation-iteration-count: infinite;
  622. animation-iteration-count: infinite;
  623. background:{color:accent 1};
  624.  
  625. }
  626.  
  627. #link3 {
  628. width:40px;
  629. height:40px;
  630. border-radius:100%;
  631. background:{color:accent 2};
  632. position:absolute;
  633. left:-20px;
  634. top:170px;
  635. display: inline-block;
  636. vertical-align: middle;
  637. -webkit-transform: perspective(1px) translateZ(0);
  638. transform: perspective(1px) translateZ(0);
  639. box-shadow: 0 0 1px transparent;
  640. -webkit-transition-duration: 1s;
  641. transition-duration: 1s;
  642. }
  643.  
  644. #link3:hover, #link3:focus, #link3:active {
  645. -webkit-animation-name: hvr-pulse;
  646. animation-name: hvr-pulse;
  647. -webkit-animation-duration: 1s;
  648. animation-duration: 1s;
  649. -webkit-animation-timing-function: linear;
  650. animation-timing-function: linear;
  651. -webkit-animation-iteration-count: infinite;
  652. animation-iteration-count: infinite;
  653. background:{color:accent 1};
  654. }
  655.  
  656.  
  657.  
  658. #link4 {
  659. width:40px;
  660. height:40px;
  661. border-radius:100%;
  662. background:{color:accent 2};
  663. position:absolute;
  664. left:-20px;
  665. top:270px;
  666. display: inline-block;
  667. vertical-align: middle;
  668. -webkit-transform: perspective(1px) translateZ(0);
  669. transform: perspective(1px) translateZ(0);
  670. box-shadow: 0 0 1px transparent;
  671. -webkit-transition-duration: 1s;
  672. transition-duration: 1s;
  673.  
  674. }
  675.  
  676. #link4:hover, #link4:focus, #link4:active {
  677. -webkit-animation-name: hvr-pulse;
  678. animation-name: hvr-pulse;
  679. -webkit-animation-duration: 1s;
  680. animation-duration: 1s;
  681. -webkit-animation-timing-function: linear;
  682. animation-timing-function: linear;
  683. -webkit-animation-iteration-count: infinite;
  684. animation-iteration-count: infinite;
  685. background:{color:accent 1};
  686. }
  687.  
  688. #link5 {
  689. width:40px;
  690. height:40px;
  691. border-radius:100%;
  692. background:{color:accent 2};
  693. position:absolute;
  694. left:-20px;
  695. top:370px;
  696. display: inline-block;
  697. vertical-align: middle;
  698. -webkit-transform: perspective(1px) translateZ(0);
  699. transform: perspective(1px) translateZ(0);
  700. box-shadow: 0 0 1px transparent;
  701. -webkit-transition-duration: 1s;
  702. transition-duration: 1s;
  703. }
  704.  
  705. #link5:hover, #link5:focus, #link5:active {
  706. -webkit-animation-name: hvr-pulse;
  707. animation-name: hvr-pulse;
  708. -webkit-animation-duration: 1s;
  709. animation-duration: 1s;
  710. -webkit-animation-timing-function: linear;
  711. animation-timing-function: linear;
  712. -webkit-animation-iteration-count: infinite;
  713. animation-iteration-count: infinite;
  714. background:{color:accent 1};
  715. }
  716.  
  717. .linksinside {
  718. text-decoration:none;
  719. font-size:20px;
  720. color:{color:title color};
  721. width:40px;
  722. text-align:center;
  723. margin-top:10px;
  724. }
  725.  
  726. .linksinside a {
  727. color:{color:title color};
  728. text-decoration:none;
  729. }
  730.  
  731.  
  732.  
  733.  
  734.  
  735. /* POSTS */
  736.  
  737. #post {
  738. width:464px;
  739. height:500px;
  740.  
  741. position:relative;
  742. left:245px;
  743. top:-443px;
  744. overflow-y:scroll;
  745.  
  746. }
  747.  
  748.  
  749.  
  750.  
  751.  
  752.  
  753.  
  754. .posts {
  755.  
  756. width:400px;
  757. padding:19px;
  758. padding-left:25px;
  759. position:relative;
  760. top:35px;
  761. display:block;
  762. }
  763.  
  764.  
  765.  
  766. .insidepost {
  767. width:400px;
  768. padding:7px;
  769. background-color:{color:post background};
  770. margin-bottom:10px;
  771. -webkit-box-shadow: 2px 2px 2px 0px rgba(0,0,0,0.68);
  772. -moz-box-shadow: 2px 2px 2px 0px rgba(0,0,0,0.68);
  773. box-shadow: 2px 2px 2px 0px rgba(0,0,0,0.68);
  774.  
  775. }
  776.  
  777.  
  778.  
  779. .text {
  780.  
  781. padding:5px;
  782. text-align:justify;
  783. color:{color:text};
  784. font-family:trebuchet ms;
  785. }
  786.  
  787. .photo img {
  788.  
  789. width:400px;
  790. min-width:400px;
  791. }
  792.  
  793. /*ASK*/
  794.  
  795.  
  796. .askblock {
  797. color{color:text};
  798. text-align:justify;
  799. {block:If10pxFont} font-size:10px; {/block:If10pxFont}
  800. {block:If11pxFont} font-size:11px; {/block:If11pxFont}
  801. {block:If12pxFont} font-size:12px; {/block:If12pxFont}
  802. line-height:10px;
  803. text-align:justify;
  804. height:auto;
  805. padding:10px;
  806. padding-bottom:30px;
  807. background:{color:accent 2};
  808. width:380px;
  809. font-family:montserrat;
  810.  
  811.  
  812. }
  813.  
  814.  
  815.  
  816. .answered {
  817. {block:If10pxFont} font-size:10px; {/block:If10pxFont}
  818. {block:If11pxFont} font-size:11px; {/block:If11pxFont}
  819. {block:If12pxFont} font-size:12px; {/block:If12pxFont}
  820. line-height:10px;
  821. text-align:justify;
  822. padding:10px;
  823. width:380px;
  824. font-family:trebuchet ms;
  825. background:{color:description background};
  826.  
  827. margin-bottom:15px;
  828.  
  829. }
  830.  
  831.  
  832.  
  833. .askimg {
  834. width:400px;
  835. height:1px;
  836. position:relative;
  837. top:0px;
  838. background:{color:description background};
  839. text-align:center;
  840. }
  841. .askimg img {
  842. max-width:40px;
  843. max-height:40px;
  844. border-radius:100%;
  845. position:relative;
  846. top:-25px;
  847. text-align:center;
  848. }
  849.  
  850.  
  851.  
  852.  
  853.  
  854. /*PAGINATION*/
  855.  
  856. #pagination {
  857. width: 230px;
  858. line-height:10px;
  859. padding:10px;
  860. background:{color:accent 2};
  861. position:relative;
  862. top:65px;
  863. color:{color:title color};
  864. font-family:trebuchet ms;
  865. font-size:10px;
  866. letter-spacing:1px;
  867. text-align:center;
  868. -webkit-transition-duration: 0.4s;
  869. transition-duration: 0.4s;
  870.  
  871. }
  872.  
  873.  
  874.  
  875.  
  876. #pagination-inside {
  877. font-family: 'Source Sans Pro', sans serif;
  878. text-transform:uppercase;
  879. font-weight:700;
  880. color:{color:title color};
  881. padding:10px;
  882. font-size:10px;
  883. letter-spacing:3px;
  884. background:{color:accent 1};
  885. line-height:10px;
  886. display: inline-block;
  887. -webkit-box-shadow: 3px 3px 0px 0px {color:title color};
  888. -moz-box-shadow: 3px 3px 0px 0px {color:title color};
  889. box-shadow: 3px 3px 0px 0px {color:title color};
  890.  
  891. }
  892.  
  893. #pagination a {
  894. color: {color:title color};
  895.  
  896. -webkit-transition-duration: 1s;
  897. transition-duration: 1s;
  898. }
  899.  
  900. #pagination a:hover {
  901. letter-spacing:10px;
  902. }
  903.  
  904. /*PERMALINKS*/
  905.  
  906. .tags {
  907. padding:5px;
  908. background:{color:accent 2};
  909. color:{color:text};
  910. text-transform:uppercase;
  911. margin-top:5px;
  912. margin-bottom:5px;
  913. text-align:center;
  914. font-size:9px;
  915. line-height:10px;
  916. -webkit-transition-duration: 1s;
  917. transition-duration: 1s;
  918. }
  919.  
  920. .tags a {
  921. color:{color:text};
  922. -webkit-transition: all 1s ease;
  923. -moz-transition: all 1s ease;
  924. -o-transition: all 1s ease;
  925. -ms-transition: all 1s ease;
  926. transition: all 1s ease;
  927. }
  928.  
  929. .tags a:hover {
  930. letter-spacing:1px;
  931. }
  932.  
  933. .realtags {
  934. font-size:9px;
  935. text-transform:uppercase;
  936. color:{color:text};
  937. display: inline-block;
  938.  
  939. padding:3px;
  940.  
  941.  
  942. }
  943.  
  944. .realtags a {
  945. color:{color:text};
  946. -webkit-transition: all 1s ease;
  947. -moz-transition: all 1s ease;
  948. -o-transition: all 1s ease;
  949. -ms-transition: all 1s ease;
  950. transition: all 1s ease;
  951. }
  952.  
  953. .realtags a:hover {
  954. color:{color:accent 2};
  955.  
  956. }
  957.  
  958. /*AUDIO*/
  959.  
  960. .playerbuttonbg {
  961. position: absolute;
  962. left: 20px;
  963. top: 20px;
  964. width: 19px;
  965. height: 19px;
  966. background-color: #ffffff;
  967. padding: 10px;
  968. -webkit-border-radius: 40px;
  969. -moz-border-radius: 40px;
  970. border-radius: 40px;
  971. opacity: .4;
  972. filter: alpha(opacity=40);
  973. -moz-opacity: 0.4;
  974. -khtml-opacity: 0.4;
  975. transition: opacity .7s ease-in-out;
  976. -moz-transition: opacity .7s ease-in-out;
  977. -webkit-transition: opacity .7s ease-in-out;
  978. }
  979.  
  980. .playerbuttonbg:hover {
  981. opacity: 1;
  982. filter: alpha(opacity=100);
  983. -moz-opacity: 1;
  984. -khtml-opacity: 1;
  985. }
  986.  
  987. .newplayerbutton {
  988. position: relative;
  989. width: 19px;
  990. height: 19px;
  991. overflow: hidden;
  992. }
  993.  
  994. .playerbuttonhug {
  995. position: absolute;
  996. top: -18px;
  997. left: -7px;
  998. }
  999.  
  1000. .tumblr_audio_player {
  1001. height: 90px;
  1002. width: 270px;
  1003. -moz-transform: scale(0.60, 0.60);
  1004. -webkit-transform: scale(0.60, 0.60);
  1005. -o-transform: scale(0.60, 0.60);
  1006. -ms-transform: scale(0.60, 0.60);
  1007. transform: scale(0.60, 0.60);
  1008. -moz-transform-origin: top left;
  1009. -webkit-transform-origin: top left;
  1010. -o-transform-origin: top left;
  1011. -ms-transform-origin: top left;
  1012. transform-origin: top left;
  1013. }
  1014.  
  1015. .audioimgwrapper {
  1016. position: absolute;
  1017. left: 0px;
  1018. top: 0px;
  1019. -webkit-border-radius: 40px;
  1020. -moz-border-radius: 40px;
  1021. border-radius: 40px;
  1022. overflow: hidden;
  1023. width: 79px;
  1024. height: 79px;
  1025. }
  1026.  
  1027. .audioimgwrapper img {
  1028. width: 100%;
  1029. height: auto;
  1030. -webkit-border-radius: 40px;
  1031. -moz-border-radius: 40px;
  1032. border-radius: 40px;
  1033. }
  1034.  
  1035. .trackdetails {
  1036. width: 280px;
  1037. padding:10px;
  1038. padding-top:20px;
  1039. font-family: 'Roboto', sans-serif;
  1040. text-transform:uppercase;
  1041. text-align:center;
  1042. font-weight:700;
  1043. font-size:12px;
  1044. background: {color:description background};
  1045. display:inline-block;
  1046. margin-left: 90px;
  1047. min-height:50px;
  1048. color:{color:description text};
  1049. -webkit-box-shadow: 3px 3px 0px 0px {color:accent 2};
  1050. -moz-box-shadow: 3px 3px 0px 0px {color:accent 2};
  1051. box-shadow: 3px 3px 0px 0px {color:accent 2};
  1052. }
  1053.  
  1054. .audiowrapper {
  1055. position: relative;
  1056. display:inline-block;
  1057. }
  1058.  
  1059.  
  1060. /*CREDIT*/
  1061.  
  1062. #credit {
  1063. position:absolute;
  1064. bottom:5px;
  1065. right:5px;
  1066. padding:5px;
  1067. background:{color:accent 1};
  1068. color:{color:accent 2};
  1069. line-height:120%;
  1070. font-size:9px;
  1071. letter-spacing:1px;
  1072. font-family: 'Roboto', sans-serif;
  1073. display: inline-block;
  1074. vertical-align: middle;
  1075. - webkit-transform: perspective(1px) translateZ(0);
  1076. transform: perspective(1px) translateZ(0);
  1077. box-shadow: 0 0 1px transparent;
  1078.  
  1079. -webkit-transition-property: color;
  1080. transition-property: color;
  1081. -webkit-transition-duration: 0.3s;
  1082. transition-duration: 0.3s;
  1083. }
  1084.  
  1085. #credit:before {
  1086. content: "";
  1087. position: absolute;
  1088. z-index: -1;
  1089. top: 0;
  1090. left: 0;
  1091. right: 0;
  1092. bottom: 0;
  1093. background: {color:accent 2};
  1094. -webkit-transform: scaleX(0);
  1095. transform: scaleX(0);
  1096. -webkit-transform-origin: 100% 50%;
  1097. transform-origin: 100% 50%;
  1098. -webkit-transition-property: transform;
  1099. transition-property: transform;
  1100. -webkit-transition-duration: 0.3s;
  1101. transition-duration: 0.3s;
  1102. -webkit-transition-timing-function: ease-out;
  1103. transition-timing-function: ease-out;
  1104. }
  1105. #credit:hover, #credit:focus, #credit:active {
  1106. color: {color:accent 1};
  1107.  
  1108. }
  1109. #credit:hover:before, #credit:focus:before, #credit:active:before {
  1110. -webkit-transform: scaleX(1);
  1111. transform: scaleX(1);
  1112. }
  1113.  
  1114.  
  1115.  
  1116. </style>
  1117.  
  1118. <body>
  1119.  
  1120.  
  1121.  
  1122.  
  1123. <div id="container">
  1124.  
  1125.  
  1126.  
  1127.  
  1128.  
  1129. <a href="{text:link 1}"><div id="link2">
  1130.  
  1131. <div class="linksinside">
  1132.  
  1133. <i class="fa fa-refresh" aria-hidden="true"style="color:{color:link icons}"></i>
  1134.  
  1135. </div>
  1136.  
  1137.  
  1138. </div></a>
  1139.  
  1140. <a href="{text:link 2}"><div id="link3">
  1141.  
  1142. <div class="linksinside">
  1143.  
  1144. <i class="fa fa-envelope" aria-hidden="true"style="color:{color:link icons}"></i>
  1145.  
  1146. </div>
  1147.  
  1148.  
  1149. </div></a>
  1150.  
  1151. <a href="{text:link 3}"><div id="link4">
  1152.  
  1153. <div class="linksinside">
  1154.  
  1155. <i class="fa fa-user" aria-hidden="true"style="color:{color:link icons}"></i>
  1156.  
  1157. </div>
  1158.  
  1159. </div></a>
  1160.  
  1161. <a href="{text:link 4}"><div id="link5"style="color:{color:link icons}">
  1162.  
  1163. <div class="linksinside">
  1164.  
  1165. <i class="fa fa-globe" aria-hidden="true"style="color:{color:link icons}"></i>
  1166.  
  1167. </div>
  1168.  
  1169.  
  1170. </div></a>
  1171.  
  1172.  
  1173.  
  1174. <div id="titlebar"><a href="/"><div id="titlebar-inside">
  1175. {text:title}
  1176. </div>
  1177. </a>
  1178. </div>
  1179.  
  1180.  
  1181.  
  1182.  
  1183.  
  1184.  
  1185.  
  1186.  
  1187.  
  1188.  
  1189. <div id="sidebar">
  1190.  
  1191. <div id="sidebarimg1"><img src="{image:sidebar 1}"></div>
  1192.  
  1193. <div id="descriptionblock">
  1194. <div id="descriptiontext">
  1195. {block:Description}
  1196. {Description}
  1197. {/block:Description}
  1198.  
  1199. </div>
  1200. </div>
  1201.  
  1202. <div id="sidebarimg2"><img src="{image:sidebar 2}"></div>
  1203.  
  1204.  
  1205. <div id="pagination"><div id="pagination-inside">
  1206.  
  1207. {block:Pagination}{block:PreviousPage}<a href="{PreviousPage}">PREV </a>
  1208.  
  1209. <i class="fa fa-circle" aria-hidden="true"style="color:{color:title color}"></i>
  1210.  
  1211. {/block:PreviousPage}{block:NextPage}<a href="{NextPage}">NEXT </a>
  1212. {/block:NextPage}{/block:Pagination}
  1213. </div></div>
  1214.  
  1215.  
  1216.  
  1217. <div id="post"><div class="posts">
  1218.  
  1219.  
  1220. {block:Posts}
  1221.  
  1222. <div class="insidepost">
  1223.  
  1224.  
  1225. {block:Text}<h1>{block:Title}{Title}{/block:Title}</h1><div class="text">{Body}</div>{/block:Text}
  1226.  
  1227.  
  1228. {block:Photo}
  1229. <div class="photo"><center><img src="{PhotoURL-500}"/></center></div>
  1230. <div class="text">{Caption}</div>
  1231.  
  1232. {/block:Photo}
  1233.  
  1234.  
  1235. {block:Answer}
  1236.  
  1237.  
  1238.  
  1239. <div class="askblock"><span style="text-transform:uppercase;padding-right:5px;padding-bottom:5px;font-weight:bold;font-style:italic;">{Asker} whispered:</span>
  1240. {Question}
  1241. </div>
  1242. <div class="askimg">
  1243. <img src="{AskerPortraitURL-40}">
  1244. </div>
  1245. <div class="answered">
  1246. {Answer}</div>
  1247. {/block:Answer}
  1248.  
  1249.  
  1250.  
  1251. {block:Panorama}{LinkOpenTag}<img src="{PhotoURL-Panorama}" alt="{PhotoAlt}"/>{LinkCloseTag}{block:Caption}{Caption}{/block:Caption}{/block:Panorama}
  1252.  
  1253.  
  1254.  
  1255. {block:Photoset}
  1256.  
  1257. <center><div class="photo">{Photoset-400}</div></center>
  1258. <div class="text">{Caption}</div>
  1259.  
  1260. {/block:Photoset}
  1261.  
  1262.  
  1263. {block:Quote}<h1>"{Quote}"</h1>{block:Source}{Source}{/block:Source}{/block:Quote}
  1264.  
  1265. {block:Link}<a href="{URL}" class="link" {Target}>{Name}</a>{block:Description}{Description}{/block:Description}{/block:Link}
  1266.  
  1267.  
  1268.  
  1269. {block:Chat}
  1270. {block:Title}
  1271. <h1>{Title}</h1>{/block:Title}<br>
  1272. <ul class="convo">{block:Lines}<li class="line_{Alt} user_{UserNumber}">{block:Label}<span class="label"><strong>{Label}</strong></span>{/block:Label}
  1273. {Line}</li>{/block:Lines}</ul>
  1274. {/block:Chat}
  1275.  
  1276.  
  1277.  
  1278. {block:Video}{Video-400}{block:Caption}{Caption}{/block:Caption}{/block:Video}
  1279.  
  1280. {block:AudioPlayer}
  1281. <div class="audiowrapper">
  1282. {block:AlbumArt}
  1283. <div class="audioimgwrapper"><img src="{AlbumArtURL}"></div>
  1284. {/block:AlbumArt}
  1285.  
  1286. <div class="playerbuttonbg">
  1287. <div class="newplayerbutton">
  1288. <div class="playerbuttonhug">
  1289.  
  1290. {AudioPlayerWhite}
  1291.  
  1292. </div>
  1293. </div>
  1294. </div>
  1295.  
  1296. <div class="trackdetails">
  1297.  
  1298. {block:TrackName}{TrackName}{/block:TrackName}<br/>
  1299. {block:Artist}Artist: {Artist}{/block:Artist}<br/>
  1300. {block:Album}Album: {Album}{/block:Album}<br/>
  1301. {PlayCountWithLabel}
  1302.  
  1303. </div>
  1304. </div>
  1305. {/block:AudioPlayer}
  1306.  
  1307.  
  1308.  
  1309.  
  1310.  
  1311.  
  1312.  
  1313. <div class="tags"><i class="fa fa-calendar" aria-hidden="true"style="color:{color:font icons};margin-right:2px"></i> <a href="{Permalink}">{block:Date}{TimeAgo}{/block:Date}</a> <a href="{Permalink}">{block:NoteCount}<i class="fa fa-heart" aria-hidden="true"style="color:{color:font icons}"></i> {NoteCountWithLabel}{/block:NoteCount}</a> {block:RebloggedFrom} <a href="{ReblogParentURL}"><i class="fa fa-user" aria-hidden="true"style="color:{color:font icons}"></i> via {ReblogParentName}</a> <i class="fa fa-star" aria-hidden="true"style="color:{color:font icons}"></i> SOURCE: <a href="{ReblogRootURL}">{ReblogRootName}</a>{/block:RebloggedFrom} </div>
  1314. <div class="realtags">{block:HasTags}{block:Tags}<a href=“{TagUrl}”><i class="fa fa-tag" aria-hidden="true"style="padding:3px"></i> {Tag}</A>{/block:Tags}{/block:HasTags}</div>
  1315.  
  1316.  
  1317. </div>
  1318.  
  1319.  
  1320.  
  1321.  
  1322.  
  1323.  
  1324. {/block:Posts}
  1325.  
  1326. <!-- {block:NoRebloggedFrom}
  1327. {block:RebloggedFrom}{ReblogParentName}{/block:RebloggedFrom}
  1328. {/block:NoRebloggedFrom} -->
  1329. {block:ContentSource}<!-- {SourceURL}
  1330. {block:SourceLogo}<img src="{BlackLogoURL}"width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />{/block:SourceLogo}
  1331. {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
  1332. {/block:ContentSource}
  1333.  
  1334.  
  1335. </div></div>
  1336.  
  1337.  
  1338.  
  1339. </div></div>
  1340.  
  1341.  
  1342.  
  1343.  
  1344. </div>
  1345.  
  1346. <a href="http://louistrps.tumblr.com"><div id="credit"> lou</div></a>
  1347.  
  1348.  
  1349.  
  1350.  
  1351.  
  1352. </body>
  1353. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!