API tools faq
paste
Advertisement
willy4m

miku 2.0

willy4m
Oct 20th, 2019
107
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 10.57 KB | None | 0 0
raw download clone embed print report
  1. <html>
  2. <head>
  3. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  4. <script>
  5. $(function(){
  6. $("#arrow1").click(function(){
  7. $(".bigwrap").addClass("middle");
  8. });
  9. $(".arrow2").click(function(){
  10. $(".bigwrap").removeClass("middle");
  11. });
  12. $(".arrow3").click(function(){
  13. $(".bigwrap").removeClass("middle");
  14. $(".bigwrap").addClass("right");
  15. });
  16. $(".arrow4").click(function(){
  17. $(".bigwrap").removeClass("right");
  18. $(".bigwrap").addClass("middle");
  19. });
  20. });
  21. </script>
  22. <style>
  23. @import url('https://fonts.googleapis.com/css?family=Montserrat:100,200,300,400,500,600,700,800,900');
  24.  
  25. body {
  26. margin: 0;
  27. padding: 0;
  28. overflow: hidden;
  29. font-family: Montserrat;
  30. }
  31.  
  32. .loading {
  33. position: absolute;
  34. top: 0%; left: 0%;
  35. width: 100%;
  36. height: 100%;
  37. text-align: center;
  38. background: black;
  39. animation: disappear 0.5s;
  40. animation-delay: 4s;
  41. animation-fill-mode: forwards;
  42. z-index: 10;
  43. }
  44. .bar {
  45. position: relative;
  46. display: inline-block;
  47. top: 60%;
  48. font-size: 4vh;
  49. width: 25%;
  50. border: 2px solid white;
  51. text-align: center;;
  52. color: white;
  53. padding: 0 1vw;
  54. }
  55. .bar::after {
  56. position: absolute;
  57. left: 0%;
  58. display: inline-block;
  59. content: '';
  60. height: 100%;
  61. width: 100%;
  62. background: white;
  63. animation: load 4s;
  64. }
  65.  
  66. @keyframes load {
  67. from {width: 0%;}
  68. to {width: 100%;}
  69. }
  70. @keyframes disappear {
  71. from {opacity: 1;}
  72. 99% {top: 0%;}
  73. to {opacity: 0; top: 100%; z-index: -1;}
  74. }
  75.  
  76. .bigwrap {
  77. height: 100vh;
  78. width: 300vw;
  79. position: absolute;
  80. background: #f1f1f;
  81. transition: 0.32s ease-out;
  82. left: 0%;
  83. }
  84. .first {
  85. height: 100%;
  86. width: 100vw;
  87. position: absolute;
  88. left: 0%;
  89. top: 0%;
  90. background: #d98268;
  91. }
  92. .back {
  93. height: 100%;
  94. position: absolute;
  95. right: 7.5%;
  96. bottom: 0%;
  97. animation: bottom 0.37s;
  98. animation-delay: 4.5s;
  99. animation-fill-mode: forwards;
  100. z-index: 5;
  101. opacity: 0;
  102. }
  103. .firstinfo, .name {
  104. padding: 0.5vh 0;
  105. padding-left: 0.5vw;
  106. opacity: 0;
  107. animation: right 0.36s;
  108. animation-fill-mode: forwards;
  109. border-left: 0.3vw solid black;
  110. }
  111. .firstinfo {
  112. height: 75%;
  113. width: 85%;
  114. background: #cc9483;
  115. position: absolute;
  116. right: 0%; bottom: 10%;
  117. z-index: 1;
  118. animation-delay: 5s;
  119. }
  120. .name {
  121. width: 85%;
  122. background: #802712;
  123. position: absolute;
  124. right: 0%; bottom: 2.5%;
  125. z-index: 1;
  126. animation-delay: 4.8s;
  127. letter-spacing: 2vh;
  128. font-weight: 600;
  129. color: white;
  130. font-size: 3vh;
  131. text-shadow: 0 0 3px white;
  132. }
  133.  
  134. .strip {
  135. height: 100%;
  136. position: absolute;
  137. right: 0%;
  138. width: 1vw;
  139. background: #802712;
  140. }
  141.  
  142. @keyframes right {
  143. from {opacity: 0; right: -5%;}
  144. to {opacity: 1; right: 0%;}
  145. }
  146. @keyframes bottom {
  147. from {opacity: 0; bottom: -5%;}
  148. to {opacity: 1; bottom: 0%;}
  149. }
  150.  
  151. .nametag {
  152. font-weight: 200;
  153. position: absolute;
  154. font-size: 6vh;
  155. top: 50%; left: 0%;
  156. transform: translate(-45%,-50%) rotate(90deg);
  157. letter-spacing: 2vh;
  158. text-shadow: 0 0 3px black;
  159. }
  160.  
  161. .infoinfo {
  162. background: rgba(0,0,0,0.1);
  163. height: 80%;
  164. width: 35%;
  165. position: absolute;
  166. top: 50%; left: 10%;
  167. transform: translateY(-50%);
  168. font-size: 2.5vh;
  169. font-weight: 300;
  170. }
  171.  
  172. .highlight {
  173. font-weight: 600;
  174. }
  175. .center {
  176. position: absolute;
  177. top: 50%; left: 50%;
  178. transform: translate(-50%,-50%);
  179. display: inline-block;
  180. width: 100%;
  181. text-align: center;
  182. }
  183.  
  184. .emphasis {
  185. border: 0.3vh solid rgba(0,0,0,0.1);
  186. border-top: 0;
  187. padding: 0.5vh 0.25vw;
  188. font-size: 3.5vh;
  189. display: inline-block;
  190. margin-bottom: 1vh;
  191. }
  192. .emphasise {
  193. border: 0.3vh dashed rgba(0,0,0,0.1);
  194. display: inline-block;
  195. padding: 0.5vh 0.5vw;
  196. line-height: 3vh;
  197. }
  198.  
  199. a {
  200. color: white;
  201. transition: 0.2s;
  202. }
  203.  
  204. a:hover {color: pink;}
  205.  
  206. .arrow {
  207. border-top: 8vh solid rgba(0,0,0,0);
  208. border-bottom: 8vh solid rgba(0,0,0,0);
  209. border-left: 8vh solid rgba(0,0,0,0.1);
  210. position: absolute;
  211. top: 50%; right: 3%;
  212. transform: translateY(-50%);
  213. transition: 0.4s;
  214. }
  215. .arrow:hover {
  216. border-left: 8vh solid rgba(0,0,0,0.2);
  217. right: 2%;
  218. }
  219.  
  220. .middle {
  221. left: -100%;
  222. }
  223.  
  224. .second {
  225. position: absolute;
  226. left: 100vw;
  227. top: 0%;
  228. height: 100%;
  229. width: 100vw;
  230. background: #A47F6;
  231. }
  232.  
  233. .secondinfo {
  234. height: 75%;
  235. width: 100%;
  236. position: absolute;
  237. bottom: 10%;
  238. left: 0%;
  239. background: #6D866;
  240. padding: 0.5vh 0;
  241. }
  242.  
  243. .walking-container {
  244. height: 90vh;
  245. position: absolute;
  246. bottom: 0%; right: 1%;
  247. z-index: 5;
  248. }
  249.  
  250. .walking {
  251. height: 100%;
  252. }
  253.  
  254. .infoinfoinfo {
  255. width: 100%;
  256. height: 70%;
  257. position: absolute;
  258. top: 50%;
  259. transform: translateY(-50%);
  260. left: 0%;
  261. background: rgba(0,0,0,0.1);
  262. z-index: 1;
  263. }
  264.  
  265. .arrow2 {
  266. border-top: 8vh solid rgba(0,0,0,0);
  267. border-bottom: 8vh solid rgba(0,0,0,0);
  268. border-right: 8vh solid rgba(0,0,0,0.1);
  269. position: absolute;
  270. top: 50%; left: 3%;
  271. transform: translateY(-50%);
  272. transition: 0.4s;
  273. }
  274.  
  275. .arrow3 {
  276. border-top: 8vh solid rgba(0,0,0,0);
  277. border-bottom: 8vh solid rgba(0,0,0,0);
  278. border-left: 8vh solid rgba(0,0,0,0.1);
  279. position: absolute;
  280. top: 50%; left: 10%;
  281. transform: translateY(-50%);
  282. transition: 0.4s;
  283. }
  284.  
  285. .arrow2:hover {left: 2%}
  286. .arrow3:hover {left: 11%;}
  287. .arrow2:hover, .arrow3:hover {
  288. border-left-color: rgba(0,0,0,0.2);
  289. border-right-color: rgba(0,0,0,0.2);
  290. }
  291.  
  292. .right {
  293. left: -200%;
  294. }
  295.  
  296. .bigboxofstats {
  297. width: 30%;
  298. height: 90%;
  299. position: absolute;
  300. top: 50%; left: 17.5%;
  301. transform: translateY(-50%);
  302. background: rgba(0,0,0,0.1);
  303. color: white;
  304. line-height: 4vh;
  305. }
  306.  
  307. .statname {
  308. font-weight: 600;
  309. background: rgba(0,0,0,0.1);
  310. border-radius: 500px;
  311. padding: 0 1vh;
  312. }
  313.  
  314. .third {
  315. height: 100%;
  316. width: 100vw;
  317. position: absolute;
  318. left: 200vw;
  319. top: 0%;
  320. background: #839fcc;
  321. }
  322.  
  323. .thelast {
  324. position: absolute;
  325. top: 0%;
  326. right: 0%;
  327. height: 100%;
  328. z-index: 5;
  329. }
  330.  
  331. .thirdinfo {
  332. height: 75%;
  333. width: 40%;
  334. position: absolute;
  335. bottom: 10%;
  336. left: 0%;
  337. background: rgba(0,0,0,0.1);
  338. padding: 0.5vh 0;
  339. z-index: 1;
  340. border-right: 0.3vw solid black;
  341. }
  342.  
  343. .arrow4 {
  344. border-top: 8vh solid rgba(0,0,0,0);
  345. border-bottom: 8vh solid rgba(0,0,0,0);
  346. border-right: 8vh solid rgba(0,0,0,0.1);
  347. position: absolute;
  348. top: 50%; left: 4%;
  349. transform: translateY(-50%);
  350. transition: 0.4s;
  351. }
  352. .arrow4:hover {
  353. border-right: 8vh solid rgba(0,0,0,0.2);
  354. left: 2%;
  355. }
  356.  
  357. .infoinfoinfoinfo {
  358. background: rgba(0,0,0,0.1);
  359. position: absolute;
  360. top: 50%; left: 25%;
  361. transform: translateY(-50%);
  362. width: 60%;
  363. height: 90%;
  364. color: white;
  365. padding: 0 0.5vw;
  366. }
  367.  
  368. .secret-page {
  369. position: absolute;
  370. left: 100vw;
  371. top: 0;
  372. height: 100%;
  373. width: 100vw;
  374. background: rgba(0,0,0,0.8);
  375. z-index: 6;
  376. }
  377.  
  378. .facing {
  379. z-index: 2;
  380. height: 90%;
  381. position: absolute;
  382. bottom: 0; left: 10%;
  383. }
  384. .secret-deets {
  385. z-index: 1;
  386. position: absolute;
  387. height: 80%;
  388. width: 30%;
  389. right: 20%; bottom: 0%;
  390. background: rgba(0,0,0,0.3);
  391. }
  392. .secret-deets-title {
  393. position: absolute;
  394. display: inline-block;
  395. border-right: 0.25vh solid white;
  396. border-bottom: 0.25vh solid white;
  397. bottom: 0%; right: 0%;
  398. color: white;
  399. padding: 0.1vh 0.5vw;
  400. text-shadow: 0 0 3px #fff;
  401. font-size: 5vh;
  402. }
  403. </style>
  404. </head>
  405. <body>
  406.  
  407. <div class="loading">
  408. <div class="bar">LOADING...</div>
  409. </div>
  410.  
  411. <div class="bigwrap">
  412. <div class="first">
  413. <div class="strip"></div>
  414. <img class="back" src="https://i.imgur.com/qsIARLI.png"/>
  415. <div class="firstinfo">
  416. <span class="nametag">hatsune miku</span>
  417. <div class="infoinfo">
  418. <div class="center" style="width: 95%">
  419. <div class="emphasis"><span class="highlight">Miku</span>, the #1 Princess.</div>
  420. <br>
  421. Well, she was, until she'd gotten her fair share of the limelight.
  422. <br>A popstar, by design. After thousands of songs and shows, and dozens of games made after her, it's safe to say she's sitting pretty.<br>
  423. Miku's mellowed out since she first got her 'fifteen minutes of fame'.<br>
  424. She's a little more quiet and introverted now, being ten years older.
  425. The same girl still, just with a different outlook on life.<br>
  426. P.S.: Don't call her old if you value your ability to breathe. She vehemently denies that she's nearing her thirties.
  427.  
  428. <br><br>
  429. <div class="emphasise"><i style="font-size: 1.75vh"><b>Side note</b>: click the arrow on the right to see the rest of the profile.</i></div>
  430. </div>
  431. </div>
  432. <div id="arrow1" class="arrow"></div>
  433. </div>
  434. <div class="name"><span style="padding-left: 2vw">look this way, baby</span></div>
  435. </div>
  436.  
  437. <div class="second">
  438. <div class="secondinfo">
  439. <div class="walking-container"><img class="walking" src="https://i.imgur.com/fPHwuzY.png"/></div>
  440. <div class="infoinfoinfo">
  441. <div class="arrow2"></div>
  442. <div class="arrow3"></div>
  443. <div class="bigboxofstats">
  444. <div class="center">
  445. <span class="statname">height:</span> 5'4
  446. <br><span class="statname">weight:</span> 110lbs
  447. <br><span class="statname">age:</span> 28 (8/31)
  448. <br><span class="statname">hair:</span>sea green
  449. <br><span class="statname">eyes:</span> see above
  450. <br><span class="statname">likes:</span> music, good food, good company, girls
  451. <br><span class="statname">dislikes:</span> meetings, corporations, creeps, men
  452. <br><span class="statname">attachments:</span> her girlfriend + some others
  453. <br><span class="statname">orientation</span> 100% lesbian
  454. <br><span class="statname">relationship:</span> open
  455. </div>
  456. </div>
  457. </div>
  458. </div>
  459. </div>
  460.  
  461.  
  462. <div class="third">
  463. <img class="thelast" src="https://i.imgur.com/dUjX4ox.png"/>
  464. <div class="thirdinfo">
  465. <div class="arrow4"></div>
  466. <div class="infoinfoinfoinfo">
  467. <div class="center" style="width: 98%">
  468. Standard OOC rules apply.
  469. <br>PM friendly, kinda.
  470. <br><br>
  471. Smut? Maybe. Story? Yeah. Other stuff? Probably.<br>
  472. I'm not interested in sharing my personal life with you, unless we happen to become great friends.<br>
  473. Outside contact, however, might be given if you ask me. Don't get upset if I decline.<br>
  474. I'm fairly picky when it comes to writing. That doesn't mean i won't write with you, you'll find out what irks me. <b>I have a hard time telling people no. If I ignore you or seem uninterested, <i>please</i> take a hint.</b><br>
  475.  
  476. If you're interested in knowing, she's a ruthless, unflinching top and a loud, whorey bottom.
  477. <br>
  478. Coded by <a target="_blank" href="https://roleplay.chat/profile.php?user=Trash+Can">a trash can. Thank you x1000.</a>
  479. <br><br>
  480. <a target="_blank" href="https://imgur.com/a/zlw2vvU" target="_blank">Here's</a> a gallery.
  481. </div>
  482. </div>
  483. </div>
  484. </div>
  485. </div>
  486. </body>
  487. </html>
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!