API tools faq
paste
chihi

hi

chihi
Dec 6th, 2016
113
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 8.52 KB | None | 0 0
raw download clone embed print report
  1. <html>
  2. <body><style type="text/css">
  3. @import url('https://fonts.googleapis.com/css?family=Abril+Fatface');
  4. @import url('https://fonts.googleapis.com/css?family=Vollkorn:700');
  5.  
  6. .pfor {
  7. display: none;
  8. }
  9.  
  10. ::-webkit-scrollbar-thumb:vertical {background-color:transparent;}
  11. ::-webkit-scrollbar {height:0px; width:5px; background-color:transparent;}
  12.  
  13.  
  14. img
  15. {margin-bottom:-3px;}
  16.  
  17. body
  18. {
  19. background-color:#fff;
  20. background-image:url();
  21. background-position: fixed;
  22. background-attachment:fixed;
  23. background-repeat:repeat;
  24. }
  25.  
  26. #profile {
  27. background-color: transparent;
  28. border: 0px;
  29. }
  30.  
  31. a
  32. {text-decoration:none;
  33. color:#ff7300;
  34. -webkit-transition: opacity 0.7s linear;
  35. -webkit-transition: all 0.7s ease-in-out;
  36. -moz-transition: all 0.7s ease-in-out;
  37. -o-transition: all 0.7s ease-in-out;
  38. opacity:1;}
  39.  
  40. a:hover
  41. {text-decoration:none;
  42. color:;
  43. opacity:1;}
  44.  
  45. blockquote
  46. {border-left:2px solid;
  47. padding-left:5px;}
  48.  
  49. #navi {
  50. position: absolute;
  51. margin-top:400px;
  52. right:0px;
  53. left:0px;
  54. }
  55.  
  56. #navi a {
  57. float: left;
  58. display: block;
  59. width: 30px;
  60. height: 35px;
  61. background:transparent;
  62. color:#fff;
  63. font-size:34px;
  64. font-family: 'Abril Fatface', cursive;
  65. padding:2px;
  66. transition:all 1s ease-out;-o-transition:all 1s ease-in-out;-moz-transition:all 1s ease-in-out;
  67. margin-bottom: 5px;
  68. }
  69.  
  70.  
  71. #navi a:hover {
  72. background-color:transparent;
  73. color:#777;
  74. }
  75.  
  76.  
  77.  
  78. #first {
  79. background-color:transparent;
  80. background-image:url(http://i.picpar.com/0Ygc.jpg);
  81. width:700px;
  82. background-size:80%;
  83. background-repeat:no-repeat;
  84. height:600px;
  85. position:fixed;
  86. top:100px;
  87. right:250px;
  88. }
  89.  
  90. #first:hover #hana {
  91. position: absolute;
  92. top:-5px;
  93. left:0px;
  94. opacity: 0.85;
  95. -webkit-transition:all 1s ease-in-out;
  96. -moz-transition:all 1s ease-in-out;
  97. transition:all 1s ease-in-out;
  98. }
  99.  
  100.  
  101. #hana {
  102. position: absolute;
  103. top:-50px;
  104. bottom:0px;
  105. left:0px;
  106. height:350px;
  107. width:600px;
  108. opacity: 0;
  109. background:#fff;
  110. -webkit-transition:all 1s ease-in-out;
  111. -moz-transition:all 1s ease-in-out;
  112. transition:all 1s ease-in-out;
  113. color:#999;
  114. text-align:justify;
  115. padding:10px;
  116. font-family:arial;
  117. font-size:9px;
  118. }
  119.  
  120. #page {
  121. width: 340px;
  122. text-align: justify;
  123. height: 330px;
  124. overflow: hidden;
  125. background: transparent; padding: 0px;}
  126.  
  127. .page{
  128. WIDTH: 340px; padding: 0px;
  129. height: 330px; text-align: justify;
  130. overflow: auto; }
  131.  
  132. h1 {font-family: 'Vollkorn', serif;
  133. color:241D5D;
  134. font-size:15px;
  135. text-align:left; }
  136.  
  137. #triangle
  138. {background-color:#ccc; height:230px; width:160px; position:absolute; top:60px; left:370px; color:fff; font-family:arial; font-size:7pt; padding:10px; background-image:url(http://i.picpar.com/EZgc.jpg);
  139. background-size:95%;
  140. background-repeat:no-repeat; background-position:center;}
  141. .tri { width: 0;
  142. height: 0;
  143. border-top: 15px solid transparent;
  144. border-bottom: 15px solid transparent;
  145.  
  146. border-right:10px solid #ccc; position:absolute; left:360px; top:170px;}
  147.  
  148. i{font-family:BELL MT;font-size:8pt;color:ccc;}
  149. b{font-family:BELL MT; font-size:8pt; color:999;}
  150.  
  151. table {
  152. width: 100%;
  153. border-collapse: collapse;
  154. font-family:Volkorn, serif;
  155. color: #777777;
  156. font-style:bold;
  157. text-align: right;
  158. font-size:10px;
  159. letter-spacing: 1px;
  160. }
  161.  
  162. #left{font-weight: bold; text-align: left; }
  163.  
  164. #right {text-align: right;}
  165.  
  166.  
  167.  
  168. .musicplayer{
  169. position: fixed;
  170. bottom: 0px;
  171. left: 0px;
  172. height: 30px;
  173. width: 30px;
  174. line-height: 30px;
  175. font-size: 20px;
  176. color:241D5D;
  177. text-align: center;
  178. padding-left: 5px;
  179. margin-left: -5px;
  180. border-radius: 360px;
  181. overflow: hidden;
  182. }
  183.  
  184. .musicplayer:active {
  185. color: #404040;
  186. }
  187. .moosic{
  188. float: left;
  189. margin-top: -30px;
  190. margin-left: -2px;
  191. height: 30px;
  192. width: 30px;
  193. overflow: hidden;
  194. opacity: 0;
  195. }
  196.  
  197. </style>
  198.  
  199. <div id="first">
  200. <div id="navi">
  201. <a href="#1" title="story." id="links">F</a>
  202. <a href="#2" title="stats." id="links">A</a>
  203. <a href="#3" title="abilities." id="links">T</a>
  204. <a href="#4" title="ooc." id="links">E</a>
  205. </div>
  206. <div id="hana">
  207. <div id="page"><a name="1"></a>
  208. <div class="page">
  209. <h1>STORY</h1>
  210. <p>Phasellus a tortor volutpat, scelerisque arcu sed, volutpat mauris. Sed placerat ex non odio iaculis, sed suscipit dolor condimentum. Sed varius a leo eu tincidunt. Sed pharetra massa dui, at vehicula leo mollis quis. Praesent urna ante, dignissim in dictum ut, iaculis ac risus. Donec suscipit ligula vel tincidunt pharetra. Integer at placerat justo. Curabitur fermentum bibendum velit ut pellentesque. Etiam in magna finibus, maximus ante sed, imperdiet ante.</p>
  211.  
  212. <p>Suspendisse eu consectetur velit. Donec cursus efficitur sapien in pretium. Donec consequat turpis sed odio suscipit venenatis. Morbi eros ex, vulputate eget turpis vel, pretium gravida leo. Fusce ornare blandit nibh eget scelerisque. Maecenas elementum, purus quis facilisis convallis, arcu est dapibus ante, ut posuere mauris libero vitae massa. Phasellus purus purus, luctus et tortor et, lobortis mattis sem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut luctus lorem sem, non feugiat ipsum rutrum non. Fusce vulputate in velit nec sollicitudin. In hac habitasse platea dictumst. Vestibulum lobortis auctor ante vel fringilla. Sed suscipit metus ut dapibus tempus. Sed vel facilisis velit, non auctor ipsum.</p>
  213. </div>
  214.  
  215. <div id="page"><a name="2"></a>
  216. <div CLASS="page">
  217. <h1>DOSSIER</h1>
  218. <table>
  219. <tr><td id="left">NAME</td> <td id="right">CAELLUS</td></tr>
  220. <tr><td id="left">MONIKER</td> <td id="right">CAEL</td></tr>
  221. <tr><td id="left">AGE</td> <td id="right">23</td></tr>
  222. <tr><td id="left">HEIGHT</td> <td id="right">5'11"</td></tr>
  223. <tr><td id="left">WEIGHT</td> <td id="right">162 LBS</td></tr>
  224. <tr><td id="left">RACE</td> <td id="right">HUMAN</td></tr>
  225. <tr><td id="left">OCCUPATION</td> <td id="right"><strike>PRINCE</strike></td></tr>
  226. <tr><td id="left">ORIENTATION</td> <td id="right">HETERO</td></tr>
  227. <tr><td id="left">AFFILIATION</td> <td id="right"><strike>KINGDOM OF AKRAM</strike></td></tr>
  228. <tr><td id="left">STATUS</td> <td id="right">SINGULAR</td></tr>
  229. <tr><td id="left">TEMPERAMENT</td> <td id="right">PHLEGMATIC</td></tr>
  230. </table>
  231.  
  232. <h1>PERSONA</h1>
  233.  
  234. <p>Phasellus a tortor volutpat, scelerisque arcu sed, volutpat mauris. Sed placerat ex non odio iaculis, sed suscipit dolor condimentum. Sed varius a leo eu tincidunt. Sed pharetra massa dui, at vehicula leo mollis quis. Praesent urna ante, dignissim in dictum ut, iaculis ac risus. Donec suscipit ligula vel tincidunt pharetra. Integer at placerat justo. Curabitur fermentum bibendum velit ut pellentesque. Etiam in magna finibus, maximus ante sed, imperdiet ante.</p>
  235.  
  236. <p>Suspendisse eu consectetur velit. Donec cursus efficitur sapien in pretium. Donec consequat turpis sed odio suscipit venenatis. Morbi eros ex, vulputate eget turpis vel, pretium gravida leo. Fusce ornare blandit nibh eget scelerisque. Maecenas elementum, purus quis facilisis convallis, arcu est dapibus ante, ut posuere mauris libero vitae massa. Phasellus purus purus, luctus et tortor et, lobortis mattis sem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut luctus lorem sem, non feugiat ipsum rutrum non. Fusce vulputate in velit nec sollicitudin. In hac habitasse platea dictumst. Vestibulum lobortis auctor ante vel fringilla. Sed suscipit metus ut dapibus tempus. Sed vel facilisis velit, non auctor ipsum.</p>
  237. </div></div>
  238.  
  239. <div id="page"><a name="3"></a>
  240. <div class="page">
  241.  
  242. <h1>ABILITIES</h1>
  243.  
  244. <p><b>Magic Type:</b> Water</p>
  245.  
  246. <p>Suspendisse eu consectetur velit. Donec cursus efficitur sapien in pretium. Donec consequat turpis sed odio suscipit venenatis. Morbi eros ex, vulputate eget turpis vel, pretium gravida leo. Fusce ornare blandit nibh eget scelerisque. Maecenas elementum, purus quis facilisis convallis, arcu est dapibus ante, ut posuere mauris libero vitae massa. Phasellus purus purus, luctus et tortor et, lobortis mattis sem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut luctus lorem sem, non feugiat ipsum rutrum non. Fusce vulputate in velit nec sollicitudin. In hac habitasse platea dictumst. Vestibulum lobortis auctor ante vel fringilla. Sed suscipit metus ut dapibus tempus. Sed vel facilisis velit, non auctor ipsum.</p>
  247.  
  248. </div></div>
  249.  
  250.  
  251. <div id="page"><a name="4"></a>
  252.  
  253. <h1>OUT OF CHARACTER</h1>
  254.  
  255.  
  256. <div class="tri"></div>
  257. <div id="triangle">
  258. </div>
  259. </div>
  260.  
  261.  
  262. <div class="musicplayer" title="aimer - if i hadn't met you.">
  263. ►
  264. <div class="moosic">
  265. <audio controls>
  266. <source src="http://k003.kiwi6.com/hotlink/fb3ayeklz6/Tales_of_Zestiria_OST_-_Overcome_the_Hesitation.mp3
  267. ">
  268. </audio>
  269. </div>
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!