API tools faq
paste
RageQxeen

Lawliet

RageQxeen
Jun 11th, 2018
240
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 7.93 KB | None | 0 0
raw download clone embed print report
  1.  
  2. <html>
  3. <body><style type="text/css">
  4.  
  5. @import url(https://fonts.googleapis.com/css?family=Great+Vibes|Buda);
  6.  
  7. html, body {
  8. background: #f2f2f2;
  9. background-image:url("");
  10. background-size: 100%;
  11. background-repeat:no-repeat;
  12. background-position:center bottom;
  13. }
  14.  
  15. ::-webkit-scrollbar-button:vertical:{
  16. background-color: #transparent;}
  17.  
  18. ::-webkit-scrollbar-thumb:vertical {
  19. background-color:#transparent;
  20. height:150px;}
  21.  
  22. ::-webkit-scrollbar-thumb:horizontal {
  23. background-color:#transparent;
  24. height:60px;}
  25.  
  26.  
  27. ::-webkit-scrollbar {
  28. height:60px;
  29. width:5px;
  30. background-color:#transparent;}
  31.  
  32. .box1{
  33. background-color: #000000;
  34. position: absolute;
  35. width: 430px;
  36. height: 250px;
  37. margin: auto;
  38. padding: 10px;
  39. opacity: 0;
  40. font-family: 'Buda';
  41. color: #ffffff;
  42. left: 2%;
  43. top: 0%;
  44. border: 1px solid #000000;
  45. -webkit-transition: all 1000ms ease-in;
  46. -moz-transition: all 1000ms ease-in;
  47. -ms-transition: all 1000ms ease-in;
  48. -o-transition: all 1000ms ease-in;
  49. transition: all 1000ms ease-in;
  50. }
  51.  
  52. .box1:hover {
  53. position: absolute;
  54. margin: auto;
  55. opacity:1;
  56. top: 9%;
  57. -webkit-transition: all 1000ms ease-in;
  58. -moz-transition: all 1000ms ease-in;
  59. -ms-transition: all 1000ms ease-in;
  60. -o-transition: all 1000ms ease-in;
  61. transition: all 1000ms ease-in;
  62. }
  63.  
  64. .box2{
  65. background-color: #000000;
  66. position: absolute;
  67. width: 430px;
  68. height: 250px;
  69. margin: auto;
  70. padding: 10px;
  71. font-family: 'Buda';
  72. color: #ffffff;
  73. border: 1px solid #000000;
  74. opacity:0;
  75. left: 2%;
  76. bottom: 0%;
  77. border: 1px solid #000000;
  78. -webkit-transition: all 1000ms ease-in;
  79. -moz-transition: all 1000ms ease-in;
  80. -ms-transition: all 1000ms ease-in;
  81. -o-transition: all 1000ms ease-in;
  82. transition: all 1000ms ease-in;
  83. }
  84.  
  85. .box2:hover {
  86. position: absolute;
  87. margin: auto;
  88. opacity:1;
  89. bottom: 9%;
  90. -webkit-transition: all 1000ms ease-in;
  91. -moz-transition: all 1000ms ease-in;
  92. -ms-transition: all 1000ms ease-in;
  93. -o-transition: all 1000ms ease-in;
  94. transition: all 1000ms ease-in;
  95. }
  96.  
  97. .box3{
  98. background-color: #000000;
  99. position: absolute;
  100. width: 430px;
  101. height: 250px;
  102. margin: auto;
  103. padding: 10px;
  104. font-family: 'Buda';
  105. color: #ffffff;
  106. opacity: 0;
  107. right: 1%;
  108. top: 0%;
  109. border: 1px solid #000000;
  110. -webkit-transition: all 1000ms ease-in;
  111. -moz-transition: all 1000ms ease-in;
  112. -ms-transition: all 1000ms ease-in;
  113. -o-transition: all 1000ms ease-in;
  114. transition: all 1000ms ease-in;
  115. border: 1px solid #000000;
  116. }
  117.  
  118. .box3:hover {
  119. position: absolute;
  120. margin: auto;
  121. opacity:1;
  122. top: 9%;
  123. -webkit-transition: all 1000ms ease-in;
  124. -moz-transition: all 1000ms ease-in;
  125. -ms-transition: all 1000ms ease-in;
  126. -o-transition: all 1000ms ease-in;
  127. transition: all 1000ms ease-in;
  128. }
  129.  
  130. .box4{
  131. background-color: #000000;
  132. position: absolute;
  133. width: 430px;
  134. height: 250px;
  135. margin: auto;
  136. padding: 10px;
  137. font-family: 'Buda';
  138. color: #ffffff;
  139. opacity:0;
  140. right: 1%;
  141. bottom: 0%;
  142. border: 1px solid #000000;
  143. -webkit-transition: all 1000ms ease-in;
  144. -moz-transition: all 1000ms ease-in;
  145. -ms-transition: all 1000ms ease-in;
  146. -o-transition: all 1000ms ease-in;
  147. transition: all 1000ms ease-in;
  148. border: 1px solid #000000;
  149. }
  150.  
  151. .box4:hover {
  152. position: absolute;
  153. margin: auto;
  154. opacity:1;
  155. bottom: 9%;
  156. -webkit-transition: all 1000ms ease-in;
  157. -moz-transition: all 1000ms ease-in;
  158. -ms-transition: all 1000ms ease-in;
  159. -o-transition: all 1000ms ease-in;
  160. transition: all 1000ms ease-in;
  161. }
  162.  
  163. #image {
  164. width: 400px;
  165. margin: 0px;
  166. border: none;
  167. height: 500px;
  168. background-color:transparent;
  169. position: absolute;
  170. right: 35%;
  171. bottom: 12%;
  172. background-image:url("http://i.picpar.com/ggCc.gif");
  173. background-repeat:no-repeat;
  174. background-position: bottom;
  175. background-size: 98%;
  176. border: 1px #000000 solid;
  177. }
  178.  
  179. .header{
  180. position:absolute;
  181. width:500px;
  182. background:#transparent;
  183. height:100px;
  184. overflow:hidden;
  185. font-family: 'Great Vibes', cursive;
  186. font-size: 50px;
  187. font-weight:lighter;
  188. font-style:none;
  189. color:#000000;
  190. letter-spacing: 0px;
  191. text-transform:none;
  192. text-align:center;
  193. }
  194.  
  195. h1 {
  196. font-family: 'Great Vibes', cursive;
  197. font-size: 30px;
  198. line-height: 22px;
  199. color:#f9f9f9;
  200. text-align: center;
  201. letter-spacing:1px;
  202. word-spacing: 2px;
  203. text-decoration:none!important;
  204. }
  205.  
  206. .text{
  207. height: 200px;
  208. width: 400px;
  209. margin: 20px;
  210. text-align: justify;
  211. font-family: dosis;
  212. font-size: 12px;
  213. color: #8a8790;
  214. overflow: auto;
  215. }
  216.  
  217. .credit{
  218. position: fixed;
  219. bottom: 0px;
  220. right: 2px;
  221. height: 25px;
  222. width: 25px;
  223. line-height: 15px;
  224. font-size: 10px;
  225. color: #000;
  226. text-align: center;
  227. font-family: roboto;
  228. }
  229.  
  230. i{color: #f4f4f4;}
  231. b{color: #f2f2f2;}
  232. a{color: #f1f1f1;}
  233.  
  234. </style>
  235.  
  236. <div class="box1">
  237. <div style="width: 430px; height: 250px; overflow-y: hidden;">
  238. <div style="width: 430px; height: 250px; overflow: auto;" align="center">
  239. <span style="float:left;"><b>Name</b></span><span style="float:right;">L</span><br>
  240. <span style="float:left;"><b>True Name</b></span><span style="float:right;">L Lawliet</span><br>
  241. <span style="float:left;"><b>Alias(es)</b></span><span style="float:right;"><a title="Hideki Ryuga, Ryuzaki, Eraldo Coil, Deneuve, Asahi, Suzuki">Hover</a>.</span><br><br>
  242. <span style="float:left;"><b>Gender</b></span><span style="float:right;">Male</span><br>
  243. <span style="float:left;"><b>Birth Date</b></span><span style="float:right;">October 31st</span><br>
  244. <span style="float:left;"><b>Height</b></span><span style="float:right;">179 cm</span><br>
  245. <span style="float:left;"><b>Weight</b></span><span style="float:right;">50 kg</span><br><br>
  246. <span style="float:left;"><b>Orientation</b></span><span style="float:right;">Ace</span><br>
  247. <span style="float:left;"><b>Relationship</b></span><span style="float:right;">None</span><br><br>
  248. <span style="float:left;"><b>Species</b></span><span style="float:right;">Human</span><br>
  249. <span style="float:left;"><b>Eyes</b></span><span style="float:right;">Black</span><br>
  250. <span style="float:left;"><b>Hair</b></span><span style="float:right;">Black</span><br>
  251. </div>
  252. </div>
  253. </div>
  254.  
  255. <div class="box2">
  256. <div style="width: 430px; height: 250px; overflow: auto;" align="center">
  257. <h1>Connections</h1>
  258. <a href="profile.php?user=" target="_blank"><img src="" class="circle" width="70" height="70" border="1px solid #000000" a title="Words"></a>
  259. <a href="profile.php?user=" target="_blank"><img src="" class="circle" width="70" height="70" border="1px solid #000000" a title="Words"></a>
  260. <a href="profile.php?user=" target="_blank"><img src="" class="circle" width="70" height="70" border="1px solid #000000" a title="Words"></a>
  261. <a href="profile.php?user=" target="_blank"><img src="" class="circle" width="70" height="70" border="1px solid #000000" a title="Words"></a>
  262. <a href="profile.php?user=" target="_blank"><img src="" class="circle" width="70" height="70" border="1px solid #000000" a title="Words"></a>
  263. <a href="profile.php?user=" target="_blank"><img src="" class="circle" width="70" height="70" border="1px solid #000000" a title="Words"></a>
  264. <a href="profile.php?user=" target="_blank"><img src="" class="circle" width="70" height="70" border="1px solid #000000" a title="Words"></a><br>
  265. </div>
  266. </div>
  267.  
  268. <div class="box3">
  269. <div style="width: 430px; height: 250px; overflow: auto;" align="center">
  270. <h1>History</h1>
  271. L was found by Watari as a child and was taken to the orphanage known as Wammy's House, a home for gifted children. Sometime after, Watari realized that L had incredible intelligence and later assisted him in his cases. L became a detective at a young, unknown age and eventually gained a reputation as the greatest detective in the world whose opinion is highly valued.
  272. </div>
  273. </div>
  274.  
  275. <div class="box4">
  276. <div style="width: 430px; height: 250px; overflow: auto;" align="center">
  277. <h1>OOC</h1>
  278.  
  279. </div>
  280. </div>
  281.  
  282.  
  283. <div class="header" style="top: 2%; left: 31%;">I am L</div>
  284.  
  285. <div id="image"></div>
  286.  
  287. <div class="credit" title="By RageQxeen">♛</div>
  288.  
  289. </body>
  290. </html>
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!