API tools faq
paste
Advertisement
ZukoHiyama

Prom Code

ZukoHiyama
Nov 12th, 2017
213
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 13.97 KB | None | 0 0
raw download clone embed print report
  1. <style>
  2. #music{position:fixed;
  3. top:67.5%;
  4. left:34.5%;
  5. z-index:99;
  6. }
  7.  
  8.  
  9. #music1{
  10. position:fixed;
  11. padding:2px;
  12. -webkit-transition: all 0.5s ease-in-out;
  13. -moz-transition: all 0.5s ease-in-out;
  14. -o-transition: all 0.5s ease-in-out;}
  15.  
  16. #music1:hover #music2{
  17. opacity:0.7;
  18. margin-top:-25px;
  19. z-index:-1;}
  20.  
  21. #music1:hover #music3{
  22. opacity:0.7;
  23. margin-top:0px;
  24. z-index:99;}
  25.  
  26. #music1:hover #musiclist{ opacity:1;}
  27.  
  28.  
  29. #music3{
  30. position:fixed;
  31. width:20px;
  32. height:20px;
  33. background-size: 20px;
  34. background-image: url('http://www.free-icons-download.net/images/grays-play-button-icon-17896.png');
  35. background-repeat: no-repeat;
  36. background-position: 50% 0%;
  37. padding-left:5px;
  38. padding-right:5px;
  39. z-index:99;
  40. margin-left:0px;
  41. overflow:hidden;
  42. background-color: #E8E8E8;
  43. opacity:1.0;}
  44.  
  45. </style>
  46.  
  47.  
  48. <div id="music">
  49. <div id="music1">
  50. <div id="music3">
  51.  
  52. <audio controls style="opacity: 0;"><source src="https://k003.kiwi6.com/hotlink/mox1lhbyb2/Stephen_-_Crossfire_Mp3Converter.net_.mp3"></audio>
  53.  
  54. </div>
  55. </div>
  56. </div>
  57. </style>
  58. </head>
  59. <body>
  60. <style>@import url('https://fonts.googleapis.com/css?family=Questrial');
  61. @import url('https://fonts.googleapis.com/css?family=Abel');
  62. @import url(https://fonts.googleapis.com/css?family=Montserrat:100,300,400,700,900);
  63. @import url('https://fonts.googleapis.com/css?family=Playfair Display SC');
  64. /*968583*/
  65.  
  66. /*coded by [punpun]. do not steal the characters. do not remove this. do not remove the credits.*/
  67.  
  68. body, a:hover {cursor: url(http://media.tumblr.com/d867d8c0827140bcce868f3bdbbd5e4f/tumblr_inline_mwwd9dv65Z1srowmh.png), progress !important;}
  69.  
  70.  
  71. body {
  72. /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#c9bebd+0,cab3b1+40,936661+100 */
  73. background: #FFFFFF;
  74. overflow-y:hidden;
  75. overflow-x:hidden;}
  76.  
  77.  
  78.  
  79. ::-webkit-scrollbar-thumb {
  80. width: 3px;
  81. background-color: #trans;}
  82. ::-webkit-scrollbar {
  83. width: 3px;
  84. background-color: transparent;}
  85. ::-webkit-scrollbar {
  86. width: 5px;
  87. }
  88.  
  89. ::-webkit-scrollbar-track {
  90. background-color: transparent;
  91. }
  92.  
  93.  
  94.  
  95. ::-webkit-scrollbar-thumb {
  96. background-color: #000;
  97. border: 1px solid #000;
  98. }
  99.  
  100. audio::-webkit-media-controls-play-button { height:100%;
  101. width: 100%; }
  102. audio::-webkit-media-controls-panel { height: 50px;
  103. width: 17%;
  104. opacity: 0; }
  105.  
  106.  
  107. a {
  108. color: #FFFFFF;
  109. text-decoration: none;
  110. background-color: #FF0000;
  111. transition: all 0.4s ease-in-out;
  112. -moz-transition: all 0.4s ease-in-out;
  113. -webkit-transition: all 0.4s ease-in-out;}
  114. a:hover {
  115. color: #000000;
  116. background-color: #E3CFB3;
  117. text-decoration: none;
  118. transition: all 0.4s ease-in-out;
  119. -moz-transition: all 0.4s ease-in-out;
  120. -webkit-transition: all 0.4s ease-in-out;}
  121. a.tab:active, a.tab:link, a.tab:visited {
  122. background-color: #450303;
  123. border: 4px double #968583;
  124. border-radius: 0px;
  125. display: inline-flex;
  126. height: 10px;
  127. text-decoration: none;
  128. width:15px;
  129. -webkit-transition: all 0.4s ease-in;
  130. -moz-transition: all 0.4s ease-in;
  131. -ms-transition: all 0.4s ease-in;
  132. -o-transition: all 0.4s ease-in;
  133. transition: all 0.4s ease-in;
  134. }
  135. a.tab:hover {
  136. background-color: #D68472;
  137. border: 4px double #333333;
  138. }
  139. a.tooltip {outline:none; text-decoration: none; cursor: url(), auto;}
  140. a.tooltip strong {line-height:30px;}
  141. a.tooltip:hover {text-decoration:none; }
  142. a.tooltip span {
  143. z-index:100;display:none; padding:15px 20px;
  144. bottom: 25; left: 657;
  145. width:230px; line-height:16px;
  146. height: 220px;
  147. }
  148. a.tooltip span img { height: 64px;
  149. width: 64px;
  150. padding: 0.5%; }
  151. a.tooltip:hover span{
  152. display:inline; position:fixed; color:#000000;
  153. border:3px solid #000000; background:#trans; opacity: 1; }
  154.  
  155. #left {
  156. position: fixed;
  157. left: 385;
  158. bottom: 67;
  159. width: 2px;
  160. height: 0;
  161. background-color: #000000;
  162. border: 0px solid #000000;
  163. z-index: 10;
  164. opacity: 1;
  165. -webkit-transition: all 0.6s ease-out;
  166. -moz-transition: all 1.3s ease-out;
  167. -ms-transition: all 1.3s ease-out;
  168. -o-transition: all 1.3s ease-out;
  169. transition: all 1.3s ease-out;}
  170.  
  171.  
  172. body:hover #left{height: 120;
  173. opacity: 1;
  174. -webkit-transition-delay: 2.4s ;
  175. -moz-transition-delay: 2.4s;
  176. -ms-transition-delay: 2.4s ;
  177. -o-transition-delay: 2.4s ;
  178. transition-delay: 2.4s ;
  179. }
  180.  
  181. #right {
  182. position: fixed;
  183. left: 613px;
  184. bottom: 67;
  185. width: 2px;
  186. height: 1;
  187. background-color: #000000;
  188. border: 0px solid #000000;
  189. z-index: 20;
  190. opacity: 1;-webkit-transition: all 0.6s ease-out;
  191. -moz-transition: all 1.3s ease-out;
  192. -ms-transition: all 1.3s ease-out;
  193. -o-transition: all 1.3s ease-out;
  194. transition: all 1.3s ease-out;}
  195.  
  196. body:hover #right{height: 120;
  197. opacity: 1;
  198. -webkit-transition-delay: 2.4s ;
  199. -moz-transition-delay: 2.4s;
  200. -ms-transition-delay: 2.4s ;
  201. -o-transition-delay: 2.4s ;
  202. transition-delay: 2.4s ;
  203. }
  204. #bottom{
  205. position: fixed;
  206. left: 428px;
  207. bottom: 35;
  208. width: 1;
  209. height: 1;
  210. background-color: #000000;
  211. border: 0px solid #000000;
  212. z-index: 20;
  213. opacity: 1;
  214. -webkit-transition: all 0.6s ease-out;
  215. -moz-transition: all 1.3s ease-out;
  216. -ms-transition: all 1.3s ease-out;
  217. -o-transition: all 1.3s ease-out;
  218. transition: all 1.3s ease-out;}
  219.  
  220. body:hover #bottom{width:140px;
  221. opacity: 1;
  222. -webkit-transition-delay: 2.4s ;
  223. -moz-transition-delay: 2.4s;
  224. -ms-transition-delay: 2.4s ;
  225. -o-transition-delay: 2.4s ;
  226. transition-delay: 2.4s ;
  227. }
  228.  
  229. /*968583*/
  230.  
  231. .be{
  232. margin-top: 5px;
  233. height: 115px;
  234. width: 70px;
  235. margin-left: 1px;
  236. border: #000000 2px solid;
  237. -webkit-filter: grayscale(100%);
  238. -moz-filter: grayscale(100%);
  239. -o-filter: grayscale(100%);
  240. filter: grayscale(100%);
  241. -webkit-transition: all 0.6s ease-out;
  242. -moz-transition: all 0.6s ease-out;
  243. -ms-transition: all 0.6s ease-out;
  244. -o-transition: all 0.6s ease-out;}
  245.  
  246. .be:hover {border: #000 2px solid;
  247. -webkit-filter: grayscale(0%);
  248. -moz-filter: grayscale(0%);
  249. -o-filter: grayscale(0%);
  250. filter: grayscale(0%);}
  251.  
  252.  
  253. #pic {position: fixed;right: 0px;bottom: 0; z-index:-10; opacity: 1;}
  254. #pic img {width: 600; height: 500;}
  255.  
  256. /*frist things first*/
  257.  
  258. .head {
  259. position: fixed;
  260. left: 369;
  261. bottom: 240;
  262. color: #FF0000;
  263. font-family: Playfair Display SC;
  264. font-size: 30px;opacity: 0;
  265. -webkit-transition: all 0.6s ease-out;
  266. -moz-transition: all 0.6s ease-out;
  267. -ms-transition: all 0.6s ease-out;
  268. -o-transition: all 0.6s ease-out;
  269. transition: all 0.6s ease-out;}
  270.  
  271.  
  272. body:hover .head{opacity: 1;
  273. -webkit-transition-delay: 1.6s ;
  274. -moz-transition-delay: 1.6s ;
  275. -ms-transition-delay: 1.6s ;
  276. -o-transition-delay: 1.6s ;
  277. transition-delay: 1.6s ;
  278. }
  279. .head2 {
  280. position: fixed;
  281. left: 445;
  282. bottom: 232;
  283. color: #000000;
  284. font-family: Questrial;opacity: 0;
  285. font-size: 20px;
  286. -webkit-transition: all 0.6s ease-out;
  287. -moz-transition: all 0.6s ease-out;
  288. -ms-transition: all 0.6s ease-out;
  289. -o-transition: all 0.6s ease-out;
  290. transition: all 0.6s ease-out;}
  291.  
  292. body:hover .head2{
  293. bottom: 212;opacity: 1;
  294. -webkit-transition-delay: 2.4s ;
  295. -moz-transition-delay: 2.4s;
  296. -ms-transition-delay: 2.4s ;
  297. -o-transition-delay: 2.4s ;
  298. transition-delay: 2.4s ;
  299. }
  300.  
  301. #botline {
  302. width: 1px;height: 7px;
  303. background: #FFFC2C;
  304. position: fixed;
  305. bottom: 233;left: 373;
  306. display:block;
  307. -webkit-transition: all 1.6s ease-out;
  308. -moz-transition: all 1.6s ease-out;
  309. -ms-transition: all 1.6s ease-out;
  310. -o-transition: all 1.6s ease-out;
  311. transition: all 1.6s ease-out;}
  312. body:hover #botline{
  313. width: 248px;
  314. }
  315.  
  316. #sprite { position: absolute;
  317. top: 5px;
  318. left: 5px;
  319. background: url( ) no-repeat;
  320. background-size: contain;
  321. width: 45px;
  322. height: 45px;
  323. -webkit-transition: all 1.6s ease-out;
  324. -moz-transition: all 1.6s ease-out;
  325. -ms-transition: all 1.6s ease-out;
  326. -o-transition: all 1.6s ease-out;
  327. transition: all 1.6s ease-out;
  328. opacity: 0; }
  329. body:hover #sprite { transition-delay: 0.55s;
  330. opacity: 0.85; }
  331.  
  332.  
  333. /*boxes*/
  334.  
  335. .box {
  336. position: fixed;
  337. left: 399;
  338. bottom: 50px;
  339. height: 140;
  340. width: 190;
  341. background-color: #transparent;
  342. border: 2px solid #000000;
  343. box-shadow: #000000 0px 0px 0px 0px;
  344. background-image:url("");
  345. z-index: 5;
  346. color: #000000;
  347. font-family: Palatino Linotype;
  348. font-style: normal;
  349. font-variant: ;
  350. font-weight: 900;
  351. text-align: justify;
  352. overflow-x: hidden;
  353. overflow-y: auto;
  354. font-size: 10px;
  355. padding: 5px;
  356. -webkit-transition: all 0.4s ease-out;
  357. -moz-transition: all 0.4s ease-out;
  358. -ms-transition: all 0.4s ease-out;
  359. -o-transition: all 0.4s ease-out;
  360. transition: all 0.4s ease-out;
  361. opacity: 0;
  362. filter:alpha(opacity=75);
  363. }
  364. body:hover .box{
  365. opacity: 1;
  366. -webkit-transition-delay: 3.6s;
  367. -moz-transition-delay: 3.6s;
  368. -ms-transition-delay: 3.6s;
  369. -o-transition-delay: 3.6s;
  370. transition-delay: 3.6s ;
  371.  
  372. #music{position:fixed;
  373. top:100px;
  374. left:100px;
  375. z-index:99;
  376. }
  377.  
  378.  
  379. #music1{
  380. position:fixed;
  381. padding:2px;
  382. -webkit-transition: all 0.5s ease-in-out;
  383. -moz-transition: all 0.5s ease-in-out;
  384. -o-transition: all 0.5s ease-in-out;}
  385.  
  386. #music1:hover #music2{
  387. opacity:0.7;
  388. margin-top:-25px;
  389. z-index:-1;}
  390.  
  391. #music1:hover #music3{
  392. opacity:0.7;
  393. margin-top:0px;
  394. z-index:99;}
  395.  
  396. #music1:hover #musiclist{ opacity:1;}
  397.  
  398.  
  399. #music3{
  400. position:fixed;
  401. width:15px;
  402. height:15px;
  403. background-size: 15px;
  404. background-image: url('http://www.free-icons-download.net/images/grays-play-button-icon-17896.png%27);
  405. background-repeat: no-repeat;
  406. background-position: 50% 0%;
  407. padding-left:5px;
  408. padding-right:5px;
  409. z-index:99;
  410. margin-left:0px;
  411. overflow:hidden;
  412. background-color: #736495;
  413. opacity:1.0;}
  414.  
  415. </style>
  416.  
  417.  
  418.  
  419. <div style="position: fixed; bottom: -130px; left: 0%; background-color: transparent;">
  420. <img src="https://68.media.tumblr.com/d1d8216b2a5f1bb0bb111e54bf919028/tumblr_ot3pozWBWh1vd3v0co1_500.png"height="120% 100%">
  421. </div>
  422.  
  423. <div id="music">
  424. <div id="music1">
  425. <div id="music3">
  426.  
  427. <audio controls style="opacity: 0;"><source src="https://k003.kiwi6.com/hotlink/mox1lhbyb2/Stephen_-_Crossfire_Mp3Converter.net_.mp3"></audio>
  428.  
  429. </div>
  430. </div>
  431. </div>
  432.  
  433.  
  434. <div id="left"></div><div id="right"></div><div id="bottom"></div>
  435.  
  436. <div class="head"><i>Unit 05953234;</i></div><div id="topline"></div><div id="botline"></div>
  437. <div class="head2">Quicksilver</div>
  438.  
  439. <div id="pic"><img src="https://i.pinimg.com/originals/0e/48/54/0e4854553c0ed31c5262ffc900a5d23e.jpg"></div>
  440.  
  441. <div class="box">
  442. Name; <font style="float:right"><a class="tooltip">Prompto Argentum<span>Prompto is a clone produced for military warfare by the Niflheim Empire. A codeprint is branded on his body as a form of identification that allows him and the other subjects like him to gain access to certain secured facilities. His biological father is said to be Verstael Besithia, the leading magitek engineer in Niflheim, but in truth, Prompto is a clone of Verstael; apart of a daemonized army. When Prompto was a baby he was kidnapped from a magitek production facility by the kingdom of Lucis, and brought to the Crown City. He was adopted by a common Lucian family when he was but one year old, from where he has his surname Argentum.
  443. </span></a></font><br>
  444.  
  445. Nicks; <font style="float:right;">Prom | Chocobutt</font><br>
  446.  
  447. Race; <font style="float:right;"><strike>Magitek</strike> <strike>Clone</strike> Human</font><br>
  448.  
  449. Gender; <font style="float:right;">Male<br></font><br>
  450.  
  451. Nationality; <font style="float:right;"><strike>Niflheim</strike> Lucian <br></font><br>
  452.  
  453. </font>
  454.  
  455. Mental; <font style="float:right;"><a class="tooltip">Hyper | Diffident<br>
  456.  
  457. <span>He is not a combat-hardened warrior, but has a knack for cheering people up and keeping things light-hearted. This stems from having had a sad and lonely childhood, and his outward mannerisms conceal a deep thinker. He never had friends before meeting Noctis. He tries to better himself to feel worthy of being acquainted with the crown prince, but lives his life in constant fear of rejection. Prompto has imposter syndrome and is always trying to please others - thinking if they understood what he really was .. everyone would abandon him</span></a></font><br>
  458.  
  459. Age; <font style="float:right;">20</font><br>
  460. Occupation; <font style="float:right;"><a class="tooltip">Photographer | Kingsglaive <span> Prompto carries a camera with him wherever he goes and is constantly snapping shots of everything. His favorite past-time is either taking selfies with random and dangerous encounters, or hording tons boobie and butt photographs on his device. His dream is to one day become a professional photographer; who is famous for his work. Prompto is also a member of a Glaive, properly named Kingsglaive or Crownguard, due to the nature of the Glaive being the protection of Prince Noctis.
  461.  
  462. </span></a></font><br>
  463.  
  464. Height/Weight; <font style="float:right;">5'8'' | 175 lbs</font><br>
  465.  
  466. Eye/Hair; <font style="float:right;">Blue | Blonde</font><br>
  467.  
  468. Sexuality; <font style="float:right;">Hetero-romantic<br></font><br>
  469.  
  470. Marital; <font style="float:right;">Solo <br></font><br>
  471.  
  472. Scent; <font style="float:right;">Old Spice <br></font><br><br>
  473.  
  474. <font style="float:right;"><a class="tooltip">Squad <span>
  475.  
  476. Noct.<br>
  477. Iggster. <br>
  478. Gladio. <br>
  479. Lady A. <br>
  480. Cindy. <br>
  481. Luna. <br>
  482. Cloud. <br>
  483. Aeris. <br>
  484. Yolzek. <br>
  485. Laguna. <br>
  486. Amanda. <br>
  487. </span></a></font><br>
  488.  
  489.  
  490. <font style="float:right;"><a class="tooltip">OOC<span><font style="color:#000000;">
  491. <li align="left"> I'm kinda busy, irl. Sorry if I don't come around as often as you'd like.</li>
  492. <li align="left"> <B><U>Some playful activity is okay.</B></U> </li>
  493. <li align="left"> Crossovers are fine.</li>
  494. <li align="left"> Save the drama for yo mama!</li>
  495. <li align="left"> Been role playing for like ten years or something. Para to multi-para poster.</li>
  496. <li align="left"> OOC does not equal IC.</li>
  497. <li align="left"> PM friendly.</li>
  498. <li align="left"> I have discord. Ask!</li>
  499. <li align="left"> Don't like the way I play Prompto from Final Fantasy 15? Suck it up loser! Actually, I kid .. please give me feedback.</li>
  500.  
  501. </font>
  502. </span></a></font><br></div>
  503.  
  504.  
  505.  
  506. <a href="profile.php?user=Punpun" title="Coded by Punpun" target="_blank"><img src="http://i.imgur.com/acD32sR.png" style="position:fixed; right:10; bottom:0;width:25;"></a>
  507. </body>
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!