API tools faq
paste
Advertisement
deersprouts

╰ ° 006: rosetta ( 400px )

deersprouts
Jan 28th, 2017
1,318
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 48.06 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2.  
  3. <!---------------- HEY! LISTEN --------------*/
  4.  
  5.  
  6. ╰ ° ROSETTA THEME BY JCNNIE *°
  7.  
  8. - you can edit it to your heart's content but
  9. keep the credit please! plagiarism ain't cool.
  10. - do not take any part of this theme
  11. and claim it as your own.
  12.  
  13.  
  14. base code: neonbike themes
  15. chat post code: animalites
  16.  
  17.  
  18. /*--------------------------------------------->
  19.  
  20. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  21. <head><title>{Title}</title>
  22. <link rel="shortcut icon" href="{Favicon}">
  23. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  24. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  25.  
  26. <meta name="color:background" content="#d6d6d6"/>
  27. <meta name="color:accent" content="#bbb" />
  28. <meta name="color:container bg" content="#ececec" />
  29. <meta name="color:sidebar bg" content="#f8f8f8" />
  30. <meta name="color:posts bg" content="#fff" />
  31. <meta name="color:text" content="#000"/>
  32. <meta name="color:navi" content="#fff"/>
  33. <meta name="color:title" content="#000" />
  34. <meta name="color:link" content="#000"/>
  35. <meta name="color:linkhover" content="#777"/>
  36. <meta name="color:bold" content="#777" />
  37. <meta name="color:italic" content="#777" />
  38. <meta name="color:underline" content="#777" />
  39. <meta name="color:scrollbar" content="#ccc" />
  40. <meta name="color:icon border" content="#fff" />
  41.  
  42. <meta name="text:title" content="try bold text"/>
  43. <meta name="text:blurb text" content="a little about or a neat bio could go here who knows"/>
  44. <meta name="text:link 1 title" content="home"/>
  45. <meta name="text:link 1 url" content="/"/>
  46. <meta name="text:link 2 title" content="message"/>
  47. <meta name="text:link 2 url" content="/ask"/>
  48. <meta name="text:link 3 title" content="link three"/>
  49. <meta name="text:link 3 url" content="/"/>
  50. <meta name="text:link 4 title" content="link four"/>
  51. <meta name="text:link 4 url" content="/"/>
  52. <meta name="text:tablink 1 title" content="link one"/>
  53. <meta name="text:tablink 1 url" content="/"/>
  54. <meta name="text:tablink 2 title" content="link two"/>
  55. <meta name="text:tablink 2 url" content="/"/>
  56. <meta name="text:tablink 3 title" content="link three"/>
  57. <meta name="text:tablink 3 url" content="/"/>
  58. <meta name="text:tablink 4 title" content="link four"/>
  59. <meta name="text:tablink 4 url" content="/"/>
  60. <meta name="text:tablink 5 title" content="link five"/>
  61. <meta name="text:tablink 5 url" content="/"/>
  62.  
  63. <meta name="image:background" content=""/>
  64. <meta name="image:icon" content=""/>
  65. <meta name="image:icon2" content=""/>
  66. <meta name="image:nav pic1" content=""/>
  67. <meta name="image:nav pic2" content=""/>
  68. <meta name="image:phone bg" content=""/>
  69. <meta name="image:twitter icon" content=""/>
  70. <meta name="image:instagram icon" content=""/>
  71. <meta name="image:instagram1" content=""/>
  72. <meta name="image:instagram2" content=""/>
  73. <meta name="image:instagram3" content=""/>
  74. <meta name="image:instagram4" content=""/>
  75.  
  76. <meta name="if:greyscale" content="0"/>
  77. <meta name="text:text size" content="9px" />
  78.  
  79.  
  80.  
  81. <!--- SCRIPTS AND STUFF --->
  82.  
  83.  
  84. <script type="text/javascript" src="http://static.tumblr.com/86jccts/wpsmuemne/hoverqtip.js"></script>
  85. <link href="https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i" rel="stylesheet">
  86. <link href="https://fonts.googleapis.com/css?family=Raleway:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i" rel="stylesheet">
  87. <link href="https://fonts.googleapis.com/css?family=Work+Sans:100" rel="stylesheet">
  88. <link rel="stylesheet" href="https://cdn.linearicons.com/free/1.0.0/icon-font.min.css">
  89. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
  90. <link href="https://github.com/IanLunn/Hover.git" rel="stylesheet" media="all">
  91. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  92. <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  93.  
  94. <!-- TABS/ALL-INN-ONE SCRIPTS DO NOT REMOVE!!! -->
  95.  
  96. <script>
  97. $(document).ready(function() {
  98. $('.tabs .tab-links a').on('click', function(e) {
  99. var currentAttrValue = $(this).attr('href');
  100.  
  101. // Show/Hide Tabs
  102. $('.tabs ' + currentAttrValue).fadeIn(600).siblings().hide();
  103.  
  104. // Change/remove current tab to active
  105. $(this).parent('li').addClass('active').siblings().removeClass('active');
  106.  
  107. e.preventDefault();
  108. });
  109. });
  110. </script>
  111.  
  112. <script>
  113. $(document).ready(function() {
  114. $('#filterOptions li a').click(function() {
  115. // fetch the class of the clicked item
  116. var ourClass = $(this).attr('class');
  117.  
  118. // reset the active class on all the buttons
  119. $('#filterOptions li').removeClass('active');
  120. // update the active state on our clicked button
  121. $(this).parent().addClass('active');
  122.  
  123. if(ourClass == 'all') {
  124. // show all our items
  125. $('#ourHolder').children('div.item').show();
  126. }
  127. else {
  128. // hide all elements that don't share ourClass
  129. $('#ourHolder').children('div:not(.' + ourClass + ')').hide();
  130. // show all elements that do share ourClass
  131. $('#ourHolder').children('div.' + ourClass).show();
  132. }
  133. return false;
  134. });
  135. });
  136. </script>
  137.  
  138. <script type="text/javascript" src="http://static.tumblr.com/bmdsqsc/8mXm7q8vn/jquery.js"></script>
  139.  
  140. <script>
  141. $(document).ready(function() {
  142. $('.tabs .tab-links a').on('click', function(e) {
  143. var currentAttrValue = $(this).attr('href');
  144.  
  145. // Show/Hide Tabs
  146. $('.tabs ' + currentAttrValue).fadeIn(600).siblings().hide();
  147.  
  148. // Change/remove current tab to active
  149. $(this).parent('li').addClass('active').siblings().removeClass('active');
  150.  
  151. e.preventDefault();
  152. });
  153. });
  154. </script>
  155.  
  156. <script>
  157. $(document).ready(function() {
  158. $('#filterOptions li a').click(function() {
  159. // fetch the class of the clicked item
  160. var ourClass = $(this).attr('class');
  161.  
  162. // reset the active class on all the buttons
  163. $('#filterOptions li').removeClass('active');
  164. // update the active state on our clicked button
  165. $(this).parent().addClass('active');
  166.  
  167. if(ourClass == 'all') {
  168. // show all our items
  169. $('#ourHolder').children('div.item').show();
  170. }
  171. else {
  172. // hide all elements that don't share ourClass
  173. $('#ourHolder').children('div:not(.' + ourClass + ')').hide();
  174. // show all elements that do share ourClass
  175. $('#ourHolder').children('div.' + ourClass).show();
  176. }
  177. return false;
  178. });
  179. });
  180. </script>
  181.  
  182.  
  183. <script type="text/javascript">
  184. jQuery(document).ready(function() {
  185. jQuery(".sub").hide();
  186. //toggle the componenet with class msg_body
  187. jQuery(".cthrough").click(function()
  188. {
  189. jQuery(this).next(".sub").slideToggle(500);
  190. });});
  191. </script>
  192.  
  193. <!--- END OF SCRIPTS AND STUFF --->
  194.  
  195.  
  196.  
  197.  
  198.  
  199.  
  200.  
  201. <style type="text/css">
  202.  
  203. /* ╰ ° EXTRAS N STUFF *° */
  204.  
  205. ::-webkit-scrollbar-thumb:vertical {
  206. height:10px;
  207. border:0px solid {color:scrollbar};
  208. background-color:{color:scrollbar};
  209. -webkit-border-fill-color: transparent;
  210. }
  211.  
  212. ::-webkit-scrollbar-thumb:horizontal, ::-webkit-scrollbar:horizontal {
  213. display:none;
  214. }
  215.  
  216. ::-webkit-scrollbar {
  217. width:1px;
  218. height:5px;
  219. border:2px solid transparent;
  220. background:transparent;
  221. display:none;
  222. -webkit-border-fill-color: transparent;
  223. }
  224.  
  225. ::-moz-selection {
  226. color:{color:underline};
  227. background-color:{color:container bg};
  228. }
  229.  
  230. ::selection {
  231. color:{color:underline};
  232. background-color:{color:container bg};
  233. }
  234.  
  235.  
  236. @font-face{
  237. font-family:"bromello";
  238. src: url('https://dl.dropboxusercontent.com/s/yqavbayc1vsuvmi/bromello.ttf');
  239. }
  240.  
  241. div#qTip {
  242. padding: 3px;
  243. display: none;
  244. margin-left:10px;
  245. margin-top:-37px;
  246. background:{color:posts bg};
  247. opacity:0.8;
  248. font-weight:700;
  249. position: absolute;
  250. text-transform:uppercase;
  251. font-size:7px;
  252. z-index: 9999999;
  253. color: {color:text};
  254. letter-spacing: 1px;
  255. }
  256.  
  257.  
  258.  
  259. /* ╰ ° HOVER EFFECTS AND FONT ICONS *° */
  260.  
  261. /* Grow Rotate */
  262. .hvr-grow-rotate {display: inline-block;vertical-align: middle;-webkit-transform: translateZ(0);transform: translateZ(0);box-shadow: 0 0 1px rgba(0, 0, 0, 0);-webkit-backface-visibility: hidden;backface-visibility: hidden;-moz-osx-font-smoothing: grayscale;-webkit-transition-duration: 0.3s;transition-duration: 0.3s;-webkit-transition-property: transform;transition-property: transform;}
  263. .hvr-grow-rotate:hover, .hvr-grow-rotate:focus, .hvr-grow-rotate:active {
  264. -webkit-transform: scale(1.1) rotate(4deg);transform: scale(1.1) rotate(4deg);}
  265.  
  266. /* Underline From Center */
  267. .hvr-underline-from-center {display: inline-block;vertical-align: middle;-webkit-transform: translateZ(0);transform: translateZ(0);box-shadow: 0 0 1px rgba(0, 0, 0, 0);-webkit-backface-visibility: hidden;backface-visibility: hidden;-moz-osx-font-smoothing: grayscale;position: relative;overflow: hidden;}
  268. .hvr-underline-from-center:before {content: "";position: absolute;z-index: -1;left: 50%;right: 50%;bottom: 0;background: {color:underline};height: 1px;-webkit-transition-property: left, right;transition-property: left, right;-webkit-transition-duration: 0.3s;transition-duration: 0.3s;-webkit-transition-timing-function: ease-out;transition-timing-function: ease-out;}
  269. .hvr-underline-from-center:hover:before{left: 0;right: 0;}
  270.  
  271.  
  272.  
  273. .lnr-tag {
  274. color: {color:text};
  275. font-size: 8px;
  276. }
  277. .sprout {
  278. color: {color:accent};
  279. font-size: 12px;
  280. text-align:center;
  281. display:block;
  282. margin-top:5px;
  283. margin-bottom:15px;
  284. }
  285. .lnr-undo, .lnr-link, .lnr-location {
  286. color: {color:link};
  287. font-size: 9px;
  288.  
  289. }
  290. .lnr-arrow-right, .lnr-arrow-left {
  291. color: {color:text};
  292. font-size: 10px;
  293.  
  294. }
  295. .fa-heart {
  296. color: {color:text};
  297.  
  298. }
  299. .lnr-earth, .lnr-power-switch, .lnr-menu {
  300. color: {color:text};
  301. }
  302.  
  303. .fa-circle,.fa-circle-thin,.fa-battery-3, .fa-wifi, .fa-lock, .fa-camera{
  304. color:white;
  305. }
  306.  
  307.  
  308. /* ╰ ° THE ESSENTIALS *° */
  309.  
  310. body {
  311. background: url('{image:background}') no-repeat center center fixed;
  312. -webkit-background-size: cover;
  313. -moz-background-size: cover;
  314. -o-background-size: cover;
  315. background-size: cover;
  316. background-color:{color:background};
  317. line-height:150%;
  318. color:{color:text};
  319. font-family: 'roboto', sans-serif ;
  320. font-size: {text:text size};
  321. letter-spacing:0.5px;
  322. }
  323.  
  324. a {
  325. text-decoration:none;
  326. color:{color:link};
  327. -webkit-transition: all 0.7s ease;
  328. -moz-transition: all 0.7s ease;
  329. -o-transition: all 0.7s ease;
  330. }
  331.  
  332. a:hover {
  333. color:{color:linkhover};
  334. text-shadow:0px 0px 1px rgba(0,0,0,0.5);
  335. -webkit-transition: all 0.7s ease;
  336. -moz-transition: all 0.7s ease;
  337. -o-transition: all 0.7s ease;
  338. }
  339.  
  340. hr {
  341. width: 40%;
  342. margin-left: auto;
  343. margin-right: auto;
  344. margin-top: 20px;
  345. margin-bottom: 20px;
  346. opacity:0.5;
  347. color:{color:text};
  348. }
  349.  
  350. blockquote {
  351. background-color:rgba(255,255,255,0);
  352. padding:0px 6px 0px 12px;
  353. margin:2px 2px 2px 2px;
  354. border-left:1px solid {color:scrollbar};
  355. }
  356.  
  357. blockquote img {
  358. max-width:100%;
  359. height:auto;
  360. }
  361.  
  362. b, strong {
  363. color:{color:bold};
  364. font-weight:bold;
  365. }
  366.  
  367. i, em {
  368. color:{color:italic};
  369. }
  370. u {
  371. color:{color:underline};
  372. }
  373.  
  374. small,sup,sub {
  375. font-size:{text:Text Size}}
  376.  
  377. big {
  378. font-size:11px;}
  379.  
  380. pre {
  381. background-color:{color:accent};
  382. padding:20px;
  383. white-space: pre-wrap; /* css-3 */
  384. white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
  385. white-space: -pre-wrap; /* Opera 4-6 */
  386. white-space: -o-pre-wrap; /* Opera 7 */
  387. word-wrap: break-word; /* Internet Explorer 5.5+ */}
  388.  
  389. pre b, pre strong{
  390. color:{color:text};
  391. }
  392.  
  393. .entries ul {
  394. padding-left:6px;
  395. margin-left:3px;
  396. }
  397.  
  398. .entries ol {
  399. padding-left:3px;
  400. margin-left:6px;
  401. text-align:justify;
  402. }
  403. .entries li {
  404. padding-left:3px;
  405. margin-left:6px;
  406. text-align:justify;
  407. margin-bottom:6px;
  408. }
  409.  
  410.  
  411. /* ╰ ° NAVTAB STUFF *° */
  412.  
  413. .boom {
  414. width:auto;
  415. height:230px;
  416. overflow-y:none;
  417. overflow-x:none;
  418. -webkit-transition: all .4s ease-out;
  419. -moz-transition: all .4s ease-out;
  420. -o-transition: all .4s ease-out;
  421. -ms-transition: all .4s ease-out;
  422. transition: all .4s ease-out;
  423. }
  424.  
  425. #huh1, #huh2 {
  426. display:static;
  427. position:absolute;
  428. z-index:99;
  429. padding:0px;
  430. width:125px;
  431. height:80px;
  432. border:5px solid {color:icon border};
  433. background-color: {color:icon border};
  434. }
  435.  
  436. #huh1 {
  437. position:absolute;
  438. top: 0px;
  439. left:45px;
  440. }
  441. #huh2 {
  442. top: 0px;
  443. left:190px;
  444. }
  445.  
  446. .blurb{
  447. display:block;
  448. position:absolute;
  449. top:50px;
  450. left:20px;
  451. width:310px;
  452. height:185px;
  453. padding:10px;
  454. z-index:9;
  455. outline:1px solid {color:posts bg};
  456. -webkit-transition: all 0.4s ease-out;
  457. -webkit-transition: all 0.4s ease-out;
  458. -moz-transition: all 0.4s ease-out;
  459. -o-transition: all 0.4s ease-out;
  460. }
  461.  
  462. .boomtext {
  463. position:absolute;
  464. top:30px;
  465. left:15px;
  466. text-align:justify;
  467. width:260px;
  468. height:140px;
  469. padding:10px;
  470. font-size:8px;
  471. overflow:auto;
  472. text-transform:uppercase;
  473. vertical-align:middle;
  474. opacity:1;
  475. letter-spacing:.5px;
  476. word-spacing:0px;
  477. line-height:200%;
  478. z-index:9;
  479. font-weight:500;
  480. background:transparent;
  481. border:10px solid transparent;
  482. text-shadow: 0px 0px 0.5px rgba(0,0,0,.2);
  483. }
  484.  
  485. .boomtext i {
  486. padding:2px;
  487. text-transform:uppercase;
  488. font-style:italic;
  489. letter-spacing:1px;
  490. line-height:90%;
  491. font-weight:500;
  492. background:{color:text};
  493. color:{color:posts bg};
  494. text-shadow: 0px 0px 0.5px rgba(0,0,0,.2);
  495. }
  496.  
  497.  
  498. /* ╰ ° TITLES N HEADINGS *° */
  499.  
  500. .title {
  501. position:absolute;
  502. left:120px;
  503. text-align:left;
  504. padding:8px;
  505. height:35px;
  506. width:350px;
  507. padding-top:12px;
  508. font-size:32px;
  509. text-transform:uppercase;
  510. line-height:100%;
  511. vertical-align:middle;
  512. opacity:1;
  513. letter-spacing:-1px;
  514. word-spacing:-2px;
  515. z-index:9;
  516. font-weight:600;
  517. color:{color:text};
  518. text-shadow: 0px 0px 0.5px rgba(0,0,0,.2);
  519. font-family: 'Raleway';
  520. background:none;
  521. }
  522.  
  523.  
  524. .title b{
  525. font-weight:800;
  526. letter-spacing:0px;
  527. color:{color:accent};
  528. }
  529.  
  530.  
  531. h1 {
  532. font-size:16px;
  533. padding:5px;
  534. margin:5px;
  535. font-weight:900;
  536. font-style:italic;
  537. letter-spacing:0px;
  538. text-transform:uppercase;
  539. text-align:center;
  540. color:{color:italic};
  541. }
  542.  
  543. h2, h3 {
  544. font-size:8px;
  545. font-weight:700;
  546. padding:8px;
  547. letter-spacing:2px;
  548. margin-bottom:3px;
  549. margin-top:3px;
  550. line-height:120%;
  551. background:{color:posts bg};
  552. text-shadow: 0px 0.5px 0.5px rgba(0,0,0,.1);
  553. text-transform:uppercase;
  554. text-align:center;
  555. color:{color:text};
  556. }
  557. .posts h2 {
  558. background:{color:container bg};
  559. }
  560.  
  561.  
  562. h3 {
  563. background:none;
  564. font-style:italic;
  565. }
  566.  
  567.  
  568.  
  569.  
  570. /* ╰ ° SOCIAL MEDIA *° */
  571.  
  572. .social{
  573. width:100%;
  574. padding-top:5px;
  575. margin-bottom:20px;
  576. padding:20px;
  577. }
  578.  
  579. .lockscreen{
  580. position:absolute;
  581. top: 0px;
  582. left:15px;
  583. width:145px;
  584. height:265px;
  585. z-index:99999;
  586. color:white;
  587. background:black;
  588. -webkit-transition: all .4s ease-out;
  589. -moz-transition: all .4s ease-out;
  590. -o-transition: all .4s ease-out;
  591. -ms-transition: all .4s ease-out;
  592. transition: all .4s ease-out;
  593. }
  594. .lockborder{
  595. position:absolute;
  596. top: 0px;
  597. left:0px;
  598. width:145px;
  599. height:265px;
  600. z-index:999;
  601. outline:5px solid {color:container bg};
  602. }
  603. #lockbg {
  604. opacity:1;
  605. z-index:9;
  606. -webkit-filter: blur(0px); /* Safari 6.0 - 9.0 */
  607. filter: blur(0px);
  608. -webkit-transition: all .4s ease-out;
  609. -moz-transition: all .4s ease-out;
  610. -o-transition: all .4s ease-out;
  611. -ms-transition: all .4s ease-out;
  612. transition: all .4s ease-out;
  613. }
  614. .lockscreen:hover #lockbg {
  615. opacity:0.4;
  616. -webkit-filter: blur(3px); /* Safari 6.0 - 9.0 */
  617. filter: blur(3px);
  618. }
  619. #notifs {
  620. position:absolute;
  621. top:80px;
  622. width:105px;
  623. height:145px;
  624. overflow:auto;
  625. padding:20px;
  626. padding-top:0px;
  627. padding-bottom:5px;
  628. z-index:9999;
  629. font-family:'helvetica';
  630. font-weight:300;
  631. text-align:left;
  632. font-size:8.5px;
  633. color:white;
  634. line-height:125%;
  635. opacity:0;
  636. -webkit-transition: all .4s ease-out;
  637. -moz-transition: all .4s ease-out;
  638. -o-transition: all .4s ease-out;
  639. -ms-transition: all .4s ease-out;
  640. transition: all .4s ease-out;
  641. }
  642. #notifs b {
  643. color:white;
  644. margin-left:-5px;
  645. }
  646. #notifs i {
  647. color:white;
  648. opacity:0.6;
  649. font-size:8px;
  650. font-style:normal;
  651. margin-left:5px;
  652. }
  653. .lockscreen:hover #notifs {
  654. opacity:1;
  655. }
  656. #notifs hr {
  657. color:#fff;
  658. opacity:0.6;
  659. width:122px;
  660. margin-top:4px;
  661. margin-bottom:4px;
  662. }
  663.  
  664.  
  665. .instagram{
  666. position:absolute;
  667. top: 0px;
  668. left:180px;
  669. width:275px;
  670. height:113px;
  671. text-align:center;
  672. z-index:99999;
  673. background:{color:posts bg};
  674. -webkit-transition: all .4s ease-out;
  675. -moz-transition: all .4s ease-out;
  676. -o-transition: all .4s ease-out;
  677. -ms-transition: all .4s ease-out;
  678. transition: all .4s ease-out;
  679. }
  680.  
  681. #igicon{
  682. position:absolute;
  683. top:5px;
  684. right:5px;
  685. width:40px;
  686. height:40px;
  687. z-index:99999;
  688. border-radius:50%;
  689. border:5px solid {color:container bg};
  690. }
  691. #insta1, #insta2, #insta3, #insta4 {
  692. width:60px;
  693. height:60px;
  694. margin:1.5px;
  695. z-index:999;
  696. opacity:1;
  697. -webkit-transition: all .4s ease-out;
  698. -moz-transition: all .4s ease-out;
  699. -o-transition: all .4s ease-out;
  700. -ms-transition: all .4s ease-out;
  701. transition: all .4s ease-out;
  702. }
  703.  
  704. .heart {
  705. background:{color:posts bg};
  706. width:60px;
  707. height:40px;
  708. opacity:0;
  709. font-size:20px;
  710. text-align: center;
  711. color:{color:text};
  712. -webkit-transition: all .4s ease-out;
  713. -moz-transition: all .4s ease-out;
  714. -o-transition: all .4s ease-out;
  715. -ms-transition: all .4s ease-out;
  716. transition: all .4s ease-out;
  717. }
  718. .heart:hover {
  719. opacity:0.65;
  720. }
  721.  
  722. #feed {
  723. position:absolute;
  724. top:42px;
  725. left:2px;
  726. width:270px;
  727. display:inline-block;
  728. }
  729.  
  730.  
  731. .twitter{
  732. position:absolute;
  733. top: 125px;
  734. left:170px;
  735. width:285px;
  736. height:85px;
  737. z-index:99999;
  738. -webkit-transition: all .4s ease-out;
  739. -moz-transition: all .4s ease-out;
  740. -o-transition: all .4s ease-out;
  741. -ms-transition: all .4s ease-out;
  742. transition: all .4s ease-out;
  743. }
  744.  
  745. .twicon{
  746. margin-top:10px;
  747. margin-left:10px;
  748. width:30px;
  749. height:30px;
  750. z-index:99999;
  751. border-radius:50%;
  752. border:4px solid {color:icon border};
  753. }
  754.  
  755.  
  756. .tweet, .tweet2, .tweet3 {
  757. width:210px;
  758. height:24px;
  759. padding:8px;
  760. font-size:8px;
  761. line-height:125%;
  762. text-align:left;
  763. z-index:1;
  764. background:{color:sidebar bg};
  765. border-radius:10px;
  766. }
  767.  
  768. .tweet{
  769. position:absolute;
  770. top:0px;
  771. left:58px;
  772. }
  773. .tweet2{
  774. z-index:999;
  775. position:absolute;
  776. top:45px;
  777. left:58px;
  778. }
  779. .tweet3{
  780. z-index:999;
  781. position:absolute;
  782. top:90px;
  783. left:58px;
  784. }
  785.  
  786. .tweet::after, .tweet2::after, .tweet3::after{content:"";position:absolute;left:-.5em;bottom:0px;width:.5em;height:1em;border-right:.5em solid {color:sidebar bg};border-bottom-right-radius:1em .5em
  787. }
  788. .tweet b, .tweet2 b, .tweet3 b {
  789. color:{color:underline};
  790. font-style:italic;
  791. }
  792.  
  793.  
  794. /* ╰ ° IMAGE FILTERS *° */
  795.  
  796.  
  797. {block:IfGreyscale}
  798.  
  799. img {
  800. -webkit-filter:grayscale(100%);
  801. }
  802. .html_photoset {
  803. -webkit-filter: grayscale(100%);
  804. }
  805. {/block:IfGreyscale}
  806.  
  807. img {
  808. max-width:100%;
  809. height:auto;}
  810.  
  811.  
  812.  
  813.  
  814. /* ╰ ° NAVIGATION *° */
  815.  
  816.  
  817. /*----- Tab Links -----*/
  818.  
  819. /* Clearfix */
  820. .tab-links:after {
  821. display:inline-block;
  822. clear:both;
  823. content:'';
  824. -moz-border-radius:100%;
  825. -webkit-border-radius:100%;
  826. border-radius:100%;
  827.  
  828. }
  829.  
  830. .tab-links li {
  831. margin:0px;
  832. display:inline-block;
  833. list-style:none;
  834. z-index:-999;
  835. }
  836.  
  837. .tab-links {
  838. position:absolute;
  839. top: 12px;
  840. right: 5px;
  841. height:20px;
  842. width:105px;
  843. text-align:center;
  844. margin:0px;
  845. padding:0px;
  846. z-index:999999;
  847. }
  848.  
  849. .tab-links a {
  850. width:20px;
  851. height:20px;
  852. display:inline-block;
  853. font-size:14px;
  854. line-height:150%;
  855. letter-spacing:0px;
  856. padding:4px;
  857. margin:2px;
  858. opacity:1.0;
  859. background:{color:navi};
  860. color:{color:text};
  861. border-radius:50%;
  862. text-shadow:none;
  863. -webkit-transition: all 0.3s ease;
  864. -moz-transition: all 0.3s ease;
  865. -o-transition: all 0.3s ease;
  866. }
  867.  
  868. .tab-links a:hover, li.active a:hover{
  869. background:{color:accent};
  870. color:{color:posts bg};
  871. }
  872.  
  873.  
  874. /*----- Sidebar Links -----*/
  875.  
  876.  
  877. .sidenav {
  878. position:absolute;
  879. top: 10px;
  880. left: 15px;
  881. height:76px;
  882. width:80px;
  883. background: none;
  884. text-align:center;
  885. margin:0px;
  886. padding:4px;
  887. margin-bottom:-20px;
  888. border:1px solid {color:container bg};
  889. z-index:999999;
  890. }
  891.  
  892. .sidenav a {
  893. width:20px;
  894. height:20px;
  895. display:inline-block;
  896. font-size:34px;
  897. line-height:80%;
  898. letter-spacing:0px;
  899. font-family: 'bromello';
  900. padding:6px;
  901. margin:3px;
  902. opacity:1.0;
  903. background:{color:navi};
  904. color:{color:text};
  905. border-radius:0%;
  906. text-shadow:none;
  907. -webkit-transition: all 0.3s ease;
  908. -moz-transition: all 0.3s ease;
  909. -o-transition: all 0.3s ease;
  910. }
  911.  
  912. .sidenav a:hover{
  913. background:{color:accent};
  914. color:{color:posts bg};
  915. transform:scale(1.3) rotate(10deg);
  916. -webkit-transform:scale(1.3) rotate(10deg);
  917. }
  918.  
  919.  
  920.  
  921. /*----- Second Nav -----*/
  922.  
  923. .nav2 {
  924. position:absolute;
  925. top: 100px;
  926. right: 110px;
  927. height:80px;
  928. width:20px;
  929. background: none;
  930. text-align:right;
  931. margin:0px;
  932. padding:4px;
  933. z-index:999999;
  934. }
  935. .nav2 a:before {
  936. content: "";
  937. position: absolute;
  938. z-index: -1;
  939. top: 0;
  940. left: 0;
  941. right: 0;
  942. bottom: 0;
  943. background:{color:accent};
  944. -webkit-transform: scaleX(0);
  945. transform: scaleX(0);
  946. -webkit-transform-origin: 0 50%;
  947. transform-origin: 0 50%;
  948. -webkit-transition-property: transform;
  949. transition-property: transform;
  950. -webkit-transition-duration: 0.5s;
  951. transition-duration: 0.5s;
  952. -webkit-transition-timing-function: ease-out;
  953. transition-timing-function: ease-out;
  954.  
  955. }
  956.  
  957. .nav2 a {
  958. width:110px;
  959. height:11px;
  960. font-size:8px;
  961. line-height:100%;
  962. vertical-align:middle;
  963. letter-spacing:1.5px;
  964. text-transform:uppercase;
  965. text-align:center;
  966. font-family: 'Raleway';
  967. padding:4px;
  968. padding-top:7px;
  969. margin:3px;
  970. font-weight:600;
  971. opacity:1.0;
  972. background:{color:navi};
  973. color:{color:text};
  974. border-radius:0%;
  975. text-shadow:none;
  976. display: inline-block;
  977. vertical-align: middle;
  978. -webkit-transform: translateZ(0);
  979. transform: translateZ(0);
  980. box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  981. -webkit-backface-visibility: hidden;
  982. backface-visibility: hidden;
  983. -moz-osx-font-smoothing: grayscale;
  984. -webkit-transition-property: color;
  985. transition-property: color;
  986. -webkit-transition-duration: 0.5s;
  987. transition-duration: 0.5s;
  988. }
  989.  
  990. .nav2 a:hover, .nav2 a:focus, .nav2 a:active {
  991. color:{color:posts bg};
  992. }
  993. .nav2 a:hover:before, .nav2 a:focus:before, .nav2 a:active:before {
  994. -webkit-transform: scaleX(1);transform: scaleX(1);-webkit-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
  995. }
  996.  
  997.  
  998.  
  999. /* ╰ ° ICONS N STUFF *° */
  1000.  
  1001. #icon, #icon2 {
  1002. display:static;
  1003. position:relative;
  1004. z-index:999999;
  1005. padding:0px;
  1006. -webkit-transition: all .4s ease-out;
  1007. -moz-transition: all .4s ease-out;
  1008. -o-transition: all .4s ease-out;
  1009. -ms-transition: all .4s ease-out;
  1010. transition: all .4s ease-out;
  1011. }
  1012.  
  1013. #icon {
  1014. top: 245px;
  1015. left:20px;
  1016. width:55px;
  1017. height:55px;
  1018. }
  1019.  
  1020. #icon2 {
  1021. top: 232px;
  1022. left:60px;
  1023. width:30px;
  1024. height:30px;
  1025. }
  1026.  
  1027. #icon img, #icon2 img {
  1028. width:auto;
  1029. height:auto;
  1030. background-color: {color:icon border};
  1031. overflow:hidden;
  1032. border-radius: 50%;
  1033. }
  1034.  
  1035. #icon img {
  1036. border:6px solid {color:icon border};
  1037. }
  1038.  
  1039. #icon2 img {
  1040. border:5px solid {color:icon border};
  1041.  
  1042. }
  1043.  
  1044.  
  1045. /* ╰ ° ENTRIES *° */
  1046.  
  1047. .tabs {
  1048. width:100%;
  1049. margin-left:0px;
  1050. display:inline-block;
  1051. }
  1052.  
  1053. .bigcon {
  1054. width:600px;
  1055. height:340px;
  1056. position:fixed;
  1057. top:45%;
  1058. left:50%;
  1059. -webkit-transform:translate(-50%,-50%);
  1060. transform:translate(-50%,-50%);
  1061. overflow-y:none;
  1062. overflow-x:none;
  1063. padding:0px;
  1064. opacity:0.95;
  1065. background-color:{color:container bg};
  1066. }
  1067.  
  1068. /*----- TAB CONTENT -----*/
  1069.  
  1070. .tab {
  1071. display:none;
  1072. }
  1073.  
  1074. .tab.active {
  1075. display:block;
  1076. }
  1077.  
  1078. .entries {
  1079. width:455px;
  1080. height:275px;
  1081. margin:15px;
  1082. margin-top:0px;
  1083. position:absolute;
  1084. top: 55px;
  1085. left:110px;
  1086. text-align:justify;
  1087. overflow-y:auto;
  1088. overflow-x:hidden;
  1089. padding: 0px 10px 10px 0px;
  1090. opacity:1.0;
  1091. }
  1092.  
  1093. .posts {
  1094. width: 400px;
  1095. padding: 20px;
  1096. background: {color:posts bg};
  1097. margin-bottom:0px;
  1098. margin-left:15px;
  1099. margin-top:40px;
  1100. text-align:justify;
  1101. }
  1102. .posts:first-child {
  1103. margin-top:0px;
  1104. }
  1105.  
  1106.  
  1107. #tab {
  1108. padding:20px;
  1109. overflow:auto;
  1110. }
  1111.  
  1112. /* ╰ ° DESCRIPTION *° */
  1113.  
  1114. .cont {
  1115. position: relative;
  1116. top:0px;
  1117. left:0px;
  1118. width:120px;
  1119. height:340px;
  1120. background:{color:sidebar bg};
  1121. z-index:-9;
  1122. -webkit-transition: all .4s ease-out;
  1123. -moz-transition: all .4s ease-out;
  1124. -o-transition: all .4s ease-out;
  1125. -ms-transition: all .4s ease-out;
  1126. transition: all .4s ease-out;
  1127. -moz-osx-font-smoothing: grayscale;
  1128. -webkit-transition-property: all;
  1129. transition-property: all;
  1130. -webkit-transition-duration: 0.3s;
  1131. transition-duration: 0.3s;
  1132. }
  1133.  
  1134. .description{
  1135. display:static;
  1136. position:relative;
  1137. top:20px;
  1138. left:15px;
  1139. width:100px;
  1140. height:120px;
  1141. padding:0px;
  1142. margin-bottom:-5px;
  1143. border: 0px solid {color:accent};
  1144. background:none;
  1145. -webkit-transform: translateZ(0);
  1146. transform: translateZ(0);
  1147. box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  1148. -webkit-backface-visibility: hidden;
  1149. backface-visibility: hidden;
  1150. }
  1151.  
  1152.  
  1153. #desc {
  1154. position:absolute;
  1155. top: 0;
  1156. left:0;
  1157. width:70px;
  1158. height:110px;
  1159. margin:0px;
  1160. text-align:justify;
  1161. padding:5px 5px 5px 5px;
  1162. border:5px solid {color:container bg};
  1163. overflow-y:auto;
  1164. overflow-x:none;
  1165. background:{color:container bg};
  1166. }
  1167.  
  1168.  
  1169. /* ╰ ° PAGINATION *° */
  1170.  
  1171. #pagination {
  1172. padding:5px;
  1173. letter-spacing:1px;
  1174. text-transform:uppercase;
  1175. font-weight:700;
  1176. font-size:7.5px;
  1177. text-align:center;
  1178. word-spacing:3px;
  1179. margin-top:0px;
  1180. width:140px;
  1181. position:absolute;
  1182. left:20px;
  1183. top:250px;
  1184. z-index:99999999;
  1185. }
  1186. #pagination a{
  1187. color:{color:text};
  1188. }
  1189. #pagination a:hover{
  1190. color:{color:accent};
  1191. }
  1192. #backward{
  1193. position:absolute;
  1194. left:0px;
  1195. top:63px;
  1196. }
  1197. #forward{
  1198. position:absolute;
  1199. left:65px;
  1200. top:0px;
  1201. }
  1202.  
  1203.  
  1204.  
  1205. /* ╰ ° CHAT CODE *° */
  1206.  
  1207. .convo li{
  1208. margin:0 0 5px;border-radius:1em;padding:.5em 10px;max-width:75%;clear:both;position:relative;
  1209.  
  1210. }
  1211.  
  1212. .user_1 b,.user_3 b,.user_5 b,.user_7 b,.user_9 b,.user_11 b,.user_13 b,.user_15 b,.user_17 b,.user_19 b,.user_21 b, .user_23 b,.user_25 b,.user_27 b,.user_29 b,.user_31 b, .user_33 b,.user_35 b,.user_37 b,.user_39 b, .user_41 b,.user_43 b,.user_45 b,.user_47 b,.user_49 b,.user_51 b,.user_53 b,.user_55 b,.user_57 b,.user_59 b{color:{color:posts bg};}
  1213.  
  1214. .user_2 b,.user_4 b,.user_6 b,.user_8 b,.user_10 b,.user_12 b, .user_14 b,.user_16 b,.user_18 b,.user_20 b,.user_22 b, .user_24 b,.user_26 b,.user_28 b,.user_30 b,.user_32 b, .user_34 b,.user_36 b,.user_38 b,.user_40 b, .user_42 b,.user_44 b,.user_46 b,.user_48 b,.user_50 b,.user_52 b, .user_54 b,.user_56 b,.user_58 b,.user_60 b{color:{color:text};}
  1215.  
  1216. .user_1,.user_3,.user_5,.user_7,.user_9,.user_11, .user_13,.user_15,.user_17,.user_19, .user_21,.user_23,.user_25,.user_27,.user_29, .user_31,.user_33,.user_35,.user_37,.user_39, .user_41,.user_43,.user_45,.user_47,.user_49,.user_51, .user_53,.user_55,.user_57,.user_59{
  1217. float:left;background:{color:accent};color:{color:posts bg};left:3px
  1218. }
  1219. .user_1::after,.user_3::after,.user_5::after,.user_7::after,.user_9::after,.user_11::after, .user_13::after,.user_15::after,.user_17::after,.user_19::after, .user_21::after,.user_23::after,.user_25::after,.user_27::after,.user_29::after, .user_31::after,.user_33::after,.user_35::after,.user_37::after,.user_39::after, .user_41::after,.user_43::after,.user_45::after,.user_47::after,.user_49::after,.user_51::after, .user_53::after,.user_55::after,.user_57::after,.user_59::after{
  1220. content:"";position:absolute;left:-.5em;bottom:0;width:.5em;height:1em;border-right:.5em solid {color:accent};border-bottom-right-radius:1em .5em
  1221.  
  1222. }
  1223. .user_2,.user_4,.user_6,.user_8,.user_10,.user_12, .user_14,.user_16,.user_18,.user_20,.user_22, .user_24,.user_26,.user_28,.user_30,.user_32, .user_34,.user_36,.user_38,.user_40, .user_42,.user_44,.user_46,.user_48,.user_50,.user_52, .user_54,.user_56,.user_58,.user_60{
  1224. right:3px;float:right;background-color:{color:container bg};color:{color:text};
  1225.  
  1226. }
  1227. .user_2::after,.user_4::after,.user_6::after,.user_8::after,.user_10::after,.user_12::after, .user_14::after,.user_16::after,.user_18::after,.user_20::after, .user_22::after,.user_24::after,.user_26::after,.user_28::after,.user_30::after, .user_32::after,.user_34::after,.user_36::after,.user_38::after,.user_40::after, .user_42::after,.user_44::after,.user_46::after,.user_48::after,.user_50::after,.user_52::after, .user_54::after,.user_56::after,.user_58::after,.user_60::after{content:"";position:absolute;right:-.5em;bottom:0;width:.5em;height:1em;border-left:.5em solid {color:container bg};border-bottom-left-radius:1em .5em;
  1228.  
  1229. }
  1230.  
  1231. .convo {
  1232. overflow: hidden;
  1233. list-style-type: none;
  1234. padding: 0;
  1235. margin: 0;
  1236. }
  1237.  
  1238.  
  1239. /* ╰ ° ASKS N ANSWERS *° */
  1240.  
  1241. #asker{
  1242. font-weight:700;
  1243. letter-spacing:1px;
  1244. text-transform:uppercase;
  1245. margin-left:0px;
  1246. background-color:{color:posts bg};
  1247. padding:1px;
  1248. margin-top:0px;
  1249. font-size:8px;
  1250. }
  1251.  
  1252. #askimg{
  1253. width:40px;
  1254. height:40px;
  1255. position:relative;
  1256. left:0px;
  1257. margin-top:-10px;
  1258. border:5px solid {color:icon border};
  1259. border-radius:50%;
  1260. }
  1261.  
  1262. #answer {
  1263. width:320px;
  1264. margin-left:40px;
  1265. margin-top:-62px;
  1266. background:{color:posts bg};
  1267. padding:20px;
  1268. font-size:8px;
  1269. text-align:center;
  1270. border-radius:0px;
  1271. border:1px solid {color:container bg};
  1272. letter-spacing:1px;
  1273. text-transform:uppercase;
  1274.  
  1275. }
  1276.  
  1277.  
  1278. /* ╰ ° QUOTES *° */
  1279.  
  1280. #quote {
  1281. font-size:8px;
  1282. text-align: left;
  1283. font-weight: 900;
  1284. line-height:180%;
  1285. opacity:0.6;
  1286. padding:8px;
  1287. text-transform:uppercase;
  1288. letter-spacing: 1px;
  1289. padding-bottom: 10px;
  1290. background:{color:container bg};
  1291. }
  1292.  
  1293. #quotesrc {
  1294. font-size:9px;
  1295. font-family: 'roboto', sans-serif ;
  1296. letter-spacing:0.5px;
  1297. text-align:right;
  1298. font-style:italic;
  1299. text-transform:uppercase;
  1300. color:{color:text};}
  1301. #quote:before {
  1302. content: "❝ ";
  1303. font-size:16px;
  1304. font-family: 'roboto', sans-serif ;
  1305. color:{color:underline};}
  1306. #quote:after {
  1307. content: " ❞";
  1308. font-size:16px;
  1309. font-family: 'roboto', sans-serif ;
  1310. color:{color:underline};}
  1311.  
  1312.  
  1313. /* ╰ ° TUNES *° */
  1314.  
  1315. #musicinfo {
  1316. margin-left: 60px;
  1317. margin-top: -50px;
  1318. margin-bottom: -25px;
  1319. font-size:8px;
  1320. letter-spacing:1px;
  1321. text-transform:uppercase;
  1322. text-align:left;
  1323. position: relative;
  1324. }
  1325.  
  1326. .audios {
  1327. text-align:left;
  1328. }
  1329.  
  1330. .audios img{
  1331. width:40px;
  1332. height:40px;
  1333. border-radius:50%;
  1334. border:6px solid {color:icon border};
  1335. }
  1336.  
  1337.  
  1338. /* ╰ ° NOTES *° */
  1339.  
  1340. .note {
  1341. color:{color:text};
  1342. text-transform:uppercase;
  1343. width:290px;
  1344. font-style:normal;
  1345. letter-spacing:1px;
  1346. font-size: 7px;
  1347. text-align:left;
  1348. line-height:130%;
  1349. margin-left:-5px;}
  1350.  
  1351.  
  1352. .note a {
  1353. color:{color:link};
  1354. }
  1355.  
  1356. .note a:hover{
  1357. color:{color:linkhover};
  1358. }
  1359.  
  1360. .note li {
  1361. list-style-type:none;
  1362. padding:4px 15px 4px 15px;
  1363. text-align:left;
  1364. -moz-transition-duration:0.5s;
  1365. -webkit-transition-duration:0.5s;
  1366. -o-transition-duration:0.5s;}
  1367.  
  1368. .note img.avatar {
  1369. margin-right: 10px;
  1370. display:none;
  1371. width: 16px;
  1372. height: 16px;
  1373.  
  1374. }
  1375.  
  1376.  
  1377. /* ╰ ° TAGS N PERMALINKS *° */
  1378.  
  1379. .tags, .permalink {
  1380. text-transform:uppercase;
  1381. -webkit-transition: all 0.8s ease;
  1382. -moz-transition: all 0.8s ease;
  1383. transition: all 0.8s ease;
  1384. }
  1385.  
  1386. .tags {
  1387. font-size:7px;
  1388. letter-spacing:1.5px;
  1389. padding-top:10px;
  1390. margin-top:-5px;
  1391. margin-bottom:0px;
  1392. margin-right:-25px;
  1393. opacity:0;
  1394. line-height:150%;
  1395. z-index:999;
  1396. text-align:right;
  1397.  
  1398. }
  1399. .tags:hover {
  1400. opacity:1;
  1401. margin-right:12px;
  1402. }
  1403.  
  1404. .tags a, .permalink a {
  1405. color:{color:link};
  1406. }
  1407.  
  1408. .tags a:hover{
  1409. color:{color:linkhover};
  1410. text-shadow:none;
  1411. }
  1412.  
  1413. .permalink a:hover{
  1414. color: {color:text};
  1415. }
  1416.  
  1417. .permalink {
  1418. font-size:7.5px;
  1419. max-width:135px;
  1420. text-align:right;
  1421. letter-spacing:1px;
  1422. font-weight:500;
  1423. margin-top:-10px;
  1424. margin-left:285px;
  1425. margin-bottom:-5px;
  1426. background:{color:container bg};
  1427. border:3px double {color:posts bg};
  1428. color:{color:text};
  1429. padding:3px;
  1430. opacity:1;
  1431. }
  1432.  
  1433.  
  1434.  
  1435. /* ╰ ° COPYRIGHT - DON'T_TOUCH_THIS.MP3 *° */
  1436.  
  1437. .credit, .credit a {
  1438. position:fixed;
  1439. left:10px;
  1440. bottom:10px;
  1441. width:11px;
  1442. height:11px;
  1443. border-radius:50%;
  1444. background-color:{color:posts bg};
  1445. font-size:11px;
  1446. color:{color:text};
  1447. letter-spacing:1px;
  1448. padding:5px;
  1449. line-height:100%;
  1450. font-weight:900;
  1451. opacity:1;
  1452. -webkit-transition: all 0.5s ease;
  1453. -moz-transition: all 0.5s ease;
  1454. transition: all 0.5s ease;
  1455. }
  1456.  
  1457. .credit a:hover {
  1458. opacity:1;
  1459. background-color:{color:accent};
  1460. color:{color:posts bg};
  1461. }
  1462.  
  1463. .credit:hover {
  1464. opacity:1;
  1465. background-color:{color:accent};
  1466. }
  1467.  
  1468. .credit:hover .lnr-power-switch {
  1469. color:{color:posts bg};
  1470. }
  1471. .credit a span{
  1472. width: 58px;
  1473. height: auto;
  1474. padding: 3px;
  1475. left: 0%;
  1476. margin-left: 15px;
  1477. font-weight: 400;
  1478. font-size:6.5px;
  1479. text-align: center;
  1480. border: 4px solid {color:posts bg};
  1481. background-color:{color:posts bg};
  1482. text-indent: 0px;
  1483. text-transform:uppercase;
  1484. border-radius: 5px;
  1485. position: absolute;
  1486. color:{color:text};
  1487. pointer-events: none;
  1488. opacity: 0;
  1489. text-shadow:none;
  1490. transition: all 0.3s ease-in-out;
  1491. -webkit-transform: translate3d(20px,20px,0px) rotate(45deg);
  1492. transform: translate3d(20px,20px,0px) rotate(45deg);
  1493. }
  1494. .credit a span:before,
  1495. .credit a span:after{
  1496. content: '';
  1497. position: absolute;
  1498. bottom: -10px;
  1499. left: 50%;
  1500. margin-left: -21px;
  1501. width: 0;
  1502. height: 0;
  1503. border-left: 6px solid transparent;
  1504. border-right: 6px solid transparent;
  1505. border-top: 6px solid {color:posts bg};
  1506. }
  1507.  
  1508. .credit a:hover span{
  1509. opacity: 0.9;
  1510. -webkit-transform: translate3d(-20px,-55px,0px) rotate(0deg);
  1511. transform: translate3d(-20px,-55px,0px) rotate(0deg);
  1512. }
  1513.  
  1514. .credit span b{
  1515. font-style:italic;
  1516. font-weight:900;
  1517. text-transform:lowercase;
  1518. letter-spacing:0px;
  1519. font-size:12px;
  1520. }
  1521.  
  1522.  
  1523.  
  1524.  
  1525. {CustomCSS}</style></head><body>
  1526.  
  1527.  
  1528.  
  1529. <div class="bigcon">
  1530.  
  1531. <div class="cont">
  1532.  
  1533. <div class="sidenav">
  1534. <a href="{text:link 1 url}" title="{text:link 1 title}">a.</a>
  1535. <a href="{text:link 2 url}" title="{text:link 2 title}">b.</a>
  1536. <a href="{text:link 3 url}" title="{text:link 3 title}">c.</a>
  1537. <a href="{text:link 4 url}" title="{text:link 4 title}">d.</a>
  1538. </div>
  1539.  
  1540. <div class="title">{text:title}</div>
  1541.  
  1542. <div id="icon"><img src="{image:icon}" class="hvr-grow-rotate"></div>
  1543. <div id="icon2"><img src="{image:icon2}" class="hvr-grow-rotate"></div>
  1544.  
  1545. <div class="description">
  1546. <div id="desc">{Description}</div>
  1547. </div>
  1548.  
  1549. <div id="pagination">{block:Pagination} {block:PreviousPage}<a href="{PreviousPage}" title="previous" id="backward"><span class="lnr lnr-arrow-left"></span></a>{/block:PreviousPage} {block:NextPage}<a href="{NextPage}" title="next" id="forward"><span class="lnr lnr-arrow-right"></span></a>{/block:NextPage}{/block:Pagination}
  1550. </div>
  1551.  
  1552. </div>
  1553.  
  1554.  
  1555.  
  1556. <div class="tabs">
  1557. <ul class="tab-links">
  1558. <li class="active"><a href="#tab1" title="{text:tab 1 title}"><b class="lnr lnr-power-switch"></b></a></li>
  1559. <li><a href="#tab2" title="{text:tab 2 title}"><b class="lnr lnr-earth"></b></a></li>
  1560. <li><a href="#tab3" title="{text:tab 3 title}"><b class="lnr lnr-menu"></b></a></li>
  1561. </ul>
  1562. </div>
  1563.  
  1564.  
  1565.  
  1566.  
  1567. <!-- --------------------------- TABS -------------------------- -->
  1568.  
  1569. <div class="tabs">
  1570.  
  1571. <!-- --------------------------- TAB 1 -------------------------- -->
  1572.  
  1573. <div id="tab1" class="tab active">
  1574. <div class="entries">
  1575.  
  1576.  
  1577.  
  1578. {block:Posts}
  1579. <div class="posts">
  1580.  
  1581. {block:Text}<h1>{block:Title}{Title}{/block:Title}</h1>{Body}{/block:Text}
  1582.  
  1583. {block:Photo}<center>{LinkOpenTag}<img src="{PhotoURL-500}" alt="{PhotoAlt}"/>{LinkCloseTag}</center>{block:Caption}{Caption}{/block:Caption}
  1584. {/block:Photo}
  1585.  
  1586. {block:Photoset}{Photoset}{block:Caption}{Caption}{/block:Caption}{/block:Photoset}
  1587.  
  1588. {block:Link}<h1><a href="{URL}" {Target}>{Name}</a></h1>{block:Description}{Description}{/block:Description}{/block:Link}
  1589.  
  1590. {block:Quote}<div id="quote">{Quote}</div><br>{block:Source}<b><div id="quotesrc">{Source}</div></b>{/block:Source}{/block:Quote}
  1591.  
  1592. {block:Audio}<div class="audios">{block:AlbumArt}<img src="{AlbumArtURL}" />{/block:AlbumArt}
  1593. <div id="musicinfo">
  1594. <span class="audio">{AudioPlayerWhite}</span>
  1595. {block:TrackName}<b>Title:</b> {TrackName}<br />{/block:TrackName}
  1596. {block:Artist}<b>Artist:</b> {Artist}<br />{/block:Artist}
  1597. {/block:ExternalAudio}</div>
  1598. <br><br>
  1599. {block:Caption}{Caption}{/block:Caption}
  1600. </div>
  1601. {/block:Audio}
  1602.  
  1603. {block:Video}{Video-250}
  1604. {block:Caption}{Caption}{/block:Caption}
  1605. {/block:Video}
  1606.  
  1607. {block:Chat}
  1608. {block:Title}
  1609. <h2>{Title}</h2>{/block:Title}<br>
  1610. <ul class="convo">{block:Lines}<li class="line_{Alt} user_{UserNumber}">{block:Label}<b>{Label}</b>{/block:Label}
  1611. {Line}</li>{/block:Lines}</ul>
  1612. {/block:Chat}
  1613.  
  1614. {block:Answer}<img src="{AskerPortraitURL-40}" id="askimg"><div id="asker"><b>{Asker}:</b></div><div id="answer">{Question}</div>{Answer}{/block:Answer}
  1615.  
  1616.  
  1617. </div>
  1618.  
  1619.  
  1620. {block:Date}
  1621. <div class="permalink">
  1622. <a href="{Permalink}" class="hvr-underline-from-center" title="{NoteCount} notes">{TimeAgo}</a>
  1623. {block:RebloggedFrom} · <a href="{ReblogParentURL}" title="via"><span class="lnr lnr-location"></span></a> · <a href="{ReblogRootURL}" title="source"><span class="lnr lnr-link"></span></a>{/block:RebloggedFrom} · <a href="{ReblogURL}" title="reblog"><span class="lnr lnr-undo"></span></a>{/block:permalinkpage}
  1624. </div>
  1625. {/block:Date}
  1626.  
  1627.  
  1628.  
  1629.  
  1630. {block:HasTags}<div class="tags">{block:Tags} <a href="{TagUrl}"><span class="lnr lnr-tag"></span> {Tag}</a>{/block:Tags}</div>{/block:HasTags}
  1631.  
  1632. {block:PostNotes}
  1633. <div class="note">
  1634. {PostNotes}
  1635. </div>
  1636. {/block:PostNotes}
  1637.  
  1638. <!-- {block:NoRebloggedFrom}
  1639. {block:RebloggedFrom}{ReblogParentName}{/block:RebloggedFrom}
  1640. {/block:NoRebloggedFrom} -->
  1641.  
  1642. {block:ContentSource}<!-- {SourceURL}
  1643. {block:SourceLogo}<img src="{BlackLogoURL}"width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />{/block:SourceLogo}
  1644. {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
  1645. {/block:ContentSource}
  1646.  
  1647.  
  1648. {/block:Posts}
  1649.  
  1650.  
  1651.  
  1652.  
  1653.  
  1654. </div><!---end of tab1--->
  1655. </div><!---end of tab--->
  1656.  
  1657.  
  1658. <!-- -------------------------- TAB 2 -------------------------- -->
  1659.  
  1660.  
  1661. <div id="tab2" class="tab">
  1662. <div class="entries">
  1663. <div id="tab">
  1664.  
  1665. <div class="boom">
  1666. <img src="{image:nav pic1}" id="huh1">
  1667. <img src="{image:nav pic2}" id="huh2">
  1668.  
  1669. <div class="blurb">
  1670. <div class="boomtext">
  1671. <span class="lnr lnr-leaf sprout"></span>
  1672. <div style="height:100px; overflow:auto;">
  1673. {text:blurb text}</div>
  1674. </div>
  1675. </div>
  1676. </div>
  1677.  
  1678. <div class="nav2">
  1679. <a href="{text:tablink 1 url}">{text:tablink 1 title}</a>
  1680. <a href="{text:tablink 2 url}">{text:tablink 2 title}</a>
  1681. <a href="{text:tablink 3 url}">{text:tablink 3 title}</a>
  1682. <a href="{text:tablink 4 url}">{text:tablink 4 title}</a>
  1683. <a href="{text:tablink 5 url}">{text:tablink 5 title}</a>
  1684. </div>
  1685.  
  1686. </div>
  1687. </div>
  1688. </div>
  1689.  
  1690.  
  1691. <!-- -------------------------- TAB 3 -------------------------- -->
  1692.  
  1693. <div id="tab3" class="tab">
  1694. <div class="entries">
  1695. <div id="tab">
  1696.  
  1697.  
  1698.  
  1699. <div class="social">
  1700.  
  1701.  
  1702.  
  1703. <div class="lockscreen">
  1704. <img src="{image:phone bg}" id="lockbg">
  1705. <div class="lockborder"></div>
  1706. <div style="line-height:70%;font-size:6px; z-index:99999;position:absolute;top:2px;left:2px;"><i class="fa fa-circle" style="font-size:5px;"></i><i class="fa fa-circle" style="font-size:5px;"></i><i class="fa fa-circle" style="font-size:5px;"></i><i class="fa fa-circle" style="font-size:5px;"></i><i class="fa fa-circle-thin" style="font-size:5px;"></i> <i class="fa fa-wifi" style="font-size:8px;"></i> AT&T <i class="fa fa-lock" style="font-size:8px;margin-left:13px;"></i></div>
  1707. <div style="font-size:6px; z-index:99999;position:absolute;top:0px;right:2px;text-align:right"> 63% <i class="fa fa-battery-3" style="font-size:8px;"></i></div>
  1708. <div style="text-align:center;font-family:'work sans'; font-weight:100;font-size:48px; z-index:99999;position:absolute;top:35px;left:21px;">2:15<br><span style="font-size:9px;">Thursday, 17 November</span></div>
  1709. <div style="text-align:center;font-family:'work sans'; font-weight:100;font-size:8px; z-index:99999;position:absolute;bottom:5px;left:55px;"><i class="fa fa-circle"></i> <i class="fa fa-circle"></i> <i class="fa fa-camera"></i> </div>
  1710.  
  1711.  
  1712.  
  1713. <div id="notifs">
  1714. <hr><!---- EDIT FROM HERE ONWARDS! you can add as many as you want here --->
  1715. <b>Contact Name</b> <i>1m ago</i><br>put your notif here<br><i>slide to reply</i><hr>
  1716. <b>Someone's Popular</b> <i>1hr ago</i><br>Missed Call <br><i>slide to view</i><hr>
  1717. <b>App here</b> <i>Yesterday 9:08</i><br>it could be an app notif too<br><i>slide to view</i>
  1718. <!----- END OF NOTIFS (make sure the last notif doesnt have a < hr > after it ---->
  1719. </div>
  1720. </div>
  1721.  
  1722. <div class="instagram">
  1723. <!------ INSTA STATISTICS --->
  1724. <div style="text-align:center;font-size:14px;font-weight:900; z-index:99999;position:absolute;top:10px;left:12px;letter-spacing:0px;">154<br><span style="font-size:8px;font-weight:500;opacity:0.5;letter-spacing:0.5px;">posts</span> </div>
  1725. <div style="text-align:center;font-size:14px;font-weight:900; z-index:99999;position:absolute;top:10px;left:45px;letter-spacing:0px;">3.2M<br><span style="font-size:8px;font-weight:500;opacity:0.5;letter-spacing:0.5px;">followers</span> </div>
  1726. <div style="text-align:center;font-size:14px;font-weight:900; z-index:99999;position:absolute;top:10px;left:90px;letter-spacing:0px;">236<br><span style="font-size:8px;font-weight:500;opacity:0.5;letter-spacing:0.5px;">following</span> </div>
  1727.  
  1728. <div style="font-family:'raleway';text-align:right;font-size:15px;font-weight:400; z-index:99999;position:absolute;top:10px;right:60px;letter-spacing:1px;">username</div>
  1729. <div style="text-align:right;font-size:7.5px;font-weight:600;padding:2px; line-height:100%;text-transform:uppercase;color:{color:posts bg};background:{color:bold};font-style:italic;z-index:99999;position:absolute;top:25px;right:60px;letter-spacing:1px;opacity:0.7;">following</div>
  1730. <!---- END OF INSTA STATS --->
  1731.  
  1732. <img src="{image:instagram icon}" id="igicon" class="hvr hvr-grow-rotate">
  1733. <div id="feed">
  1734. <div class="heart" style="position:absolute;top:2px;left:10px;padding-top:20px;"><i class="fa fa-heart"></i></div><img src="{image:instagram1}" id="insta1">
  1735. <div class="heart" style="position:absolute;top:2px;left:73px;padding-top:20px;"><i class="fa fa-heart"></i></div><img src="{image:instagram2}" id="insta2">
  1736. <div class="heart" style="position:absolute;top:2px;left:136px;padding-top:20px;"><i class="fa fa-heart"></i></div><img src="{image:instagram3}" id="insta3">
  1737. <div class="heart" style="position:absolute;top:2px;left:199px;padding-top:20px;"><i class="fa fa-heart"></i></div><img src="{image:instagram4}" id="insta4">
  1738. </div>
  1739. </div>
  1740.  
  1741.  
  1742. <div class="twitter">
  1743.  
  1744. <!----- START OF TWEET ----->
  1745. <img src="{image:twitter icon}" class="twicon hvr hvr-grow-rotate">
  1746. <div class="tweet"><b>@TWITTERUSER:</b> say what you wanna say here !! it can go for up to three lines i think</div>
  1747. <!----- END OF TWEET ----->
  1748. <!----- START OF TWEET ----->
  1749. <img src="{image:twitter icon}" class="twicon hvr hvr-grow-rotate" style="position:absolute; bottom:-10px;left:0px;">
  1750. <div class="tweet2"><b>@TWITTERUSER:</b> idk about 140 characters but keep it short and simple</div>
  1751. <!----- END OF TWEET ----->
  1752. <!----- START OF TWEET ----->
  1753. <img src="{image:twitter icon}" class="twicon hvr hvr-grow-rotate" style="position:absolute; bottom:-57px;left:0px;">
  1754. <div class="tweet3"><b>@TWITTERUSER:</b> and yet another tweet goes here yay cool fantastic</div>
  1755. <!----- END OF TWEET ----->
  1756.  
  1757. </div>
  1758.  
  1759.  
  1760. </div>
  1761.  
  1762.  
  1763.  
  1764.  
  1765. </div><!--- end of tab --->
  1766. </div><!--- end of entries --->
  1767. </div><!--- end of tab4 --->
  1768. </div><!--- end of tabs --->
  1769. </div><!--- end of bigcon --->
  1770.  
  1771.  
  1772.  
  1773.  
  1774.  
  1775. <!------- PLEASE DON'T REMOVE THE CREDIT! --------->
  1776.  
  1777. <div class="credit"><a href="http://cli.re/gK8B4r"><span>theme by <b>mattdarios</b></span><i class="lnr lnr-power-switch"></i></a></div>
  1778.  
  1779.  
  1780.  
  1781.  
  1782. </body>
  1783. </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!