API tools faq
paste
deersprouts

╰ ° 006: rosetta ( 4 tabs )

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