API tools faq
paste
Advertisement
rpaccount

Saturn

rpaccount
Oct 24th, 2017
123
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 14.92 KB | None | 0 0
raw download clone embed print report
  1. <body>
  2. <style>
  3.  
  4. body {
  5. /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#c9bebd+0,cab3b1+40,936661+100 */
  6. background: url();
  7. overflow-y:hidden;
  8. overflow-x:hidden;}
  9. <script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  10. <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
  11. <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.6.5/dat.gui.min.js"></script>
  12. <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
  13. <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.11.0/d3.min.js"></script>
  14. <script src="https://roleplay.chat/jquery.tooltipster.js"></script>
  15. <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script>
  16. <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/87/three.js"></script>
  17. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css">
  18. <link href="https://roleplay.chat/tooltipster.css" rel="stylesheet" type="text/css">
  19. <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
  20. <script defer>
  21. window.onload = function() {
  22.  
  23. };
  24. @import url(https://fonts.googleapis.com/css?family=Kaushan+Script);
  25.  
  26. @import url(https://fonts.googleapis.com/css?family=Kreon);
  27.  
  28.  
  29.  
  30. .pfor {display: none;}
  31.  
  32. #profile {
  33.  
  34. border-style:none;
  35.  
  36. background-color: Transparent;}
  37.  
  38.  
  39.  
  40. body {
  41.  
  42. background-color: black;
  43.  
  44. background-image:url("https://media.giphy.com/media/TxVVB6PfWMjE4/source.gif");
  45.  
  46. background-size: ;
  47.  
  48. background-attachment:fixed;}
  49.  
  50.  
  51.  
  52. a:link {text-decoration: none;}
  53.  
  54. a:visited {text-decoration: none;}
  55.  
  56. </script>
  57. <style>
  58.  
  59. </style>
  60. </head>
  61. <body>
  62. <style>
  63.  
  64.  
  65.  
  66. /*B2FFA2*/
  67.  
  68. .luna {
  69. margin-left: 600px;
  70. background: url('http://i.picpar.com/tH7c.png');
  71. width: 500px; height: 665px;
  72. background-color: transparent;
  73. border: 0px solid #999;
  74. animation: bounce 1s infinite alternate;
  75. -webkit-animation: bounce 1s infinite alternate;
  76. }
  77. @keyframes bounce {
  78. from {
  79. transform: translateY(0px);
  80. }
  81. to {
  82. transform: translateY(-15px);
  83. }
  84. }
  85. @-webkit-keyframes bounce {
  86. from {
  87. transform: translateY(0px);
  88. }
  89. to {
  90. transform: translateY(-15px);
  91. }
  92.  
  93. .tooltip {
  94. position: relative;
  95. display: inline-block;
  96. border-bottom: 1px dotted black;
  97. }
  98.  
  99. .tooltip .tooltiptext {
  100. visibility: hidden;
  101. width: 120px;
  102. background-color: black;
  103. color: #fff;
  104. text-align: center;
  105. border-radius: 6px;
  106. padding: 5px 0;
  107.  
  108. /* Position the tooltip */
  109. position: absolute;
  110. z-index: 1;
  111. }
  112.  
  113. .tooltip:hover .tiptext {
  114. visibility: visible;
  115. }
  116.  
  117. #one, #two, #three, #four, #five, #six {
  118. z-index:4;
  119. display:inline-block;
  120. position:fixed;
  121. height:15%;
  122. width:10%;
  123. text-align:center;
  124. }
  125. #one {
  126. top:12%;
  127. left:10%;
  128. }
  129. #one img {
  130. animation: pulse 2s infinite alternate;
  131. -o-animation: pulse 2s infinite alternate;
  132. -moz-animation: pulse 2s infinite alternate;
  133. -webkit-animation: pulse 2s infinite alternate;
  134. }
  135. #two {
  136. top:5%;
  137. left:30%;
  138. }
  139. #two img {
  140. animation:1s pulse2 2s infinite alternate;
  141. -o-animation:1s pulse2 2s infinite alternate;
  142. -moz-animation:1s pulse2 2s infinite alternate;
  143. -webkit-animation:1s pulse2 2s infinite alternate;
  144. }
  145. #three {
  146. top:10%;
  147. left:55%;
  148. }
  149. #three img {
  150. animation: pulse 3s infinite alternate;
  151. -o-animation: pulse 3s infinite alternate;
  152. -moz-animation: pulse 3s infinite alternate;
  153. -webkit-animation: pulse 3s infinite alternate;
  154. }
  155. #four {
  156. top 66%;
  157. left 100%;
  158. }
  159. #four img {
  160. animation:3s pulse 2s infinite alternate;
  161. -o-animation:3s pulse 2s infinite alternate;
  162. -moz-animation:3s pulse 2s infinite alternate;
  163. -webkit-animation:3s pulse 2s infinite alternate;
  164. }
  165. #five {
  166. top:55%;
  167. left:80%;
  168. }
  169. #five img {
  170. animation: pulse2 4s infinite alternate;
  171. -o-animation: pulse2 4s infinite alternate;
  172. -moz-animation: pulse2 4s infinite alternate;
  173. -webkit-animation: pulse2 4s infinite alternate;
  174. }
  175. #six {
  176. top:50%;
  177. left:10%;
  178. }
  179. #six img {
  180. animation: pulse 2s infinite alternate;
  181. -o-animation: pulse 2s infinite alternate;
  182. -moz-animation: pulse 2s infinite alternate;
  183. -webkit-animation: pulse 2s infinite alternate;
  184. }
  185. a img {
  186. position:absolute;
  187. top:50%;
  188. left:50%;
  189. width:100%;
  190. transform: translateX(-50%) translateY(-50%);
  191. -o-transform: translateX(-50%) translateY(-50%);
  192. -moz-transform: translateX(-50%) translateY(-50%);
  193. -webkit-transform: translateX(-50%) translateY(-50%);
  194. }
  195. @keyframes pulse {
  196. from {width:50%;}
  197. to {width:100%;}
  198. }
  199. @-o-keyframes pulse {
  200. from {width:50%;}
  201. to {width:100%;}
  202. }
  203. @-moz-keyframes pulse {
  204. from {width:50%;}
  205. to {width:100%;}
  206. }
  207. @-webkit-keyframes pulse {
  208. from {width:50%;}
  209. to {width:100%;}
  210. }
  211. @keyframes pulse2 {
  212. from {width:80%;}
  213. to {width:120%;}
  214. }
  215. @-o-keyframes pulse2 {
  216. from {width:80%;}
  217. to {width:120%;}
  218. }
  219. @-moz-keyframes pulse2 {
  220. from {width:80%;}
  221. to {width:120%;}
  222. }
  223. @-webkit-keyframes pulse2 {
  224. from {width:80%;}
  225. to {width:120%;}
  226. }
  227. .infobox, #mugshot {
  228. z-index:1;
  229. position:fixed;
  230. top:25%;
  231. left:30%;
  232. height:75%;
  233. width:40%;
  234. }
  235. .infobox {
  236. z-index:2;
  237. background-color:rgba(0, 0, 0, 0.8);
  238. overflow-y:auto;
  239. opacity:0;
  240. transition:0.5s ease-in;
  241. -o-transition:0.5s ease-in;
  242. -ms-transition:0.5s ease-in;
  243. -moz-transition:0.5s ease-in;
  244. -webkit-transition:0.5s ease-in;
  245. }
  246. .infobox:target {
  247. z-index:3;
  248. opacity:1;
  249. }
  250. #mugshot {
  251. overflow:hidden;
  252. }
  253. #mugshot img {
  254. position:absolute;
  255. left:50%;
  256. bottom:0%;
  257. height:100%;
  258. transform: translateX(-50%);
  259. -o-transform: translateX(-50%);
  260. -moz-transform: translateX(-50%);
  261. -webkit-transform: translateX(-50%);
  262. }
  263. h1 {
  264. position:absolute;
  265. font-family:script, Brush Script MT, serif;
  266. font-size:300%;
  267. }
  268. a {
  269. color:#68a6b0;
  270. }
  271. ::-webkit-scrollbar {
  272. width:8px;
  273. height:8px;
  274. background-color:transparent;
  275. }
  276. ::-webkit-scrollbar-thumb:vertical {
  277. background-color:#68a6b0;
  278. box-shadow:0px 0px 10px #68a6b0;
  279. }
  280. ::-webkit-scrollbar-thumb:horizontal {
  281. background-color:#68a6b0;
  282. box-shadow:0px 0px 10px #68a6b0;
  283. }
  284. #credit {
  285. text-decoration:none;
  286. color:#007ba7;
  287. position:fixed;
  288. right:1%;
  289. bottom:0%;
  290. background-color:#ffffff;
  291. border-radius:5px;
  292. font-family: UnifrakturCook, Brush Script MT, script, cursive;
  293. font-size:16px;
  294. }
  295. </style>
  296.  
  297. <a href="#01" id="one">
  298. <img src="http://i.picpar.com/1I7c.png"/>
  299. </a>
  300.  
  301. <a href="#02" id="two">
  302. <img src="http://i.picpar.com/1I7c.png"/>
  303. </a>
  304.  
  305. <a href="#03" id="three">
  306. <img src="http://i.picpar.com/1I7c.png"/>
  307. </a>
  308.  
  309. <a href="#04" id="four">
  310. <img src="http://i.picpar.com/1I7c.png"/>
  311. </a>
  312. <a href="#04" id="six">
  313. <img src="http://i.picpar.com/1I7c.png"/>
  314. </a>
  315. <a href="#00" id="five">
  316. <img src="http://i.picpar.com/1I7c.png"/>
  317. </a>
  318.  
  319.  
  320.  
  321.  
  322.  
  323.  
  324. <style>
  325. body {
  326. background-color:#000000;
  327. color:#ffffff;
  328. text-shadow:0px 0px 10px #68a6b0;
  329. text-align:center;
  330. }
  331. #one, #two, #three, #four, #five, #six {
  332. z-index:4;
  333. display:inline-block;
  334. position:fixed;
  335. height:15%;
  336. width:10%;
  337. text-align:center;
  338. }
  339. #one {
  340. bottom:12%;
  341. left:20%;
  342. }
  343. #one img {
  344. animation: pulse 2s infinite alternate;
  345. -o-animation: pulse 2s infinite alternate;
  346. -moz-animation: pulse 2s infinite alternate;
  347. -webkit-animation: pulse 2s infinite alternate;
  348. }
  349. #two {
  350. top:20%;
  351. left:30%;
  352. }
  353. #two img {
  354. animation:1s pulse2 2s infinite alternate;
  355. -o-animation:1s pulse2 2s infinite alternate;
  356. -moz-animation:1s pulse2 2s infinite alternate;
  357. -webkit-animation:1s pulse2 2s infinite alternate;
  358. }
  359. #three {
  360. top:10%;
  361. lef:45%;
  362. }
  363. #three img {
  364. animation: pulse 3s infinite alternate;
  365. -o-animation: pulse 3s infinite alternate;
  366. -moz-animation: pulse 3s infinite alternate;
  367. -webkit-animation: pulse 3s infinite alternate;
  368. }
  369. #four {
  370. top:30%;
  371. left:72.5%;
  372. }
  373. #four img {
  374. animation:3s pulse 2s infinite alternate;
  375. -o-animation:3s pulse 2s infinite alternate;
  376. -moz-animation:3s pulse 2s infinite alternate;
  377. -webkit-animation:3s pulse 2s infinite alternate;
  378. }
  379. #five {
  380. top:55%;
  381. left:60%;
  382. }
  383. #five img {
  384. animation: pulse2 4s infinite alternate;
  385. -o-animation: pulse2 4s infinite alternate;
  386. -moz-animation: pulse2 4s infinite alternate;
  387. -webkit-animation: pulse2 4s infinite alternate;
  388. }
  389. #six {
  390. top:50%;
  391. left:22%;
  392. }
  393. #six img {
  394. animation: pulse 2s infinite alternate;
  395. -o-animation: pulse 2s infinite alternate;
  396. -moz-animation: pulse 2s infinite alternate;
  397. -webkit-animation: pulse 2s infinite alternate;
  398. }
  399. a img {
  400. position:absolute;
  401. top:50%;
  402. left:50%;
  403. width:100%;
  404. transform: translateX(-50%) translateY(-50%);
  405. -o-transform: translateX(-50%) translateY(-50%);
  406. -moz-transform: translateX(-50%) translateY(-50%);
  407. -webkit-transform: translateX(-50%) translateY(-50%);
  408. }
  409. @keyframes pulse {
  410. from {width:50%;}
  411. to {width:100%;}
  412. }
  413. @-o-keyframes pulse {
  414. from {width:50%;}
  415. to {width:100%;}
  416. }
  417. @-moz-keyframes pulse {
  418. from {width:50%;}
  419. to {width:100%;}
  420. }
  421. @-webkit-keyframes pulse {
  422. from {width:50%;}
  423. to {width:100%;}
  424. }
  425. @keyframes pulse2 {
  426. from {width:80%;}
  427. to {width:120%;}
  428. }
  429. @-o-keyframes pulse2 {
  430. from {width:80%;}
  431. to {width:120%;}
  432. }
  433. @-moz-keyframes pulse2 {
  434. from {width:80%;}
  435. to {width:120%;}
  436. }
  437. @-webkit-keyframes pulse2 {
  438. from {width:80%;}
  439. to {width:120%;}
  440. }
  441. .infobox, #mugshot {
  442. z-index:1;
  443. position:fixed;
  444. top:25%;
  445. left:30%;
  446. height:65%;
  447. width:40%;
  448. }
  449. .infobox {
  450. z-index:2;
  451. background-color:rgba(0, 0, 0, 0.8);
  452. overflow-y:auto;
  453. opacity:0;
  454. transition:0.5s ease-in;
  455. -o-transition:0.5s ease-in;
  456. -ms-transition:0.5s ease-in;
  457. -moz-transition:0.5s ease-in;
  458. -webkit-transition:0.5s ease-in;
  459. }
  460. .infobox:target {
  461. z-index:3;
  462. opacity:1;
  463. }
  464. #mugshot {
  465. overflow:hidden;
  466. }
  467. #mugshot img {
  468. position:absolute;
  469. left:50%;
  470. bottom:0%;
  471. height:100%;
  472. transform: translateX(-50%);
  473. -o-transform: translateX(-50%);
  474. -moz-transform: translateX(-50%);
  475. -webkit-transform: translateX(-50%);
  476. }
  477. h1 {
  478. position:absolute;
  479. font-family:script, Brush Script MT, serif;
  480. font-size:300%;
  481. }
  482. a {
  483. color:#68a6b0;
  484. }
  485. ::-webkit-scrollbar {
  486. width:8px;
  487. height:8px;
  488. background-color:transparent;
  489. }
  490. ::-webkit-scrollbar-thumb:vertical {
  491. background-color:#68a6b0;
  492. box-shadow:0px 0px 10px #68a6b0;
  493. }
  494. ::-webkit-scrollbar-thumb:horizontal {
  495. background-color:#68a6b0;
  496. box-shadow:0px 0px 10px #68a6b0;
  497. }
  498. .six{
  499. z-index:2;
  500. background-color:rgba(0, 0, 0, 0.8);
  501. overflow-y:auto;
  502. opacity:0;
  503. transition:0.5s ease-in;
  504. -o-transition:0.5s ease-in;
  505. -ms-transition:0.5s ease-in;
  506. -moz-transition:0.5s ease-in;
  507. -webkit-transition:0.5s ease-in;
  508. }
  509. .six {
  510. z-index:3;
  511. opacity:1;
  512. }
  513. #mugshot {
  514. overflow:hidden;
  515. }
  516. #mugshot img {
  517. position:absolute;
  518. left:50%;
  519. bottom:0%;
  520. height:100%;
  521. transform: translateX(-50%);
  522. -o-transform: translateX(-50%);
  523. -moz-transform: translateX(-50%);
  524. -webkit-transform: translateX(-50%);
  525. }
  526. h1 {
  527. position:absolute;
  528. font-family:script, Brush Script MT, serif;
  529. font-size:300%;
  530. }
  531. a {
  532. color:#68a6b0;
  533. }
  534. ::-webkit-scrollbar {
  535. width:8px;
  536. height:8px;
  537. background-color:transparent;
  538. }
  539. ::-webkit-scrollbar-thumb:vertical {
  540. background-color:#68a6b0;
  541. box-shadow:0px 0px 10px #68a6b0;
  542. }
  543. ::-webkit-scrollbar-thumb:horizontal {
  544. background-color:#68a6b0;
  545. box-shadow:0px 0px 10px #68a6b0;
  546. }
  547. #credit {
  548. text-decoration:none;
  549. color:#007ba7;
  550. position:fixed;
  551. right:1%;
  552. bottom:0%;
  553. background-color:#ffffff;
  554. border-radius:5px;
  555. font-family: UnifrakturCook, Brush Script MT, script, cursive;
  556. font-size:16px;
  557. }
  558. </style>
  559.  
  560.  
  561. <a href="#01" id="one">
  562. <img src="http://i.picpar.com/1I7c.png"/>
  563. </a>
  564.  
  565. <a href="#02" id="two">
  566. <img src="http://i.picpar.com/1I7c.png"/>
  567. </a>
  568.  
  569. <a href="#03" id="three">
  570. <img src="http://i.picpar.com/1I7c.png"/>
  571. </a>
  572. <a href="#04" id="four">
  573. <img src="http://i.picpar.com/1I7c.png"/>
  574. </a>
  575.  
  576. <a href="#00" id="five">
  577. <img src="http://i.picpar.com/1I7c.png"/>
  578. </a>
  579. <a href="#06" id="six">
  580. <img src="http://i.picpar.com/1I7c.png"/>
  581. </a>
  582. <div id="mugshot">
  583.  
  584. <h1 style="bottom:10%;left:2.5%;">Sailor</h1>
  585. <h1 style="bottom:0%;right:2.5%;">Saturn</h1>
  586. </div>
  587.  
  588. <div class="infobox" id="01">
  589. <h2>Stats</h2>
  590. <p>
  591. <b>Name: Hotaru Tomoe, Sailor Saturn</b>
  592. <br>
  593. <b>
  594. <br>
  595. <b>Gender:Female</b>
  596. <br>
  597. <b>Age: appears to be 16 but due to being reborn she could be older.</b>
  598. <br>
  599. <b>Hair: Violet/black</b>
  600. <br>
  601. <b>Eyes: Violet</b>
  602. <br>
  603. <b>Relationship: Single</b>
  604. <br>
  605. <b>Can you stand the :<a href="https://www.youtube.com/watch?v=C9307H4Wlf4"> Silence</a></b>?
  606. <br>
  607. <b>Orientation: Love is love</b>
  608. </p>
  609. </div>
  610.  
  611. <div class="infobox" id="02">
  612. <h2></h2>
  613.  
  614. </div>
  615.  
  616. <div class="infobox" id="03">
  617. <h2>Abilities/powers</h2>
  618. <h3>Powers</h3>
  619. Sailor Saturn is the Senshi of Death and Re-Birth. While all of the other Senshi have their own powers like fire, water...ect hers are akin to death and destruction. Being the last Senshi to be awakened, and for good reason. Her purpose was to destroy a planet when the time comes and in turn, she too dies. Once the Glaive has been swung down with no words said and all power gathered up is when the destruction will begin, however, once everything has been dusted...returned to zero is when rebirth will take place once again. Everything will be reset including Saturn. However, despite bringing death and destruction Saturn does possess the ability to heal and can do so as Hotaru.
  620. <br>
  621. <h4>Abilities</h4>
  622.  
  623.  
  624. <a href="https://www.youtube.com/watch?v=LiZJIfTqrtc">Transform</a>
  625. <br><br>
  626. Weapon: Silence Glaive, the only weapon that Saturn uses.
  627. <br><br>
  628. Deat Reborn Revoulation~This wordless ability/attack, this is when the Glaive is dropped. All of the destructive force that is within the Senshi is released creating a series of violet ribbon-shaped projectiles that surround Saturn followed by deadly wind accompanied by destructive rays used to drain the strength and life out of everything to fuel this attack. Once all energy is harnessed and the Glaive dropped only then will silence...ruin be brought to everything only to be reborn right after. (This will not be used unless it HAS to be. Yes, based on cannon once this is done everything including herself will be killed.)
  629. <br><br>
  630. Deat Ribbon Revloution~ When swinging the Glaive in any direction a series of energized ribbons is turned into a blast that is flung in the direction of swing. Several blasts can be fired off. However, it is not powerful as Death Reborn but it can still cause destruction.
  631. <br><br>
  632. Silence Wall~ A barrier simply put.
  633. <br>
  634. CQC with the Glaive</div>
  635.  
  636. <div class="infobox" id="04">
  637. <h2>Out of petals</h2>
  638. <ul>
  639. <li>PM/rp friendly</li>
  640. <li>Part of this code was taken from <a href="http://ladycerattani.wixsite.com/cera-codes"> Cera-Codes</a></li>
  641. <li>IC =/= OOC.</li>
  642. <li>Yes a Sailor Moon character.</li>
  643. <li>Combat? Uhhh sure, we can fight.</li>
  644. <li>LT loved ST welcomed.</li>
  645. <li>Will be playing Saturn as a seperate personality from Hotaru, however I will play the character how I see fit, alright?</li>
  646. </ul>
  647. </div>
  648.  
  649.  
  650.  
  651. <div class="infobox" id="06">
  652. <h2>About Hotaru</h2>
  653.  
  654.  
  655. </div>
  656.  
  657.  
  658.  
  659.  
  660.  
  661.  
  662.  
  663. </body>
  664. </html>
  665.  
  666. </style>
  667.  
  668. <div class="luna"></div>
  669.  
  670. </body>
  671. </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!