API tools faq
paste
Advertisement
Noir-Et-Blanc

Page 12. Chara Page {Fly}

Noir-Et-Blanc
Jul 23rd, 2017
1,875
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 32.53 KB | None | 0 0
raw download clone embed print report
  1. <!-- Page 12 Side A
  2.  
  3. {. Fly .}
  4.  
  5. Page #12 Side A. (Fly)
  6. http://noiretblanc-themes.tumblr.com/
  7.  
  8. Please don't use this page as a base or claim it as your own.
  9. You are free to edit this page as much as you want, please just don't erase the credits.
  10.  
  11. CREDITS TO:
  12. Header Image: https://www.pixiv.net/member.php?id=8537417
  13. Diamond layout: http://www.jqueryscript.net/layout/Fancy-Responsive-jQuery-Diamond-Layout-Plugin-diamonds-js.html
  14. Pop Up Modal: http://leanmodal.finelysliced.com.au/
  15.  
  16.  
  17. ************** INSTRUCTIONS **************
  18. +General:
  19. Press ctrl+f and search for "Edit:" to find all the parts of the code that can be edited. (Such as colors, images & text.)
  20.  
  21. +Add new characters.
  22. There's 2 things to create a new character. 1) Creating a preview. 2)Creating the profile pop up.
  23.  
  24. 1)Preview tutorial:
  25. +) To create a preview you need to copy the next code:
  26.  
  27. <a href="#CHANGE" rel="leanModal" class="chara-pp">
  28. <span class="chara-name">Character Name</span>
  29. <img src="ImageUrl" class="resize" style="top:0px;left:0px">
  30. </a>
  31.  
  32. +) Search for "Diamond Previews:" and copy the code insde the marked section.
  33. +) The parts you need to edit are the following:
  34. 1. CHANGE (The name you put here must be the same as in the character profile id.DO NOT ERASE THE #)
  35. 2. Character Name
  36. 3. ImageUrl
  37. ** There's a part in the code that allows you to move the picture if it doesn't fit the diamond shape correctly. style="top:0px;left:0px ... You can use positive and negative numbers to move the picture around. The recommended size of the pictures are 200x200.
  38.  
  39. 2)Creating a profile pop up.
  40. +)Press ctrl+f and search for "Character Profiles"
  41. +)Copy the code below and edit it for each character.
  42. *************************IMPORTANT**************************
  43. +)The very first part of the code is:
  44. <div id="CHANGE" class="modal">
  45. The CHANGE must have the same name you used in the diamond preview. If the names are different, the pop up wont work.
  46.  
  47.  
  48.  
  49. ****************************** IMPORTANT ******************************
  50. The script wont load properly in the tumblr preview. You'll need to save the page and refresh the page live to see it work properly.
  51. Take in mind pages takes a little time to refresh.
  52.  
  53. -->
  54.  
  55. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  56. <html xmlns="http://www.w3.org/1999/xhtml">
  57.  
  58. <head>
  59. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  60. <link rel="shortcut icon" href="{Favicon}">
  61.  
  62. <link href="https://fonts.googleapis.com/css?family=Raleway|Vast+Shadow" rel="stylesheet">
  63. <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
  64. <script src="https://code.jquery.com/jquery-latest.min.js"></script>
  65.  
  66. <!-- Diamond Layout -->
  67. <script type="text/javascript" src="https://dl.dropboxusercontent.com/s/p4olpo0afexmd29/Diamond-Layout.js"></script>
  68.  
  69. <!-- Pop Up -->
  70. <script type="text/javascript" src="https://static.tumblr.com/g703xso/HfSovrwcy/leandmodal.js"></script>
  71. <title>{title}</title>
  72.  
  73.  
  74. <style>
  75. ::-webkit-scrollbar {
  76. width: 10px;
  77. }
  78.  
  79. ::-webkit-scrollbar-thumb {
  80. border: 5px double #0d0d0d; /* Edit: Scrollbar color */
  81. background-color: #ff9225; /* Edit: Scrollbar line color */
  82. }
  83.  
  84. ::-webkit-scrollbar-track {
  85. background-color: #0d0d0d; /* Edit: Scrollbar track color */
  86. border: 1px solid #ff9225; /* Edit: Scrollbar track border color */
  87. }
  88.  
  89. .desc_box::-webkit-scrollbar{
  90. width: 2px;
  91. }
  92.  
  93. * {
  94. margin: 0;
  95. padding: 0;
  96. }
  97.  
  98. a {
  99. text-decoration: none;
  100. -moz-transition: all .5s ease-in-out;
  101. -webkit-transition: all .5s ease-in-out;
  102. -o-transition: all .5s ease-in-out;
  103. transition: all .5s ease-in-out;
  104. }
  105.  
  106. body {
  107. background: url("https://www.toptal.com/designers/subtlepatterns/patterns/blackorchid.png"); /* Edit: Background Image */
  108. font-family: 'Raleway', sans-serif;
  109. font-size: 12px;
  110. }
  111.  
  112. /* 1st Page */
  113.  
  114. #header {
  115. height: 100vh;
  116. background: url("https://images2.alphacoders.com/699/699054.png") no-repeat center center fixed; /* Edit: Header BG Image */
  117. -webkit-background-size: cover;
  118. -moz-background-size: cover;
  119. -o-background-size: cover;
  120. background-size: cover;
  121. }
  122.  
  123. .intro-box {
  124. position: absolute;
  125. width: 400px;
  126. height: 200px;
  127. top: 50%;
  128. margin-top: -100px;
  129. left: 50%;
  130. margin-left: -200px;
  131. padding: 15px;
  132. box-sizing: border-box;
  133. border-radius: 5px;
  134. background: rgba(0, 0, 0, 0.61); /* Edit: Header text bg color */
  135. color: #ffffff; /* Edit: Header font color */
  136. }
  137.  
  138. span.intro-title {
  139. position: absolute;
  140. top: -30px;
  141. left: 0px;
  142. font-size: 35px;
  143. font-family: 'Vast Shadow', cursive;
  144. color: #000000; /* Edit: Header title color */
  145. text-shadow: 0px 0px 1px rgb(255, 88, 0);/* Edit: Header title glow color */
  146. }
  147.  
  148. p.intro-text {
  149. height: 100%;
  150. overflow: auto;
  151. }
  152.  
  153. .intro-text a{
  154. color: #ff9e2d; /* Edit: Header links color (inside description) */
  155. }
  156.  
  157. .intro-text a:hover{
  158. letter-spacing: 1px;
  159. }
  160.  
  161. /*Header Links*/
  162. .arrow_box_left {
  163. position: relative;
  164. background: #0d0d0d; /* Edit: Hover text BG color */
  165. color: #ff9225; /* Edit: Hover text font color */
  166. border: 2px solid #ff9225; /* Edit: Hover text Border color */
  167. }
  168.  
  169. .arrow_box_left:after,
  170. .arrow_box_left:before {
  171. left: 100%;
  172. top: 50%;
  173. border: solid transparent;
  174. content: " ";
  175. height: 0;
  176. width: 0;
  177. position: absolute;
  178. pointer-events: none;
  179. }
  180.  
  181. .arrow_box_left:after {
  182. border-color: rgba(255, 255, 255, 0);
  183. border-left-color: #0d0d0d; /* Edit: Hover text BG color (arrow) */
  184. border-width: 3px;
  185. margin-top: -3px;
  186. }
  187.  
  188. .arrow_box_left:before {
  189. border-color: rgba(58, 213, 224, 0);
  190. border-left-color: #ff9225; /* Edit: Hover text Border color (arrow) */
  191. border-width: 6px;
  192. margin-top: -6px;
  193. }
  194.  
  195. /*Arrows Right*/
  196.  
  197. .arrow_box_right {
  198. position: relative;
  199. background: #0d0d0d; /* Edit: Hover text BG color */
  200. color: #ff9225; /* Edit: Hover text font color */
  201. border: 2px solid #ff9225; /* Edit: Hover text Border color */
  202. }
  203.  
  204. .arrow_box_right:after,
  205. .arrow_box_right:before {
  206. right: 100%;
  207. top: 50%;
  208. border: solid transparent;
  209. content: " ";
  210. height: 0;
  211. width: 0;
  212. position: absolute;
  213. pointer-events: none;
  214. }
  215.  
  216. .arrow_box_right:after {
  217. border-color: rgba(255, 255, 255, 0);
  218. border-right-color: #0d0d0d; /* Edit: Hover text BG color (arrow) */
  219. border-width: 3px;
  220. margin-top: -3px;
  221. }
  222.  
  223. .arrow_box_right:before {
  224. border-color: rgba(58, 213, 224, 0);
  225. border-right-color: #ff9225; /* Edit: Hover text Border color (arrow) */
  226. border-width: 6px;
  227. margin-top: -6px;
  228. }
  229.  
  230. .linkbox {
  231. position: absolute;
  232. top: 0;
  233. bottom: 0;
  234. }
  235.  
  236. .left-box {
  237. left: -34px;
  238. }
  239.  
  240. .right-box {
  241. right: -32px;
  242. }
  243.  
  244. .linkbox a {
  245. position: relative;
  246. font-size: 16px;
  247. padding: 5px;
  248. border-radius: 25px;
  249. height: 15px;
  250. width: 15px;
  251. display: block;
  252. margin: 10px 0;
  253. background: #0d0d0d; /* Edit: Links bg color */
  254. color: #ff9225; /* Edit: Links font color */
  255. border: 2px solid #ff9225; /* Edit: Links border color */
  256. }
  257.  
  258. .linkbox a:hover{
  259. background: #ff9225; /* Edit: Hover links bg color */
  260. color: #0d0d0d; /* Edit: Hover links font color */
  261. border: 2px solid #0d0d0d; /* Edit: Hover links border color */
  262. }
  263.  
  264. .linkbox a:hover>.nav-left {
  265. opacity: 1;
  266. right: 34px;
  267. }
  268.  
  269. .linkbox a:hover>.nav-right {
  270. opacity: 1;
  271. left: 34px;
  272. }
  273.  
  274. span.hov-nav {
  275. position: absolute;
  276. top: 1px;
  277. font-size: 12px;
  278. padding: 2px 10px;
  279. width: 80px;
  280. text-align: center;
  281. -moz-transition: all .5s ease-in-out;
  282. -webkit-transition: all .5s ease-in-out;
  283. -o-transition: all .5s ease-in-out;
  284. transition: all .5s ease-in-out;
  285. opacity: 0;
  286. }
  287.  
  288. span.nav-left {
  289. right: 25px;
  290. }
  291.  
  292. span.nav-right {
  293. left: 25px;
  294. }
  295.  
  296. .fa {
  297. position: relative;
  298. }
  299.  
  300. .fa-home {
  301. top: -1px;
  302. }
  303.  
  304. .fa-envelope {
  305. left: 1px;
  306. top: 1px;
  307. font-size: 13px;
  308. }
  309.  
  310. .fa-pencil-square-o {
  311. font-size: 15px;
  312. left: 1px;
  313. }
  314.  
  315. .fa-share {
  316. font-size: 14px;
  317. top: 1px;
  318. left: 1px;
  319. }
  320.  
  321. .fa-cog {
  322. font-size: 17px;
  323. top: -1px;
  324. left: 0px;
  325. }
  326.  
  327. .fa-leaf {
  328. top: -1px;
  329. right: 1px;
  330. }
  331.  
  332. /* Diamond Layout */
  333.  
  334. .diamonds {
  335. text-align: center;
  336. overflow: visible;
  337. white-space: nowrap;
  338. display: inline-block;
  339. }
  340.  
  341. .diamond-row-wrap {
  342. text-align: center;
  343. position: relative;
  344. float: left;
  345. clear: both;
  346. }
  347.  
  348. .diamond-row-upper,
  349. .diamond-row-lower {
  350. overflow: visible;
  351. clear: both;
  352. width: 100%;
  353. }
  354.  
  355. .diamond-row-lower {
  356. position: absolute;
  357. bottom: 0;
  358. }
  359.  
  360. .diamond-row-lower .diamond-box {
  361. margin-left: 64.644660941%;
  362. /* 0.5 + 1 / sqrt(2) / 2 */
  363. margin-top: 64.644660941%;
  364. }
  365.  
  366. .diamond-box-wrap {
  367. float: left;
  368. }
  369.  
  370. .diamond-box {
  371. -webkit-transform: rotate(45deg);
  372. -moz-transform: rotate(45deg);
  373. -ms-transform: rotate(45deg);
  374. transform: rotate(45deg);
  375. -webkit-box-sizing: border-box;
  376. -moz-box-sizing: border-box;
  377. -ms-box-sizing: border-box;
  378. box-sizing: border-box;
  379. overflow: hidden;
  380. position: relative;
  381. z-index: 1;
  382. width: 70.710678118%;
  383. /* x = sqrt(x^2 / 2) = 1 / sqrt(2) = 0.70710678118 */
  384. height: 70.710678118%;
  385. margin: 14.644660941%;
  386. border: 1px solid transparent;
  387. }
  388.  
  389. .diamond-box-inner {
  390. -webkit-transform: rotate(-45deg);
  391. -moz-transform: rotate(-45deg);
  392. -ms-transform: rotate(-45deg);
  393. transform: rotate(-45deg);
  394. -webkit-transform-origin: center center;
  395. -moz-transform-origin: center center;
  396. -ms-transform-origin: center center;
  397. transform-origin: center center;
  398. -webkit-box-sizing: border-box;
  399. -moz-box-sizing: border-box;
  400. -ms-box-sizing: border-box;
  401. box-sizing: border-box;
  402. width: 141.421356237%;
  403. /* sqrt(2) */
  404. height: 141.421356237%;
  405. margin: -20.7106781185% 0 0 -20.7106781185%;
  406. /* (1 - sqrt(2)) / 2 */
  407. }
  408.  
  409. /* Characters List */
  410.  
  411. #content {
  412. height: 100vh;
  413. position: relative;
  414. padding: 20px 0px;
  415. box-sizing: border-box;
  416. text-align:center;
  417. }
  418.  
  419. .resize {
  420. position: absolute;
  421. left: 0;
  422. top: 0;
  423. height: 200px;
  424. }
  425.  
  426. span.chara-name {
  427. display: block;
  428. position: relative;
  429. top: 75px;
  430. padding: 5px;
  431. z-index: 10;
  432. font-size: 15px;
  433. opacity: 0;
  434. -moz-transition: all .3s ease-in-out;
  435. -webkit-transition: all .3s ease-in-out;
  436. -o-transition: all .3s ease-in-out;
  437. transition: all .3s ease-in-out;
  438. background: rgba(0, 0, 0, 0.35); /* Edit: Chara name bg color */
  439. color: white; /* Edit: Chara name font color*/
  440. }
  441.  
  442. #content a:hover>.chara-name {
  443. opacity: 1;
  444. }
  445.  
  446.  
  447. /* Chracter's Profiles */
  448.  
  449. #lean_overlay {
  450. position: fixed;
  451. z-index: 100;
  452. top: 0px;
  453. left: 0px;
  454. height: 100%;
  455. width: 100%;
  456. background: #000000; /* Edit: Bg color when Pop up is open */
  457. display: none;
  458. }
  459.  
  460. .modal {
  461. position: relative;
  462. width: 700px;
  463. height: 510px;
  464. display: none;
  465. }
  466.  
  467.  
  468. /*Name Box*/
  469.  
  470. .chara_name {
  471. position: absolute;
  472. width: 100%;
  473. height: 40px;
  474. text-align: center;
  475. }
  476.  
  477. .name_bg {
  478. position: relative;
  479. display: inline-block;
  480. margin: 0 auto;
  481. padding: 5px 15px;
  482. font-size: 24px;
  483. background: #0d0d0d; /* Edit: Name BG color */
  484. border: 1px solid #ff9225; /* Edit: Name border color */
  485. color: #ffffff; /* Edit: Name Font Color */
  486. }
  487.  
  488. .triangle-bottomleft-a, .triangle-topleft-a, .triangle-topright-a, .triangle-bottomright-a{
  489. border-top-color: #ff9225 !important; /* Edit: Flag color top */
  490. border-bottom-color: #ff9225 !important; /* Edit: Flag color bottom */
  491. }
  492.  
  493. .triangle-topright-a {
  494. position: absolute;
  495. width: 0;
  496. height: 0;
  497. border-top: 20px solid;
  498. border-left: 25px solid transparent;
  499. left: -26px;
  500. top: 7px;
  501. z-index: 1;
  502. }
  503.  
  504. .triangle-bottomright-a {
  505. position: absolute;
  506. width: 0;
  507. height: 0;
  508. border-bottom: 20px solid;
  509. border-left: 25px solid transparent;
  510. left: -26px;
  511. bottom: -4px;
  512. }
  513.  
  514. .triangle-topleft-a {
  515. position: absolute;
  516. width: 0;
  517. height: 0;
  518. border-top: 20px solid;
  519. border-right: 25px solid transparent;
  520. right: -26px;
  521. top: 7px;
  522. z-index: 1;
  523. }
  524.  
  525. .triangle-bottomleft-a {
  526. position: absolute;
  527. width: 0;
  528. height: 0;
  529. border-bottom: 20px solid;
  530. border-right: 25px solid transparent;
  531. right: -26px;
  532. bottom: -4px;
  533. }
  534.  
  535.  
  536. /* Picture Box */
  537.  
  538. .chara_pic {
  539. position: absolute;
  540. top: 60px;
  541. bottom: 0;
  542. width: 250px;
  543. }
  544.  
  545. .chara_pic img {
  546. max-height: 400px;
  547. max-width: 250px;
  548. border-radius: 5px;
  549. box-shadow: 0px 0px 8px rgba(255, 255, 255, 0.36);
  550. -webkit-box-shadow: 0px 0px 8px rgba(255, 255, 255, 0.36);
  551. -moz-box-shadow: 0px 0px 8px rgba(255, 255, 255, 0.36);
  552. }
  553.  
  554. .resize_p {
  555. position: absolute;
  556. margin: auto;
  557. top: 0;
  558. bottom: 0;
  559. right: 0;
  560. left: 0;
  561. }
  562.  
  563. /* Info Box: Location, Birthday, Sex, etc. */
  564.  
  565. .chara_basic {
  566. position: absolute;
  567. height: 100px;
  568. line-height: 50px;
  569. right: 0;
  570. left: 260px;
  571. top: 50px;
  572. border-radius: 5px;
  573. }
  574.  
  575. span.chara_data {
  576. display: inline-block;
  577. position: relative;
  578. margin-left: 5px;
  579. }
  580.  
  581. .chara_data b {
  582. position: relative;
  583. display: inline-block;
  584. font-size: 20px;
  585. z-index: 5;
  586. height: 25px;
  587. width: 25px;
  588. text-align: center;
  589. top: 0px;
  590. border-radius: 3px;
  591. background: #ff9225; /* Edit: Icons BG color */
  592. color: #000000; /* Edit: Icons font color */
  593. }
  594.  
  595. .chara_data p {
  596. display: inline-block;
  597. padding: 5px 10px 5px 15px;
  598. position: relative;
  599. left: -10px;
  600. height: 25px;
  601. line-height: 25px;
  602. border-radius: 3px;
  603. width: 85px;
  604. box-shadow: 0px 0px 8px rgba(255, 255, 255, 0.36);
  605. -webkit-box-shadow: 0px 0px 8px rgba(255, 255, 255, 0.36);
  606. -moz-box-shadow: 0px 0px 8px rgba(255, 255, 255, 0.36);
  607. color: #ffffff; /* Edit: Text font color */
  608. background: #000000; /* Edit: Text BG color */
  609. font-size: 10px;
  610. }
  611.  
  612. b.bday {
  613. top: -3px;
  614. }
  615.  
  616. b.sex {
  617. top: -1px
  618. }
  619.  
  620. .chara_data .fa {
  621. position: relative;
  622. }
  623.  
  624. .fa-map-marker {
  625. top: 2px;
  626. }
  627.  
  628. .fa-birthday-cake {
  629. font-size: 16px;
  630. top: 3px;
  631. }
  632.  
  633. .fa-venus-mars {
  634. font-size: 19px;
  635. top: 3px;
  636. }
  637.  
  638. .fa-star {
  639. top: 3px;
  640. font-size: 19px;
  641. }
  642.  
  643. .fa-user-circle {
  644. top: 2px;
  645. }
  646.  
  647. .fa-dot-circle-o {
  648. top: 2px;
  649. }
  650.  
  651. .fa-crosshairs{
  652. left: 1px;
  653. top: -1px;
  654. }
  655.  
  656. /* Description Box: Abilities, description & tags. */
  657.  
  658. .chara_box {
  659. position: absolute;
  660. right: 0;
  661. bottom: 0;
  662. top: 160px;
  663. left: 260px;
  664. border-radius: 5px;
  665. text-align: center;
  666. color: white; /* Edit: Main font color */
  667. }
  668.  
  669. /*Abilities Bar*/
  670. .a_bar {
  671. position: relative;
  672. width: 150px;
  673. height: 10px;
  674. border-radius: 5px;
  675. overflow: hidden;
  676. margin-top: 5px;
  677. box-shadow: 0px 0px 8px rgba(255, 255, 255, 0.36);
  678. -webkit-box-shadow: 0px 0px 8px rgba(255, 255, 255, 0.36);
  679. -moz-box-shadow: 0px 0px 8px rgba(255, 255, 255, 0.36);
  680. }
  681.  
  682. span.lvl_dt {
  683. position: relative;
  684. display: inline-block;
  685. width: 30px;
  686. height: 100%;
  687. z-index: 10000;
  688. }
  689.  
  690. span.lvl1 {
  691. background: #ffffff; /* Edit: Lvl 1 color */
  692. }
  693.  
  694. span.lvl2 {
  695. background: #ffdec5; /* Edit: Lvl 2 color */
  696. }
  697.  
  698. span.lvl3 {
  699. background: #ffb884; /* Edit: Lvl 3 color */
  700. }
  701.  
  702. span.lvl4 {
  703. background: #ff9225; /* Edit: Lvl 4 color */
  704. }
  705.  
  706. span.lvl5 {
  707. background: #fd720d; /* Edit: Lvl 5 color */
  708. }
  709.  
  710. .level_bar {
  711. position: absolute;
  712. height: 100%;
  713. z-index: 99999;
  714. right: 0;
  715. background: #808080; /* Edit: Empty bar BG color */
  716. }
  717.  
  718. .lvl-1 {width: 80%;}
  719. .lvl-2 {width: 60%;}
  720. .lvl-3 {width: 40%;}
  721. .lvl-4 {width: 20%;}
  722. .lvl-5 {width: 0%;}
  723.  
  724. .bar_box {
  725. display: inline-block;
  726. margin: 10px 30px;
  727. position: relative;
  728. text-align: left;
  729. }
  730.  
  731. span.bar_name {
  732. font-size: 12px;
  733. }
  734.  
  735. span.bar_stt {
  736. position: absolute;
  737. right: 5px;
  738. font-size: 10px;
  739. }
  740.  
  741. /* Description Style */
  742.  
  743. .desc_box {
  744. display: block;
  745. max-height: 100px;
  746. padding: 10px;
  747. box-sizing: border-box;
  748. overflow-y: auto;
  749. margin: 5px 0;
  750. }
  751.  
  752. .desc_box a{
  753. color: #ffb236; /* Edit: Description links color */
  754. }
  755.  
  756. /* Tags Style */
  757.  
  758. span.tag {
  759. display: inline-block;
  760. margin: 5px 0;
  761. }
  762.  
  763. span.tag b {
  764. position: relative;
  765. display: inline-block;
  766. width: 20px;
  767. height: 20px;
  768. font-size: 14px;
  769. border-radius: 20px;
  770. z-index: 1;
  771. top: -2px;
  772. background: #ff9225; /* Edit: Tags icon Bg color */
  773. color: #050505; /* Edit: Tags icon font color */
  774. }
  775.  
  776. span.tag a {
  777. display: inline-block;
  778. position: relative;
  779. padding: 8px 10px;
  780. left: -10px;
  781. width: 90px;
  782. border-radius: 4px;
  783. font-size: 10px;
  784. box-shadow: 0px 0px 8px rgba(255, 255, 255, 0.36);
  785. -webkit-box-shadow: 0px 0px 8px rgba(255, 255, 255, 0.36);
  786. -moz-box-shadow: 0px 0px 8px rgba(255, 255, 255, 0.36);
  787. background: #000000; /* Edit: Tag bg color */
  788. color: #ffffff; /* Edit: Tag font color */
  789. }
  790.  
  791. span.tag a:hover {
  792. letter-spacing: 2px;
  793. }
  794.  
  795. .fa-tag {
  796. position: relative;
  797. top: 3px;
  798. left: 0px;
  799. }
  800.  
  801.  
  802. </style>
  803. </head>
  804.  
  805. <body>
  806.  
  807. <div id="header">
  808. <div class="intro-box">
  809. <!-- Edit: Header Title -->
  810. <span class="intro-title">Rule the Court</span>
  811.  
  812. <!-- Edit: Header Description -->
  813. <p class="intro-text">
  814. Welcome to my masterlist.<br>
  815. <b>Bold</b> <i>Italic</i> <s>Striked</s>
  816. </p>
  817.  
  818. <div class="linkbox left-box">
  819. <!-- Edit: Basic Links -->
  820. <a href="/"><i class="fa fa-home" aria-hidden="true"></i> <span class="hov-nav nav-left arrow_box_left">Home</span></a>
  821.  
  822. <a href="/ask"><i class="fa fa-envelope" aria-hidden="true"></i><span class="hov-nav nav-left arrow_box_left ask">Message</span></a>
  823.  
  824. <a href="/submit"><i class="fa fa-pencil-square-o" aria-hidden="true"></i><span class="hov-nav nav-left arrow_box_left ask">Submit</span></a>
  825.  
  826. <a href="/dashboard"><i class="fa fa-share" aria-hidden="true"></i><span class="hov-nav nav-left arrow_box_left ask">Dashboard</span></a>
  827.  
  828. <!-- DO NOT REMOVE THE CREDITS -->
  829. <a href="http://noiretblanc-themes.tumblr.com/"><i class="fa fa-cog" aria-hidden="true"></i><span class="hov-nav nav-left arrow_box_left ask">Theme</span></a>
  830. </div>
  831.  
  832. <div class="linkbox right-box">
  833. <!-- Edit: Custome Links -->
  834. <a href="/url"><i class="fa fa-crosshairs" aria-hidden="true"></i><span class="hov-nav nav-right arrow_box_right">Link 1</span></a>
  835.  
  836. <a href="/url"><i class="fa fa-crosshairs" aria-hidden="true"></i><span class="hov-nav nav-right arrow_box_right">Link 2</span></a>
  837.  
  838. <a href="/url"><i class="fa fa-crosshairs" aria-hidden="true"></i><span class="hov-nav nav-right arrow_box_right">Link 3</span></a>
  839.  
  840. <a href="/url"><i class="fa fa-crosshairs" aria-hidden="true"></i><span class="hov-nav nav-right arrow_box_right">Link 4</span></a>
  841.  
  842. <a href="/url"><i class="fa fa-crosshairs" aria-hidden="true"></i><span class="hov-nav nav-right arrow_box_right">Link 5</span></a>
  843. </div>
  844. </div>
  845. </div>
  846.  
  847.  
  848. <div id="content">
  849. <!-- Diamond Previews: All pictures must be below this code -->
  850.  
  851. <a href="#CHANGE" rel="leanModal" class="chara-pp">
  852. <span class="chara-name">Character Name</span>
  853. <img src="https://i.imgur.com/iheClok.png" class="resize" style="top:0px;left:0px">
  854. </a>
  855.  
  856. <!-- Diamond Previews: All pictures must be above this code -->
  857. </div>
  858. <!-- Character Profiles: All blocks be below this code -->
  859.  
  860.  
  861.  
  862. <!-- Copy: New Character Profile -->
  863. <div id="CHANGE" class="modal">
  864. <div class="chara_name">
  865. <!-- Edit: Character Name -->
  866. <div class="name_bg">Character Name
  867. <div class="triangle-topright-a"></div><div class="triangle-bottomright-a"></div><div class="triangle-topleft-a"></div><div class="triangle-bottomleft-a"></div>
  868. </div>
  869. </div>
  870. <div class="chara_pic">
  871. <!-- Edit: Character Picture. Recommended size 250x450-->
  872. <img src="https://i.imgur.com/lGrjYL7.png" class="resize_p">
  873. </div>
  874. <div class="chara_basic">
  875. <span class="chara_data">
  876. <b><i class="fa fa-map-marker" aria-hidden="true"></i></b>
  877. <!-- Edit: Location -->
  878. <p>Location</p>
  879. </span>
  880. <span class="chara_data">
  881. <b class="bday"><i class="fa fa-birthday-cake" aria-hidden="true"></i></b>
  882. <!-- Edit: Birthday -->
  883. <p>Bday</p>
  884. </span>
  885. <span class="chara_data">
  886. <b class="sex"><i class="fa fa-venus-mars" aria-hidden="true"></i></b>
  887. <!-- Edit: Sex -->
  888. <p>Male / Female</p>
  889. </span>
  890. <span class="chara_data">
  891. <b><i class="fa fa-user-circle" aria-hidden="true"></i></b>
  892. <!-- Edit: Position/Other -->
  893. <p>Other</p>
  894. </span>
  895. <span class="chara_data">
  896. <b><i class="fa fa-star" aria-hidden="true"></i></b>
  897. <!-- Edit: Sign -->
  898. <p>Aries</p>
  899. </span>
  900. <span class="chara_data">
  901. <b><i class="fa fa-dot-circle-o" aria-hidden="true"></i></b>
  902. <!-- Edit: Anime/Other -->
  903. <p>Other</p>
  904. </span>
  905. </div>
  906.  
  907. <div class="chara_box">
  908.  
  909. <!-- Abilty Bars: All bars must be below this code -->
  910.  
  911.  
  912. <!-- Copy: To create an ability bar -->
  913. <div class="bar_box">
  914. <!-- Edit: Ability Name -->
  915. <span class="bar_name">Ability Name</span>
  916. <!-- Edit: Abilty lvl. (Scale 1 to 5) -->
  917. <span class="bar_stt">5/5</span>
  918. <div class="a_bar">
  919. <!-- Edit: Change the 5 according to the level you want. (1 to 5) -->
  920. <div class="level_bar lvl-5"></div>
  921.  
  922. <!-- DO NOT EDIT THIS PIECE OF CODE -->
  923. <span class="lvl_dt lvl1"></span><span class="lvl_dt lvl2"></span><span class="lvl_dt lvl3"></span><span class="lvl_dt lvl4"></span><span class="lvl_dt lvl5"></span>
  924. </div>
  925. </div>
  926. <!-- End of ability bar -->
  927.  
  928.  
  929. <!-- Abilty Bars: All bars must be above this code -->
  930.  
  931.  
  932. <!-- Edit: Description Box -->
  933. <div class="desc_box">
  934. You can put some info of the character here.<br>
  935. <b>Bold</b> <s>Striked</s> <i>Italic</i> <a href="">Links</a><br><br>
  936. The info you add here can be as long as you want.<br>
  937. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In lacinia finibus posuere. Ut ultrices massa non purus malesuada, at fringilla sem condimentum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse egestas, velit ullamcorper luctus dignissim, libero dui semper dolor, sed porttitor dolor massa et tellus. Donec tincidunt ullamcorper egestas. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quam nulla, vehicula vitae urna non, varius scelerisque turpis.
  938. </div>
  939.  
  940. <!-- Edit: Tag Box -->
  941. <div class="tag_box">
  942.  
  943. <span class="tag"><b><i class="fa fa-tag" aria-hidden="true"></i></b><a href="url tag">Tag name</a></span>
  944. <span class="tag"><b><i class="fa fa-tag" aria-hidden="true"></i></b><a href="url tag">Tag name</a></span>
  945. <span class="tag"><b><i class="fa fa-tag" aria-hidden="true"></i></b><a href="url tag">Tag name</a></span>
  946. <span class="tag"><b><i class="fa fa-tag" aria-hidden="true"></i></b><a href="url tag">Tag name</a></span>
  947. <span class="tag"><b><i class="fa fa-tag" aria-hidden="true"></i></b><a href="url tag">Tag name</a></span>
  948. <span class="tag"><b><i class="fa fa-tag" aria-hidden="true"></i></b><a href="url tag">Tag name</a></span>
  949.  
  950. </div>
  951. <!-- Edit: Tag Box -->
  952. </div>
  953. </div>
  954. <!-- End to create new Character Profile -->
  955.  
  956. <!-- Character Profiles: All blocks be below this code -->
  957.  
  958. <script>
  959. //Diamond Script.//
  960. $("#content").diamonds({
  961. size: 200, // Size of diamonds in pixels. Both width and height.
  962. gap: 10, // Pixels between each square.
  963. hideIncompleteRow: false,
  964. autoRedraw: true,
  965. itemSelector: ".chara-pp"
  966. });
  967.  
  968. //Pop Up Script//
  969. $("a[rel*=leanModal]").leanModal({
  970. top: 150,
  971. overlay: 0.8, // Change the opacity of the BG that covers the page when the pop up is open. Goes from 0 to 1. //
  972. closeButton: ".modal_close"
  973. });
  974.  
  975. // Disables body scrolling in the description. //
  976. $( '.desc_box' ).bind( 'mousewheel DOMMouseScroll', function ( e ) {
  977. var e0 = e.originalEvent,
  978. delta = e0.wheelDelta || -e0.detail;
  979. this.scrollTop += ( delta < 0 ? 1 : -1 ) * 30;
  980. e.preventDefault();
  981. });
  982.  
  983. $(document).ready(function() {
  984. $("a[rel*=leanModal]").click(function() {
  985. $('html').css('overflow', 'hidden');
  986. $('body').bind('touchmove', function(e) {
  987. e.preventDefault()
  988. });
  989. });
  990. $('#lean_overlay').click(function() {
  991. $('html').css('overflow-y', 'auto');
  992. $('body').unbind('touchmove');
  993. });
  994. });
  995. </script>
  996. </body>
  997. </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!