API tools faq
paste
Advertisement
rpaccount

First jigsaw

rpaccount
Oct 23rd, 2017
117
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 14.65 KB | None | 0 0
raw download clone embed print report
  1. <html>
  2. <head>
  3. <script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  4. <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
  5. <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.6.5/dat.gui.min.js"></script>
  6. <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
  7. <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.11.0/d3.min.js"></script>
  8. <script src="https://roleplay.chat/jquery.tooltipster.js"></script>
  9. <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script>
  10. <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/87/three.js"></script>
  11. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css">
  12. <link href="https://roleplay.chat/tooltipster.css" rel="stylesheet" type="text/css">
  13. <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
  14. <script defer>
  15. window.onload = function() {
  16.  
  17. };
  18. </script>
  19. <style>
  20.  
  21. </style>
  22. </head>
  23. <body>
  24. <style>
  25.  
  26.  
  27. body {
  28. /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#c9bebd+0,cab3b1+40,936661+100 */
  29. background: #DE2520 url(https://zippy.gfycat.com/SomberFarflungAfricanfisheagle.gif);
  30. overflow-y:hidden;
  31. overflow-x:hidden;}
  32.  
  33.  
  34. /*B2FFA2*/
  35.  
  36. .luna {
  37. margin-top: 50px;
  38. background: url('http://i68.tinypic.com/nnwkzq.png');
  39. width: 300px; height: 383px;
  40. background-color: transparent;
  41. border: 0px solid #999;
  42. animation: bounce 1s infinite alternate;
  43. -webkit-animation: bounce 1s infinite alternate;
  44. }
  45. @keyframes bounce {
  46. from {
  47. transform: translateY(0px);
  48. }
  49. to {
  50. transform: translateY(-15px);
  51. }
  52. }
  53. @-webkit-keyframes bounce {
  54. from {
  55. transform: translateY(0px);
  56. }
  57. to {
  58. transform: translateY(-15px);
  59. }
  60.  
  61. .tooltip {
  62. position: relative;
  63. display: inline-block;
  64. border-bottom: 1px dotted black;
  65. }
  66.  
  67. .tooltip .tooltiptext {
  68. visibility: hidden;
  69. width: 120px;
  70. background-color: black;
  71. color: #fff;
  72. text-align: center;
  73. border-radius: 6px;
  74. padding: 5px 0;
  75.  
  76. /* Position the tooltip */
  77. position: absolute;
  78. z-index: 1;
  79. }
  80.  
  81. .tooltip:hover .tiptext {
  82. visibility: visible;
  83. }
  84.  
  85. #one, #two, #three, #four, #five, #six {
  86. z-index:4;
  87. display:inline-block;
  88. position:fixed;
  89. height:15%;
  90. width:10%;
  91. text-align:center;
  92. }
  93. #one {
  94. top:12%;
  95. left:10%;
  96. }
  97. #one img {
  98. animation: pulse 2s infinite alternate;
  99. -o-animation: pulse 2s infinite alternate;
  100. -moz-animation: pulse 2s infinite alternate;
  101. -webkit-animation: pulse 2s infinite alternate;
  102. }
  103. #two {
  104. top:5%;
  105. left:30%;
  106. }
  107. #two img {
  108. animation:1s pulse2 2s infinite alternate;
  109. -o-animation:1s pulse2 2s infinite alternate;
  110. -moz-animation:1s pulse2 2s infinite alternate;
  111. -webkit-animation:1s pulse2 2s infinite alternate;
  112. }
  113. #three {
  114. top:10%;
  115. left:45%;
  116. }
  117. #three img {
  118. animation: pulse 3s infinite alternate;
  119. -o-animation: pulse 3s infinite alternate;
  120. -moz-animation: pulse 3s infinite alternate;
  121. -webkit-animation: pulse 3s infinite alternate;
  122. }
  123. #four {
  124. top:30%;
  125. left:72.5%;
  126. }
  127. #four img {
  128. animation:3s pulse 2s infinite alternate;
  129. -o-animation:3s pulse 2s infinite alternate;
  130. -moz-animation:3s pulse 2s infinite alternate;
  131. -webkit-animation:3s pulse 2s infinite alternate;
  132. }
  133. #five {
  134. top:55%;
  135. left:80%;
  136. }
  137. #five img {
  138. animation: pulse2 4s infinite alternate;
  139. -o-animation: pulse2 4s infinite alternate;
  140. -moz-animation: pulse2 4s infinite alternate;
  141. -webkit-animation: pulse2 4s infinite alternate;
  142. }
  143. #six {
  144. top:50%;
  145. left:10%;
  146. }
  147. #six img {
  148. animation: pulse 2s infinite alternate;
  149. -o-animation: pulse 2s infinite alternate;
  150. -moz-animation: pulse 2s infinite alternate;
  151. -webkit-animation: pulse 2s infinite alternate;
  152. }
  153. a img {
  154. position:absolute;
  155. top:50%;
  156. left:50%;
  157. width:100%;
  158. transform: translateX(-50%) translateY(-50%);
  159. -o-transform: translateX(-50%) translateY(-50%);
  160. -moz-transform: translateX(-50%) translateY(-50%);
  161. -webkit-transform: translateX(-50%) translateY(-50%);
  162. }
  163. @keyframes pulse {
  164. from {width:50%;}
  165. to {width:100%;}
  166. }
  167. @-o-keyframes pulse {
  168. from {width:50%;}
  169. to {width:100%;}
  170. }
  171. @-moz-keyframes pulse {
  172. from {width:50%;}
  173. to {width:100%;}
  174. }
  175. @-webkit-keyframes pulse {
  176. from {width:50%;}
  177. to {width:100%;}
  178. }
  179. @keyframes pulse2 {
  180. from {width:80%;}
  181. to {width:120%;}
  182. }
  183. @-o-keyframes pulse2 {
  184. from {width:80%;}
  185. to {width:120%;}
  186. }
  187. @-moz-keyframes pulse2 {
  188. from {width:80%;}
  189. to {width:120%;}
  190. }
  191. @-webkit-keyframes pulse2 {
  192. from {width:80%;}
  193. to {width:120%;}
  194. }
  195. .infobox, #mugshot {
  196. z-index:1;
  197. position:fixed;
  198. top:25%;
  199. left:30%;
  200. height:75%;
  201. width:40%;
  202. }
  203. .infobox {
  204. z-index:2;
  205. background-color:rgba(0, 0, 0, 0.8);
  206. overflow-y:auto;
  207. opacity:0;
  208. transition:0.5s ease-in;
  209. -o-transition:0.5s ease-in;
  210. -ms-transition:0.5s ease-in;
  211. -moz-transition:0.5s ease-in;
  212. -webkit-transition:0.5s ease-in;
  213. }
  214. .infobox:target {
  215. z-index:3;
  216. opacity:1;
  217. }
  218. #mugshot {
  219. overflow:hidden;
  220. }
  221. #mugshot img {
  222. position:absolute;
  223. left:50%;
  224. bottom:0%;
  225. height:100%;
  226. transform: translateX(-50%);
  227. -o-transform: translateX(-50%);
  228. -moz-transform: translateX(-50%);
  229. -webkit-transform: translateX(-50%);
  230. }
  231. h1 {
  232. position:absolute;
  233. font-family:script, Brush Script MT, serif;
  234. font-size:300%;
  235. }
  236. a {
  237. color:#68a6b0;
  238. }
  239. ::-webkit-scrollbar {
  240. width:8px;
  241. height:8px;
  242. background-color:transparent;
  243. }
  244. ::-webkit-scrollbar-thumb:vertical {
  245. background-color:#68a6b0;
  246. box-shadow:0px 0px 10px #68a6b0;
  247. }
  248. ::-webkit-scrollbar-thumb:horizontal {
  249. background-color:#68a6b0;
  250. box-shadow:0px 0px 10px #68a6b0;
  251. }
  252. #credit {
  253. text-decoration:none;
  254. color:#007ba7;
  255. position:fixed;
  256. right:1%;
  257. bottom:0%;
  258. background-color:#ffffff;
  259. border-radius:5px;
  260. font-family: UnifrakturCook, Brush Script MT, script, cursive;
  261. font-size:16px;
  262. }
  263. </style>
  264.  
  265. <a href="#01" id="one">
  266. <img src="http://i64.tinypic.com/15doon.png"/>
  267. </a>
  268.  
  269. <a href="#02" id="two">
  270. <img src="http://i64.tinypic.com/szz879.png"/>
  271. </a>
  272.  
  273. <a href="#03" id="three">
  274. <img src="http://i64.tinypic.com/nvslzd.png"/>
  275. </a>
  276.  
  277. <a href="#04" id="four">
  278. <img src="http://i65.tinypic.com/2ytxjyv.png"/>
  279. </a>
  280. <a href="#04" id="six">
  281. <img src="http://i65.tinypic.com/2lsdwzt.png"/>
  282. </a>
  283. <a href="#00" id="five">
  284. <img src="http://i64.tinypic.com/2l9ibdf.png"/>
  285. </a>
  286.  
  287.  
  288.  
  289.  
  290.  
  291.  
  292. <style>
  293. body {
  294. background-color:#000000;
  295. color:#ffffff;
  296. text-shadow:0px 0px 10px #68a6b0;
  297. text-align:center;
  298. }
  299. #one, #two, #three, #four, #five, #six {
  300. z-index:4;
  301. display:inline-block;
  302. position:fixed;
  303. height:15%;
  304. width:10%;
  305. text-align:center;
  306. }
  307. #one {
  308. bottom:12%;
  309. left:20%;
  310. }
  311. #one img {
  312. animation: pulse 2s infinite alternate;
  313. -o-animation: pulse 2s infinite alternate;
  314. -moz-animation: pulse 2s infinite alternate;
  315. -webkit-animation: pulse 2s infinite alternate;
  316. }
  317. #two {
  318. top:20%;
  319. left:30%;
  320. }
  321. #two img {
  322. animation:1s pulse2 2s infinite alternate;
  323. -o-animation:1s pulse2 2s infinite alternate;
  324. -moz-animation:1s pulse2 2s infinite alternate;
  325. -webkit-animation:1s pulse2 2s infinite alternate;
  326. }
  327. #three {
  328. top:10%;
  329. left:45%;
  330. }
  331. #three img {
  332. animation: pulse 3s infinite alternate;
  333. -o-animation: pulse 3s infinite alternate;
  334. -moz-animation: pulse 3s infinite alternate;
  335. -webkit-animation: pulse 3s infinite alternate;
  336. }
  337. #four {
  338. top:30%;
  339. left:72.5%;
  340. }
  341. #four img {
  342. animation:3s pulse 2s infinite alternate;
  343. -o-animation:3s pulse 2s infinite alternate;
  344. -moz-animation:3s pulse 2s infinite alternate;
  345. -webkit-animation:3s pulse 2s infinite alternate;
  346. }
  347. #five {
  348. top:55%;
  349. left:80%;
  350. }
  351. #five img {
  352. animation: pulse2 4s infinite alternate;
  353. -o-animation: pulse2 4s infinite alternate;
  354. -moz-animation: pulse2 4s infinite alternate;
  355. -webkit-animation: pulse2 4s infinite alternate;
  356. }
  357. #six {
  358. top:50%;
  359. left:22%;
  360. }
  361. #six img {
  362. animation: pulse 2s infinite alternate;
  363. -o-animation: pulse 2s infinite alternate;
  364. -moz-animation: pulse 2s infinite alternate;
  365. -webkit-animation: pulse 2s infinite alternate;
  366. }
  367. a img {
  368. position:absolute;
  369. top:50%;
  370. left:50%;
  371. width:100%;
  372. transform: translateX(-50%) translateY(-50%);
  373. -o-transform: translateX(-50%) translateY(-50%);
  374. -moz-transform: translateX(-50%) translateY(-50%);
  375. -webkit-transform: translateX(-50%) translateY(-50%);
  376. }
  377. @keyframes pulse {
  378. from {width:50%;}
  379. to {width:100%;}
  380. }
  381. @-o-keyframes pulse {
  382. from {width:50%;}
  383. to {width:100%;}
  384. }
  385. @-moz-keyframes pulse {
  386. from {width:50%;}
  387. to {width:100%;}
  388. }
  389. @-webkit-keyframes pulse {
  390. from {width:50%;}
  391. to {width:100%;}
  392. }
  393. @keyframes pulse2 {
  394. from {width:80%;}
  395. to {width:120%;}
  396. }
  397. @-o-keyframes pulse2 {
  398. from {width:80%;}
  399. to {width:120%;}
  400. }
  401. @-moz-keyframes pulse2 {
  402. from {width:80%;}
  403. to {width:120%;}
  404. }
  405. @-webkit-keyframes pulse2 {
  406. from {width:80%;}
  407. to {width:120%;}
  408. }
  409. .infobox, #mugshot {
  410. z-index:1;
  411. position:fixed;
  412. top:25%;
  413. left:30%;
  414. height:65%;
  415. width:40%;
  416. }
  417. .infobox {
  418. z-index:2;
  419. background-color:rgba(0, 0, 0, 0.8);
  420. overflow-y:auto;
  421. opacity:0;
  422. transition:0.5s ease-in;
  423. -o-transition:0.5s ease-in;
  424. -ms-transition:0.5s ease-in;
  425. -moz-transition:0.5s ease-in;
  426. -webkit-transition:0.5s ease-in;
  427. }
  428. .infobox:target {
  429. z-index:3;
  430. opacity:1;
  431. }
  432. #mugshot {
  433. overflow:hidden;
  434. }
  435. #mugshot img {
  436. position:absolute;
  437. left:50%;
  438. bottom:0%;
  439. height:100%;
  440. transform: translateX(-50%);
  441. -o-transform: translateX(-50%);
  442. -moz-transform: translateX(-50%);
  443. -webkit-transform: translateX(-50%);
  444. }
  445. h1 {
  446. position:absolute;
  447. font-family:script, Brush Script MT, serif;
  448. font-size:300%;
  449. }
  450. a {
  451. color:#68a6b0;
  452. }
  453. ::-webkit-scrollbar {
  454. width:8px;
  455. height:8px;
  456. background-color:transparent;
  457. }
  458. ::-webkit-scrollbar-thumb:vertical {
  459. background-color:#68a6b0;
  460. box-shadow:0px 0px 10px #68a6b0;
  461. }
  462. ::-webkit-scrollbar-thumb:horizontal {
  463. background-color:#68a6b0;
  464. box-shadow:0px 0px 10px #68a6b0;
  465. }
  466. .six{
  467. z-index:2;
  468. background-color:rgba(0, 0, 0, 0.8);
  469. overflow-y:auto;
  470. opacity:0;
  471. transition:0.5s ease-in;
  472. -o-transition:0.5s ease-in;
  473. -ms-transition:0.5s ease-in;
  474. -moz-transition:0.5s ease-in;
  475. -webkit-transition:0.5s ease-in;
  476. }
  477. .six {
  478. z-index:3;
  479. opacity:1;
  480. }
  481. #mugshot {
  482. overflow:hidden;
  483. }
  484. #mugshot img {
  485. position:absolute;
  486. left:50%;
  487. bottom:0%;
  488. height:100%;
  489. transform: translateX(-50%);
  490. -o-transform: translateX(-50%);
  491. -moz-transform: translateX(-50%);
  492. -webkit-transform: translateX(-50%);
  493. }
  494. h1 {
  495. position:absolute;
  496. font-family:script, Brush Script MT, serif;
  497. font-size:300%;
  498. }
  499. a {
  500. color:#68a6b0;
  501. }
  502. ::-webkit-scrollbar {
  503. width:8px;
  504. height:8px;
  505. background-color:transparent;
  506. }
  507. ::-webkit-scrollbar-thumb:vertical {
  508. background-color:#68a6b0;
  509. box-shadow:0px 0px 10px #68a6b0;
  510. }
  511. ::-webkit-scrollbar-thumb:horizontal {
  512. background-color:#68a6b0;
  513. box-shadow:0px 0px 10px #68a6b0;
  514. }
  515. #credit {
  516. text-decoration:none;
  517. color:#007ba7;
  518. position:fixed;
  519. right:1%;
  520. bottom:0%;
  521. background-color:#ffffff;
  522. border-radius:5px;
  523. font-family: UnifrakturCook, Brush Script MT, script, cursive;
  524. font-size:16px;
  525. }
  526. </style>
  527.  
  528.  
  529. <a href="#01" id="one">
  530. <img src="http://i64.tinypic.com/15doon.png"/>
  531. </a>
  532.  
  533. <a href="#02" id="two">
  534. <img src="http://i64.tinypic.com/szz879.png"/>
  535. </a>
  536.  
  537. <a href="#03" id="three">
  538. <img src="http://i64.tinypic.com/nvslzd.png"/>
  539. </a>
  540.  
  541. <a href="#04" id="four">
  542. <img src="http://i65.tinypic.com/2ytxjyv.png"/>
  543. </a>
  544.  
  545. <a href="#00" id="five">
  546. <img src="http://i64.tinypic.com/2l9ibdf.png"/>
  547. </a>
  548. <a href="#06" id="six">
  549. <img src="http://i65.tinypic.com/2lsdwzt.png"/>
  550. </a>
  551. <div id="mugshot">
  552. <img src="http://i63.tinypic.com/28jlbgp.jpg"/>
  553. <h1 style="bottom:10%;left:2.5%;">Flower</h1>
  554. <h1 style="bottom:0%;right:2.5%;">Fell</h1>
  555. </div>
  556.  
  557. <div class="infobox" id="01">
  558. <h2>Stats</h2>
  559. <p>
  560. <b>Name:</b> Frisk
  561. <br>
  562. <b>Race:</b> Human
  563. <br>
  564. <b>Gender:</b> Female
  565. <br>
  566. <b>Age:</b> 18
  567. <br>
  568. <b>Hair:</b> Brown
  569. <br>
  570. <b>Eyes:</b> Covered in flowers
  571. <br>
  572. <b>Relationship:</b> <a href="https://roleplay.chat/profile.php?user=Cruel+Regret"> His sunshine</a>
  573. <br>
  574. <b>Remember:<a href="https://www.youtube.com/watch?v=K46xzmt7eRk"> You are not alone.</a></b>
  575. <br>
  576. <b>Orientation:</b> What?
  577. </p>
  578. </div>
  579.  
  580. <div class="infobox" id="02">
  581. <h2>Those I hold dear</h2>
  582. <a href="https://roleplay.chat/profile.php?user=Boss%20Asgore"> The Goat Father</a>
  583. <br>
  584. <a href="https://roleplay.chat/profile.php?user=Cruel%20Regret"> I love him</a>
  585. <br>
  586. <a href="https://roleplay.chat/profile.php?user=Shift%20Asriel"> Asriel</a>
  587. <br>
  588. <a href="https://roleplay.chat/profile.php?user=Shift!Chara"> Shift Chara~</a>
  589. <br>
  590. <a href="https://roleplay.chat/profile.php?user=Nameless"> Crow Crow</a>
  591. <br>
  592. <a href="https://roleplay.chat/profile.php?user=Skelesans"> My Skele-friend</a>
  593. <br>
  594. <a href="https://roleplay.chat/profile.php?user=The+Blood+Brothers"> Clow-clow</a>
  595. <br>
  596. </div>
  597.  
  598. <div class="infobox" id="03">
  599. <h2>Gallery</h2>
  600. Will be up after a while.
  601. </div>
  602.  
  603. <div class="infobox" id="04">
  604. <h2>Out of petals</h2>
  605. <ul>
  606. <li>PM/rp friendly</li>
  607. <li>Part of this code was taken from <a href="http://ladycerattani.wixsite.com/cera-codes"> Cera-Codes</a></li>
  608. <li>IC =/= OOC.</li>
  609. <li>I am not Frisk and Frisk is not me.</li>
  610. <li>USe brackets for ooc please, usually IC most of the time.</li>
  611. </ul>
  612. </div>
  613.  
  614.  
  615.  
  616. <div class="infobox" id="06">
  617. <h2>About the flower</h2>
  618. After falling down in the Underground she had met Flowey who helped her on her journy. It was alright for the most part until dieing for the first time, normally there would have been the ability to SAVE/LOAD but there was none the only way for her to come back was to RESET each time.
  619. <br><br>
  620. After loading the human soon found herself with a buttercup that had grown on the left temple, trying to remove it felt like ripping out her own flesh. Despite this new growth Frisk continued on her path in the Underground. Many deaths happened just in the ruins alone and even more so with Toriel as she attempted to force Frisk to stay. That did not last too long and soon gained her freedom. Then...she met Sans...
  621. <br><br>
  622. She had to him countless times, with each death came a new flower. These flowers, buttercups, are activily killing the girl but slowly. He notices this and stops only to make a vow to protect her even if that means he would have to fight his brother. Frisk asked Sans to take her to the barrier to free everyone, Flowey explained that Asgore has six souls and if they used at least one then everyone would be free...Frisk refused to let that happen.
  623. <br><br>
  624. She is now blind from the flowers that cover the upper most part of her face and will get weak from time to time meaning that she will be unable to use most of her body but that doesn't stop this determined ball of mercy from trying to live and help others.
  625.  
  626. </div>
  627.  
  628.  
  629.  
  630.  
  631.  
  632.  
  633.  
  634. </body>
  635. </html>
  636.  
  637. </style>
  638.  
  639. <div class="luna"></div>
  640.  
  641. </body>
  642. </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!