API tools faq
paste
azurethemes

#6 lugia

azurethemes
Apr 8th, 2016
444
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 30.57 KB | None | 0 0
raw download clone embed print report
  1. <!----
  2.  
  3.  
  4.  
  5. ☾ ● Espeon Themes ● ☽
  6. Theme No. 06 - Lugia
  7. This theme and coding was created by espeon themes.
  8. Any distribution without permission is violating against the copyright.
  9. This theme was published for public use, but can not be claimed as own!
  10. © Espeon themes, 2016. All rights reserved.
  11.  
  12.  
  13. --->
  14. <!-----start html---->
  15. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  16. <script language="javascript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
  17. <!-----custom google fonts---->
  18. <script type="text/javascript">
  19. WebFontConfig = {
  20. google: { families: [ 'Roboto:400,500,700:latin' , 'Roboto::latin' , 'Khand:400,600:latin' , 'Montserrat:400,700:latin' , 'Lato:300,700:latin', 'Raleway:400,700:latin' , 'Open+Sans:400,700,600:latin' , 'Exo:400,700,600:latin','Roboto+Condensed:400,700:latin', 'Jaldi:400,700:latin', 'Mallanna::latin', 'NTR::latin', 'Share+Tech::latin'] }
  21. };
  22. (function() {
  23. var wf = document.createElement('script');
  24. wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
  25. '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
  26. wf.type = 'text/javascript';
  27. wf.async = 'true';
  28. var s = document.getElementsByTagName('script')[0];
  29. s.parentNode.insertBefore(wf, s);
  30. })(); </script>
  31. <!-----tooltips---->
  32. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script><script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  33. <script>
  34. (function($){
  35. $(document).ready(function(){
  36. $("a[title]").style_my_tooltips({
  37. tip_follows_cursor:true,
  38. tip_delay_time:100,
  39. tip_fade_speed:500,
  40. attribute:"title"
  41. });
  42. });
  43. })(jQuery);
  44. </script>
  45. <!-----back to top button---->
  46. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
  47. <script>
  48. $(document).ready(function(){
  49.  
  50. // Der Button wird mit JavaScript erzeugt und vor dem Ende des body eingebunden.
  51. var back_to_top_button = ['<a href="#top" class="back-to-top">back to top</a>'].join("");
  52. $("body").append(back_to_top_button)
  53.  
  54. // Der Button wird ausgeblendet
  55. $(".back-to-top").hide();
  56.  
  57. // Funktion für das Scroll-Verhalten
  58. $(function () {
  59. $(window).scroll(function () {
  60. if ($(this).scrollTop() > 100) { // Wenn 100 Pixel gescrolled wurde
  61. $('.back-to-top').fadeIn();
  62. } else {
  63. $('.back-to-top').fadeOut();
  64. }
  65. });
  66.  
  67. $('.back-to-top').click(function () { // Klick auf den Button
  68. $('body,html').animate({
  69. scrollTop: 0
  70. }, 800);
  71. return false;
  72. });
  73. });
  74.  
  75. });
  76. </script>
  77. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
  78. <script type="text/javascript"
  79. src="http://codysherman.com/tools/infinite-scrolling/code" ></script>
  80. <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
  81. <head>
  82. <title>{Title}</title>
  83. <link rel="shortcut icon" href="{Favicon}">
  84. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  85. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  86. <!-----all colors---->
  87. <meta name="color:background" content="#f5f5f5"/>
  88. <meta name="color:text" content="#000000"/>
  89. <meta name="color:links" content="#000000"/>
  90. <meta name="color:info" content="#000000"/>
  91. <meta name="color:title" content="#000000"/>
  92. <meta name="color:posts" content="#ffffff">
  93. <meta name="color:scrollbar" content="#000000">
  94. <meta name="color:asks" content="#ffffff">
  95. <meta name="color:hover" content="#97c5e0">
  96. <meta name="color:accent" content="#97c5e0">
  97. <!-----images---->
  98. <meta name="image:background" content=""/>
  99. <meta name="image:header" content=""/>
  100. <meta name="image:header two" content=""/>
  101. <meta name="image:title one" content=""/>
  102. <meta name="image:title two" content=""/>
  103. <meta name="image:title three" content=""/>
  104. <meta name="image:title four" content=""/>
  105. <meta name="image:title five" content=""/>
  106. <meta name="image:title six" content=""/>
  107. <meta name="image:title seven" content=""/>
  108. <!-----texts---->
  109. <meta name="text:additional description" content="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, mauris. Aliquam mattis porta urna. Maecenas dui neque, rhoncus sed, vehicula vitae, auctor at, nisi. Aenean id massa ut lacus molestie porta. Curabitur sit amet quam id libero suscipit venenatis."/>
  110. <!-----sidebar links---->
  111. <meta name="text:link one" content="link one">
  112. <meta name="text:link two" content="link two">
  113. <meta name="text:link three" content="link three">
  114. <meta name="text:link one url" content="/">
  115. <meta name="text:link two url" content="/">
  116. <meta name="text:link three url" content="/">
  117.  
  118. <!-----custom css---->
  119. <style type="text/css">
  120. /*tumblr controls*/
  121.  
  122. .tmblr-iframe {
  123. top:0px!important;
  124. position:fixed!important;
  125. z-index:99999999999999!important;
  126. }
  127. /*scrollbar*/
  128. ::-webkit-scrollbar-thumb{
  129. height:auto;
  130. background-color:{color:scrollbar};
  131. }
  132. ::-webkit-scrollbar{
  133. height:2px;
  134. width:5px;
  135. background-color:{color:scrollbar background};
  136. }
  137. /*tooltips*/
  138. #s-m-t-tooltip{
  139. margin:13px 18px 6px 18px;
  140. padding:6px;
  141. background-color:black;
  142. border:1px solid #eee;
  143. font-family: 'jaldi', sans-serif;
  144. font-weight:500;
  145. font-size:8px;
  146. text-transform:uppercase;
  147. letter-spacing:1px;
  148. color:{color:background};
  149. z-index:999999999999999999999999999999999999;
  150. }
  151. /*body basics*/
  152. body{
  153. background-color:{color:background};
  154. background-image:url('{image:background}');
  155. background-attachment: fixed;
  156. background-repeat: repeat;
  157. font-weight:none;
  158. font-family: 'calibri', sans-serif;
  159. font-size:10px;
  160. text-align:justify;
  161. color:{color:text};
  162. margin:0;
  163. }
  164. a{
  165. text-decoration:none;
  166. color:{color:links};
  167. transition-duration: 0.1s;
  168. -moz-transition-duration: 0.1s;
  169. -webkit-transition-duration: 0.1s;
  170. -o-transition-duration: 0.1s;
  171. }
  172. a:hover{
  173. text-decoration:none;
  174. color:{color:accent};
  175. transition-duration: 0.1s;
  176. -moz-transition-duration: 0.1s;
  177. -webkit-transition-duration: 0.1s;
  178. -o-transition-duration: 0.1s;
  179. }
  180. img {
  181.  
  182. }
  183. blockquote {
  184. font-size:10px;
  185. width:auto;
  186. border-left:3px solid #eee;
  187. text-align:left;
  188. padding:1px;
  189. font-weight:none;
  190. margin-top:15px;
  191. margin-left:12px;
  192. padding-top:0.5px;
  193. padding-bottom:0.5px;
  194. font-size:10px;
  195. font-family: 'calibri', sans-serif;
  196. margin-right:20px;
  197. padding-left:15px;
  198. color:{color:text};
  199. }
  200. pre{
  201. font-size:9px;
  202. text-align:center;
  203. text-transform:none;
  204. font-family: 'Bitter', serif;
  205. font-weight:bold;
  206. line-height:9px;
  207. border-left:1px solid #eee;
  208. border-bottom:1px solid #eee;
  209. letter-spacing:2px;
  210. background-color:{color:posts};
  211. color:{color:text};
  212. padding:6px;
  213. }
  214. small{
  215. font-size:9px;
  216. font-family: 'roboto', sans-serif;
  217. }
  218. big{
  219. font-size:12px;
  220. font-family: 'roboto', sans-serif;
  221. font-weight:700;
  222. }
  223. sub{
  224. font-size:8px;
  225. font-family: 'calibri', sans-serif;
  226. }
  227. h1 {
  228. font-size:11px;
  229. text-align:center;
  230. font-family: 'roboto', sans-serif;
  231. letter-spacing:0px;
  232. text-transform:uppercase;
  233. font-weight:700;
  234. line-height:17px;
  235. border-bottom:1px solid #eee;
  236. color:{color:text};
  237. padding:7px;
  238. }
  239. h1 a{
  240. color:{color:text};
  241. }
  242. h2{
  243. color:{color:text};
  244. text-transform:uppercase;
  245. font-family: 'Roboto', sans-serif;
  246. text-align:left;
  247. }
  248. b {
  249. font-weight:bold;
  250. padding:2px;
  251. font-family: 'Roboto', sans-serif;
  252. color:{color:text};
  253. }
  254. i {
  255. font-weight:italic;
  256. color:{color:text};
  257. }
  258. grouptitle {
  259. color:{color:text};
  260. text-transform:none;
  261. font-size:10px;
  262. font-family: 'calibri', sans-serif;
  263. }
  264. tit {
  265. color:{color:accent};
  266. font-size:10px;
  267. text-transform:uppercase;
  268. font-style:italic;
  269. font-family: 'roboto', sans-serif;
  270. letter-spacing:0px;
  271. font-weight:600;
  272. }
  273. am {
  274. color:{color:text};
  275. font-size:22px;
  276. padding:8px;
  277. padding-top:2px;
  278. text-transform:uppercase;
  279. font-family: 'roboto', sans-serif;
  280. letter-spacing:0px;
  281. font-weight:500;
  282. }
  283. n {
  284. font-weight:bold;
  285. letter-spacing:-1px;
  286. text-shadow: 1px 1px 1px #cccccc;
  287. font-size:12px;
  288. text-transform:uppercase;
  289. color:{color:text};
  290. }
  291. u {
  292. text-decoration:none;
  293. color:color:;{text};
  294. border-bottom:1px solid {color:text};
  295. }
  296. underline {
  297. text-decoration:none;
  298. color:color:;{text};
  299. border-bottom:1px solid {color:text};
  300. }
  301. /*header image*/
  302. #header {
  303. position:fixed;
  304. margin-top:190px;
  305. padding:10px;
  306. margin-left:180px;
  307. background-color:transparent;
  308. z-index:9999999999999999;
  309. }
  310. #headerimage {
  311. z-index:-99999;
  312. }
  313. #headerimage img {
  314. width:100%;
  315. height:500px;
  316. left:0px;
  317. top:90px;
  318. background:{color:accent};
  319. position:absolute;
  320. opacity:1;
  321. z-index:-99;
  322. }
  323. /*sidebar description*/
  324. #description {
  325. overflow:hidden;
  326. position:absolute;
  327. text-align:left;
  328. top:483px;
  329. left:150px;
  330. word-wrap: break-word;
  331. border:1px solid #eee;
  332. box-shadow:0px 2px 2px rgba(0,0,0,.15);
  333. font-family: 'roboto', sans-serif;
  334. width:330px;
  335. height:140px;
  336. padding:16px;
  337. background-color: rgba(255, 255, 255, 0.3);
  338. opacity:1;
  339. line-height:14px;
  340. font-weight:none;
  341. color:{color:text};
  342. letter-spacing:0px;
  343. font-size:10px;
  344. z-index:999999;
  345. }
  346. /*back to top button*/
  347. .back-to-top {
  348. position: fixed;
  349. color:{color:text};
  350. bottom:13px;
  351. text-transform:uppercase;
  352. background:{color:background};
  353. left:13px;
  354. font-family: 'ntr', sans-serif;
  355. font-size:10px;
  356. z-index:99999999999999;
  357. font-weight:700;
  358. padding:10px;
  359. }
  360. /*jump pagination*/
  361. .pagination{
  362. font-family: 'roboto', sans-serif;
  363. margin-left:-190px;
  364. width:auto;
  365. padding-top:-10px;
  366. letter-spacing:2px;
  367. padding-bottom:20px;
  368. font-size:13px;
  369. text-align:center;
  370. }
  371. .pagination a{
  372. padding:5px;
  373. font-family: 'roboto', sans-serif;
  374. font-weight:600;
  375. bottom:10px;
  376. margin-left:5px;
  377. color:{color:text};
  378. }
  379. .pagination a:hover{
  380. color:{color:hover};
  381. -moz-transition-duration:0.5s;
  382. -webkit-transition-duration:0.5s;
  383. -o-transition-duration:0.5s;
  384. transition: all 0.3s ease-out;
  385. }
  386. /*post notes*/
  387. ol.notes {
  388. padding: 0px;
  389. margin: 32px 0px;
  390. font-family:'jaldi',sans-serif;
  391. list-style-type: none;
  392. text-transform:uppercase;
  393. margin-top:-60px;
  394. background:{color:posts};
  395. margin-left:76px;
  396. box-shadow:0px 0px 5px rgba(0,0,0,.15);
  397. width:540px;
  398. border-bottom: solid 1px #eee;
  399. }
  400. ol.notes li.note {
  401. border-top: solid 1px #eee;
  402. padding: 10px;
  403. }
  404. ol.notes li.note img.avatar {
  405. vertical-align: -6px;
  406. border-radius:5px;
  407. margin-right: 5px;
  408. width: 16px;
  409. height: 16px;
  410. }
  411. ol.notes li.note span.action {
  412. font-weight: 300;
  413. }
  414. ol.notes li.note .answer_content {
  415. font-weight: normal;
  416. }
  417. ol.notes li.note blockquote {
  418. box-shadow:0px 2px 2px rgba(0,0,0,.15);
  419. padding: 4px 10px;
  420. margin: 10px 0px 0px 25px;
  421. }
  422. ol.notes li.note blockquote a {
  423. text-decoration: none;
  424. }
  425. /*audio*/
  426. .audioartist {
  427. font-family:'jaldi', sans-serif;
  428. font-size:10px;
  429. text-transform:uppercase;
  430. font-weight:600;
  431. }
  432. .audiotitle {
  433. font-family:'roboto', sans-serif;
  434. font-size:10px;
  435. text-transform:lowercase;
  436. font-weight:600;
  437. }
  438. .audioplayed {
  439. font-family:'roboto', sans-serif;
  440. font-size:10px;
  441. text-transform:lowercase;
  442. font-weight:600;
  443. }
  444. .audioplayr {
  445. width:400px;
  446. color:{color:text};
  447. background:{color:accent};
  448. }
  449. audioinfo {
  450. font-family:'roboto', sans-serif;
  451. font-size:10px;
  452. letter-spacing:2px;
  453. text-transform:lowercase;
  454. font-weight:300;
  455. }
  456. /*post styles*/
  457. .pcaption{
  458. font-family:'calibri', sans-serif;
  459. font-size:10px;
  460. margin-left:22px;
  461. letter-spacing:0px;
  462. text-transform:none;
  463. font-weight:300;
  464. }
  465. .psets{
  466. max-width:500px;
  467. margin-top:-13px;
  468. height:auto;
  469. }
  470. .vsets{
  471. max-width:500px;
  472. margin-top:-13px;
  473. height:auto;
  474. }
  475. /*posts*/
  476. #entries {
  477. margin-left:565px;
  478. margin-top:710px;
  479. z-index:9999999999999999;
  480. overflow:hidden;
  481. }
  482. #post {
  483. font-size:10px;
  484. width:500px;
  485. color:{color:text};
  486. box-shadow:0px 2px 3px rgba(0,0,0,.15);
  487. padding:20px;
  488. padding-top:20px;
  489. z-index:999999999999999;
  490. background-color:{color:posts};
  491. text-align:justify;
  492. padding-bottom:0px;
  493. margin:70px;
  494. overflow:hidden;
  495. }
  496. #post img{
  497. max-width:500px;
  498. margin-top:-12px
  499. height:auto;
  500. }
  501. /*questions and answers*/
  502. #asking {
  503. margin-left:30px;
  504. padding:15px;
  505. margin-top:-26px;
  506. }
  507. #askingimage {
  508. }
  509. #askingimage img {
  510. margin-left:13px;
  511. width:25px;
  512. height:25px;
  513. margin-top:13px;
  514. }
  515. #question {
  516. padding:25.5px;
  517. padding-left:28px;
  518. margin-top:-34px;
  519. margin-left:76px;
  520. font-size:10px;
  521. width:350px;
  522. font-family: 'calibri', sans-serif;
  523. color:{color:text};
  524. background:{color:asks};
  525. }
  526. #asker{
  527. margin-top:10px;
  528. padding:1px;
  529. font-weight:600;
  530. font-size:10px;
  531. padding:7px;
  532. line-height:14px;
  533. height:50px;
  534. width:50px;
  535. background:{color:accent};
  536. z-index:9999999999;
  537. color:{color:text};
  538. opacity:1;
  539. margin-left:12px;
  540. letter-spacing:1px;
  541. font-family: 'calibri', sans-serif;
  542. text-transform:uppercase;
  543. }
  544. #askerurl{
  545. margin-top:-57px;
  546. padding:1px;
  547. font-weight:500;
  548. font-size:10px;
  549. padding:7px;
  550. line-height:14px;
  551. height:13px;
  552. width:465px;
  553. z-index:9999999999;
  554. color:{color:text};
  555. opacity:1;
  556. margin-left:97px;
  557. padding-bottom:7px;
  558. letter-spacing:0px;
  559. font-family: 'calibri', sans-serif;
  560. text-transform:uppercase;
  561. }
  562. /*post info*/
  563. #info {
  564. width:530px;
  565. height:42px;
  566. text-align:left;
  567. font-family: 'jaldi', sans-serif;
  568. text-transform:uppercase;
  569. margin-left:-20px;
  570. font-size:11px;
  571. padding:10px;
  572. padding-left:11px;
  573. margin-top:25px;
  574. opacity:1;
  575. overflow:hidden;
  576. font-weight:700;
  577. font-style:none;
  578. line-height:48px;
  579. text-shadow:1px 1px 1px #cccccc;
  580. border-top:1px solid #eee;
  581. letter-spacing:1px;
  582. z-index:9999999999999999;
  583. color:{color:text};
  584. }
  585. #info a {
  586. text-align:center;
  587. font-weight:700;
  588. padding:5px;
  589. letter-spacing:0px;
  590. font-family: 'jaldi', sans-serif;
  591. line-height:5px;
  592. color:{color:text};
  593. }
  594. #info a:hover{
  595. color:{color:posts};
  596. }
  597. /*post tags*/
  598. #tags {
  599. text-align:left;
  600. opacity:0;
  601. font-size:8px;
  602. font-family: 'jaldi', sans-serif;
  603. margin-top:-38px;
  604. margin-left:-18px;
  605. padding-left:7px
  606. color:{color:text};
  607. text-shadow:1px 1px 1px #cccccc;
  608. padding:5px;
  609. font-weight:400;
  610. padding-bottom:17px;
  611. width:530px;
  612. text-transform:uppercase;
  613. -webkit-transition: all 0.7s ease-in-out;
  614. -moz-transition: all 0.7s ease-in-out;
  615. -o-transition: all 0.7s ease-in-out;
  616. -ms-transition: all 0.7s ease-in-out;
  617. transition: all 0.7s ease-in-out;
  618. }
  619. #tags a {
  620. padding:8px;
  621. margin-top:-3px;
  622. color:{color:text};
  623. line-height:2px;
  624. letter-spacing:1px;
  625. font-weight:700;
  626. padding-left:7px
  627. text-shadow:1px 1px 1px #cccccc;
  628. width:auto;
  629. text-align:left;
  630. font-size:10px;
  631. font-family: 'jaldi', sans-serif;
  632. display:inline-block;
  633. }
  634. #tags a:hover {
  635. -moz-transition-duration:0.3s;
  636. -webkit-transition-duration:0.3s;
  637. -o-transition-duration:0.3s;
  638. color:{color:hover};
  639. }
  640. #post:hover #tags{
  641. opacity:1;
  642. margin-top:-20px;
  643. }
  644. /*credit (u better leave this here u goof)*/
  645. #credit{
  646. position:fixed;
  647. font-size:8px;
  648. font-weight:700;
  649. padding-bottom:5px;
  650. padding-top:5px;
  651. height:20px;
  652. width:auto;
  653. opacity:1;
  654. padding-left:5px;
  655. padding-right:5px;
  656. background:transparent;
  657. right:13px;
  658. bottom:13px;
  659. letter-spacing:0px;
  660. z-index:9999999999999;
  661. line-height:22px;
  662. padding:3px;
  663. text-align:center;
  664. float:left;
  665. font-family: 'calibri', sans-serif;
  666. color:{color:text};
  667. text-transform:uppercase;
  668. }
  669. #credit:hover{
  670. background:{color:posts};
  671. }
  672. /*sticky background*/
  673. .toppp {
  674. top:453px;
  675. position:absolute;
  676. left:120px;
  677. z-index:-99;
  678. background:{color:posts};
  679. width:1110px;
  680. }
  681. .sticky{
  682. position:fixed;
  683. width:1110px;
  684. top:0px;
  685. left:120px;
  686. z-index:-99;
  687. }
  688. .sticky #navi{
  689. width:100%;
  690. text-align:left;
  691. color:{color:text};
  692. -webkit-transition: all 0.3s ease-in-out;
  693. -moz-transition: all 0.3s ease-in-out;
  694. -o-transition: all 0.3s ease-in-out;
  695. -ms-transition: all 0.3s ease-in-out;
  696. transition: all 0.3s ease-in-out;
  697. }
  698. #navi{
  699. margin:auto;
  700. font-size:10px;
  701. height:3000px;
  702. letter-spacing:1px;
  703. font-weight:600;
  704. color:{color:text};
  705. padding-left:5px;
  706. width:729px;
  707. font-style:lowercase;
  708. text-align:left;
  709. -webkit-transition: all 0.5s ease-in-out;
  710. -moz-transition: all 0.5s ease-in-out;
  711. -o-transition: all 0.5s ease-in-out;
  712. -ms-transition: all 0.5s ease-in-out;
  713. transition: all 0.5s ease-in-out;
  714. }
  715. /*sidebar links*/
  716. .links {
  717. width:100%;
  718. height:90px;
  719. overflow:hidden;
  720. cursor:pointer;
  721. top:0px;
  722. opacity:1;
  723. z-index:-99;
  724. background:{color:posts};
  725. position:fixed;
  726. left:0px;
  727. text-align:center;
  728. -webkit-transition: all 0.3s ease-in-out;
  729. -moz-transition: all 0.3s ease-in-out;
  730. -o-transition: all 0.3s ease-in-out;
  731. -ms-transition: all 0.3s ease-in-out;
  732. transition: all 0.3s ease-in-out;
  733. }
  734. .links #all {
  735. margin-left:3px;
  736. margin-top:20px;
  737. padding:5px;
  738. height:28px;
  739. -webkit-transition: all 0.3s ease-in-out;
  740. -moz-transition: all 0.3s ease-in-out;
  741. -o-transition: all 0.3s ease-in-out;
  742. -ms-transition: all 0.3s ease-in-out;
  743. transition: all 0.3s ease-in-out;
  744. }
  745. .links #all a:hover {
  746. color:{color:hover};
  747. letter-spacing:2px;
  748. -webkit-transition: all 0.3s ease-in-out;
  749. -moz-transition: all 0.3s ease-in-out;
  750. -o-transition: all 0.3s ease-in-out;
  751. -ms-transition: all 0.3s ease-in-out;
  752. transition: all 0.3s ease-in-out;
  753. }
  754. .links a {
  755. width:200px;
  756. height:30px;
  757. margin-bottom:8px;
  758. text-align:center;
  759. text-transform:uppercase;
  760. padding:5px;
  761. opacity:1;
  762. margin-left:4px;
  763. line-height:39px;
  764. color:{color:text};
  765. z-index:99999;
  766. font-weight:700;
  767. font-family: 'ntr', sans-serif;
  768. letter-spacing:1px;
  769. font-size:13px;
  770. display:inline-block;
  771. -webkit-transition: all 0.3s ease-in-out;
  772. -moz-transition: all 0.3s ease-in-out;
  773. -o-transition: all 0.3s ease-in-out;
  774. -ms-transition: all 0.3s ease-in-out;
  775. transition: all 0.3s ease-in-out;
  776. }
  777. /*titles*/
  778. #sidebartitle{
  779. width:1094px;
  780. height:220px;
  781. top:453px;
  782. opacity:1;
  783. padding:8px;
  784. position:absolute;
  785. font-family: 'ntr' , sans-serif;
  786. letter-spacing:1px;
  787. text-align:center;
  788. overflow:hidden;
  789. font-weight:700;
  790. color:{color:text};
  791. text-transform:uppercase;
  792. line-height:21px;
  793. font-size:18px;
  794. left:120px;
  795. z-index:999;
  796. }
  797. /*sidebar*/
  798. #boxes {
  799. overflow:auto;
  800. position:absolute;
  801. text-align:left;
  802. margin-top:45px;
  803. margin-left:215px;
  804. text-transform:none;
  805. font-style:normal;
  806. font-family: 'Roboto', sans-serif;
  807. width:255px;
  808. height:100px;
  809. opacity:1;
  810. line-height:10px;
  811. font-weight:none;
  812. color:{color:text};
  813. background:{color:description};
  814. padding:17px;
  815. letter-spacing:0px;
  816. font-size:10px;
  817. transition-duration: 0.9s;
  818. -moz-transition-duration:0.9s;
  819. -webkit-transition-duration:0.9s;
  820. -o-transition-duration:0.9s;
  821. }
  822. .tit {
  823. font-size:14px;
  824. text-transform:uppercase;
  825. margin-bottom:20px;
  826. letter-spacing:1px;
  827. line-height:74px;
  828. font-weight:700;
  829. width:340px;
  830. height:70px;
  831. margin-left:-21px;
  832. margin-top:-21px;
  833. box-shadow:0px 2px 2px rgba(0,0,0,.15);
  834. text-align:left;
  835. font-family: 'ntr', sans-serif;
  836. color:{color:text};
  837. }
  838. .sidebox {
  839. position:absolute;
  840. background:{color:posts};
  841. width:365px;
  842. top:784px;
  843. left:202px;
  844. z-index:999999999;
  845. }
  846. .box {
  847. padding:20px;
  848. }
  849. #description {
  850. margin:5px;
  851. text-align:justify;
  852. }
  853. .members {
  854. margin:5px;
  855. font-size:10px;
  856. text-transform:uppercase;
  857. text-align:justify;
  858. }
  859. #description1 {
  860. margin:5px;
  861. font-size:10px;
  862. margin-top:-21px;
  863. padding-top:8px;
  864. box-shadow:0px 2px 2px rgba(0,0,0,.15);
  865. z-index:-9;
  866. margin-left:-20px;
  867. font-weight:400;
  868. padding:30px;
  869. line-height:14px;
  870. font-family: 'roboto', sans-serif;
  871. }
  872. #sidebarr {
  873. margin:5px;
  874. text-align:justify;
  875. }
  876.  
  877. #affiliates {
  878. margin:5px;
  879. font-size:10px;
  880. margin-top:-21px;
  881. padding-top:8px;
  882. margin-left:-20px;
  883. letter-spacing:2px;
  884. text-align:center;
  885. font-weight:400;
  886. padding:35px;
  887. box-shadow:0px 2px 2px rgba(0,0,0,.15);
  888. line-height:14px;
  889. font-family: 'roboto', sans-serif;
  890. }
  891. #affiliates img {
  892. width:60px;
  893. height:60px;
  894. opacity:1;
  895. border-radius:5px;
  896. transition-duration: 0.9s;
  897. -moz-transition-duration:0.9s;
  898. -webkit-transition-duration:0.9s;
  899. -o-transition-duration:0.9s;
  900. }
  901. #affiliates img:hover{
  902. opacity:0.5;
  903. box-shadow:inset 0px 0px 6px rgba(0,0,0,.15);
  904. border-radius:100px;
  905. transition-duration: 0.9s;
  906. -moz-transition-duration:0.9s;
  907. -webkit-transition-duration:0.9s;
  908. -o-transition-duration:0.9s;
  909. }
  910. #projects {
  911. font-size:10px;
  912. margin-top:-21px;
  913. margin-left:-20px;
  914. font-weight:400;
  915. width:279px;
  916. padding:30px;
  917. box-shadow:0px 2px 2px rgba(0,0,0,.15);
  918. line-height:12px;
  919. font-family: 'roboto', sans-serif;
  920. }
  921. #projects img {
  922. border:1px solid #eee;
  923. width:70px;
  924. height:70px;
  925. border-radius:5px 5px 5px 5px;
  926. float:left;
  927. margin-right:10px;
  928. }
  929. {CustomCSS}</style>
  930. </head>
  931. <body>
  932. <!-----basics---->
  933. <div id="sidebar">
  934. <div id="headerimage"><img src="{image:header}"></a></div>
  935. <div id="sidebartitle"><img src="{image:header two}"></a></div>
  936. <div id="description">{text:additional description}</a></div>
  937. </div>
  938. </div>
  939. <!-----top bar links---->
  940. <div class="links">
  941. <div id="all">
  942. <a href="/">index</a>
  943. <a href="/ask">contact</a>
  944. <a href="{text:link one url}">{text:link one}</a>
  945. <a href="{text:link two url}">{text:link two}</a>
  946. <a href="{text:link three url}">{text:link three}</a>
  947. </div>
  948. </div>
  949. <!-----sticky background---->
  950. <div class="toppp">
  951. <div id="navi">
  952. </div>
  953. </div>
  954. <!---- Sticky Position (Bar) with CSS or jQuery by http://www.hongkiat.com/ --->
  955.  
  956. <script>
  957. var header = document.querySelector('.toppp');
  958. var origOffsetY = header.offsetTop;
  959.  
  960. function onScroll(e) {
  961. window.scrollY >= origOffsetY ? header.classList.add('sticky') :
  962. header.classList.remove('sticky');
  963. }
  964.  
  965. document.addEventListener('scroll', onScroll);
  966. </script>
  967. <!-----sidebar---->
  968. <div class="sidebox">
  969. <!-----description---->
  970. <div class="box">
  971. <div class="tit"style=" z-index:999999999;background-image:url('{image:title one}');">
  972. <font style="float:left;margin-left:18px">
  973. Home
  974. </font style>
  975. </div>
  976. <div id="description1">{description}</div>
  977. </div>
  978. <!-----updates---->
  979. <div class="box">
  980. <div class="tit"style="background-image:url('{image:title two}');">
  981. <font style="float:left;margin-left:18px">
  982. About
  983. </font style>
  984. </div>
  985. <div id="description1">
  986. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, mauris. Aliquam mattis porta urna. Maecenas dui neque, rhoncus sed, vehicula vitae, auctor at, nisi. Aenean id massa ut lacus molestie porta. Curabitur sit amet quam id libero suscipit venenatis.
  987.  
  988. Lorem ipsum dolor sit amet.
  989. Consectetuer adipiscing elit.
  990. Nam at tortor quis ipsum tempor aliquet.
  991. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse sed ligula. Sed volutpat odio non turpis gravida luctus. Praesent elit pede, iaculis facilisis, vehicula mattis, tempus non, arcu.
  992.  
  993. </a>
  994. </div></div>
  995. <!-----projects or albums---->
  996. <div class="box">
  997. <div class="tit"style="background-image:url('{image:title three}');">
  998. <font style="float:left;margin-left:18px">
  999. Projects
  1000. </font style>
  1001. </div>
  1002. <div id="projects">
  1003. <img src="https://40.media.tumblr.com/d43ef707e6651fa2c632b84265521285/tumblr_ny80wbtVNe1u9o0yqo1_100.jpg">
  1004. <ul>
  1005. <b>Album name</b><br>
  1006. <b>Producer:</b> Name here<br>
  1007. <b>Year:</b> Year here<br>
  1008. <b>Tracks:</b> Tracks amount here<br>
  1009. <b>Label:</b> Label here
  1010. </ul>
  1011. <br><br>
  1012. <img src="https://40.media.tumblr.com/d43ef707e6651fa2c632b84265521285/tumblr_ny80wbtVNe1u9o0yqo1_100.jpg">
  1013. <ul>
  1014. <b>Album name</b><br>
  1015. <b>Producer:</b> Name here<br>
  1016. <b>Year:</b> Year here<br>
  1017. <b>Tracks:</b> Tracks amount here<br>
  1018. <b>Label:</b> Label here
  1019. </ul>
  1020. </div>
  1021. </div>
  1022. <!-----blog members---->
  1023. <div class="box">
  1024. <div class="tit"style="background-image:url('{image:title four}');">
  1025. <font style="float:left;margin-left:18px">
  1026. Members
  1027. </font style>
  1028. </div>
  1029. <div class="members">
  1030. {block:GroupMembers}
  1031. <table style="margin-top:0px;">
  1032. {block:GroupMember}
  1033. <tr>
  1034. <td style="width:40px;">
  1035. <img src="{GroupMemberPortraitURL-128}" width="40px;" height="auto;" style="margin-right: 10px;border:solid 1px #ddd;border-radius:5px"> </td>
  1036. <td style="height:auto;">
  1037. <a href="{GroupMemberURL}" title="{GroupMemberTitle}"style="font-family: 'arial', sans-serif;margin-top:0px;font-weight:bold;text-transform:uppercase;font-size:8px;letter-spacing:0px;text-decoration:underline">{GroupMemberName}</a><br><grouptitle>{GroupMemberTitle}</grouptitle></div>
  1038. </tr>
  1039. {/block:GroupMember}
  1040. </table>
  1041. {/block:GroupMembers}
  1042. </div></div>
  1043. <!-----affiliates---->
  1044. <div class="box">
  1045. <div class="tit"style="background-image:url('{image:title five}');">
  1046. <font style="float:left;margin-left:18px">
  1047. Affiliates
  1048. </font style>
  1049. </div>
  1050. <div id="affiliates">
  1051. <a href="/"title="name"><img src="https://40.media.tumblr.com/b4692d70631eaa384662efe904f8c8c5/tumblr_o50grjhUqd1ujppofo1_250.jpg"></a>
  1052. <a href="/"title="name"><img src="https://40.media.tumblr.com/b4692d70631eaa384662efe904f8c8c5/tumblr_o50grjhUqd1ujppofo1_250.jpg"></a>
  1053. <a href="/"title="name"><img src="https://40.media.tumblr.com/b4692d70631eaa384662efe904f8c8c5/tumblr_o50grjhUqd1ujppofo1_250.jpg"></a>
  1054. <a href="/"title="name"><img src="https://40.media.tumblr.com/b4692d70631eaa384662efe904f8c8c5/tumblr_o50grjhUqd1ujppofo1_250.jpg"></a>
  1055. <a href="/"title="name"><img src="https://40.media.tumblr.com/b4692d70631eaa384662efe904f8c8c5/tumblr_o50grjhUqd1ujppofo1_250.jpg"></a>
  1056. <a href="/"title="name"><img src="https://40.media.tumblr.com/b4692d70631eaa384662efe904f8c8c5/tumblr_o50grjhUqd1ujppofo1_250.jpg"></a>
  1057. </div></div>
  1058. <!-----disclaimer---->
  1059. <div class="box">
  1060. <div class="tit"style="background-image:url('{image:title six}');">
  1061. <font style="float:left;margin-left:18px">
  1062. Disclaimer
  1063. </font style>
  1064. </div>
  1065. <div id="description1">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, mauris. Aliquam mattis porta urna. Maecenas dui neque, rhoncus sed, vehicula vitae, auctor at, nisi. Aenean id massa ut lacus molestie porta. Curabitur sit amet quam id libero suscipit venenatis.
  1066.  
  1067. Lorem ipsum dolor sit amet.
  1068. Consectetuer adipiscing elit.
  1069. Nam at tortor quis ipsum tempor aliquet.
  1070. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse sed ligula. Sed volutpat odio non turpis gravida luctus. Praesent elit pede, iaculis facilisis, vehicula mattis, tempus non, arcu.
  1071. </a>
  1072. </div></div>
  1073. <!-----blog info---->
  1074. <div class="box">
  1075. <div class="tit"style="background-image:url('{image:title seven}');">
  1076. <font style="float:left;margin-left:18px">
  1077. Blog info
  1078. </font style>
  1079. </div>
  1080. <div id="description1">
  1081. <b>Blog created by:</b> Azure
  1082. </br>
  1083. <b>Blog established:</b> Late 2015
  1084. </br>
  1085. <b>Graphics by:</b> Azure
  1086. </br>
  1087. <b>Theme made by:</b> Azure (Espeon Themes)
  1088. </div>
  1089. </div>
  1090. </div>
  1091. </div>
  1092. <!-----posts and entries---->
  1093. <div id="entries">
  1094. {block:Posts}
  1095. <div id="post"
  1096. <div id="post">
  1097. <!----texts---->
  1098. {block:Text}
  1099. {block:Title}<h1><center>{Title}</center></h1>{/block:Title}
  1100. <center>{Body}</center>
  1101. {/block:Text}
  1102. <!-----question and answers---->
  1103. {block:Answer}
  1104. <div id="asker"><div id="askingimage"><img src="{AskerPortraitURL-128}"/></div></div>
  1105. <div id="askerurl">{Asker} asked:</div>
  1106. <div id="question">{Question}</div>
  1107. {Answer}{/block:Answer}
  1108. <!-----quotes---->
  1109. {block:Quote}
  1110. {block:Quote}
  1111. <h2>{Quote}</h2>
  1112. <div align="right">
  1113. {block:Source}<h1>-{Source}</h1>{/block:Source}
  1114. </div>
  1115. {/block:Quote}
  1116. <!-----links---->
  1117. {block:Link}
  1118. <h2><center><a href="{URL}">{Name}</center></a></h2>
  1119. {block:Description}{Description}{/block:Description}
  1120. {/block:Link}
  1121. <!-----chats---->
  1122. {block:Chat}
  1123. {block:Title}<h2>{Title}</h2>{/block:Title}
  1124. <ul class="convo">{block:Lines}<li class="line">{block:Label}<span class ="label">{Label}</span>{/block:Label}
  1125. {Line}</li>{/block:Lines}</ul>
  1126. {/block:Chat}
  1127. <!-----photos---->
  1128. {block:Photo}
  1129. {LinkOpenTag}<img src="{PhotoURL-500}" alt="{PhotoAlt}" width="auto">{LinkCloseTag}
  1130. {block:Caption}<div class="pcaption">{Caption}</div>{/block:Caption}
  1131. {/block:Photo}
  1132. <!-----photosets---->
  1133. {block:Photoset}
  1134. <div class="psets">{Photoset-500}</div>
  1135. {block:Caption}<div class="pcaption">{Caption}</div>{/block:Caption}
  1136. {/block:Photoset}
  1137. <!-----videos---->
  1138. {block:Video}
  1139. <div class="vsets">{Video-500}</div>
  1140. {block:Caption}<div class="pcaption">{Caption}</div>{/block:Caption}
  1141. {/block:Video}
  1142. <!-----audios---->
  1143. {block:Audio}<left>{block:AlbumArt}<img src="{AlbumArtURL}" width="60px" height="60px" align="left" style="margin-right:10px" />{/block:AlbumArt}
  1144. {block:TrackName}<div class="audiotitle">Title: <audioinfo>{TrackName}</audioinfo><br/></div>{/block:TrackName}
  1145. {block:Artist}<div class="audioartist">Artist: <audioinfo>{Artist}</audioinfo><br/></div>{/block:Artist}
  1146. {/block:ExternalAudio}<div class="audioplayed">Played: <audioinfo>{PlayCount} times</audioinfo> </div>
  1147. </br>
  1148. <div class="audioplayr"style="background:{color:accent}">{AudioPlayer}</div>
  1149. {/block:Audio}
  1150. <!-----info---->
  1151. <div id="borderbottom"></div>
  1152. <div id="info">
  1153. <div id="permalink">
  1154. <top><a href="{Permalink}"title="{TimeAgo}">
  1155. {DayOfMonth} {ShortMonth} {ShortYear}</top></a><top>{NoteCountWithLabel}</top>
  1156. <font style="float:right;margin-right:13px">
  1157. {block:RebloggedFrom}
  1158. <a href="{ReblogURL}"target="_blank" class="details">reblog</a>
  1159. {block:RebloggedFrom}
  1160. {/block:RebloggedFrom}
  1161. {block:ContentSource}
  1162. <a href="{ReblogParentURL}" title="{ReblogParentName}">via</a> <a href="{SourceURL}"title="Source"><i class="fa fa-copyright"style="color:{color:text}"></i></a>
  1163. {/block:ContentSource}
  1164. {/block:RebloggedFrom}
  1165. </font style>
  1166. </a></div></div>
  1167. {/block:Date}
  1168. {block:HasTags}<div id="tags"> {block:Tags} <a href="{TagURL}"> #{Tag} </a> {/block:Tags}
  1169. </div>
  1170. {/block:HasTags}
  1171. </div>
  1172. {block:PostNotes} {PostNotes} {/block:PostNotes}
  1173.  
  1174. {/block:Posts}
  1175. {block:Pagination}
  1176. <div class="pagination"style="{color:title text}">
  1177. {block:PreviousPage}<a href="{PreviousPage}"title="previous page">BACK</a>{/block:PreviousPage}{block:JumpPagination length="4"}{block:CurrentPage}<span class="current_page"style="color:{color:accent};font-weight:600;padding:5px">{PageNumber}</span>{/block:CurrentPage}{block:JumpPage}<a class="jump_page"style="{color:text}" href="{URL}">{PageNumber}</a>{/block:JumpPage}{/block:JumpPagination}{block:NextPage}<a href="{NextPage}"title="next page">NEXT</a>{/block:NextPage}
  1178. {/block:Pagination}</div>
  1179. </div>
  1180. <!-----credit (u better dont touch this here u goof)---->
  1181. <div id="credit">
  1182. <a href="http://themesbyazure.co.vu/"title="espeon themes"style="color:{color:text}">© Espeon</a>
  1183. </div>
  1184. </html>
  1185. </body>
  1186. <!-----end html---->
Add Comment
Please, Sign In to add comment
Public Pastes
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!