API tools faq
paste
Advertisement
hermionemessi

Theme 04 v1

hermionemessi
Apr 22nd, 2015
1,776
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 32.55 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3.  
  4. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  5.  
  6. <!--THEME 04 Bad Blood v1 by hermionegrangcr (hermionejean.co.vu)
  7.  
  8. THEME BLOG: grangersdesigns (granger.cf)
  9.  
  10.  
  11. ♛ ♛ ♛
  12. ♛♛♛ ♛♛♛ ♛♛♛
  13. ♛ ♛ ♛ ♛ ♛ ♛ ♛ ♛
  14. ♛♛♛ ♥ G♚D ♥ ♛♛♛
  15. ♛ ♛ ♛ ♛ ♛ ♛ ♛ ♛
  16. ♛ ♛ ♛ ♛ ♛ ♛ ♛ © hermionegrangcr (hermionejean.co.vu)
  17.  
  18.  
  19. TERMS OF USE:
  20.  
  21. ♚ BASIC RULES (see http://hermionejean.co.vu/rules) APPLY
  22.  
  23. ♚ PLEASE RESPECT THEM IF USING! ANY FORMS OF THEFTS WILL BE HUNTED DOWN.
  24.  
  25. ♚ PLEASE DO NOT ALTER OR COVER THE CREDIT
  26.  
  27. ♚ FAILURE TO ABIDE TO THE RULES WILL LEAD TO AN IMMEDIATE BLOCK & REPORT & A PERMANENT PLACE ON HTTP://HERMIONEJEAN.CO.VU/WOS
  28.  
  29. THAT'S IT! ENJOY USING MY CODE AND DON'T BE AFRAID TO ASK ME IF YOU ENCOUNTER ANY PROBLEMS c:
  30.  
  31. -->
  32. <head>
  33. <title>{Title}</title>
  34. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  35. <link rel="shortcut icon" href="{Favicon}"/>
  36. <link rel="alternate" type="application/rss+xml" href="{RSS}" />
  37.  
  38. <link href='http://fonts.googleapis.com/css?family=Lato:100,300,400,700' rel='stylesheet' type='text/css'>
  39. <link href='http://fonts.googleapis.com/css?family=Raleway:400,100,300,200,500,700' rel='stylesheet' type='text/css'>
  40.  
  41. {block:Description}
  42. <meta name="description" content="{MetaDescription}"/>
  43. {/block:Description}
  44.  
  45. <meta name="if:400px" content="0">
  46. <meta name="if:coloured blockquotes" content="0">
  47.  
  48. <meta name="color:lightbox" content="#000">
  49. <meta name="color:links" content="#cdcdcd">
  50. <meta name="color:hover" content="#fafafa">
  51. <meta name="color:tags" content="#dedede">
  52. <meta name="color:blockquote" content="#fafafa">
  53. <meta name="color:scroll" content="#000">
  54. <meta name="color:accent1" content="#000">
  55. <meta name="color:accent2" content="#fff">
  56. <meta name="color:accent3" content="#cdcdcd">
  57. <meta name="color:blockquote1" content="#cdcdcd">
  58. <meta name="color:blockquote2" content="#cdcdcd">
  59. <meta name="color:blockquote3" content="#cdcdcd">
  60. <meta name="color:blockquote4" content="#cdcdcd">
  61. <meta name="color:blockquote5" content="#cdcdcd">
  62.  
  63.  
  64. <meta name="text:info" content="Name, Age, Country, MBTI, etc">
  65. <meta name="text:update" content="Updates">
  66. <meta name="text:upd" content="Updates here">
  67.  
  68.  
  69. <meta name="text:Link1" content="Link1">
  70. <meta name="text:link1 URL" content="/">
  71. <meta name="text:Link2" content="Link2">
  72. <meta name="text:link2 URL" content="/">
  73. <meta name="text:Link3" content="Link3">
  74. <meta name="text:link3 URL" content="/">
  75. <meta name="text:Link4" content="Link4">
  76. <meta name="text:link4 URL" content="/">
  77. <meta name="text:Link5" content="Link5">
  78. <meta name="text:link5 URL" content="/">
  79. <meta name="text:Link6" content="Link6">
  80. <meta name="text:link6 URL" content="/">
  81. <meta name="text:Link7" content="Link7">
  82. <meta name="text:link7 URL" content="/">
  83. <meta name="text:Link8" content="Link8">
  84. <meta name="text:link8 URL" content="/">
  85. <meta name="text:Link9" content="Link9">
  86. <meta name="text:link9 URL" content="/">
  87.  
  88.  
  89. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  90.  
  91. <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  92.  
  93. <!--Tooltip-->
  94.  
  95. <script>
  96.  
  97. (function($){
  98.  
  99. $(document).ready(function(){
  100.  
  101. $("a[title]").style_my_tooltips({
  102.  
  103. tip_follows_cursor:true,
  104.  
  105. tip_delay_time:30,
  106.  
  107. tip_fade_speed:300,
  108.  
  109. attribute:"title"
  110.  
  111. });
  112.  
  113. });
  114.  
  115. })(jQuery);
  116.  
  117. </script>
  118.  
  119.  
  120. <!--Hide and Seek-->
  121. <script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js” type=”text/javascript”></script>
  122.  
  123. <script>
  124.  
  125. $(document).ready(function(){
  126.  
  127. $("a.index").click(function(){
  128. $("#t1").fadeIn();
  129. $("#t2").fadeOut();
  130. $("#t3").fadeOut();
  131. $("#t4").fadeOut();
  132. $("#t5").fadeOut();
  133.  
  134. });
  135.  
  136. $("a.owlery").click(function(){
  137. $("#t1").fadeOut();
  138. $("#t2").fadeIn();
  139. $("#t3").fadeOut();
  140. $("#t4").fadeOut();
  141. $("#t5").fadeOut();
  142.  
  143. });
  144.  
  145. $("a.info").click(function(){
  146. $("#t1").fadeOut();
  147. $("#t2").fadeOut();
  148. $("#t3").fadeIn();
  149. $("#t4").fadeOut();
  150. $("#t5").fadeOut();
  151.  
  152. });
  153.  
  154. $("a.map").click(function(){
  155. $("#t1").fadeOut();
  156. $("#t2").fadeOut();
  157. $("#t3").fadeOut();
  158. $("#t4").fadeIn();
  159. $("#t5").fadeOut();
  160.  
  161. });
  162.  
  163. $("a.broll").click(function(){
  164. $("#t1").fadeOut();
  165. $("#t2").fadeOut();
  166. $("#t3").fadeOut();
  167. $("#t4").fadeOut();
  168. $("#t5").fadeIn();
  169.  
  170. });
  171.  
  172. });
  173.  
  174. </script>
  175.  
  176.  
  177. <style type="text/css">
  178. ::selection {background:#fff; color:#000000;}
  179. ::-moz-selection {background:#fff;color:#000000;}
  180. ::-webkit-selection {background:#fff;color:#000000;}
  181.  
  182.  
  183. ::-webkit-scrollbar {width: 5px; height: 3px; background: #FFFFFF; }
  184.  
  185. ::-webkit-scrollbar-thumb { background-color: {color:scroll}; }
  186.  
  187.  
  188. /*Tooltip*/
  189. #s-m-t-tooltip{
  190. position:absolute;
  191. margin-top: 10px;
  192. z-index:9999999999;
  193. padding:5px;
  194. color:#fff;
  195. background: {color:accent1};
  196. font-size:12px;
  197.  
  198. }
  199.  
  200. body {
  201. font-family:'Lato',Arial, sans-serif;
  202. font-weight:400;
  203. font-size:12px;
  204. letter-spacing:1.5px;
  205. background:#fff;
  206. overflow-x:hidden;
  207.  
  208. }
  209.  
  210. a {
  211. text-decoration: none;
  212. color: {color:links};
  213. transition: all 0.3s ease-in-out;
  214. -webkit-transition: all 0.3s ease-in-out;
  215. -moz-transition: all 0.3s ease-in-out;
  216. -o-transition: all 0.3s ease-in-out;
  217. }
  218.  
  219. a:hover {
  220. color: {color:hover};
  221. transition: all 0.3s ease-in-out;
  222. -webkit-transition: all 0.3s ease-in-out;
  223. -moz-transition: all 0.3s ease-in-out;
  224. -o-transition: all 0.3s ease-in-out;
  225.  
  226. }
  227.  
  228. b, strong {
  229. font-weight:700;
  230. }
  231.  
  232. strike {
  233. text-decoration: line-through;
  234. }
  235.  
  236. em, i {
  237. text-decoration:italic;
  238. }
  239. u {
  240. text-decoration:underline;
  241. }
  242.  
  243. pre {
  244. white-space: pre-wrap;
  245. white-space: -moz-pre-wrap;
  246. white-space: -pre-wrap;
  247. white-space: -o-pre-wrap;
  248. word-wrap: break-word;
  249. }
  250.  
  251. {block:ifnotcolouredblockquotes}
  252. blockquote {
  253. border-left: 1px {color:blockquote} solid;
  254. padding-left: 20px;
  255. margin-left: 15px;
  256. max-width: 100%;
  257.  
  258. }
  259. {/block:ifnotcolouredblockquotes}
  260.  
  261. {block:ifcolouredblockquotes}
  262. blockquote {
  263. border-left: 2px solid;
  264. padding-left: 20px;
  265. margin-left: 15px;
  266. max-width: 100%;
  267. }
  268. {block:ifcolouredblockquotes}
  269.  
  270. blockquote blockquote {
  271. padding: 0 0 0 20px;
  272. margin: 0 0 0 15px;
  273.  
  274. }
  275.  
  276. blockquote ul {
  277. padding-left:0;
  278. }
  279.  
  280. blockquote li {
  281. list-style:none;
  282. padding:5px;
  283. }
  284.  
  285. li {
  286. padding:3px;
  287. }
  288.  
  289. /*Important*/
  290.  
  291. iframe, img:not(.lightbox-image), embed, object, video, pre, li, blockquote {max-width: 100% !important;}
  292.  
  293. .tmblr-iframe.tmblr-iframe--desktop-logged-in-controls.iframe-controls--desktop,.tmblr-iframe.tmblr-iframe--controls.iframe-controls--desktop {z-index:10001 !important;}
  294.  
  295. .barca {
  296. position: fixed;
  297. top: 0;
  298. left: 0;
  299. width: 100%;
  300. background: {color:accent1};
  301. z-index: 10000;
  302. height: 180px;
  303. overflow: hidden;
  304. -webkit-transition: height 0.3s;
  305. -moz-transition: height 0.3s;
  306. transition: height 0.3s;
  307. }
  308.  
  309. .barca nav a {
  310. -webkit-transition: all 0.3s;
  311. -moz-transition: all 0.3s;
  312. transition: all 0.3s;
  313. }
  314.  
  315. .barca.midget {
  316. height: 50px;
  317. }
  318.  
  319. .midget .blaugrana {
  320. margin-top:-105px;
  321. -webkit-transition: all 0.3s;
  322. -moz-transition: all 0.3s;
  323. transition: all 0.3s;
  324. }
  325.  
  326. nav a {
  327. position: relative;
  328. display: inline-block;
  329. margin: 35px auto 15px auto;
  330. outline: none;
  331. color: {color:accent2};
  332. text-decoration: none;
  333. text-transform: uppercase;
  334. letter-spacing: 1px;
  335. font-weight: 400;
  336. text-shadow: 0 0 1px rgba(255,255,255,0.3);
  337. font-size: 2.5em;
  338. }
  339.  
  340. nav a:hover,
  341. nav a:focus {
  342. outline: none;
  343. }
  344.  
  345. .albiceleste {
  346. text-align:center;
  347. }
  348.  
  349. .albiceleste a {
  350. padding: 10px;
  351. color: {color:accent2};
  352. font-weight: 700;
  353. text-shadow: none;
  354. -webkit-transition: color 0.3s;
  355. -moz-transition: color 0.3s;
  356. transition: color 0.3s;
  357. }
  358.  
  359. .albiceleste a::before,
  360. .albiceleste a::after {
  361. position: absolute;
  362. left: 0;
  363. width: 100%;
  364. height: 2px;
  365. background: {color:accent2};
  366. content: '';
  367. opacity: 0;
  368. -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
  369. -moz-transition: opacity 0.3s, -moz-transform 0.3s;
  370. transition: opacity 0.3s, transform 0.3s;
  371. -webkit-transform: translateY(-10px);
  372. -moz-transform: translateY(-10px);
  373. transform: translateY(-10px);
  374. }
  375.  
  376. .albiceleste a::before {
  377. top: 0;
  378. -webkit-transform: translateY(-10px);
  379. -moz-transform: translateY(-10px);
  380. transform: translateY(-10px);
  381. }
  382.  
  383. .albiceleste a::after {
  384. bottom: 0;
  385. -webkit-transform: translateY(10px);
  386. -moz-transform: translateY(10px);
  387. transform: translateY(10px);
  388. }
  389.  
  390. .albiceleste a:hover,
  391. .albiceleste a:focus {
  392. color: {color:accent2};
  393. }
  394.  
  395. .albiceleste a:hover::before,
  396. .albiceleste a:focus::before,
  397. .albiceleste a:hover::after,
  398. .albiceleste a:focus::after {
  399. opacity: 1;
  400. -webkit-transform: translateY(0px);
  401. -moz-transform: translateY(0px);
  402. transform: translateY(0px);
  403. }
  404.  
  405. .blaugrana {
  406. font-family:'Lato', Arial, Sans-Serif;
  407. font-weight:400;
  408. text-align:center;
  409. position: relative;
  410. margin: 5px auto;
  411. width: 560px;
  412. -webkit-transition: all 0.3s;
  413. -moz-transition: all 0.3s;
  414. transition: all 0.3s;
  415. }
  416.  
  417. .blaugrana a {
  418. color:{color:accent2};
  419. font-size:16px;
  420. margin:15px;
  421. display:inline-block;
  422. }
  423.  
  424. .blaugrana a::after {
  425. position: absolute;
  426. top: 100%;
  427. left: 0;
  428. width: 100%;
  429. height: 1px;
  430. background: {color:accent2};
  431. content: '';
  432. opacity: 0;
  433. -webkit-transition: height 0.3s, opacity 0.3s, -webkit-transform 0.3s;
  434. -moz-transition: height 0.3s, opacity 0.3s, -moz-transform 0.3s;
  435. transition: height 0.3s, opacity 0.3s, transform 0.3s;
  436. -webkit-transform: translateY(-10px);
  437. -moz-transform: translateY(-10px);
  438. transform: translateY(-10px);
  439. }
  440.  
  441. .blaugrana a:hover::after,
  442. .blaugrana a:focus::after {
  443. height: 5px;
  444. opacity: 1;
  445. -webkit-transform: translateY(0px);
  446. -moz-transform: translateY(0px);
  447. transform: translateY(0px);
  448. }
  449.  
  450. /*Mes Que Un Club*/
  451.  
  452. .da {
  453.  
  454. position:relative;
  455. width:560px;
  456. padding:25px;
  457. margin:5px auto;
  458. text-align:center;
  459. left:-2.5%;
  460.  
  461. }
  462.  
  463. .da:before,
  464. .da:after {
  465. content:"";
  466. display:table;
  467. }
  468. .da:after {
  469. clear:both;
  470. }
  471.  
  472. .wizards {
  473.  
  474. width:96px;
  475. height:96px;
  476. background:#fff;
  477. padding:10px;
  478. margin:10px;
  479. float:left;
  480. transition:
  481. all 0.4s ease-in-out;
  482. -webkit-transition:all 0.4s ease-in-out;
  483. -moz-transition:all 0.4s ease-in-out;
  484. -o-transition:all 0.4s ease-in-out;
  485. -ms-transition:all 0.4s ease-in-out;
  486.  
  487. -webkit-backface-visibility: hidden;
  488. }
  489.  
  490. .da .wizards.blur{
  491. box-shadow: 0px 0px 20px 10px #fafafa;
  492. transform: scale(0.9);
  493. -webkit-transform: scale(0.9);
  494. -moz-transform: scale(0.9);
  495. -o-transform: scale(0.9);
  496. -ms-transform: scale(0.9);
  497. opacity: 0.7;
  498. -moz-filter:blur(5px);
  499. -webkit-filter: blur(5px);
  500. filter: blur(5px);
  501. }
  502.  
  503. .da .wizards.active{
  504. transform: scale(1.05);
  505. -webkit-transform: scale(1.05);
  506. -moz-transform: scale(1.05);
  507. -o-transform: scale(1.05);
  508. -ms-transform: scale(1.05);
  509. z-index: 100;
  510. opacity: 1;
  511. -webkit-filter: blur(0px);
  512. -moz-filter:blur(0px);
  513. filter: blur(0px);
  514. transition:
  515. all 0.4s ease-in-out;
  516. -webkit-transition:all 0.4s ease-in-out;
  517. -moz-transition:all 0.4s ease-in-out;
  518. -o-transition:all 0.4s ease-in-out;
  519. -ms-transition:all 0.4s ease-in-out;
  520. }
  521.  
  522.  
  523. /*conts*/
  524.  
  525. #t1, #t2, #t3, #t4, #t5 {
  526.  
  527. width:560px;
  528. position:relative;
  529. top:200px;
  530. margin:auto;
  531. display:none;
  532.  
  533. }
  534.  
  535. #t1 {
  536. display:block;
  537. }
  538.  
  539. /*askbox*/
  540.  
  541. #t2 h1 {
  542. text-align:center;
  543. color:{color:accent1};
  544. }
  545.  
  546. .howler {
  547. {block:if400px}
  548. width:400px;
  549. {/block:if400px}
  550. {block:ifnot400px}
  551. width:500px;
  552. {/block:ifnot400px}
  553. padding:10px 30px;
  554. margin:5px auto;
  555. }
  556.  
  557. /*profile*/
  558.  
  559. #t3 h1 {
  560. text-align:center;
  561. color:{color:accent1};
  562. }
  563.  
  564. .profile {
  565. {block:if400px}
  566. width:400px;
  567. {/block:if400px}
  568. {block:ifnot400px}
  569. width:500px;
  570. {/block:ifnot400px}
  571. padding:10px 30px;
  572. margin:5px auto;
  573. text-align:left;
  574. font-size:1em;
  575. line-height:140%;
  576. }
  577.  
  578. #t5 h1 {
  579. text-align:center;
  580. color:{color:accent1};
  581. }
  582.  
  583.  
  584. /*navi*/
  585.  
  586.  
  587. .marauders {
  588.  
  589. width:500px;
  590. padding:10px 30px;
  591. margin:5px auto;
  592. text-align:center;
  593. }
  594.  
  595. .marauders a {
  596. color:{color:accent1};
  597. text-align:center;
  598. white-space: nowrap;
  599. overflow:hidden;
  600. text-overflow: ellipsis;
  601. background:#fafafa;
  602. font-family: 'Lato', Arial, Sans-Serif;
  603. text-transform:uppercase;
  604. font-weight:400;
  605. width:120px;
  606. font-size:1.2em;
  607. display:inline-block;
  608. padding:15px;
  609. margin:5px;
  610. transition: all 0.3s ease-in-out;
  611. -webkit-transition: all 0.3s ease-in-out;
  612. -moz-transition: all 0.3s ease-in-out;
  613. -o-transition: all 0.3s ease-in-out;
  614. }
  615.  
  616. .marauders a:hover {
  617. color:{color:accent2};
  618. background:{color:accent1};
  619. transition: all 0.3s ease-in-out;
  620. -webkit-transition: all 0.3s ease-in-out;
  621. -moz-transition: all 0.3s ease-in-out;
  622. -o-transition: all 0.3s ease-in-out;
  623. }
  624.  
  625. .marauders a:empty {
  626. visibility:hidden;
  627. }
  628.  
  629. /*posts*/
  630.  
  631.  
  632. .campnou{
  633. position:relative;
  634. width:100%;
  635. margin: 0 auto 50px auto;
  636. padding-left:10px;
  637. padding-right:10px;
  638.  
  639. }
  640.  
  641. .posts {
  642. {block:if400px}
  643. width:400px;
  644. {/block:if400px}
  645. {block:ifnot400px}
  646. width: 500px;
  647. {/block:ifnot400px}
  648. line-height:140%;
  649. padding:10px 25px 10px 25px;
  650. margin:30px auto 0px auto;
  651. text-align: left;
  652. text-transform: none;
  653. z-index: 1;
  654.  
  655. }
  656.  
  657. .posts img {
  658. max-width:100%;
  659. height:auto;
  660. }
  661.  
  662. /*t*/
  663.  
  664. .titre {
  665. text-align:center;
  666. font-weight:bold;
  667. font-size:1.5em;
  668. margin-bottom:15px;
  669. line-height:160%;
  670. text-transform:uppercase;
  671. }
  672.  
  673. /*audio*/
  674.  
  675. .flitwick {
  676. width:100%;
  677. display:flex;
  678. display:-webkit-flex;
  679. display:-moz-flex;
  680. display:-ms-flex;
  681. align-items:center;
  682. -webkit-align-itens:center;
  683. -moz-align-items:center;
  684. -ms-align-items:center;
  685. display: -webkit-box;
  686. -webkit-box-align: center;
  687. position:relative;
  688. }
  689.  
  690. .grammy {
  691. width:100px;
  692. height:100px;
  693. position:relative;
  694. margin-left:0;
  695. }
  696.  
  697.  
  698.  
  699. .mariah {
  700. position:absolute;
  701. background:#fff;
  702. z-index:10;
  703. opacity:0;
  704. margin-top:10px;
  705. margin-left:10px;
  706. width:80px;
  707. height:80px;
  708. text-align:center;
  709. transition: all 0.3s ease-in-out;
  710. -webkit-transition: all 0.3s ease-in-out;
  711. -moz-transition: all 0.3s ease-in-out;
  712. -o-transition: all 0.3s ease-in-out;
  713. }
  714.  
  715. .mariah:hover {
  716. opacity:0.8;
  717. transition: all 0.3s ease-in-out;
  718. -webkit-transition: all 0.3s ease-in-out;
  719. -moz-transition: all 0.3s ease-in-out;
  720. -o-transition: all 0.3s ease-in-out;
  721. }
  722.  
  723. .playbox {
  724. width:40px;
  725. height:40px;
  726. margin-top:25px;
  727. margin-left:20px;
  728. overflow:hidden;
  729. }
  730.  
  731.  
  732.  
  733. .taylor {
  734. {block:if400px}
  735. width:300px;
  736. {/block:if400px}
  737. {block:ifnot400px}
  738. width:400px;
  739. {/block:ifnot400px}
  740. height:100px;
  741. padding:0;
  742. margin-left:0px;
  743. background:#fafafa;
  744. display:flex;
  745. display:-webkit-flex;
  746. display:-moz-flex;
  747. display:-ms-flex;
  748. align-items:center;
  749. -webkit-align-itens:center;
  750. -moz-align-items:center;
  751. -ms-align-items:center;
  752. justify-content:center;
  753. -webkit-justify-content:center;
  754. -moz-justify-content:center;
  755. -ms-justify-content:center;
  756. display: -webkit-box;
  757. -webkit-box-align: center;
  758. -webkit-box-pack: center;
  759.  
  760. }
  761.  
  762. .swift {
  763. {block:if400px}
  764. max-width:250px;
  765. {/block:if400px}
  766. {block:ifnot400px}
  767. max-width:350px;
  768. {/block:ifnot400px}
  769. color:#000;
  770. font-weight:400;
  771. }
  772.  
  773. .swift b {
  774. font-family:'raleway', arial,sans-serif;
  775. font-weight:700;
  776. color:{color:accent1};
  777. }
  778.  
  779. /*lightbox*/
  780. #tumblr_lightbox, .tmblr-lightbox {background:rgba({RGBcolor:lightbox},0.8)!important;}
  781. #tumblr_lightbox img, .tmblr-lightbox .vignette {
  782. opacity:0;
  783. border-radius:0!important;
  784. -moz-border-radius: 0!important;
  785. -webkit-border-radius: 0!important;
  786. -o-border-radius: 0!important;
  787. -webkit-box-shadow:none!important;
  788. box-shadow:none!important;
  789. }
  790. #tumblr_lightbox_center_image, #tumblr_lightbox_left_image, #tumblr_lightbox_right_image, .tmblr-lightbox .lightbox-image {
  791. opacity: 1!important;
  792. box-shadow: 0 0 0 transparent !important;
  793. border-radius: 0!important;
  794. -moz-border-radius: 0!important;
  795. -webkit-border-radius: 0!important;
  796. -o-border-radius: 0!important;
  797. padding: 10px!important;
  798. border: 1px solid #fff!important;
  799. background-color: #fff!important;
  800. }
  801.  
  802. .tmblr-lightbox .lightbox-caption { visibility: hidden; }
  803.  
  804. /*ask posts*/
  805.  
  806. .ask_cont {
  807. width:100%;
  808. padding:10px;
  809. display:flex;
  810. display: -webkit-flex;
  811. display: -moz-flex;
  812. display: -ms-flex;
  813. align-items: center;
  814. -webkit-align-items:center;
  815. -ms-align-items:center;
  816. }
  817.  
  818. .questions a {
  819.  
  820. font-size:16px;
  821. font-weight:700;
  822. color:{color:accent2};
  823. text-decoration:underline;
  824. }
  825.  
  826. .questions {
  827.  
  828. left:-5px;
  829. position:relative;
  830. text-align:center;
  831. {block:if400px}
  832. width:300px;
  833. {/block:if400px}
  834. {block:ifnot400px}
  835. width:400px;
  836. {/block:ifnot400px}
  837. color:{color:accent2};
  838. font-weight:normal;
  839. padding:10px 15px 20px 15px;
  840. background: {color:accent3};
  841. word-wrap:break-word;
  842. }
  843.  
  844. .arrow-left {
  845.  
  846. width: 0;
  847. height: 0;
  848. border-bottom: 15px solid transparent;
  849. border-top: 15px solid transparent;
  850. margin-left:10px;
  851. margin-top:0px;
  852. border-right: 25px solid {color:accent3};
  853. }
  854.  
  855. .asker img {
  856. border-radius:50px;
  857. -moz-border-radius: 50px;
  858. -webkit-border-radius: 50px;
  859. -o-border-radius: 50px;
  860. transition: all 0.3s ease-in-out;
  861. -webkit-transition: all 0.3s ease-in-out;
  862. -moz-transition: all 0.3s ease-in-out;
  863. -o-transition: all 0.3s ease-in-out;
  864.  
  865. }
  866.  
  867. .asker img:hover {
  868.  
  869. opacity:0.5;
  870. -moz-transform: rotate(360deg); /* IE 9 */
  871. -webkit-transform: rotate(360deg); /* Chrome, Safari, Opera */
  872. transform: rotate(360deg);
  873.  
  874. transition: all 0.3s ease-in-out;
  875. -webkit-transition: all 0.3s ease-in-out;
  876. -moz-transition: all 0.3s ease-in-out;
  877. -o-transition: all 0.3s ease-in-out;
  878. }
  879.  
  880. /*link posts*/
  881. .link_cont {
  882. width:100%;
  883. display:flex;
  884. display: -webkit-flex;
  885. display: -moz-flex;
  886. display: -ms-flex;
  887. -webkit-align-items:center;
  888. -ms-align-items:center;
  889. align-items: center;
  890. -webkit-justify-content:center;
  891. -ms-justify-content:center;
  892. justify-content: center;
  893. padding:0;
  894. }
  895.  
  896.  
  897. .malfoy {
  898.  
  899. width:100%;
  900. position: relative;
  901. z-index: 1;
  902.  
  903.  
  904. }
  905.  
  906. .malfoy a {
  907. width:100%;
  908. text-align:center;
  909. white-space: nowrap;
  910. overflow: hidden;
  911. text-overflow: ellipsis;
  912. margin: 0 auto;
  913. height:80px;
  914. line-height:55px;
  915.  
  916. }
  917.  
  918. .malfoy a span {
  919. width:100%;
  920. height:80px;
  921. line-height:55px;
  922. text-align:center;
  923. white-space: nowrap;
  924. overflow:hidden;
  925. text-overflow: ellipsis;
  926. display: block;
  927. padding: 10px;
  928. background: {color:accent3};
  929. -webkit-transition: -webkit-transform 0.3s;
  930. -moz-transition: -moz-transform 0.3s;
  931. transition: transform 0.3s;
  932. }
  933.  
  934. .malfoy a::before {
  935. position: absolute;
  936. top: 0;
  937. left: 0;
  938. z-index: -1;
  939. padding: 10px;
  940. width: 100%;
  941. height: 100%;
  942. background: #fff;
  943. color: {color:accent3};
  944. content: attr(data-hover);
  945. -webkit-transition: -webkit-transform 0.3s;
  946. -moz-transition: -moz-transform 0.3s;
  947. transition: transform 0.3s;
  948. -webkit-transform: translateX(-25%);
  949. }
  950.  
  951. .malfoy a:hover span,
  952. .malfoy a:focus span {
  953. -webkit-transform: translateX(100%);
  954. -moz-transform: translateX(100%);
  955. transform: translateX(100%);
  956. }
  957.  
  958. .malfoy a:hover::before,
  959. .malfoy a:focus::before {
  960. -webkit-transform: translateX(0%);
  961. -moz-transform: translateX(0%);
  962. transform: translateX(0%);
  963. }
  964.  
  965. /*quotes*/
  966.  
  967. .quotes {
  968. font-weight:bold;
  969. font-size:1.2em;
  970. display:inline;
  971. line-height:140%;
  972. }
  973.  
  974. .speaker {
  975. margin-top:25px;
  976. text-align:right;
  977. }
  978.  
  979. /*chat*/
  980.  
  981. .chats {
  982. line-height:22px;
  983. padding:5px;
  984. }
  985.  
  986. .chats strong {
  987. font-family:'century gothic', arial, sans-serif;
  988. }
  989.  
  990. /*post info*/
  991.  
  992. .footer {
  993. position:relative;
  994. width:500px;
  995. margin:0 auto;
  996. padding:10px 20px;
  997. text-align:center;
  998. }
  999.  
  1000. .footer a {
  1001. font-weight:bold;
  1002. display:inline-block;
  1003. padding:5px;
  1004. margin-left:10px;
  1005. text-transform:uppercase;
  1006. }
  1007.  
  1008. .tags {
  1009. text-align:center;
  1010. width:500px;
  1011. margin:5px auto;
  1012. word-wrap: break-word;
  1013. color:#fafafa;
  1014. text-transform:none;
  1015. }
  1016.  
  1017. .tags a {
  1018. font-weight:normal;
  1019. display:inline-block;
  1020. padding:5px;
  1021. color:{color:tags};
  1022. }
  1023.  
  1024. .tags .comma:last-child {
  1025. display: none;
  1026. }
  1027.  
  1028.  
  1029. /*notes*/
  1030. .notes {
  1031. width:500px;
  1032. padding: 10px;
  1033. text-align:left;
  1034. margin-top:30px;
  1035. margin-left:auto;
  1036. margin-right:auto;
  1037. }
  1038.  
  1039. ol.notes {
  1040. padding: 0px;
  1041. margin: 20px 0px;
  1042. list-style-type: none;
  1043. }
  1044.  
  1045. ol.notes li.note {
  1046. padding: 10px;
  1047. }
  1048.  
  1049. ol.notes li.note img.avatar {
  1050. vertical-align: -4px;
  1051. margin-right: 10px;
  1052. width: 16px;
  1053. height: 16px;
  1054. }
  1055.  
  1056. ol.notes li.note span.action {
  1057. font-weight: normal;
  1058. }
  1059.  
  1060. ol.notes li.note .answer_content {
  1061. font-weight: normal;
  1062. }
  1063.  
  1064. ol.notes li.note blockquote {
  1065. border-color: {color:blockquote};
  1066. padding: 4px 10px;
  1067. margin: 10px 0px 0px 25px;
  1068. }
  1069.  
  1070. ol.notes li.note blockquote a {
  1071. text-decoration: none;
  1072. }
  1073.  
  1074. /*pagination*/
  1075.  
  1076. .pg {
  1077. position:fixed;
  1078. bottom:0;
  1079. font-size:16px;
  1080. line-height:25px;
  1081. height:25px;
  1082. width:100%;
  1083. z-index:10;
  1084. background:#fff;
  1085. text-align:center;
  1086. word-spacing:20px;
  1087. }
  1088.  
  1089. .pg a {
  1090. display:inline-block
  1091. margin-left:15px;
  1092. }
  1093.  
  1094. /*PLEASE DO NOT ALTER OR COVER THE CREDIT, THANKS! C: */
  1095. #leo {
  1096.  
  1097. font-family: Arial, Sans-Serif;
  1098. text-transform:uppercase;
  1099. text-align:center;
  1100. z-index:99;
  1101.  
  1102. }
  1103.  
  1104. #leo a {
  1105. z-index:99;
  1106. position:fixed;
  1107. font-size:12px;
  1108. line-height:16px;
  1109. width:18px;
  1110. height:18px;
  1111. font-weight:300;
  1112. bottom:10px;
  1113. right:10px;
  1114. color:#000;
  1115. background:rgba(255,255,255,0.4);
  1116. padding:5px;
  1117. transition: all 1s ease-in-out;
  1118. -webkit-transition: all 1s ease-in-out;
  1119. -o-transition: all 1s ease-in-out;
  1120. -moz-transition: all 1s ease-in-out;
  1121.  
  1122. }
  1123.  
  1124. #leo a:hover {
  1125. background-color:rgba(0,0,0,1);
  1126. color:#fff;
  1127. border-radius:50%;
  1128. -webkit-animation: hermione 1s; /* Chrome, Safari, Opera */
  1129. -moz-animation: hermione 1s;
  1130. -o-animation: hermione 1s;
  1131. animation: hermione 1s;
  1132. animation-timing-function: ease-in-out;
  1133. -webkit-animation-timing-function: ease-in-out;
  1134. -moz-animation-timing-function: ease-in-out;
  1135. -o-animation-timing-function: ease-in-out;
  1136.  
  1137. -moz-transform: rotate(720deg); /* IE 9 */
  1138. -webkit-transform: rotate(720deg); /* Chrome, Safari, Opera */
  1139. transform: rotate(720deg);
  1140.  
  1141. transition: all 1s ease-in-out;
  1142. -webkit-transition: all 1s ease-in-out;
  1143. -o-transition: all 1s ease-in-out;
  1144. -moz-transition: all 1s ease-in-out;
  1145.  
  1146.  
  1147. }
  1148.  
  1149. @-webkit-keyframes hermione {
  1150. 0% {color:#000;}
  1151. 25% {color:#ACE4EA;}
  1152. 50% {color:#FFFBDD;}
  1153. 75% {color:#ACE4EA;}
  1154. 100% {color:#fff;}
  1155. }
  1156. @-moz-keyframes hermione {
  1157. 0% {color:#000;}
  1158. 25% {color:#ACE4EA;}
  1159. 50% {color:#FFFBDD;}
  1160. 75% {color:#ACE4EA;}
  1161. 100% {color:#fff;}
  1162. }
  1163. @-o-keyframes hermione {
  1164. 0% {color:#000;}
  1165. 25% {color:#ACE4EA;}
  1166. 50% {color:#FFFBDD;}
  1167. 75% {color:#ACE4EA;}
  1168. 100% {color:#fff;}
  1169. }
  1170.  
  1171. @keyframes hermione {
  1172. 0% {color:#000;}
  1173. 25% {color:#ACE4EA;}
  1174. 50% {color:#FFFBDD;}
  1175. 75% {color:#ACE4EA;}
  1176. 100% {color:#fff;}
  1177. }
  1178. /*END OF CREDIT*/
  1179.  
  1180. {CustomCSS}
  1181.  
  1182. </style></head>
  1183. <body>
  1184.  
  1185. <div class="barca">
  1186. <nav class="albiceleste" id="albiceleste">
  1187. <a href="/" data-hover="{Title}">{Title}</a>
  1188. </nav>
  1189.  
  1190. <nav class="blaugrana" id="blaugrana">
  1191.  
  1192. <a class="index" href="#">Home</a>
  1193. <a class="owlery" href="#">Ask</a>
  1194. <a class="info" href="#" style="cursor:help;">Info</a>
  1195. <a class="map" href="#" style="cursor:help;">Links</a>
  1196. {block:Following}
  1197. <a class="broll" href="#">Blogroll</a>
  1198. {/block:Following}
  1199.  
  1200. </nav>
  1201. </div>
  1202.  
  1203. <div id="t1">
  1204. <div class="campnou">
  1205. {Block:Posts}
  1206. <div class="posts">
  1207. {block:Photo}
  1208. {LinkOpenTag}<img src="{PhotoURL-500}" width="100%" height="auto"/>{LinkCloseTag}
  1209. {block:Caption}{Caption}{/block:Caption}
  1210. {/block:Photo}
  1211.  
  1212. {block:Photoset}
  1213. {Photoset}
  1214. {block:Caption}{Caption}{/block:Caption}
  1215. {/block:Photoset}
  1216.  
  1217. {block:Video}
  1218. {Video-500}
  1219. {block:Caption}{Caption}{/block:Caption}
  1220. {/block:Video}
  1221.  
  1222. {block:Audio}
  1223. <div class="flitwick">
  1224.  
  1225. <div class="mariah">
  1226. <div class="playbox">{AudioPlayerWhite}</div>
  1227. </div>
  1228.  
  1229. <div class="grammy">
  1230. <img src="http://static.tumblr.com/jn9hrij/20Ul2zzsr/albumart.jpg" style="position:absolute;" width="100" height="100" />
  1231. {block:AlbumArt}
  1232. <img src="{AlbumArtURL}" style="position:absolute;">
  1233. {/block:AlbumArt}
  1234. </div>
  1235.  
  1236.  
  1237. <div class="taylor">
  1238. <div class="swift">
  1239. {block:TrackName}
  1240. <b>Song:</b> {TrackName}
  1241. {/block:TrackName}<br>
  1242.  
  1243. {block:Artist}
  1244. <b>Artist:</b> {Artist}
  1245. {/block:Artist}<br>
  1246.  
  1247. {block:Album}
  1248. <b>Album:</b> {Album}
  1249. {/block:Album}
  1250.  
  1251. </div>
  1252. </div>
  1253.  
  1254. </div>
  1255. {block:Caption}<p>{Caption}</p>{/block:Caption}
  1256. {/block:Audio}
  1257.  
  1258. {block:Quote}
  1259. “
  1260. <div class="quotes">{Quote}</div>
  1261. ”
  1262. {block:Source}
  1263. <div class="speaker">
  1264. {Source}
  1265. </div>
  1266. {/block:Source}
  1267. {/block:Quote}
  1268.  
  1269. {block:Text}
  1270. {block:Title}<div class="titre">{Title}</div>{/block:Title}
  1271. {Body}
  1272. {/block:Text}
  1273.  
  1274. {block:Answer}
  1275.  
  1276. <div class="ask_cont">
  1277. <div class="asker">
  1278. <a href="{AskerURL}">
  1279. <img src="{AskerPortraitURL-48}" align="left">
  1280. </a>
  1281. </div>
  1282. <div class="arrow-left"></div>
  1283. <div class="questions">
  1284. <p><center> {Asker}</center></p>
  1285. {Question}
  1286. </div>
  1287. </div>
  1288.  
  1289. {Answer}
  1290. {/block:Answer}
  1291.  
  1292. {block:Chat}
  1293. {block:Title}<div class="titre">{Title}</div>{/block:Title}
  1294. {block:Lines}
  1295. <div class="chats">
  1296. {block:Label}<strong>{Label}</strong>{/block:Label} {Line}<br />
  1297. </div>
  1298. {/block:Lines}
  1299. {/block:Chat}
  1300.  
  1301. {block:Link}
  1302. <div class="link_cont">
  1303. <nav class="malfoy" id="malfoy">
  1304. <a href="{URL}" data-hover="{Name}"><span>{Name}</span></a>
  1305. </nav>
  1306.  
  1307. </div>
  1308.  
  1309.  
  1310. {block:Description}{Description}{/block:Description}
  1311. {/block:Link}
  1312. </div>
  1313.  
  1314. {block:Date}
  1315. <div class="footer">
  1316. <a href="{Permalink}" title="{TimeAgo}">{ShortMonth}{DayOfMonth}</a>
  1317.  
  1318. {block:NoteCount}
  1319. <a href="{Permalink}">{NoteCount}+</a>
  1320. {/block:NoteCount}
  1321.  
  1322. {block:RebloggedFrom}
  1323. <a href="{ReblogParentURL}" title="{ReblogParentName}">via</a>
  1324.  
  1325. {block:ContentSource}
  1326. <a href="{SourceURL}" title="{ReblogRootName}">source</a>
  1327. {/block:ContentSource}
  1328. {/block:RebloggedFrom}
  1329.  
  1330. <a href="{ReblogURL}">reblog</a>
  1331.  
  1332. </div>
  1333.  
  1334. {block:HasTags}
  1335. <div class="tags">
  1336. {block:Tags}
  1337. <a href="{TagURL}">{Tag}</a>
  1338. {/block:Tags}
  1339. </div>
  1340. {/block:HasTags}
  1341.  
  1342. {block:PermalinkPage}
  1343. {block:NoteCount}
  1344. <div class="notes">
  1345. <center><h1>Notes</h1></center>
  1346. {block:PostNotes}
  1347. {PostNotes}
  1348. {/block:PostNotes}
  1349. </div>
  1350. {block:NoteCount}
  1351.  
  1352. {/block:PermalinkPage}
  1353.  
  1354. {/block:Date}
  1355. {/Block:Posts}
  1356. </div>
  1357. </div>
  1358.  
  1359. <div id="t2">
  1360.  
  1361. <h1>{AskLabel}</h1>
  1362. <div class="howler">
  1363. <iframe frameborder="0" scrolling="no" width="100%" height="190" src="http://www.tumblr.com/ask_form/{Name}.tumblr.com" style="background-color:transparent; overflow:auto;" id="ask_form"></iframe>
  1364. </div>
  1365.  
  1366. </div>
  1367.  
  1368. <div id="t3">
  1369. <h1>{text:info}</h1>
  1370.  
  1371. <div class="profile">
  1372.  
  1373. {Block:Description}
  1374. <p>{Description}</p>
  1375. {/Block:Description}
  1376. </div>
  1377.  
  1378. <h1>{text:update}</h1>
  1379.  
  1380. <div class="profile">
  1381.  
  1382. <p><center>{text:upd}</center></p>
  1383.  
  1384. </div>
  1385.  
  1386. </div>
  1387.  
  1388. <div id="t4">
  1389. <div class="marauders" id="marauders">
  1390. <a href="{text:Link1 URL}">{text:Link1}</a>
  1391. <a href="{text:Link2 URL}">{text:Link2}</a>
  1392. <a href="{text:Link3 URL}">{text:Link3}</a>
  1393. <a href="{text:Link4 URL}">{text:Link4}</a>
  1394. <a href="{text:Link5 URL}">{text:Link5}</a>
  1395. <a href="{text:Link6 URL}">{text:Link6}</a>
  1396. <a href="{text:Link7 URL}">{text:Link7}</a>
  1397. <a href="{text:Link8 URL}">{text:Link8}</a>
  1398. <a href="{text:Link9 URL}">{text:Link9}</a>
  1399. </div>
  1400. </div>
  1401.  
  1402. <div id="t5">
  1403.  
  1404. {block:Following}
  1405. <section class="da" id="da">
  1406.  
  1407.  
  1408. {block:Followed}
  1409. <div class="wizards">
  1410. <a href="{FollowedURL}" title="{FollowedName}">
  1411. <img src="{FollowedPortraitURL-96}">
  1412. </a>
  1413. </div>
  1414. {/block:Followed}
  1415.  
  1416. </section>
  1417. {/block:Following}
  1418.  
  1419.  
  1420. </div>
  1421.  
  1422. <!--PLEASE DO NOT ALTER OR COVER THE CREDIT-->
  1423. <div id="leo">
  1424. <a href="http://hermionejean.co.vu">♚</a>
  1425. </div>
  1426. <!--END OF CREDIT-->
  1427.  
  1428. {block:IndexPage}
  1429. {block:Pagination}
  1430.  
  1431. <div class="pg">
  1432. {block:PreviousPage}
  1433. <a href="{PreviousPage}">&#8592;Back</a>
  1434. {/block:PreviousPage}
  1435. {block:NextPage}
  1436. <a href="{NextPage}">Forth&#8594;</a>
  1437. {/block:NextPage}
  1438. </div>
  1439.  
  1440. {/block:Pagination}
  1441. {/block:IndexPage}
  1442.  
  1443. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  1444. <script type="text/javascript">
  1445. $(function() {
  1446.  
  1447. var $container = $('#da'),
  1448. $articles = $container.children('.wizards'),
  1449. timeout;
  1450.  
  1451. $articles.on( 'mouseenter', function( event ) {
  1452.  
  1453. var $article = $(this);
  1454. clearTimeout( timeout );
  1455. timeout = setTimeout( function() {
  1456.  
  1457. if( $article.hasClass('active') ) return false;
  1458.  
  1459. $articles.not( $article.removeClass('blur').addClass('active') )
  1460. .removeClass('active')
  1461. .addClass('blur');
  1462.  
  1463. }, 65 );
  1464.  
  1465. });
  1466.  
  1467. $container.on( 'mouseleave', function( event ) {
  1468.  
  1469. clearTimeout( timeout );
  1470. $articles.removeClass('active blur');
  1471.  
  1472. });
  1473.  
  1474. });
  1475. </script>
  1476.  
  1477. <!--Sticky Header-->
  1478. <script src="http://static.tumblr.com/xbvpdcx/8a7nkqvai/classie.js" ></script>
  1479. <script>
  1480. /**
  1481. * cbpAnimatedHeader.min.js v1.0.0
  1482. * http://www.codrops.com
  1483. *
  1484. * Licensed under the MIT license.
  1485. * http://www.opensource.org/licenses/mit-license.php
  1486. *
  1487. * Copyright 2013, Codrops
  1488. * http://www.codrops.com
  1489. */
  1490. var cbpAnimatedHeader=(function(){
  1491.  
  1492. var b=document.documentElement,g=document.querySelector(".barca"),
  1493. e=false,a=150;function f(){window.addEventListener("scroll",function(h){if(!e){e=true;setTimeout(d,250)}},false)}function d(){var h=c();if(h>=a){classie.add(g,"midget")}else{classie.remove(g,"midget")}e=false}function c(){return window.pageYOffset||b.scrollTop}f()})();
  1494. </script>
  1495. {block:ifcolouredblockquotes}
  1496. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  1497. <script type="text/javascript">
  1498. function blockquote_colors(){
  1499. var colors = ["{color:blockquote1}", "{color:blockquote2}", "{color:blockquote3}", "{color:blockquote4}", "{color:blockquote5}"];
  1500. $('.posts').find('blockquote').each( function (i) {
  1501. $(this).css("border-left-color", colors[i % colors.length]);
  1502. });
  1503. }
  1504.  
  1505. blockquote_colors();
  1506.  
  1507. $( document ).ajaxComplete(function() {
  1508. blockquote_colors();
  1509. });
  1510. </script>
  1511. {/block:ifcolouredblockquotes}
  1512. </body>
  1513. </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!