API tools faq
paste
juliaroleplays

CHARACTERS/MUSES PAGE: PETAL DANCE

juliaroleplays
Jul 22nd, 2018 (edited)
4,460
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 17.91 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html><head>
  2.  
  3. <title>{title}</title>
  4. <link rel="shortcut icon" href="{Favicon}">
  5. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  6.  
  7. <!--------
  8.  
  9. CHARACTERS/MUSES PAGE: PETAL DANCE by JULIAROLEPLAYS
  10.  
  11. ✴ please do not steal any part of this code for personal use
  12. ✴ if you have any questions or come across any errors, please feel free to send me a message
  13. ✴ Credit links can be found at juliaroleplays.tumblr.com/theme
  14. ✴ filtering script from http://isotope.metafizzy.co/
  15. ✴ hover effect from w3schools
  16. ✴ tumblr contorols by @cyantists
  17.  
  18. -------->
  19.  
  20. <!---------------- FONTS ---------------->
  21.  
  22. <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
  23.  
  24. <script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
  25.  
  26. <style type="text/css">
  27.  
  28.  
  29. /*---------------- SCROLLBAR ----------------*/
  30.  
  31. ::-webkit-scrollbar {
  32. width: 5px;
  33. height: 8px;
  34. }
  35.  
  36. ::-webkit-scrollbar-button {
  37. width: 5px;
  38. height: 0px;
  39. }
  40.  
  41. ::-webkit-scrollbar-thumb {
  42. background: #fff; /*---- scrollbar scroller ----*/
  43. }
  44.  
  45. ::-webkit-scrollbar-track {
  46. background: #000; /*---- scrollbar background ----*/
  47. }
  48.  
  49. /*---------------- GENERAL STYLING ----------------*/
  50.  
  51. body {
  52. margin: 0;
  53. background: #fff url(''); /*---- page background color/image ----*/
  54. background-attachment: fixed;
  55. -webkit-background-size: cover;
  56. -moz-background-size: cover;
  57. -o-background-size: cover;
  58. background-size: cover;
  59. background-position: bottom center;
  60. font-family: 'Open Sans', sans-serif;
  61. font-size: 12px;
  62. }
  63.  
  64. b, strong {
  65. color: #000; /*---- bold color----*/
  66. }
  67.  
  68. i, em {
  69. color: #000; /*---- italic color----*/
  70. }
  71.  
  72. a {
  73. font-size: 12px;
  74. color: #dbdbdb; /*---- link color/applies to navigation----*/
  75. text-decoration: none;
  76. transition: 0.8s;
  77. -webkit-transition: all 0.8s ease;
  78. -moz-transition: all 0.8s ease;
  79. -o-transition: all 0.8s ease;
  80. }
  81.  
  82. a:hover {
  83. color: #fff; /*---- link hover color/applies to navigation----*/
  84. transition: 0.8s;
  85. -webkit-transition: all 0.8s ease;
  86. -moz-transition: all 0.8s ease;
  87. -o-transition: all 0.8s ease;
  88. }
  89.  
  90. /*---------------- CONTAINER ----------------*/
  91.  
  92. #container {
  93. position: absolute;
  94. margin: auto;
  95. top: 0;
  96. right: 0;
  97. bottom: 0;
  98. left: 0;
  99. width: 1000px;
  100. height: 600px;
  101. background: #dbdbdb;
  102. overflow-y: scroll;
  103. }
  104.  
  105. /*---------------- SIDEBAR ----------------*/
  106.  
  107. #sidebar {
  108. position: fixed;
  109. width: 275px;
  110. height: 560px;
  111. padding: 20px;
  112. background: #000; /*---- sidebar background ----*/
  113. color: #fff; /*---- sidebar text color ----*/
  114. overflow-y: auto;
  115. z-index: 99999999;
  116. }
  117.  
  118. #title {
  119. margin-top: 25px;
  120. font-family: raleway; /*---- title font ----*/
  121. font-size: 20px;
  122. font-weight: 700;
  123. text-align: center;
  124. text-transform: uppercase;
  125. letter-spacing: 3px;
  126. color: #fff; /*---- title color ----*/
  127. }
  128.  
  129. #navigation {
  130. margin-top: 10px;
  131. font-family: raleway; /*---- navigation links ----*/
  132. text-align: center;
  133. text-transform: uppercase;
  134. }
  135.  
  136. #navigation a {
  137. padding: 5px;
  138. transition: 0.8s;
  139. -webkit-transition: all 0.8s ease;
  140. -moz-transition: all 0.8s ease;
  141. -o-transition: all 0.8s ease;
  142. }
  143.  
  144. #description {
  145. width: 230px;
  146. margin: auto;
  147. margin-top: 10px;
  148. }
  149.  
  150. .anger {
  151. height: 50px;
  152. }
  153.  
  154. /*-------- FILTERS --------*/
  155.  
  156. .category {
  157. width: 275px;
  158. margin: auto;
  159. }
  160.  
  161. .category h1 {
  162. margin-top: 15px;
  163. font-family: raleway; /*---- button group title font ----*/
  164. font-size: 15px;
  165. font-weight: 700;
  166. text-align: center;
  167. text-transform: uppercase;
  168. letter-spacing: 3px;
  169. color: #fff; /*---- button group title color ----*/
  170. }
  171.  
  172. button {
  173. display: inline-block;
  174. width: 130px;
  175. padding: 5px;
  176. margin: 2px;
  177. margin-top: 5px;
  178. font-family: raleway; /*---- button text font ----*/
  179. font-size: 11px;
  180. font-weight: 800;
  181. text-align: center;
  182. text-transform: uppercase;
  183. color: #000; /*---- button text color ----*/
  184. border: none;
  185. outline: none;
  186. background: #dbdbdb; /*---- button color ----*/
  187. transition: 0.8s;
  188. -webkit-transition: all 0.8s ease;
  189. -moz-transition: all 0.8s ease;
  190. -o-transition: all 0.8s ease;
  191. }
  192.  
  193. button:hover {
  194. color: #000; /*---- button text on hover ----*/
  195. background: #fff; /*---- button background on hover ----*/
  196. transition: 0.8s;
  197. -webkit-transition: all 0.8s ease;
  198. -moz-transition: all 0.8s ease;
  199. -o-transition: all 0.8s ease;
  200. }
  201.  
  202. .button:active,.button.is-checked {
  203. color: #000; /* selected category text color */
  204. background: #fff; /* selected catergory background color */
  205.  
  206. }
  207.  
  208. .button-group {
  209. display: block;
  210. }
  211.  
  212. /*-------- BOXES --------*/
  213.  
  214. .boxcontain {
  215. position: fixed;
  216. top: 25px;
  217. margin-bottom: 100px;
  218. margin-left: 345px;
  219. }
  220.  
  221. .box {
  222. position: relative;
  223. height: 250px;
  224. width: 200px;
  225. margin: 5px;
  226. color: #fff;
  227. background: #fff; /* box background color */
  228. }
  229.  
  230. .image {
  231. margin-left: 45px;
  232. margin-top: 20px;
  233. padding: 5px;
  234. border-radius: 100%;
  235. border: 1px solid #000; /* image border styling */
  236. }
  237.  
  238. .info {
  239. width: 180px;
  240. margin-left: 10px;
  241. margin-top: 20px;
  242. font-family: Raleway;
  243. }
  244.  
  245. .info h1 {
  246. margin-top: -10px;
  247. font-size: 20px;
  248. font-weight: 600;
  249. text-align: center;
  250. text-transform: uppercase;
  251. color: #000; /* name color */
  252. }
  253.  
  254. .info h2 {
  255. margin-top: -5px;
  256. font-size: 15px;
  257. text-align: center;
  258. color: #000; /* additional info color */
  259. }
  260.  
  261. .hover {
  262. position: absolute;
  263. bottom: 100%;
  264. left: 0;
  265. right: 0;
  266. height: 0;
  267. background-color: #000; /* hover background color */
  268. overflow: hidden;
  269. transition: 0.8s;
  270. -webkit-transition: all 0.8s ease;
  271. -moz-transition: all 0.8s ease;
  272. -o-transition: all 0.8s ease;
  273. }
  274.  
  275. .text {
  276. height: 230px;
  277. width: 180px;
  278. padding: 10px;
  279. margin: auto;
  280. overflow: auto;
  281. }
  282.  
  283. .box:hover .hover {
  284. bottom: 0;
  285. height: 100%;
  286. }
  287.  
  288. .hover h1 {
  289. padding: 5px;
  290. margin: 0;
  291. margin-top: 5px;
  292. font-family: Raleway;
  293. font-size: 18px;
  294. font-weight: 600;
  295. text-align: center;
  296. text-transform: uppercase;
  297. color: #fff; /* hover character name color */
  298. }
  299.  
  300. .links {
  301. margin: 0;
  302. font-weight: 600;
  303. text-align: center;
  304. text-transform: uppercase;
  305. }
  306.  
  307. .links a {
  308. color: #fff; /* link color */
  309. transition: 0.8s;
  310. -webkit-transition: all 0.8s ease;
  311. -moz-transition: all 0.8s ease;
  312. -o-transition: all 0.8s ease;
  313. }
  314.  
  315. .links a:hover {
  316. color: #dbdbdb; /* link hover color */
  317. transition: 0.8s;
  318. -webkit-transition: all 0.8s ease;
  319. -moz-transition: all 0.8s ease;
  320. -o-transition: all 0.8s ease;
  321. }
  322.  
  323. /*---------------- TUMBLR CONTROLS STUFF ----------------*/
  324.  
  325. iframe.tmblr-iframe {
  326. z-index:99999999999999!important;
  327. top: 3px!important;
  328. right:10px!important;
  329. opacity:0;
  330. padding-right:38px;
  331. /* delete invert(1) from here */
  332. /*filter:invert(1) contrast(150%);*/
  333. /*-webkit-filter:invert(1) contrast(150%);*/
  334. /*-o-filter:invert(1) contrast(150%);*/
  335. /*-moz-filter:invert(1) contrast(150%);*/
  336. /*-ms-filter:invert(1) contrast(150%);*/
  337. /* to here if your blog has a dark background */
  338. transform:scale(!);
  339. transform-origin: 100% 0;
  340. -webkit-transform:scale(.75);
  341. -webkit-transform-origin:100% 0;
  342. -o-transform:scale(.75);
  343. -o-transform-origin:100% 0;
  344. -moz-transform:scale(0.75);
  345. -moz-transform-origin:100% 0;
  346. -ms-transform:scale(.75);
  347. -ms-transform-origin:100% 0;
  348. transition: 0.8s;
  349. -webkit-transition: all 0.8s ease;
  350. -moz-transition: all 0.8s ease;
  351. -o-transition: all 0.8s ease;
  352. }
  353.  
  354. iframe.tmblr-iframe:hover {
  355. opacity: 0.6!important;
  356. transition: 0.8s;
  357. -webkit-transition: all 0.8s ease;
  358. -moz-transition: all 0.8s ease;
  359. -o-transition: all 0.8s ease;
  360. }
  361.  
  362. .hcontrols {
  363. position: fixed;
  364. top: 5px;
  365. right: 0;
  366. z-index: 999999999;}
  367.  
  368. .hcontrols svg {
  369. width: 20px;
  370. height: 20px;
  371. padding: 9px;}
  372.  
  373. .hcontrols svg path {
  374. fill: #000; /* tumblr controls gear color */
  375. }
  376.  
  377. /*---------------- CREDIT ---- DO NOT REMOVE/MINIMIZE----------------*/
  378.  
  379. .credit {
  380. position: fixed;
  381. bottom: 15px;
  382. right: 15px;
  383. }
  384.  
  385. .credit a {
  386. color: #000; /* CREDIT ICONS COLOR */
  387. background: #dbdbdb; /* CREDIT BACKGROUND COLOR */
  388. transition: 0.8s;
  389. -webkit-transition: all 0.8s ease;
  390. -moz-transition: all 0.8s ease;
  391. -o-transition: all 0.8s ease;
  392. opacity: .5;
  393. }
  394.  
  395. .credit a:hover {
  396. transition: 0.8s;
  397. -webkit-transition: all 0.8s ease;
  398. -moz-transition: all 0.8s ease;
  399. -o-transition: all 0.8s ease;
  400. opacity: 1;
  401. }
  402.  
  403.  
  404.  
  405. </style>
  406.  
  407. </head>
  408. <body>
  409.  
  410. <div id="container">
  411.  
  412.  
  413. <div id="sidebar">
  414.  
  415. <div id="title">page title</div>
  416.  
  417. <div id="navigation">
  418. <a href="">home</a> •
  419. <a href="">message</a> •
  420. <a href="">link 1</a> •
  421. <a href="">link 2</a>
  422. </div>
  423.  
  424. <div id="description">
  425. This is what the description of you page looks like. You can talk about what you're using this page for (FC directory, muses, verses, etc etc) and mention that the filters work with multiple criteria and that more inforamtion appears when you hover over any of the boxes!
  426. </div>
  427.  
  428. <!---------------- CATEGORY 1 START ---------------->
  429.  
  430. <div class="category">
  431. <h1>category</h1>
  432. <div class="button-group" data-filter-group="YOUR FILTER">
  433. <button class="button is-checked" data-filter="">any</button>
  434. <button class="button" data-filter=".">filter 1</button>
  435. <button class="button" data-filter=".">filter 2</button>
  436. <button class="button" data-filter=".">filter 3</button>
  437. <button class="button" data-filter=".">filter 4</button>
  438. </div>
  439. </div>
  440.  
  441. <!---------------- CATEGORY 1 END ---------------->
  442.  
  443. <!---------------- CATEGORY 2 START ---------------->
  444.  
  445. <div class="category">
  446. <h1>category</h1>
  447. <div class="button-group" data-filter-group="YOUR FILTER">
  448. <button class="button is-checked" data-filter="">any</button>
  449. <button class="button" data-filter=".">filter 5</button>
  450. <button class="button" data-filter=".">filter 6</button>
  451. <button class="button" data-filter=".">filter 7</button>
  452. <button class="button" data-filter=".">filter 8</button>
  453. <button class="button" data-filter=".">filter 9</button>
  454. </div>
  455. </div>
  456.  
  457. <!---------------- CATEGORY 2 END ---------------->
  458.  
  459.  
  460.  
  461. <!-------- COPY AND PASTE
  462.  
  463. <div class="category">
  464. <h1>CATEGORY TITLE</h1>
  465. <div class="button-group" data-filter-group="YOUR FILTER">
  466. <button class="button is-checked" data-filter="">any</button>
  467. <button class="button" data-filter="FILTER NAME">BUTTON NAME</button>
  468. <button class="button" data-filter="FILTER NAME">BUTTON NAME</button>
  469. <button class="button" data-filter="FILTER">BUTTON NAME</button>
  470. </div>
  471. </div>
  472.  
  473. -------->
  474.  
  475.  
  476. <!---------------- PASTE MORE CATEGORIES ABOVE THIS LINE ---------------->
  477.  
  478. </div>
  479.  
  480.  
  481. <!-------- START OF BOXES -------->
  482.  
  483. <div class="boxcontain">
  484.  
  485. <!-------- CHARACTER START -------->
  486.  
  487. <div class="box FILTERS">
  488. <img src="https://placehold.it/100" class="image">
  489. <div class="info">
  490. <h1>Character Name</h1>
  491. <h2>Additional Information</h2>
  492. </div>
  493. <div class="hover">
  494. <div class="text">
  495.  
  496. <h1>character name</h1>
  497. <div class="links">
  498. <a href="">link 1</a> •
  499. <a href="">link 2</a> •
  500. <a href="">link 3</a>
  501. </div>
  502.  
  503. your text/information here
  504.  
  505. </div>
  506. </div>
  507. </div>
  508.  
  509. <!-------- CHARACTER END -------->
  510.  
  511.  
  512.  
  513. <!---------------- COPY AND PASTE
  514.  
  515. <div class="box FILTERS">
  516. <img src="https://placehold.it/100" class="image">
  517. <div class="info">
  518. <h1>Character Name</h1>
  519. <h2>Additional Information</h2>
  520. </div>
  521. <div class="hover">
  522. <div class="text">
  523.  
  524. <h1>character name</h1>
  525. <div class="links">
  526. <a href="">link 1</a> •
  527. <a href="">link 2</a> •
  528. <a href="">link 3</a>
  529. </div>
  530.  
  531. your text/information here
  532.  
  533. </div>
  534. </div>
  535. </div>
  536.  
  537. ----------------->
  538.  
  539. <!-------- END OF BOXES -------->
  540.  
  541. </div>
  542.  
  543. <!-------- CREDIT ---- DO NOT REMVOE OR ALTER -------->
  544.  
  545. <div class="credit" title="juliaroleplays">
  546. <a href="https://juliaroleplays.tumblr.com" style="padding: 5px; border: 1px solid; border-radius: 100%">
  547. <i class="fas fa-moon"></i>
  548. </a>
  549. </div>
  550.  
  551. <!-------- CREDIT ---- DO NOT REMVOE OR ALTER -------->
  552.  
  553. <!-------- TUMBLR CONTROLS-------->
  554.  
  555. <div class="hcontrols"><svg version="1.1" id="Layer_1" xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 216 216" enable-background="new 0 0 216 216" xml:space="preserve"><path d="M106.6,134c14.3,0,26-11.7,26-26s-11.7-26-26-26s-26,11.7-26,26S92.2,134,106.6,134z M106.6,94c7.7,0,14,6.3,14,14s-6.3,14-14,14s-14-6.3-14-14S98.9,94,106.6,94z M40.4,124.6l7.2,3.3c3,1.4,4.4,4.8,3.3,7.9l-2.8,7.4c-2.1,5.7-1.4,11.8,2.1,16.7c3.4,5,9,7.9,15,7.9c2.2,0,4.4-0.4,6.5-1.2l7.4-2.8c0.7-0.3,1.4-0.4,2.2-0.4c2.4,0,4.7,1.4,5.7,3.7l3.3,7.2c3,6.6,9.4,10.7,16.6,10.7s13.6-4.1,16.6-10.7l3.3-7.2c1-2.2,3.2-3.7,5.7-3.7c0.7,0,1.5,0.1,2.2,0.4l7.4,2.8c2.1,0.8,4.3,1.2,6.5,1.2c0,0,0,0,0,0c5.9,0,11.5-3,15-7.9c3.4-5,4.2-11.1,2.1-16.7l-2.8-7.4c-1.1-3.1,0.3-6.5,3.3-7.9l7.2-3.3c6.6-3,10.7-9.4,10.7-16.6s-4.1-13.6-10.7-16.6l-7.2-3.3c-3-1.4-4.4-4.8-3.3-7.9l2.8-7.4c2.1-5.7,1.4-11.8-2.1-16.7c-3.4-5-9-7.9-15-7.9c-2.2,0-4.4,0.4-6.5,1.2l-7.4,2.8c-0.7,0.3-1.4,0.4-2.2,0.4c-2.4,0-4.7-1.4-5.7-3.7l-3.3-7.2c-3-6.6-9.4-10.7-16.6-10.7S93,35.2,90,41.8l-3.3,7.2c-1,2.2-3.2,3.7-5.7,3.7c-0.7,0-1.5-0.1-2.2-0.4l-7.4-2.8c-2.1-0.8-4.3-1.2-6.5-1.2c-5.9,0-11.5,3-15,7.9c-3.4,5-4.2,11.1-2.1,16.7l2.8,7.4c1.1,3.1-0.3,6.5-3.3,7.9l-7.2,3.3c-6.6,3-10.7,9.4-10.7,16.6S33.8,121.6,40.4,124.6z M45.3,102.3l7.2-3.3c8.7-4,12.9-14.1,9.5-23l-2.8-7.4c-1-2.7,0-4.7,0.7-5.7c1.6-2.4,4.6-3.4,7.4-2.3l7.4,2.8c2.1,0.8,4.2,1.2,6.4,1.2c0,0,0,0,0,0c7.1,0,13.6-4.2,16.6-10.7l3.3-7.2c1.5-3.4,4.7-3.7,5.7-3.7s4.1,0.3,5.7,3.7l3.3,7.2c3,6.5,9.5,10.7,16.6,10.7c2.2,0,4.3-0.4,6.4-1.2l7.4-2.8c2.8-1,5.7,0,7.4,2.3c0.7,1,1.7,3,0.7,5.7l-2.8,7.4c-3.3,8.9,0.8,19,9.5,23l7.2,3.3c3.4,1.5,3.7,4.7,3.7,5.7s-0.3,4.1-3.7,5.7l-7.2,3.3c-8.7,4-12.9,14.1-9.5,23l2.8,7.4c1,2.7,0,4.7-0.7,5.7c-1.6,2.4-4.6,3.4-7.4,2.3l-7.4-2.8c-2.1-0.8-4.2-1.2-6.4-1.2c-7.1,0-13.6,4.2-16.6,10.7l-3.3,7.2c-1.5,3.4-4.7,3.7-5.7,3.7s-4.1-0.3-5.7-3.7l-3.3-7.2c-3-6.5-9.5-10.7-16.6-10.7c-2.2,0-4.3,0.4-6.4,1.2l-7.4,2.8c-2.8,1-5.7,0-7.4-2.3c-0.7-1-1.7-3-0.7-5.7l2.8-7.4c3.3-8.9-0.8-19-9.5-23l-7.2-3.3c-3.4-1.5-3.7-4.7-3.7-5.7S41.9,103.9,45.3,102.3z"/></svg></div>
  556.  
  557. <!-------- FILTERING SCRIPT -------->
  558.  
  559. <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/2.2.2/isotope.pkgd.min.js"></script><script type="text/javascript">
  560.  
  561. // external js: isotope.pkgd.js
  562.  
  563. // init Isotope
  564. var $grid = $('.boxcontain').isotope({
  565. itemSelector: '.box'
  566. });
  567.  
  568. // store filter for each group
  569. var filters = {};
  570.  
  571. $('#sidebar').on( 'click', '.button', function() {
  572. var $this = $(this);
  573. // get group key
  574. var $buttonGroup = $this.parents('.button-group');
  575. var filterGroup = $buttonGroup.attr('data-filter-group');
  576. // set filter for group
  577. filters[ filterGroup ] = $this.attr('data-filter');
  578. // combine filters
  579. var filterValue = concatValues( filters );
  580. // set filter for Isotope
  581. $grid.isotope({ filter: filterValue });
  582. });
  583.  
  584. // change is-checked class on buttons
  585. $('.button-group').each( function( i, buttonGroup ) {
  586. var $buttonGroup = $( buttonGroup );
  587. $buttonGroup.on( 'click', 'button', function() {
  588. $buttonGroup.find('.is-checked').removeClass('is-checked');
  589. $( this ).addClass('is-checked');
  590. });
  591. });
  592.  
  593. // flatten object by concatting values
  594. function concatValues( obj ) {
  595. var value = '';
  596. for ( var prop in obj ) {
  597. value += obj[ prop ];
  598. }
  599. return value;
  600. }
  601.  
  602. </script>
  603.  
  604. </body></html>
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!