API tools faq
paste
Advertisement
marshallsmyth

87. Melody Lost

marshallsmyth
Feb 4th, 2019
188
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 12.22 KB | None | 0 0
raw download clone embed print report
  1.  
  2. <body>
  3. <style>
  4. @import url(https://fonts.googleapis.com/css?family=Cinzel+Decorative|Raleway:300);
  5. ::-webkit-scrollbar { width: 10px;}
  6. ::-webkit-scrollbar-track { border-radius:50px; background:#7e007e;}
  7. ::-webkit-scrollbar-thumb { border:5px solid fuchsia; border-radius:50px; border-shadow:5px 5px 5px 5px white;}
  8.  
  9. body {
  10. background-color:lightcoral;
  11. }
  12.  
  13. #statbut {
  14.  list-style-type: none;
  15.  margin: 0;
  16.  padding: 0;
  17.  width: 10%; height: 4%;
  18.  background: fuchsia;
  19.  border: 0.5vh solid #9e004e;
  20.  box-shadow: 4px 4px 5px #000000;
  21.  position: fixed;
  22.  z-index:1;
  23.  -ms-transform: skewX(-30deg);
  24.  -webkit-transform: skewX(-30deg);
  25.  transform: skewX(-30deg);
  26.  top: 10%;
  27.  left: 18%;
  28.  overflow: hidden;
  29.  opacity:0;
  30.  font-family: cinzel decorative;
  31.  
  32. -webkit-animation:statanim 1.5s 1;
  33. animation:statanim 1.5s 1;
  34. animation-delay:4.0s;
  35. animation-fill-mode:forwards;
  36. -webkit-animation-delay:4.0s;
  37. -webkit-animation-fill-mode:forwards;}
  38.  
  39. @keyframes statanim{
  40. from{left:0%;opacity:0;}
  41. to{left:18%;opacity:1;}
  42. }
  43. @-webkit-keyframes statanim{
  44. from{left:0%;opacity:0;}
  45. to{left:18%;opacity:1;}
  46. }
  47.  
  48. #statbut a {
  49.  display: block;
  50.  color:#336600;
  51.  font-size: 2vh;
  52.  padding: 4% 8px 4% 8px;
  53.  text-decoration: none;
  54.  transition: all 0.3s ease-in-out;
  55.  -moz-transition: all 0.3s ease-in-out;
  56.  -webkit-transition: all 0.3s ease-in-out;
  57. }
  58.  
  59. #statbut a:hover{
  60.  background-color: #2e002e;
  61.  color:#FFFFFF;
  62.  text-shadow: 2px 2px 2px #000000;
  63.  font-size: 2vh;
  64. }
  65.  
  66. #biobut {
  67.  list-style-type: none;
  68.  margin: 0;
  69.  padding: 0;
  70.  width: 8.8%; height:4%;
  71.  background-color: fuchsia;
  72.  border: 0.5vh solid #9e004e;
  73.  box-shadow:4px 4px 5px #000000;
  74.  opacity:0;
  75.  position: fixed;
  76.  z-index:1;
  77.  -ms-transform: skewX(-30deg);
  78.  -webkit-transform: skewX(-30deg);
  79.  transform: skewX(-30deg);
  80.  top: 15%;
  81.  left: 18%;
  82.  overflow: hidden;
  83.  font-family: Times New Roman;
  84. -webkit-animation:bioanim 0.5s 1;
  85. animation:bioanim 0.5s 1;
  86. animation-delay:4.6s;
  87. animation-fill-mode:forwards;
  88. -webkit-animation-delay:4.6s;
  89. -webkit-animation-fill-mode:forwards;}
  90.  
  91. @keyframes bioanim{
  92. from{left:0%;opacity:0;}
  93. to{left:18%;opacity:1;}
  94. }
  95. @-webkit-keyframes bioanim{
  96. from{left:0%;opacity:0;}
  97. to{left:18%;opacity:1;}
  98. }
  99.  
  100. #biobut a {
  101.  display: block;
  102.  color:#336600;
  103.  font-size: 2vh;
  104.  padding: 4% 8px 4% 8px;
  105.  text-decoration: none;
  106.  transition: all 0.3s ease-in-out;
  107.  -moz-transition: all 0.3s ease-in-out;
  108.  -webkit-transition: all 0.3s ease-in-out;
  109. }
  110.  
  111. #biobut a:hover{
  112.  background-color: #2e002e;
  113.  color:#FFFFFF;
  114.  text-shadow: 2px 2px 2px #000000;
  115.  font-size: 2vh;
  116. }
  117.  
  118. #oocbut {
  119.  list-style-type: none;
  120.  margin: 0;
  121.  padding: 0;
  122.  width: 7.7%; height:4%;
  123.  background-color: fuchsia;
  124.  border: 0.5vh solid #9e004e;
  125.  box-shadow: 4px 4px 5px #000000;
  126.  position: fixed;
  127.  z-index:1;
  128.  -ms-transform: skewX(-30deg);
  129.  -webkit-transform: skewX(-30deg);
  130.  transform: skewX(-30deg);
  131.  top: 20%;
  132.  left: 18%;
  133.  overflow: hidden;
  134. opacity:0;
  135.  font-family: Times New Roman;
  136. -webkit-animation:oocanim 0.5s 1;
  137. animation:bioanim 0.5s 1;
  138. animation-delay:4.3s;
  139. animation-fill-mode:forwards;
  140. -webkit-animation-delay:4.3s;
  141. -webkit-animation-fill-mode:forwards;}
  142.  
  143. @keyframes oocanim{
  144. from{left:0%;opacity:0;}
  145. to{left:18%;opacity:1;}
  146. }
  147. @-webkit-keyframes oocanim{
  148. from{left:0%;opacity:0;}
  149. to{left:18%;opacity:1;}
  150. }
  151.  
  152. #oocbut a {
  153.  display: block;
  154.  color:#336600;
  155.  font-size: 2vh;
  156.  padding: 4% 8px 4% 8px;
  157.  text-decoration: none;
  158.  transition: all 0.3s ease-in-out;
  159.  -moz-transition: all 0.3s ease-in-out;
  160.  -webkit-transition: all 0.3s ease-in-out;
  161. }
  162.  
  163. #oocbut a:hover{
  164.  background-color: #2e002e;
  165.  color:#FFFFFF;
  166.  text-shadow: 2px 2px 2px #000000;
  167.  font-size: 2vh;
  168. }
  169.  
  170. audio{
  171. width:
  172. }
  173.  
  174. #player{
  175.  position: absolute;
  176.  z-index:0;
  177.  top:25%;
  178.  left:19vw;
  179.  width: 5%;
  180.  border: 0.4vh solid #336600;
  181.  box-shadow: 4px 1px 5px #000000;
  182.  opacity:0;
  183.  overflow: hidden;
  184.  animation:musicfade 0.5s 1;
  185.  animation-delay:4s;
  186.  animation-fill-mode:forwards;
  187. -webkit-animation:musicfade 0.5s 1;
  188. -webkit-animation-delay:4s;
  189. -webkit-animation-fill-mode:forwards;}
  190.  
  191. @keyframes musicfade{
  192. from{left:0%;opacity:0;}
  193. to{opacity:1;}
  194. }
  195. @-webkit-keyframes musicfade{
  196. from{left:20%;opacity:0;}
  197. to{opacity:1;}
  198. }
  199.  
  200. #titlebar{
  201.  position: absolute;
  202.  z-index: 0;
  203.  left: 0%;
  204.  top: 30%;
  205.  width: 88.5%;
  206.  color:blue;
  207.  background: fuchsia;
  208.  box-shadow: 4px 4px 5px #000000;
  209.  font-family: Cinzel Decorative;
  210.  font-size: 11vh;
  211.  -ms-transform: skewX(-30deg);
  212.  -webkit-transform: skewX(-30deg);
  213.  transform: skewX(-30deg);
  214.  opacity:0;
  215.  -webkit-animation: titebarmove 0.5s 1;
  216.  animation: titlebarmove 1.5s 1;
  217.  animation-delay:1s;
  218.  -webkit-animation-delay:1s;
  219.  animation-fill-mode: forwards;
  220.  -webkit-animation-fill-mode: forwards;}
  221.  
  222. @-webkit-keyframes titlebarmove {
  223. from {top: 0%; opacity: 0;}
  224. to {top: 30%;opacity: 1;}
  225. }
  226.  
  227.  
  228. @keyframes titlebarmove {
  229. from {top: 0%;opacity: 0;}
  230. to {top: 31%; opacity: 1;}
  231. }
  232.  
  233. #title {
  234.  position: absolute;
  235.  z-index: 1;
  236.  left: 20%;
  237.  top: 31%;
  238.  color:#2e002e;
  239.  text-shadow: 1px 1px 1px #fff;
  240.  font-family: Cinzel Decorative;
  241.  font-size: 11vh;
  242.  opacity:0.2;
  243.  -ms-transform: skewX(-30deg); /* IE 9 */
  244.  -webkit-transform: skewX(-30deg); /* Safari */
  245.  transform: skewX(-30deg);
  246.  -webkit-animation: name 0.5s 1;
  247.  animation: name 0.5s 1;
  248.  animation-delay: 2.5s;
  249.  -webkit-animation-delay:2.5s;
  250.  animation-fill-mode:forwards;
  251.  -webkit-animation-fill-mode:forwards;
  252. }
  253.  
  254. @-webkit-keyframes name{
  255. from{left:0%;opacity:0;}
  256. to{left:20%;opacity:1;}
  257. }
  258. @keyframes name{
  259. from{left:0%;opacity:0;}
  260. to{left:20%;opacity:1;}
  261. }
  262.  
  263. #subtitle{
  264.  position: absolute;
  265.  z-index:2;
  266.  left: 50%;
  267.  top: 37%;
  268.  color:#bbbb49;
  269.  text-shadow: 2px 1px 2px #000000;
  270.  font-family: Cinzel Decorative;
  271.  font-size: 8vh;
  272.  -ms-transform: skewX(-30deg); /* IE 9 */
  273.  -webkit-transform: skewX(-30deg); /* Safari */
  274.  transform: skewX(-30deg);
  275.  opacity:0;
  276.  -webkit-animation: subfade 1s 1;
  277.  animation: subfade 1s 1;
  278.  animation-fill-mode:forwards;
  279.  animation-delay:3s;
  280.  -webkit-animation-delay:3s;
  281.  -webkit-animation-fill-mode:forwards;}
  282.  
  283. @keyframes subfade{
  284. from{opacity:0;}
  285. to{opacity:1;}
  286. }
  287. @-webkit-keyframes subfade{
  288. from{opacity:0;}
  289. to{opacity:1;}
  290. }
  291.  
  292. #mainpic {
  293.  position:fixed;
  294.  z-index: 3;
  295.  width:20%;
  296.  height: 100%;
  297.  left: 0px;
  298.  bottom: 0px;
  299.  background: #9e003e;
  300.  color: #9e003e;
  301.  font-size:2vh;
  302.  border-right: 0.8vh solid #2e002e;
  303.  box-shadow: 4px 1px 5px #3e004e;
  304.  overflow:hidden;
  305.  opacity:0;
  306.  -webkit-animation: picturefade 5s 1;
  307.  animation: picturefade 5s 1;
  308.  animation-delay:4s;
  309.  -webkit-animation-delay:4s;
  310.  animation-fill-mode: forwards;
  311.  -webkit-animation-fill-mode: forwards;}
  312. #mainpic img {
  313.  width: 100%;}
  314.  
  315. @-webkit-keyframes picturefade{
  316. 0%{left:-20%;opacity:0;}
  317. 100%{left:0%;opacity:1;}
  318. }
  319.  
  320. @keyframes picturefade{
  321. 0%{left:-20%;opacity:0;}
  322. 100%{left:0%;opacity:1;}
  323. }
  324.  
  325. #infobox{
  326.  position: fixed;
  327.  z-index:1;
  328.  height: 98%;
  329.  background:transparent;
  330.  border-radius: 5px;
  331.  border: 2px solid #80584A;
  332.  box-shadow: 0px 0px 64px #000000;
  333.  right: 72px;
  334.  width: 50%;
  335.  top: 1%;
  336.  color:#bbbb49;
  337.  text-shadow: 2px 2px 2px #000000;
  338.  font-family: Times New Roman ;
  339.  font-size: 16pt;}
  340.  #infobox img {
  341.  width: 100%;}
  342.  
  343. #credit{
  344.  position: fixed;
  345.  z-index:2;
  346.  bottom: 5px;
  347.  right: 5px;
  348.  color:#bbbb49;
  349.  text-shadow: 1px 1px 0px #000000;
  350.  font-family: Cinzel Decorative;
  351.  font-size: 2vh;}
  352.  
  353. a{
  354.  color: #3e003e;
  355.  text-shadow: 0px 0px 0px #000000;
  356.  font-family: Cinzel Decorative;
  357.  font-size: 2vh;
  358.  text-decoration: none;
  359.  transition: 3s;
  360. }
  361. a:hover{
  362.  color: red;
  363. }
  364.  
  365. #borderbox{
  366. position:absolute;
  367. z-index:0;
  368. top:46%;
  369. left:0%;
  370. width:79%;
  371. height:52%;
  372. background: #2e002e;
  373. border: 0.5vh solid #151515;
  374. box-shadow: 4px 4px 5px #000000;
  375. opacity:0;
  376. -ms-transform: skewX(-30deg); /* IE 9 */
  377. -webkit-transform: skewX(-30deg); /* Safari */
  378. transform: skewX(-30deg);
  379. -webkit-animation:borderslide 1s 1;
  380. animation:borderslide 1s 1;
  381. animation-delay:1.5s;
  382. animation-fill-mode:forwards;
  383. -webkit-animation-delay:1.5s;
  384. -webkit-animation-fill-mode:forwards;}
  385.  
  386. @keyframes borderslide{
  387. from{left:-40%;opacity:0;}
  388. to{left:0%;opacity:1;}
  389. }
  390. @-webkit-keyframes borderslide{
  391. from{left:-40%;opacity:0;}
  392. to{left:0%;opacity:1;}
  393. }
  394.  
  395. #textscroll{
  396. position:absolute;
  397. z-index:6;
  398. left:21%;
  399. top: 49%;
  400. width:49%;
  401. height:48%;
  402. padding:4px;
  403. color: #ae116e;
  404. font-size: 3.5vh;
  405. line-height:2.5vh;
  406. letter-spacing: 0.15vh;
  407. font-family: 'cinzel decorative';
  408. text-shadow:2px 2px 2px #000000;
  409. opacity: 0;
  410. animation:textfade 15s 1;
  411. animation-delay:3s;
  412. animation-fill-mode:forwards;
  413. -webkit-animation:textfade 15s 1;
  414. -webkit-animation-delay:3s;
  415. -webkit-animation-fill-mode:forwards;}
  416.  
  417. @keyframes textfade{
  418. from{opacity:0;}
  419. to{opacity:1;}
  420. }
  421. @-webkit-keyframes textfade{
  422. from{opacity:0;}
  423. to{opacity:1;}
  424. }
  425.  
  426. h1 {
  427. font-family: Cinzel Decorative;
  428. font-size: 6vh;
  429. font-weight: normal;
  430. color: #ee99ee;
  431. text-shadow: 2px 2px 0px #000000;
  432. text-align: center;
  433. letter-spacing: 1vw;
  434. }
  435.  
  436. h2 {
  437. font-family: Cinzel Decorative;
  438. font-size: 9vh;
  439. font-weight: bold;
  440. color: #ee99ee;
  441. text-shadow: 2px 2px 0px #000000;
  442. letter-spacing: 1vh;
  443. text-align: left;
  444. }
  445.  
  446. h3 {
  447. font-family: Cinzel Decorative;
  448. font-size: 3vh;
  449. font-weight: bold;
  450. color: #9999ee;
  451. text-shadow: 2px 2px 0px #000000;
  452. letter-spacing: 1vh;
  453. text-align: center;
  454. line-height: 1.5vh;
  455. }
  456.  
  457. hr {
  458. border-color: #330099;
  459. box-shadow: 2px 2px 0px #000000;
  460. }
  461.  
  462.  
  463. </style>
  464.  
  465.  
  466. <div id="statbut">
  467. <center>
  468. <a href="#stats">stats</a>
  469. </center>
  470. </div>
  471.  
  472. <div id="biobut">
  473. <center>
  474. <a href="#bio">bio</a>
  475. </center>
  476. </div>
  477.  
  478. <div id="oocbut">
  479. <center>
  480. <a href="#ooc">gallery</a>
  481. </center>
  482. </div>
  483.  
  484. <div id="credit">
  485. <p align = "right">
  486. <br>
  487. <a target="_blank" href="http://pastebin.com/[filtered]" target="new">Please steal!</a>
  488. </p>
  489. </div><div style="font-family:cinzel decorative, arial;font-size:13px;color:#0e002e;"><i><center>Page 76..... The Present Degeneracy, Time-Frames<br>Written by, Kathy WayStone-Yayoi<br>This is a reconstructed profile <br> based on a character the WayStone family interacted with.<br>Melody married Carina and they had a child, Harmony.<br>Shortly after, she disappeared, and is presumed deceased. <br> Melody is much beloved, and is an important character<br> in this story. </center></i>
  490.  
  491. <div id="titlebar">-
  492.  
  493. </div>
  494.  
  495. <div id="title">
  496. ...Melody the Neko
  497. </div>
  498.  
  499. <div id="subtitle">
  500. <center>
  501.  
  502. </center>
  503. </div>
  504.  
  505. <div id="mainpic">
  506. <br>
  507. <br>
  508. <img src=" https://i.imgur.com/nkftok7.png " width:="30%">
  509. <img src=" https://i.imgur.com/On98HUq.png " width:="30%">
  510. </div>
  511.  
  512. <div id="borderbox">
  513. stuff
  514. </div>
  515.  
  516. <div id="textscroll">
  517. <center>
  518. <div style="height: 100%; overflow-y: hidden;">
  519. <a name="stats"></a>
  520. <div style="width:100%; height: 100%; top: 100px; overflow: auto;" align="center"><i>
  521. <h1>Stats</h1><hr>
  522. <h3>Age:</h3> 18 <br>
  523. <h3>Gender:</h3> shemale <br>
  524. <h3>Traits:</h3> Catlike, pure, true<br>
  525. <h3>Likes:</h3> Having fun, loving<br>
  526. <h3>Relations:</h3>Carina WayStone<br>
  527. </div>
  528.  
  529. <a name="bio"></a>
  530. <div style="width:100%; height: 100%; top: 100px; overflow: auto;" align="left">
  531. <h1>Bio/Background</h1>
  532.  
  533. <h3>Melody</h3>
  534.  
  535. <center></center><br>
  536. <br>
  537. Recently married Carina WayStone<p>Together, and with help, since they both wanted<p> a child very much, they had a child named<p> Harmony. Shortly after the baby's birth, Melody<p> disappeared. Determined searches were made,<p> and those with Gallan searched for her life<p> force. None was found, and sweet Melody is<p> presumed dead. Carina became more and more<p> depressed and left her home and disappeared<p> herself. Harmony, who bears Gallan and thus<p> grew up to age 18 rapidly, then determined to<p> find her mother/father Carina. Together<p> with Delphina, Belladonna, and CJ Cantu, they<p> found her living in an old small tidy cottage<p> northwest of Paris. They helped Carina<p> recover from her depression<br>
  538. <hr>
  539.  
  540.  
  541. <center><h3>Family</h3></center>
  542.  
  543. No known relatives can be found
  544. <br><br>
  545.  
  546. </p></div><br>
  547. <a name="ooc"></a>
  548. <div style="width:60%; height: 100%; top: 100px; overflow: auto;" align="left">
  549.  
  550. <h1>Gallery</h1><hr>
  551. <br><img src=" https://i.imgur.com/On98HUq.png " style="width:100%">
  552.  
  553. </div></div></div><center>
  554. <img src=" " width="15%">
  555. </center><br></body></html>
  556.  
  557. 76. Melody the Neko 11/28/18
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!