API tools faq
paste
Advertisement
Demi-monde

Hawke

Demi-monde
Oct 20th, 2019
96
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 17.43 KB | None | 0 0
raw download clone embed print report
  1. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
  2. <script src="//static.tumblr.com/gtjt4bo/QRmphdsdv/glenplayer02.js"></script>
  3.  
  4. <script>
  5. $(document).ready(function() {
  6. $('.tabs .tab-links a').on('click', function(e) {
  7. var currentAttrValue = $(this).attr('href');
  8.  
  9. // Show/Hide Tabs
  10. $('.tabs ' + currentAttrValue).fadeIn(600).siblings().hide();
  11.  
  12. // Change/remove current tab to active
  13. $(this).parent('li').addClass('active').siblings().removeClass('active');
  14.  
  15. e.preventDefault();
  16. });
  17. });
  18. </script>
  19.  
  20. <script>
  21. $(document).ready(function() {
  22. $('#filterOptions li a').click(function() {
  23. // fetch the class of the clicked item
  24. var ourClass = $(this).attr('class');
  25.  
  26. // reset the active class on all the buttons
  27. $('#filterOptions li').removeClass('active');
  28. // update the active state on our clicked button
  29. $(this).parent().addClass('active');
  30.  
  31. if(ourClass == 'all') {
  32. // show all our items
  33. $('#ourHolder').children('div.item').show();
  34. }
  35. else {
  36. // hide all elements that don't share ourClass
  37. $('#ourHolder').children('div:not(.' + ourClass + ')').hide();
  38. // show all elements that do share ourClass
  39. $('#ourHolder').children('div.' + ourClass).show();
  40. }
  41. return false;
  42. });
  43. });
  44. </script>
  45.  
  46. <link href="https://fonts.googleapis.com/css?family=Work+Sans" rel="stylesheet">
  47. };
  48. </script>
  49. <style>
  50. /*----------------------------- FONTS ------------------------------- */
  51.  
  52. @font-face { font-family: "frontage outline"; src: url('https://dl.dropboxusercontent.com/s/452n0o323kateo7/Frontage-Outline.otf?dl=0'); format("opentype");}
  53. @font-face { font-family: "jenna sue"; src: url('https://dl.dropboxusercontent.com/s/bsju94guldr45k8/JennaSue.ttf?dl=0'); format("truetype");}
  54.  
  55.  
  56. /* ---------------------------- GENERAL ----------------------------- */
  57.  
  58. /* -------- SELECTION TOOL ------- */
  59.  
  60. ::-moz-selection {
  61. background: #000000;
  62. color: #ffffff;
  63. }
  64.  
  65. ::selection {
  66. background: #000000;
  67. color: #ffffff;
  68. }
  69.  
  70. /* -------- SCROLLBAR ------- */
  71.  
  72. ::-webkit-scrollbar {
  73. width: 0px;
  74. }
  75.  
  76. /* Track */
  77. ::-webkit-scrollbar-track {
  78. background:#ffffff;
  79. }
  80.  
  81. /* Handle */
  82. ::-webkit-scrollbar-thumb {
  83. background:#000000;
  84. }
  85. ::-webkit-scrollbar-thumb:window-inactive {
  86. background: transparent;
  87. }
  88.  
  89.  
  90. /* -------- BASICS ------- */
  91.  
  92. body {
  93. background:#121212 url();
  94. color: #eee;
  95. font-family:'work sans';
  96. font-size: 11px;
  97. margin: 0;
  98. padding: 0;
  99. word-wrap: break-word;
  100. line-height:150%;
  101. }
  102.  
  103. a {
  104. color:#5C89BC;
  105. text-decoration: none;
  106. -webkit-transition: all .3s;
  107. -moz-transition: all .3s;
  108. -o-transition: all .3s;
  109. -ms-transition: all .3s;
  110. transition: all .3s;
  111. }
  112.  
  113. a:hover{
  114. color:#a0a0a0;
  115. -webkit-transition: all .3s;
  116. -moz-transition: all .3s;
  117. -o-transition: all .3s;
  118. -ms-transition: all .3s;
  119. transition: all .3s;
  120. }
  121.  
  122. b, strong {
  123. color:#5C89BC;
  124. }
  125.  
  126.  
  127.  
  128. p{
  129. margin-bottom:10px;
  130. }
  131.  
  132. small, sub, sup {
  133. font-size:10px;
  134. }
  135.  
  136. ul{
  137. list-style-type:square;
  138. }
  139.  
  140. ol{
  141. list-style-type:;
  142. }
  143.  
  144. h1, h1 a {
  145. font-family:'frontage outline';
  146. text-align:center;
  147. font-size:32px;
  148. letter-spacing:5px;
  149. text-transform:uppercase;
  150. color:#5C89BC;
  151. line-height:120%;
  152. }
  153.  
  154. h2 {
  155. font-family:'frontage outline';
  156. color:#5C89BC;
  157. text-align:center;
  158. font-size:22px;
  159. letter-spacing:5px;
  160. text-transform:uppercase;
  161. line-height:120%;
  162. }
  163.  
  164. h5 {
  165. font-family:'frontage outline';
  166. text-transform:uppercase;
  167. font-weight:bold;
  168. padding:5px;
  169. font-size:40px;
  170. color:#5C89BC;
  171. text-align:center;
  172. width:220px;
  173. line-height:35px;
  174. margin-top:0px;
  175. letter-spacing:2px;
  176. border-bottom:solid 2px #5C89BC;
  177. max-height:50px;
  178. margin-left: -5px;
  179. overflow:hidden;
  180. }
  181.  
  182. h6 {
  183. float:right;
  184. margin-top:-350px;
  185. margin-right:10px;
  186. text-transform:uppercase;
  187. font-size:20px;
  188. font-family:'frontage outline';
  189. line-height:150%;
  190. background: -webkit-linear-gradient(20deg, , );
  191. -webkit-background-clip: text;
  192. -webkit-text-fill-color: transparent;
  193. width:190px;
  194. }
  195.  
  196. #bigcon{
  197. width:420px;
  198. margin-left:auto;
  199. margin-right:auto;
  200. }
  201.  
  202. .tabcontent {
  203. position:absolute;
  204. margin-left:auto;
  205. margin-right:auto;
  206. width: 460px;
  207. text-align:center;
  208. margin-bottom:0px;
  209. height:430px;
  210. overflow-y:hidden;
  211. left:50%;
  212. margin-left:-180px;
  213. top:50%;
  214. margin-top:-210px;
  215. padding:10px;
  216. border:solid 2px #5C89BC;
  217. }
  218.  
  219. /* ----------------------------- HEADER STUFF ---------------------------*/
  220.  
  221. #sidebar {
  222. background-color:#171717;
  223. position:fixed;
  224. width:200px;
  225. height:435px;
  226. margin-bottom:50px;
  227. text-align:center;
  228. margin-left:0px;
  229. top:50%;
  230. margin-top:-210px;
  231. left:50%;
  232. margin-left:-400px;
  233. padding:10px;
  234. border-radius:0px;
  235. z-index: -1px;
  236. }
  237.  
  238.  
  239. /* ----------------------------- SIDEBAR IMAGE ---------------------------*/
  240.  
  241. #sidebarimg {
  242. width:190px;
  243. height:90px;
  244. border-radius:0px;
  245. border:solid 2px #5C89BC;
  246. padding:5px;
  247. margin-top: -10px;
  248.  
  249. background-image: url('https://media0.giphy.com/media/mwFSaDJN7cO6k/giphy.gif');/* ----------------------------- change image here ---------------------------*/
  250.  
  251. background-size:cover;
  252. opacity: 0.5;}
  253.  
  254.  
  255. .blogtitle {
  256. margin-bottom:0px;
  257. margin-top:-20px;
  258. margin-left: -160px;
  259. width: 500px;
  260. position: relative;
  261. height:35px;
  262. font-family:'jenna sue';
  263. padding:5px;
  264. font-size:70px;
  265. line-height: 25px;
  266. letter-spacing: 2px;
  267. color:#5C89BC;
  268. text-transform:uppercase;
  269. }
  270.  
  271. .subtitle {
  272. position: absolute;
  273. margin-top:-75px;
  274. background-color:#171717;
  275. border-radius:0px;
  276. padding: 15px;
  277. width:185px;
  278. left:50%;
  279. top:50%;
  280. margin-left:-400px;
  281. z-index: ;}
  282.  
  283.  
  284.  
  285. .description{
  286. margin-top:40px;
  287. height:225px;
  288. width: 190px;
  289. overflow-y:scroll;
  290. font-size:11px;
  291. background-color:#121212;
  292. padding:8px;
  293. border-radius:0px;
  294. color:#a6a6a6;
  295. line-height:1.6;
  296. text-align: justify;
  297. letter-spacing:1px;
  298. margin-left: -5px;
  299. border:solid 1px #5C89BC;}
  300.  
  301.  
  302. /* ------------------------------ TABS ------------------------------ */
  303.  
  304. .tabs {
  305. width:100%;
  306. margin-left:0px;
  307. display:inline-block;
  308. }
  309.  
  310. /*----- Tab Links -----*/
  311.  
  312. /* Clearfix */
  313. .tab-links:after {
  314. display:block;
  315. clear:both;
  316. content:'';
  317. }
  318.  
  319. .tab-links {
  320. z-index:9999999999;
  321. margin-top:5px;
  322. }
  323. .tab-links li {
  324. margin-right:3px;
  325. display:inline-block;
  326. list-style:none;
  327. text-transform:uppercase;
  328. margin-bottom:0px;
  329. }
  330.  
  331. .tab-links a {
  332. padding:5px;
  333. display:inline-block;
  334. color:#5C89BC;
  335. border:1px solid #5C89BC;
  336. font-weight:bold;
  337. font-size:15px;
  338. font-family:'frontage outline';
  339. border-radius:0px;
  340. margin-top:5px;}
  341.  
  342. .tab-links a:hover {
  343. color: #fff;
  344. text-decoration:uppercase;
  345. -webkit-transition: all 1s;
  346. -moz-transition: all 1s;
  347. -o-transition: all 1s;
  348. -ms-transition: all 1s;
  349. transition: all 1s;
  350. }
  351.  
  352. li.active a, li.active a:hover {
  353. color:#fff;
  354. -webkit-transition: all 1s;
  355. -moz-transition: all 1s;
  356. -o-transition: all 1s;
  357. -ms-transition: all 1s;
  358. transition: all 1s;
  359. }
  360.  
  361. /*----- Content of Tabs -----*/
  362. .tab-content {
  363. }
  364.  
  365. .tab {
  366. display:none;
  367. }
  368.  
  369. .tab.active {
  370. display:block;
  371. }
  372.  
  373.  
  374. .aboutme {
  375. width:200px;
  376. height:240px;
  377. overflow-y:scroll;
  378. background-color:#121212;
  379. padding:10px;
  380. border-radius:0px;
  381. font-size:11px;
  382. z-index:999;
  383. top:50%;
  384. margin-top:-5px;
  385. font-size:10px;
  386. line-height:1.5;
  387. letter-spacing:1px;
  388. margin-left: -2px;
  389. text-align: justify;
  390. border:solid 2px #5C89BC;}
  391.  
  392. .aboutpic {
  393. width:220px;
  394. float:right;
  395. }
  396.  
  397. /* ----------------------------- RIGHT SIDE IMAGE ---------------------------*/
  398. .aboutpicimg {
  399. width:220px;
  400. height:425px;
  401. border-radius:0px;
  402.  
  403. top:50%;
  404. margin-top:-5px;
  405. margin-left:-10px;
  406. border:solid 2px #5C89BC;
  407. padding:5px;
  408. /* ----------------------------- CHANGEURL BELOW ---------------------------*/
  409. background-image: url('https://data.whicdn.com/images/320299887/large.jpg');
  410.  
  411. background-size:cover;
  412. background-attachment:absolute;
  413. opacity: 0.5;}
  414.  
  415. /* ----------------------------- WOLF IMAGE---------------------------*/
  416. .aboutme2 {
  417. width:210px;
  418. height:105px;
  419. border-radius:0px;
  420. margin-left: -2px;
  421. border:solid 2px #5C89BC;
  422. padding:5px;
  423. background-color:#222;
  424. z-index:999;
  425. top:50%;
  426. margin-top:100px;
  427. position: absolute;
  428. /* ----------------------------- CHANGE IMAGE BELOW ---------------------------*/
  429. background-image: url('https://i.pinimg.com/736x/64/a4/3b/64a43bf0d2aeb0905250cceba0dd8b35--grey-wolves-photos-of.jpg');
  430. background-size:cover;
  431. opacity: 0.5;}
  432.  
  433. /* ---------------------------- MUSES ------------------------- */
  434.  
  435. .muse {
  436. width:90px;
  437. height:90px;
  438. display:inline-block;
  439. padding:5px;
  440. margin:5px;
  441. background:#ffffff;
  442. border-radius:5px;
  443. }
  444.  
  445. .muse img {
  446. width:80px;
  447. height:80px;
  448. border-radius:100px;
  449. border:solid 2px #5C89BC;
  450. padding:5px;
  451. -webkit-filter: grayscale(0%); /* Safari 6.0 - 9.0 */
  452. filter: grayscale(0%);
  453. -webkit-transition: all 0.5s ease-in-out;
  454. -moz-transition: all 0.5s ease-in-out;
  455. -o-transition: all 0.5s ease-in-out;
  456. -ms-transition: all 0.5s ease-in-out;
  457. transition: all 0.5s ease-in-out;
  458. }
  459.  
  460. .muse img:hover {
  461. -ms-transform: rotate(-7deg); /* IE 9 */
  462. -webkit-transform: rotate(-7deg); /* Chrome, Safari, Opera */
  463. transform: rotate(-7deg);
  464. -webkit-filter: grayscale(0%); /* Safari 6.0 - 9.0 */
  465. filter: grayscale(0%);
  466. -webkit-transition: all 0.5s ease-in-out;
  467. -moz-transition: all 0.5s ease-in-out;
  468. -o-transition: all 0.5s ease-in-out;
  469. -ms-transition: all 0.5s ease-in-out;
  470. transition: all 0.5s ease-in-out;
  471. }
  472.  
  473. h4 {
  474. font-family:'frontage outline';
  475. padding:5px;
  476. font-size:18px;
  477. margin-top:-10px;
  478. margin-bottom: -5px;
  479. z-index:99999999999999999;
  480. color:#5C89BC;
  481. text-transform:uppercase;
  482. }
  483.  
  484.  
  485.  
  486.  
  487. /* QUOTES */
  488.  
  489. .quote{
  490. font-family:'work sans';
  491. text-align:center;
  492. font-size:20px;
  493. line-height:110%;
  494. }
  495.  
  496. .quotesource{
  497. text-align:center;
  498. margin-bottom:15px;
  499. margin-top:15px;
  500. }
  501.  
  502.  
  503. #glenplayer02 {
  504. position:absolute;
  505. top:0;margin-top:5px;
  506. left:20px;margin-right:10px;
  507. display:flex;
  508. z-index:99; }
  509.  
  510.  
  511. #glenplayer02 a {text-decoration:none;}
  512.  
  513. #glenplayer02 > div {
  514. align-self:center;
  515. -webkit-align-self:center;
  516. }
  517.  
  518. .music-controls {
  519. user-select:none;
  520. -webkit-user-select:none;
  521. cursor:pointer;
  522. }
  523.  
  524. .playy, .pausee {color:#888;} /* color of play & pause buttons */
  525.  
  526. .playy {font-size:13px;}
  527.  
  528. .pausee {
  529. display:none;
  530. margin-right:1.5px;
  531. }
  532.  
  533. .sonata {
  534. margin-left:10px;
  535. color:#fff; /* color of music note symbol */
  536. }
  537.  
  538. .labeltext {
  539. margin-left:25px;
  540. padding: 2px;
  541. border: 0px solid #222;
  542. font-family:'Work Sans';
  543. font-size:12px;
  544. color:#eee; /* color of song title */
  545. }
  546.  
  547. .labeltext:hover {
  548. margin-left:25px;
  549. background:#888;
  550. padding: 2px;
  551. border: 1px solid #888;
  552. font-family:'Work Sans';
  553. font-size:12px;
  554. color:#fff; /* color of song title */}
  555. </style>
  556. </head>
  557. <body>
  558. <div id="bigcon">
  559.  
  560. <div id="sidebar">
  561.  
  562.  
  563. <div class="blogtitle">
  564. <!-- -------------------------- TITLE CAN BE CHANGED may need editing if you do tho!-------------------------- -->
  565.  
  566. <span class="th th-quote-up"></span>Fusion </div>
  567.  
  568.  
  569. <div id=sidebarimg></div>
  570.  
  571.  
  572.  
  573. <div class="description">
  574.  
  575. <b>Name:</b><font style=float:right>Hawke Madison</font><br>
  576. <b>Age:</b><font style=float:right>21</font><br>
  577. <b>Gender:</b><font style=float:right>Male</font><br>
  578. <b>Species:</b><font style=float:right>Lupine Hyrbid</font><br>
  579. <b>Rank:</b><font style=float:right></font><br>
  580. <b>Height:</b><font style=float:right>5'10</font><br>
  581. <b>Weight:</b><font style=float:right>180 pounds</font><br>
  582. <b>Hair:</b><font style=float:right>Brown</font><br>
  583. <b>Eyes:</b><font style=float:right>Brown</font><br>
  584. <b>Orientation:</b><font style=float:right>Heterosexual</font><br>
  585. <b>Marital Status:</b><font style=float:right>Single</font><br>
  586. <b>Occupation:</b><font style=float:right></font><br>
  587. <b>Residence:</b><font style=float:right></font></div>
  588.  
  589.  
  590. <!-------MUSIC PLAYER BY GLENTHEMES------->
  591.  
  592. <div class="tabs">
  593. <ul class="tab-links">
  594. <li class="active" style="margin-left:-30px">
  595. <a title="main" href="#tab1">+</a></li>
  596. <li><a title="history" href="#tab2">+</a></li>
  597. <li><a title="traits" href="#tab3">+</a></li>
  598. <li><a title="ooc" href="#tab4">+</a></li>
  599. </ul>
  600. </div>
  601.  
  602. </div>
  603. <div class="subtitle">
  604.  
  605. <div id="glenplayer02">
  606. <div class="music-controls" onclick="songstart();">
  607. <div class="playy">►</div>
  608. <div class="pausee">❚❚</div>
  609. </div>
  610. <div class="sonata">♫</div>
  611.  
  612. <!-- -------------------------- SONG TITLE-------------------------- -->
  613.  
  614. <div class="labeltext">Song Title</div>
  615. </div><!--end music player-->
  616. <!-- -------------------------- SIBG URL IN SCR-------------------------- -->
  617.  
  618. <audio id="tune" src="" type="audio"></audio>
  619.  
  620. </div>
  621.  
  622.  
  623.  
  624.  
  625.  
  626. <!-- --------------------------- TABS -------------------------- -->
  627.  
  628.  
  629. <div class="tabs">
  630.  
  631.  
  632. <!-- --------------------------- TAB 1 -------------------------- -->
  633.  
  634. <div class="tab-content">
  635.  
  636. <div id="tab1" class="tab active">
  637.  
  638. <div class="tabcontent">
  639.  
  640. <div class="aboutpic"><div class="aboutpicimg"></div></div>
  641.  
  642. <div class="aboutme">
  643. <h4>W h o</h4>
  644. <!-- -------------------------- WHO BOX-------------------------- -->
  645.  
  646. <p>Lorem ipsum dolor sit amet...</p>
  647.  
  648. </div>
  649.  
  650. <h5>Hawke</h5>
  651.  
  652. <div class="aboutme2">
  653.  
  654. </div>
  655.  
  656.  
  657.  
  658. </div>
  659.  
  660. </div>
  661.  
  662.  
  663.  
  664. <!-- -------------------------- TAB 2 -------------------------- -->
  665.  
  666. <div id="tab2" class="tab">
  667. <div class="tabcontent">
  668.  
  669. <div class="aboutpic"><div class="aboutpicimg"></div></div>
  670.  
  671. <div class="aboutme">
  672. <h4>H i s t o r y</h4>
  673. <!-- -------------------------- HISTORY BOX-------------------------- -->
  674.  
  675. <p>Lorem ipsum dolor sit amet...</p>
  676. </div>
  677.  
  678. <h5>Hawke</h5>
  679.  
  680. <div class="aboutme2">
  681. </div>
  682.  
  683.  
  684. </div>
  685. </div>
  686.  
  687.  
  688. <!-- -------------------------- TAB 3 -------------------------- -->
  689.  
  690. <div id="tab3" class="tab">
  691. <div class="tabcontent">
  692.  
  693. <div class="aboutpic"><div class="aboutpicimg"></div></div>
  694.  
  695. <div class="aboutme">
  696. <!-- -------------------------- TRAITS BOX-------------------------- -->
  697.  
  698. <h4>Traits</h4>
  699. <b>Superhuman Speed:</b> Extremely fast and can ran faster than the human eye can follow..<br>
  700. <b>Superhuman Strength:</b> Akin to the strength of a vampire, lycans are much stronger in their animal form but still stronger than a human when in human form.<br>
  701. <b>Accelerated Healing:</b> Able to heal fast from any mortal wound not caused by silver. More powerful lycans are able to regrow limbs, although it may not be able to be done in one sitting..<br>
  702. <b>Heightened Senses:</b> Extremely acute senses. Lies can be detected through scent and the more powerful lycans can even hear blood moving around a person's body.<br>
  703. <b>Species Command:</b> Powerful, alpha lycans can command species of their own to do certain things. Force shift etc.<br>
  704. <b>Partial Shapeshifting:</b> Able to partially shift, as in claws or even bone structure to alter their appearance.<br>
  705. <b>Skill Name:</b> Skill description....<br>
  706. <b>Skill Name:</b> Skill description....<br>
  707. <b>Skill Name:</b> Skill description....<br>
  708. <b>Skill Name:</b> Skill description....<br>
  709. <b>Skill Name:</b> Skill description....<br>
  710. </div>
  711.  
  712. <h5>Hawke</h5>
  713.  
  714. <div class="aboutme2"></div>
  715.  
  716.  
  717. </div>
  718. </div>
  719.  
  720.  
  721. <!-- -------------------------- TAB 4 -------------------------- -->
  722.  
  723. <div id="tab4" class="tab">
  724. <div class="tabcontent">
  725. <!-- -------------------------- OOC BOX-------------------------- -->
  726.  
  727.  
  728. <h4>OOC</h4>
  729.  
  730. <b>01.</b> DM Friendly.<br>
  731. <b>02.</b> Room RP Preferred.<br>
  732. <b>03.</b> IC is not OOC. Know the difference.<br>
  733. <b>04.</b> RP ideas welcome.<br>
  734. <b>05.</b> Story/Smut.<br>
  735. <b>06.</b> Do not DM with a starter.<br>
  736. <b>07.</b> Don't be a cunt, I won't be a dick.<br>
  737. <b>08.</b> FC=Francisco Lachowski.<p><br>
  738.  
  739. <h4>MUSES</h4>
  740. <!-- -------------------------- MUSES BOX-------------------------- -->
  741.  
  742. <div class="muse">
  743. <a title="Dacia - Former Alpha, Engima. AMAZING WRITER AND the one who did this code for me. SHE's THE BESTEST!" href="/">
  744. <img src="https://media.giphy.com/media/s52d4ve4fMyiI/giphy.gif">
  745. <h4>Daci</h4>
  746. </a>
  747. </div>
  748.  
  749. <div class="muse">
  750. <a title="muse name, age, label." href="/">
  751. <img src="https://i.imgur.com/3PrC6Y3.png">
  752. <h4>muse</h4>
  753. </a>
  754. </div>
  755.  
  756. <div class="muse">
  757. <a title="muse name, age, label." href="/">
  758. <img src="https://i.imgur.com/K0dUdqe.png">
  759. <h4>muse</h4>
  760. </a>
  761. </div>
  762.  
  763. <div class="muse">
  764. <a title="muse name, age, label." href="/">
  765. <img src="https://i.imgur.com/OGHVKzX.png">
  766. <h4>muse</h4>
  767. </a>
  768.  
  769. </div>
  770.  
  771.  
  772.  
  773.  
  774. </div>
  775. </div>
  776.  
  777.  
  778. <!-- END OF TABS -->
  779.  
  780. </div>
  781. </div>
  782. </div>
  783. </div>
  784. </div>
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!