GokuSon

Android 21.2

Jan 23rd, 2018
86
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 10.89 KB | None | 0 0
  1.  
  2. <html>
  3. <head>
  4. <script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  5. <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
  6. <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.6.5/dat.gui.min.js"></script>
  7. <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
  8. <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.11.0/d3.min.js"></script>
  9. <script src="https://roleplay.chat/jquery.tooltipster.js?v=8"></script>
  10. <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script>
  11. <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/87/three.js"></script>
  12. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css">
  13. <link href="https://roleplay.chat/tooltipster.css" rel="stylesheet" type="text/css">
  14. <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
  15. <script defer>
  16. window.onload = function() {
  17.  
  18. };
  19. </script>
  20. <style>
  21.  
  22. </style>
  23. </head>
  24. <body>
  25.  
  26.  
  27. //
  28.  
  29. <style type="text/css">
  30.  
  31. @import url(https://fonts.googleapis.com/css?family=Coda);
  32. @import url(https://fonts.googleapis.com/css?family=Karla);
  33. @import url(https://fonts.googleapis.com/css?family=Squada+One);
  34.  
  35. body { background-color: #CD3E40; background-image: url(http://www.wallpapersin4k.org/wp-content/uploads/2017/04/Red-And-Blue-Wallpapers-8.jpg); background-attachment: fixed; background-position: center center; background-repeat: no repeat; background-size: cover;}
  36.  
  37.  
  38.  
  39. .main-image {
  40. position: absolute;
  41. height: 480px;
  42. width: 250px;
  43. perspective: 700px;
  44. z-index: 3;
  45. top: 42px;
  46. left: 330px;
  47. animation: grym 3s 1;
  48. -webkit-animation: grym 3s 1;
  49. }
  50.  
  51. .flipH .strawberry{transform: rotateY(-180deg);}
  52. .flipV .strawberry{transform: rotateX(180deg);}
  53.  
  54. .flipH:hover .card{ transform: rotateY(180deg); }
  55. .flipV:hover .card{ transform: rotateX(-180deg); }
  56.  
  57. .card, .tooth, .strawberry{
  58. height:100%;
  59. width:100%;
  60. border-radius:100%;
  61. backface-visibility: hidden;
  62. transition: all 1.5s;
  63. transform-style: preserve-3d;
  64. backface-visibility: hidden;
  65. position:absolute;
  66. opacity: 1;
  67. }
  68.  
  69.  
  70. a { background: #b29494; padding: 2px 5px 2px 5px; font-size: 9px; border-radius: 5px; font-family: karla; color: #fff; letter-spacing: .2; text-decoration: none;}
  71. *{cursor: url('http://media.tumblr.com/7c3edb626c8cf9435c5c0b2d6acceffd/tumblr_inline_mh67v6xNXM1rdqsqf.png'), default;}
  72. a:hover {cursor: url(http://cur.cursors-4u.net/others/oth-6/oth589.cur), progress !important; color: #fff; text-decoration: line-through; }
  73.  
  74. ::-webkit-scrollbar-track {background-color:;}
  75. ::-webkit-scrollbar-thumb {background-color:;}
  76. ::-webkit-scrollbar {width:2px;height:5px;}
  77.  
  78. b, strong { background: #DAE6E4; padding: 2px 2px 2px 2px; font-size: 9px; border-radius: 2px; font-family: karla; color: #07698A; letter-spacing: .2; }
  79. i {color: #5067A6;}
  80. U {color: #A16403;}
  81. .container { background-image:url('https://i.imgur.com/FbXrE9X.png'); background-attachment: absolute; background-position: center center; background-repeat: repeat; background-size: cover; position: absolute; top: 280px; left: 370px; height: 240px; width: 720px; border: 1px solid #07698A; border-radius: 10px 120px 120px 10px; overflow: hidden; z-index: 1000; z-index: 1;}
  82.  
  83. .img { position: absolute; top: 42px; left: 330px; height: 480px; width: 250px; background-image: url("g"); background-size: 100% 100%; background-position: center center; overflow: hidden; z-index: 2;}
  84.  
  85. .ooc { position: fixed; background-color: #F2F2F2; border: 1px #07698A solid; overflow: auto; width: 400; height: 190; top: 290px; left: 570; padding: 3px; text-align: justify; font-size: 11px; font-family: 'karla', sans-serif; color: #8a8790; line-height: 15px; z-index: 3;}
  86.  
  87. .abox { background-color: #F2F2F2; color: #8a8790; font-size: 11px; font-family: 'karla', sans-serif; text-align: justify; position: absolute; width: 400; height: 190; left: 570; top: 290; line-height: 15px; padding: 3px; overflow:auto; border: 1px solid #07698A; z-index: 3;}
  88.  
  89. .quote { position:fixed; top: 233px; left: 595px; text-align: left; font-family: 'Squada One'; text-shadow: -1px 0px 0px #4E7785, 0px 1px 0px #4E7785, 1px 0px 0px #4E7785, 0px -1px 0px #4E7785; font-size: 50px; color: #6ADDE6; z-index:999; text-align: center;}
  90.  
  91. .navbar {Background-color: transparent; Position: absolute; left: 570px; top: 500px; z-index: 3000; }
  92.  
  93. .link1 {Position: absolute; Border: solid 1px #000; Height: 10px; Width: 70px; background-image:url('http://www.pixeden.com/media/k2/galleries/93/004-subtle-light-pattern-background-texture.jpg'); border: 1px solid #07698A; border-radius: 0;}
  94.  
  95. .link2 {Position: absolute; Left: 108px; Border: solid 1px #000; Height: 10px; Width: 70px; background-image:url('http://www.pixeden.com/media/k2/galleries/93/004-subtle-light-pattern-background-texture.jpg'); border: 1px solid #07698A; border-radius: 0;}
  96.  
  97. .link3 {Position: absolute; Left: 218px; Border: solid 1px #000; Height: 10px; Width: 70px; background-image:url('http://www.pixeden.com/media/k2/galleries/93/004-subtle-light-pattern-background-texture.jpg'); border: 1px solid #07698A; border-radius: 0;}
  98.  
  99. .link4 {Position: absolute; Left: 327px; Border: solid 1px #000; Height: 10px; Width: 70px; background-image:url('http://www.pixeden.com/media/k2/galleries/93/004-subtle-light-pattern-background-texture.jpg'); border: 1px solid #07698A; border-radius: 0;}
  100.  
  101. .link1:hover {Background-color: #d3895a; -webkit-transition: background-color 1s ease-in-out; -moz-transition: background-color 1s ease-in-out; -o-transition: background-color 1s ease-in-out; transition: background-color 1s ease-in-out;}
  102. .link2:hover {Background-color: #d3895a; -webkit-transition: background-color 1s ease-in-out; -moz-transition: background-color 1s ease-in-out; -o-transition: background-color 1s ease-in-out; transition: background-color 1s ease-in-out;}
  103. .link3:hover {Background-color: #d3895a; -webkit-transition: background-color 1s ease-in-out; -moz-transition: background-color 1s ease-in-out; -o-transition: background-color 1s ease-in-out; transition: background-color 1s ease-in-out;}
  104. .link4:hover {Background-color: #d3895a; -webkit-transition: background-color 1s ease-in-out; -moz-transition: background-color 1s ease-in-out; -o-transition: background-color 1s ease-in-out; transition: background-color 1s ease-in-out;}
  105.  
  106. h1 { font-family: coda; font-size: 10px; color: #CC5252; text-transform: uppercase; letter-spacing: 5px; border-bottom: 2px solid #CC5252; background: transparent; text-align: right; margin-right: 3px; margin-left: 3px; line-height: 17px; margin-top: 1px;}
  107.  
  108. .slide {Position: fixed; Height: 555555; Width: 555555; Top: 0px; Left: 0px; Z-index: -1; Opacity: 0; transition: 0.8s; -moz-transition: 0.8s; webkit-transition: 0.8s; -o-transition: 0.8s;}
  109.  
  110. .slide:target {Left: 0; Opacity: 1; Z-index: 1000; transition: 0.8s; -moz-transition: 0.8s; webkit-transition: 0.8s; -o-transition: 0.8s;}
  111.  
  112. .credit { position: fixed; Bottom: 10px; Right: 10px; height: 25px; width: 25px; background-color: #111; border: 1px solid #222; font-size: 15px; font-family: karla; text-align: justify; color: #ccc; z-index: 7000; text-align: center; line-height: 25px;}
  113.  
  114. </style>
  115. <div id="content">
  116. <div class="main-image flipH flipper">
  117. <div class="card">
  118. <div class="tooth">
  119. <img src="https://i.imgur.com/5NN7l6e.pngg" height="100%";>
  120. </div>
  121. <div class="strawberry">
  122. <img src="https://i.imgur.com/dmAZAMJ.png" height="100%">
  123. </div>
  124. </div>
  125. </div>
  126. <div id="quote">
  127. <center></center>
  128.  
  129. <div class="quote">Android 21</div>
  130.  
  131. <div class="container"></div>
  132. <div class="img"></div>
  133.  
  134. <div class="ooc">
  135. <h1>Dossier</h1>
  136. <b>Name:</b> <i>Android 21</i><br>
  137. <b>Age:</b> <i>21</i> (<span title="Really 47">Allegedly</span>)<br>
  138. <b>Sex:</b> <i>Female</i><br>
  139. <b>Orientation:</b> <i>Pansexual</i><br>
  140. <b>Material Status:</b> <i>Single, married to science.</i><br>
  141. <b>Height:</b> <i>Five foot, five inches</i><br>
  142. <b>Eye Color</b> <i>Blue</i><br>
  143. <b>Hair </b> <i>Auburn </i><br>
  144. <b>Theme </b> <i><a target="_blank" href="https://soundcloud.com/fm-attack/images-of-you">Music</a> </i><br>
  145. <b>Gallery </b> <i><a target="_blank" href="https://imgur.com/a/vFoyW">Click here</a> </i><br>
  146.  
  147. </div>
  148.  
  149. <div class="navbar">
  150. <a class="link1" href="#1"></a>
  151. <a class="link2" href="#2"></a>
  152. <a class="link3" href="#3"></a>
  153. <a class="link4" href="#4"></a>
  154. </div>
  155.  
  156. <div id="1" class="slide">
  157. <div class="abox">
  158. <h1>History</h1>
  159. Coming Soon
  160. </div></div>
  161.  
  162. <div id="2" class="slide">
  163. <div class="abox">
  164. <h1>Persons of Interest</h1></center><br>
  165. </center><br>
  166. <a target="_blank"href="https://roleplay.chat/profile.php?user=Son+Goku "><img src="https://68.media.tumblr.com/8f413722ec4cd644a050072b21a098f3/tumblr_om64anmAML1uuj1vto1_500.gif" height="75" width="75" align="left" border="3"></a>
  167. <center><b>-Son Goku-</b><br> <i> Neutral </i><br> Rather annoying...wont stay out of my lab</center><br><br><br><br>
  168. <a target="_blank" href="PROFILE LINK HERE"><img src="IMAGE LINK HERE" height="75" width="75" align="left" border="3"></a>
  169. <center><b>- Name -</b><br> <i>foe/friend/neutral</i><br> small note.</center><br><br><br><br>
  170. <a target="_blank" href="PROFILE LINK HERE"><img src="IMAGE LINK HERE" height="75" width="75" align="left" border="3"></a>
  171. <center><b>- Name -</b><br> <i>foe/friend/neutral</i><br> small note.</center><br><br><br><br>
  172. <a target="_blank" href="PROFILE LINK HERE"><img src="IMAGE LINK HERE" height="75" width="75" align="left" border="3"></a>
  173. <center><b>- Name -</b><br> <i>foe/friend/neutral</i><br> small note.</center><br><br><br><br>
  174. <a target="_blank" href="PROFILE LINK HERE"><img src="IMAGE LINK HERE" height="75" width="75" align="left" border="3"></a>
  175. <center><b>- Name -</b><br> <i>foe/friend/neutral</i><br> small note.</center><br><br><br><br>
  176. <a target="_blank" href="PROFILE LINK HERE"><img src="IMAGE LINK HERE" height="75" width="75" align="left" border="3"></a>
  177. <center><b>- Name -</b><br> <i>foe/friend/neutral</i><br> small note.</center><br><br><br><br>
  178. <a target="_blank" href="PROFILE LINK HERE"><img src="IMAGE LINK HERE" height="75" width="75" align="left" border="3"></a>
  179. <center><b>- Name -</b><br> <i>foe/friend/neutral</i><br> small note.</center><br><br><br><br></div></div>
  180.  
  181. <div id="3" class="slide">
  182. <div class="abox">
  183. <h1>Out of Character</h1>
  184. <li>IC =/= OOC</li>
  185. <li>No auto pairing.</li>
  186. <li>Play the character as I see fit, if you don't agree there are other 21's running around.</li>
  187. <li>Fairly PM friendly.</li>
  188. <li>If I don't reply means I'm away or busy. Best to leave me mail when this happens if you need to reach me.</li>
  189.  
  190. </i>
  191. </div></div>
  192.  
  193. <div class="credit"><a target="_blank" href="http://abadbitchcodes.tumblr.com/" target="_blank">©</div>
  194. </body>
  195. </html>
Add Comment
Please, Sign In to add comment