API tools faq
paste
Advertisement
cypherine

old 606

cypherine
Apr 14th, 2021 (edited)
53
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 14.16 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="//www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  3.  
  4. <head>
  5.  
  6. <title>{Title}</title>
  7.  
  8. <link rel="shortcut icon" href="{Favicon}">
  9.  
  10. <!--------------------JAVASCRIPTS-------------------->
  11. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  12. <script src="//static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  13. <script>
  14. (function($){
  15. $(document).ready(function(){
  16. $("a[title]").style_my_tooltips({
  17. tip_follows_cursor:true,
  18. tip_delay_time:0,
  19. tip_fade_speed:250,
  20. attribute:"title"
  21. });
  22. });
  23. })(jQuery);
  24. </script>
  25.  
  26. <script src ="//static.tumblr.com/2pnwama/HGEpacv22/hearts.js"></script>
  27.  
  28. <link href="//fonts.googleapis.com/css?family=Inconsolata|Quicksand:400,500|Source+Code+Pro|Unica+One" rel="stylesheet">
  29.  
  30. <!-------------------------------------------------------------------->
  31.  
  32. <style type="text/css">
  33.  
  34. /*-------------------TOOLTIPS--------------------*/
  35. #s-m-t-tooltip {
  36. padding: 3.5px 9px;
  37. margin: 26px 9px 0px 15px;
  38. background-color: #333; /* tooltip background color */
  39. font-family: quicksand;
  40. font-size: 9px;
  41. text-transform: uppercase;
  42. letter-spacing:1px;
  43. color: #eee; /* tooltip text color */
  44. z-index:99999999999999999999999999998!important;
  45. max-width: 40vw;
  46. -webkit-transition: all 0.3s ease-in-out;
  47. -moz-transition: all 0.3s ease-in-out;
  48. -o-transition: all 0.3s ease-in-out;
  49. }
  50.  
  51. /*--------------------TUMBLR CONTROLS--------------------*/
  52. iframe#tumblr_controls, .iframe-controls--desktop {
  53. top:7px!important;
  54. right:7px!important;
  55. position:fixed!important;
  56.  
  57. /* delete the next 2 lines to have white tumblr controls */
  58. filter:invert(100%) hue-rotate(180deg);
  59. -webkit-filter:invert(100%) hue-rotate(180deg);
  60.  
  61. transform:scale(0.7,0.7);
  62. -webkit-transform:scale(0.7,0.7);
  63.  
  64. transform-origin:100% 0;
  65. z-index:999999!important;
  66. }
  67.  
  68. /*--------------------TEXT HIGHLIGHT--------------------*/
  69. ::selection {
  70. background:#000;
  71. color:#555;
  72. }
  73.  
  74. ::-moz-selection {
  75. background:#fafafa;
  76. color:#555;
  77. }
  78.  
  79. /*--------------------BASICS--------------------*/
  80. body {
  81. background-color:#000000; /* background color */
  82. background-image:url(''); /* background image URL */
  83. background-attachment:fixed;
  84. background-repeat:repeat;
  85. color:#888; /* body text color */
  86. cursor:normal;
  87. font-family:source code pro;
  88. line-height:1.6em;
  89. font-size:12px;
  90. text-align:left;
  91. overflow:hidden;
  92. }
  93.  
  94. blockquote {
  95. padding-left:10px;
  96. margin-left:5px;
  97. border-left:1px solid;
  98. border-color:#aaa;
  99. margin:10px;
  100. }
  101.  
  102. a {
  103. color:#000;
  104. text-decoration:none;
  105. -webkit-transition: all 0.4s ease-in-out;
  106. -moz-transition: all 0.4s ease-in-out;
  107. -o-transition: all 0.4s ease-in-out;
  108. }
  109.  
  110. b, strong {
  111. font-weight:bold;
  112. color:#555;
  113. }
  114.  
  115. pre, code {
  116. white-space:pre-wrap;
  117. display:block;
  118. }
  119.  
  120. hr {
  121. width:70%;
  122. border-width:0px;
  123. height:1px;
  124. background-color:#bbb;
  125. }
  126.  
  127. /*--------------------EVERYTHING--------------------*/
  128. /* best not to touch this section */
  129. #wrappy {
  130. position:fixed;
  131. top:50%;left:50%;
  132. transform:translate(-50%,-50%);
  133.  
  134. width:calc(200px + 40px + 200px + 100px + 500px);
  135. /* yorha icon + gap1 + bars + gap2 + bio box */
  136.  
  137. display:flex;
  138. }
  139.  
  140.  
  141. /*--------------------LEFT CONTENT--------------------*/
  142. #left {
  143. -webkit-align-self:center;
  144. align-self:center;
  145. }
  146.  
  147. #topwrap1 {display:flex;}
  148.  
  149. /*----LEFT IMAGE----*/
  150. #yorha {
  151. vertical-align:middle;
  152. -webkit-align-self:center;
  153. align-self:center;
  154. width:200px; /* please do not make it larger */
  155. }
  156.  
  157. #sbstats {
  158. -webkit-align-self:center;
  159. align-self:center;
  160. margin-left:40px;
  161. }
  162.  
  163. /*----STATISTICS BARS----*/
  164. .statbar {
  165. margin-top:15px;
  166. width:calc(200px - 1px);
  167. height:8px;
  168. background-color:#fbfbfb; /* empty color */
  169. border:0.5px solid #222; /* whole bar border */
  170. overflow:hidden;
  171. }
  172.  
  173. .statbar:first-child {margin-top:0px;}
  174.  
  175. .statfill {
  176. margin-top:0px;
  177. margin-left:0px;
  178. height:inherit;
  179. background-color:#222; /* fill color */
  180. }
  181.  
  182. .bar-label {
  183. margin-top:8px;
  184. font-family:source code pro;
  185. font-size:8px;
  186. text-transform:uppercase;
  187. color:#999; /* bar label text color */
  188. line-height:1em;
  189. }
  190.  
  191. /*----STATISTICS TABLE----*/
  192. #stat-table {
  193. margin-top:20px;
  194. font-family:source code pro;
  195. font-size:9px;
  196. text-transform:uppercase;
  197. letter-spacing:0.5px;
  198. color:#999; /* statistics table text color */
  199. line-height:1.5em;
  200. }
  201.  
  202. #stat-table table {
  203. margin:-6px -17px;
  204. border-spacing:17px 6px;
  205. }
  206.  
  207. #stat-table tr {
  208. vertical-align:top;
  209. }
  210.  
  211. /*----CUSTOM LINKS----*/
  212. #c-title {
  213. /* best not to touch the next 2/3 lines */
  214. margin-top:30px;
  215. width:calc((200px + 40px + 200px) - 24px);
  216. /* leftwidth - leftright padding - border */
  217.  
  218. background-color:#f9f9f9; /* custom links title background color */
  219. padding:12px;
  220. font-family:quicksand;
  221. text-transform:uppercase;
  222. letter-spacing:2px;
  223. font-weight:500;
  224. font-size:11px;
  225. color:#aaa6ac; /* custom links title color */
  226. line-height:1em;
  227. text-align:center;
  228. }
  229.  
  230. /* best not to touch this section */
  231. #c-links {
  232. margin-top:12px;
  233. margin-left:-2px;
  234. width:calc(100% + 6px);
  235. }
  236.  
  237. #c-links a {
  238. /* best not to touch the next 3 lines */
  239. display:inline-block;
  240. margin:5px 2px;
  241. width:calc(25% - 6px - (4px * 6));
  242.  
  243. background-color:#f9f9f9; /* custom links background color */
  244. padding:6px 10px;
  245. font-family:quicksand;
  246. text-transform:uppercase;
  247. letter-spacing:2px;
  248. font-weight:500;
  249. font-size:9px;
  250. color:#aaa6ac; /* custom links text color */
  251. text-align:center;
  252. }
  253.  
  254. #c-links a:hover {
  255. background-color:#f4f4f4; /* custom links background hover color */
  256. }
  257.  
  258. /*--------------------RIGHT--------------------*/
  259. /* best not to touch the first 3 sections */
  260. #right {
  261. -webkit-align-self:center;
  262. align-self:center;
  263. }
  264.  
  265. #righteo {
  266. margin-left:100px;
  267. width:500px;
  268. }
  269.  
  270. #titlewrap {
  271. display:flex;
  272. line-height:1em;
  273. margin-bottom:-1px;
  274. }
  275.  
  276. /*----BIOGRAPHY TITLE----*/
  277. #maintitle {
  278. font-family:unica one;
  279. text-transform:uppercase;
  280. letter-spacing:2px;
  281. font-weight:500;
  282. font-size:20px;
  283. color:#555; /* biography box title color */
  284. text-align:left;
  285. }
  286.  
  287. /* flashing text input underline */
  288. .input {
  289. margin-top:1em;
  290. margin-left:0.5ch;
  291. width:10px;
  292. height:1.5px;
  293. background-color:#555; /* flashing input line color */
  294. animation: flashing 1s step-start 0s infinite;
  295. -webkit-animation: flashing 1s step-start 0s infinite;
  296. -moz-animation: flashing 1s step-start 0s infinite;
  297. }
  298.  
  299. @keyframes flashing {
  300. 50% {opacity:0;}
  301. }
  302.  
  303. @-webkit-keyframes flashing {
  304. 50% {opacity:0;}
  305. }
  306.  
  307. @-moz-keyframes flashing {
  308. 50% {opacity:0;}
  309. }
  310.  
  311. /*----BIOGRAPHY BOX----*/
  312. #mainbox {
  313. margin-top:20px;
  314. height:400px; /* box height */
  315. padding:25px;
  316. background-color:#0000000; /* box background color */
  317. border:2px solid #f2f2f2; /* box border */
  318. }
  319.  
  320. .sbimage {
  321. float:right;
  322. margin-left:25px;
  323. height:100%;
  324. }
  325.  
  326. .bio {
  327. max-height:100%;
  328. padding-right:10px;
  329. overflow:auto;
  330. font-family:inconsolata;
  331. font-size:12px;
  332. color:#ffffff; /* biography text color */
  333. line-height:1.9em;
  334. text-align:justify;
  335. }
  336.  
  337. .bio a {
  338. padding-bottom:1px;
  339. border-bottom:1px solid #ffffff; /* biography links bottom border */
  340. color:#ffffff; /* biography links color */
  341. }
  342.  
  343. /*----BIOGRAPHY BULLET POINTS----*/
  344. .bullet-line {
  345. display:flex;
  346. margin-bottom:5px;
  347. }
  348.  
  349. .bullet-line:last-of-type {margin-bottom:0px;}
  350.  
  351. .bio .cursor {
  352. -webkit-align-self:right;
  353. align-self:right;
  354. width:0px; /* width of bullet point icon */
  355. }
  356.  
  357. .bullet-text {
  358. margin-left:12px;
  359. }
  360.  
  361. .bullet-text name {
  362. text-transform:uppercase;
  363. letter-spacing:1px;
  364. color:#ffffff2; /* bullet point label color */
  365. }
  366.  
  367. .bio::-webkit-scrollbar {
  368. background-color:#fafafa; /* biography scrollbar background color */
  369. height:13px;
  370. width:13px;
  371. }
  372.  
  373. .bio::-webkit-scrollbar-thumb {
  374. background-color:#ccc; /* biography scrollbar color */
  375. border:6px solid #fafafa; /* biography scrollbar background color */
  376. }
  377.  
  378. .bio::-webkit-scrollbar-track {
  379. background-color:#fafafa; /* biography scrollbar background color */
  380. }
  381.  
  382. .bio p:last-child {margin-bottom:0px;}
  383.  
  384. /*--------------------MUSIC PLAYER--------------------*/
  385. #glenjamin {
  386. position:fixed;
  387. bottom:0;margin-bottom:20px;
  388. left:0;margin-left:20px;
  389. display:flex;
  390. z-index:2;
  391. }
  392.  
  393. .buttoms {cursor:pointer;}
  394.  
  395. .playy, .pausee {
  396. font-size:13px;
  397. color:#111; /* audio buttons color */
  398. }
  399.  
  400. .pausee {
  401. display:none;
  402. margin-right:1.5px;
  403. }
  404.  
  405. .sonata {
  406. margin-left:10px;
  407. color:#111; /* music icon color */
  408. }
  409.  
  410. .labeltext {
  411. margin-left:8px;
  412. font-family:courier new;
  413. font-size:9px;
  414. color:#111; /* music text color */
  415. }
  416.  
  417. /*---------------CREDIT. PLEASE DO NOT REMOVE---------------*/
  418. #glencred {
  419. position:fixed;
  420. bottom:0;margin-bottom:20px;
  421. right:0;margin-right:20px;
  422. font-family:quicksand;
  423. text-transform:uppercase;
  424. letter-spacing:2px;
  425. font-weight:500;
  426. font-size:8px;
  427. color:#2a2a2a; /* credit link color */
  428. z-index:10;
  429. }
  430.  
  431. </style>
  432.  
  433. </head>
  434.  
  435. <body>
  436.  
  437. <!---- CREDIT. PLESAE DO NOT REMOVE! THANKS! ---->
  438. <a id="glencred" href="//gle nthemes.tumblr.com" title="page by glenthemes">glenthemes</a>
  439.  
  440. <!---- MUSIC PLAYER ---->
  441. <div id="glenjamin">
  442. <div class="buttoms" onclick="kaishi();">
  443. <a title="play music"><div class="playy">►</div></a>
  444. <a title="pause music"><div class="pausee">❚❚</div></a>
  445. </div><!--please do not delete this line-->
  446.  
  447. <div class="sonata">♫</div>
  448.  
  449. <!--music name-->
  450. <div class="labeltext">Fortress of Lies</div>
  451. </div><!--please do not delete this line-->
  452.  
  453.  
  454. <!-- music track URL -->
  455. <audio id="tune" src="//dl.dropboxusercontent.com/s/9ev9di270yitr10/Fortress%20of%20Lies.mp3" onended="restart();" type="audio"></audio>
  456.  
  457. <div id="wrappy">
  458.  
  459. <div id="left">
  460. <div id="topwrap1">
  461.  
  462. <!---- LEFT SIDEBAR IMAGE ---->
  463. <img id="yorha" src="https://cdn.discordapp.com/attachments/830436421910134808/830790186668523580/image0.png">
  464.  
  465.  
  466. <!---- STATISTICS BARS ---->
  467. <div id="sbstats">
  468. <!---- ONE BAR ---->
  469. <div class="statbar">
  470. <div class="statfill" style="width:50%"></div>
  471. </div>
  472.  
  473. <div class="bar-label">> Lv. 99</div>
  474.  
  475. <!---- ONE BAR ---->
  476. <div class="statbar">
  477. <div class="statfill" style="width:80%"></div>
  478. </div>
  479.  
  480. <div class="bar-label">> 999,999 EXP</div>
  481.  
  482.  
  483. <!---- STATISTICS BARS ---->
  484. <div id="stat-table">
  485. <table>
  486. <tbody>
  487. <tr>
  488. <td>Dark Reunion:</td>
  489. <td>Stable</td>
  490. </tr>
  491.  
  492. <tr>
  493. <td>707:</td>
  494. <td>606</td>
  495. </tr>
  496.  
  497. <tr>
  498. <td>Remaining Energy:</td>
  499. <td>100%</td>
  500. </tr>
  501.  
  502. <tr>
  503. <td>System Check:</td>
  504. <td>Complete</td>
  505. </tr>
  506. </tbody>
  507. </table>
  508. </div><!--stat-table-->
  509.  
  510. </div><!--sbstats--><!--please do not delete this line-->
  511. </div><!--topwrap1--><!--please do not delete this line-->
  512.  
  513.  
  514. <!---- CUSTOM LINKS TITLE ---->
  515. <div id="c-title">remnants of peace</div>
  516.  
  517. <!---- CUSTOM LINKS ---->
  518. <div id="c-links">
  519. <a href="/">volume 1</a>
  520. <a href="/">volume 2</a>
  521. <a href="/">volume 3</a>
  522. <a href="/">volume 4</a>
  523. <a href="/">volume 5</a>
  524. <a href="/">volume 6</a>
  525. <a href="/">volume 7</a>
  526. <a href="/">volume 8</a>
  527. </div>
  528. </div><!--left--><!--please do not delete this line-->
  529.  
  530.  
  531.  
  532. <div id="right">
  533. <div id="righteo">
  534. <div id="titlewrap">
  535.  
  536. <!-- biography box title -->
  537. <div id="maintitle">606cypherine no.7 </div>
  538.  
  539. <div class="input"></div>
  540. </div><!--please do not delete this line-->
  541.  
  542. <div id="mainbox">
  543.  
  544. <!--biography box sidebar image-->
  545. <img class="sbimage" src="https://cdn.discordapp.com/attachments/808654053944328242/830770993097736203/image0.png">
  546.  
  547. <div class="bio">
  548. サイフェリン
  549.  
  550. <p>
  551.  
  552. <!---- ONE BULLET POINT ---->
  553. <div class="bullet-line">
  554. <img class="cursor" src="//dl.dropbox.com/s/5hwjttrmhctwpd9/select%20cursor%20svg.svg">
  555. <div class="bullet-text">
  556. <name>Name:</name> Cypherine
  557. </div><!--please do not delete this line-->
  558. </div><!--please do not delete this line-->
  559.  
  560. <!---- ONE BULLET POINT ---->
  561. <div class="bullet-line">
  562. <img class="cursor" src="//dl.dropbox.com/s/5hwjttrmhctwpd9/select%20cursor%20svg.svg">
  563. <div class="bullet-text">
  564. <name>Age:</name> 15
  565. </div><!--please do not delete this line-->
  566. </div><!--please do not delete this line-->
  567.  
  568. <!---- ONE BULLET POINT ---->
  569. <div class="bullet-line">
  570. <img class="cursor" src="//dl.dropbox.com/s/5hwjttrmhctwpd9/select%20cursor%20svg.svg">
  571. <div class="bullet-text">
  572. <name>Birthday:</name> Dec 6
  573. </div><!--please do not delete this line-->
  574. </div><!--please do not delete this line-->
  575.  
  576. <p>
  577. <br>
  578. <a href="https://606cypherine.tumblr.com/characters">characters</a>
  579. <br> <a href="https://606cypherine.tumblr.com/links">links</a>
  580. <br> <a href="https://remnantsofpeace.carrd.co/">art/extras</a>
  581. <br> <a href="/">comics</a>
  582. <br> <a href="/">journal</a>
  583. <br> <a href="/">plot/spoilers</a>
  584. </div><!--bio->
  585. </div><!--mainbox-->
  586. </div><!--righteo--><!--please do not delete this line-->
  587. </div><!--right--><!--please do not delete this line-->
  588.  
  589. </div><!--wrappy--><!--please do not delete this line-->
  590. </body>
  591.  
  592. </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!