API tools faq
paste
rpaccount

Tira rework

rpaccount
Dec 28th, 2017
122
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 8.14 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?v=8"></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. @import url("https://fonts.googleapis.com/css?family=Caveat|Crimson+Text:600|Forum");
  26. ::-webkit-scrollbar {
  27. width: 0.3vw;
  28. height: 0.3vw;
  29. }
  30. ::-webkit-scrollbar-track {
  31. border-radius: 0px;
  32. background-color: transparent;
  33. }
  34. ::-webkit-scrollbar-thumb {
  35. border-radius: 0px;
  36. background-color: transparent;
  37. }
  38. body{background: #000;
  39. background-image: url('https://8wayrun.com/attachments/sc5_pub_stg_field_001-jpg.5612/');
  40. background-size: cover;}
  41.  
  42. .doors {
  43. box-sizing: border-box;
  44. position: relative;
  45. width: 100%;
  46. height: 100%;
  47. overflow: hidden;
  48. }
  49.  
  50. .doors .key {
  51. position: absolute;
  52. top: 0%;
  53. width: 100%;
  54. color: yellow;
  55. z-index: 10;
  56. text-align: center;
  57. font-size: 48px;
  58. font-family: "Trebuchet MS";
  59. text-transform: uppercase;
  60. text-shadow: 5px 0 2px #000;
  61. transition: transform 2s ease-in-out;
  62. }
  63.  
  64. .doors:hover .key {
  65. transform: scale(0);
  66. }
  67.  
  68. .doors .left {
  69. display: inline-block;
  70. position: absolute;
  71. top: 0;
  72. left: 0;
  73. width: 50%;
  74. height: 100%;
  75. box-shadow: 3px 0 4px #111;
  76. background-image: url("https://8wayrun.com/attachments/sc5_pub_stg_field_001-jpg.5612/");
  77. background-size: cover;
  78. background-repeat: no-repeat;
  79. transition: width 2s ease-in-out;
  80. }
  81. .doors .right {
  82. display: inline-block;
  83. position: absolute;
  84. top: 0;
  85. right: 0;
  86. width: 50%;
  87. height: 100%;
  88. box-shadow: 3px 0 4px #111;
  89. background-image: url("https://8wayrun.com/attachments/sc5_pub_stg_field_001-jpg.5612/");
  90. background-size: cover;
  91. background-repeat: no-repeat;
  92. transform: scaleX(-1);
  93. transition: width 2s ease-in-out;
  94. }
  95.  
  96. .doors:hover .left, .doors:hover .right {
  97. width: 5%;
  98. }
  99.  
  100. .inner {
  101. width: 100%;
  102. height: 100%;
  103. }
  104.  
  105. .image {
  106. border-radius: 50%;
  107. -webkit-transition: -webkit-transform .8s ease-in-out;
  108. transition: transform .8s ease-in-out;
  109. }
  110. .image:hover {
  111. -webkit-transform: rotate(360deg);
  112. transform: rotate(360deg);
  113. }
  114.  
  115.  
  116.  
  117.  
  118.  
  119.  
  120.  
  121. #content {
  122. position: fixed;
  123. width: 100%;
  124. height: 70%;
  125. background: transparent;
  126. top: 15%;
  127. left: 0%;
  128. transition-duration: 1s;
  129. }
  130.  
  131.  
  132.  
  133. @keyframes whoosh {
  134. 0% {
  135. opacity: 1;
  136. }
  137. 100% {
  138. opacity: 0;
  139. }
  140. }
  141.  
  142. @-webkit-keyframes whoosh {
  143. 0% {
  144. opacity: 1;
  145. }
  146. 100% {
  147. opacity: 0;
  148. }
  149. }
  150.  
  151.  
  152. #pluto {
  153. position: fixed;
  154. height: 96%;
  155. width: 25%;
  156. background: transparent;
  157. left: 36.7%;
  158. transition-duration: 1s;
  159. }
  160.  
  161. #content:hover #garnet {
  162. opacity: 1;
  163. left: 6%;
  164. transition-duration: 1.5s;
  165. }
  166.  
  167. #content:hover #guarding {
  168. opacity: 1;
  169. right: 6%;
  170. transition-duration: 1.5s;
  171. }
  172.  
  173. #garnet {
  174. position: absolute;
  175. overflow: auto;
  176. height: 92.5%;
  177. width: 25%;
  178. background: #161616;
  179. border-radius: 10px;
  180. border: 3px solid;
  181. border-color: #60bcbb;
  182. left: 35%;
  183. padding: 15px;
  184. opacity: 0;
  185. transition-duration: 1s;
  186. font-family: "Forum";
  187. font-size: 2.3vh;
  188. color: #eee;
  189.  
  190. }
  191.  
  192. #guarding {
  193. position: absolute;
  194. overflow: auto;
  195. height: 92.5%;
  196. width: 25%;
  197. background: #161616;
  198. border-radius: 10px;
  199. border: 3px solid;
  200. border-color: #60bcbb;
  201. right: 35%;
  202. padding: 15px;
  203. opacity: 0;
  204. transition-duration: 1s;
  205. font-family: "Forum";
  206. font-size: 2.3vh;
  207. color: #eee;
  208. }
  209.  
  210. #gate,
  211. #time {
  212. width: 100%;
  213. height: 100%;
  214. position: relative;
  215. overflow: hidden;
  216.  
  217. }
  218.  
  219. #leftbox,
  220. #right {
  221. width: 100%;
  222. height: 100%;
  223. overflow: auto;
  224.  
  225. }
  226. }
  227.  
  228. #leftbox:target,
  229. #rightbox:target {
  230. animation: appear 1.5s 1;
  231. -webkit-animation: appear 1.5s 1;
  232. }
  233.  
  234. @keyframes appear {
  235. from {
  236. opacity: 0;
  237. }
  238. to {
  239. opacity: 1;
  240. }
  241. }
  242.  
  243. @-webkit-keyframes appear {
  244. from {
  245. opacity: 0;
  246. }
  247. to {
  248. opacity: 1;
  249. }
  250. }
  251.  
  252. h1 {
  253. font-family: "Caveat", cursive;
  254. color: #60bcbb;
  255. text-decoration: none;
  256. }
  257.  
  258. a {
  259. font-family: "Caveat", cursive;
  260. color: #60bcbb;
  261. text-decoration: none;
  262. }
  263.  
  264. a:hover {
  265. color: #eee;
  266. }
  267.  
  268. .hue {
  269. float: right;
  270. }
  271.  
  272.  
  273. </style>
  274. <div class="doors">
  275. <div class="key"><img src="https://vignette.wikia.nocookie.net/galea/images/f/f7/Kisekae_2_prop_tira_s_ring_blade_by_zebuta-d7jx6eg.png/revision/latest?cb=20160901143406" height="500px" class="image"></div>
  276. <div class="left"></div>
  277. <div class="inner">
  278. <div id="sheet"></div>
  279. <div id="content">
  280. <div id="pluto">
  281.  
  282. </div>
  283.  
  284. <div id="garnet">
  285. <div id="gate">
  286. <div id="leftbox">
  287. <center><h1>Stats</h1></center>
  288. <a>Name</a> <div class="hue"><font size="-1px">Moana</font></div><br>
  289. <a>Age</a> <div class="hue"><font size="-1px">Late Teens</font></div><br>
  290. <a>Height + Weight</a> <div class="hue"><font size="-1px">5'3" // 156lbs</font></div><br>
  291. <a>Species</a><div class="hue"><font size="-1px">Human </font></div><br>
  292. <a>Hair</a> <div class="hue"><font size="-1px">Long wavy black </font></div><br>
  293. <a>Eyes</a> <div class="hue"><font size="-1px">Brown</font></div><br>
  294. <a>Sexual Orientation</a> <div class="hue"><font size="-1px">Bisexual</font></div><br>
  295. <a>Status</a> <div class="hue"><font size="-1px">Singular</font></div><br>
  296.  
  297. <Center><h1>Personality</h1></center>
  298. <font size="-1px"><p>Moana, as Gramma Tala describes, "stands out from the crowd". She is adventurous, headstrong, strong-willed, practically fearless, and physically capable. Though she has moments of self-doubt, she has great pride in who she is, and is generally too stubborn to back away from new challenges. Moana approaches new experiences and tasks with the utmost seriousness and will stand her ground to fight for what she values even when all seems lost. She can present herself as an imposing force despite her size and has bested the most fearsome beasts and impossible obstacles across the seas of Oceania while relying almost solely on her own intelligence.</p></font>
  299.  
  300.  
  301.  
  302.  
  303. </div>
  304. </div>
  305. </div>
  306.  
  307.  
  308. <div id="guarding">
  309. <div id="time">
  310. <div id="rightbox">
  311. <center><h1>Tidbits</h1></center>
  312. <font size="-1px"><p>The daughter of a South Pacific chief. As the next chieftain of her village she is at odds with her responsibility to her people and her desire to explore the sea. As a child she was chosen by the Ocean to return the Heart of Te Fiti and when her island starts being overcome by darkness she undertakes this quest to save the lives of her people and learns about herself and her heritage along the way.</p></font>
  313. <center><h1>Rules/OOC</h1></center>
  314. <font size="-1px">
  315. ✧ IC=/= OOC. <br>
  316. ✦ PM friendly! <br>
  317. ✧ This is Moana from... Oh come on you know!<br>
  318. ✦ Profile is forever a WIP. <br>
  319. ✧ I'll play her to the best of my abilities.<br>
  320. ✦ None of the art is mine. And I shall remove them upon request.<br>
  321. ✧ Code belongs to me! DO NOT TOUCH!<Br>
  322. ✦ I work and go to school, real life priority. <Br>
  323. ✧ Start with a post if you want.<br>
  324. ✦ Very open to Crossovers.<br>
  325. ✧ Taken IRL.<Br>
  326. ✦ Semi- Novella, Mirror at times. Quality over quanity.<br>
  327. ✧ Skype and discord maybe.<br>
  328. </font>
  329. </div>
  330.  
  331. </div>
  332. </div>
  333. </div>
  334. <img src="https://data.whicdn.com/images/101892438/original.gif" Width="250px" style="float:right; margin-right: 550px; margin-top: 350px">
  335.  
  336. <div class="right"></div>
  337. </div>
  338.  
  339.  
  340.  
  341.  
  342. </body>
  343. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
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!