API tools faq
paste
RageQxeen

The Black Hole Plot Device AKA Naya

RageQxeen
May 3rd, 2019
155
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 9.16 KB | None | 0 0
raw download clone embed print report
  1. <html>
  2. <body><style type="text/css">
  3.  
  4. @import url('https://fonts.googleapis.com/css?family=Great+Vibes|Sofia');
  5.  
  6.  
  7. html, body {
  8. background: #000;
  9. background-image:url("http://i.picpar.com/AZtd.jpg");
  10. background-size:100%;
  11. background-repeat:no-repeat;
  12. background-position:center;
  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. #image {
  33. width: 400px;
  34. margin: 0px;
  35. border: none;
  36. height: 700px;
  37. background-color:transparent;
  38. position: absolute;
  39. right: 30%;
  40. bottom: 0%;
  41. background-image:url("");
  42. background-repeat:no-repeat;
  43. background-position: bottom;
  44. background-size: 100%;
  45. }
  46.  
  47. body {
  48. width: 50%;
  49. height: 90%;
  50. display: flex;
  51. justify-content: center;
  52. align-items: center;
  53. perspective: 1500px;
  54. background: transparent;
  55. }
  56.  
  57. .book {
  58. transform-style: preserve-3d;
  59. position: relative;
  60. height: 300px;
  61. width: 300px;
  62. cursor: context-menu;
  63. backface-visibility: visible;
  64. }
  65.  
  66. .front, .back, .page1, .page2, .page3, .page4, .page5, .page6 {
  67. transform-style: preserve-3d;
  68. position: absolute;
  69. width: 280px;
  70. height: 350px;
  71. top: 0; left: 80%;
  72. transform-origin:left center;
  73. transition: transform 3s ease-in-out, box-shadow .35s ease-in-out;
  74. }
  75.  
  76. .front, .back {
  77. background: teal;
  78. font-family: 'Great Vibes', cursive;
  79. font-size: 40px;
  80. color: #111;
  81. text-align: center;
  82. border-top: 50px solid transparent;
  83. background-image:url("https://www.freeiconspng.com/uploads/swirl-designs-png-8.png");
  84. background-repeat: no-repeat;
  85. background-position: bottom;
  86. background-size: 80%;
  87. border-left: 2px solid #333;
  88. border-right: 2px solid #666;
  89. box-shadow: 5px 10px 60px 30px #000;
  90. }
  91.  
  92. .front, .page1, .page3, .page5 {
  93. border-bottom-right-radius: .5em;
  94. border-top-right-radius: .5em;
  95. }
  96.  
  97. .back, .page2, .page4, .page6 {
  98. border-bottom-right-radius: .5em;
  99. border-top-right-radius: .5em;
  100. }
  101.  
  102. .page1 {
  103. background: #f2eecb;
  104. }
  105.  
  106. .page2 {
  107. background: #f2eecb;
  108. }
  109.  
  110. .page3 {
  111. background: #f2eecb;
  112. }
  113.  
  114. .page4 {
  115. background: #f2eecb;
  116.  
  117. }
  118.  
  119. .page5 {
  120. background: #f2eecb;
  121. }
  122.  
  123. .page6 {
  124. background: #f2eecb;
  125. color: #000;
  126. font-family: 'Sofia', cursive;
  127. font-size: 18px;
  128. text-align: center;
  129. }
  130.  
  131. .book:hover .front {
  132. transform: rotateY(-160deg) scale(1.1);
  133. box-shadow: 0 1em 3em 0 rgba(0, 0, 0, .2);
  134. box-shadow: 5px 10px 60px 30px #000;
  135. }
  136.  
  137. .book:hover .page1 {
  138. transform: rotateY(-150deg) scale(1.1);
  139. box-shadow: 0 1em 3em 0 rgba(0, 0, 0, .2);
  140. background-color: #f2eecb;
  141. }
  142.  
  143. .book:hover .page2 {
  144. transform: rotateY(-135deg) scale(1.1);
  145. box-shadow: 0 1em 3em 0 rgba(0, 0, 0, .2);
  146. background-color: #f2eecb;
  147. }
  148.  
  149. .book:hover .page3 {
  150. transform: rotateY(-140deg) scale(1.1);
  151. box-shadow: 0 1em 3em 0 rgba(0, 0, 0, .2);
  152. background-color: #f2eecb;
  153. }
  154.  
  155. .book:hover .page4 {
  156. transform: rotateY(-130deg) scale(1.1);
  157. box-shadow: 0 1em 3em 0 rgba(0, 0, 0, .2);
  158. }
  159.  
  160. .book:hover .page5 {
  161. transform: rotateY(-125deg) scale(1.1);
  162. box-shadow: 0 1em 3em 0 rgba(0, 0, 0, .2);
  163. }
  164.  
  165. .book:hover .page6 {
  166. transform: rotateY(-30deg) scale(1.1);
  167. box-shadow: 0 1em 3em 0 rgba(0, 0, 0, .2);
  168. border-left: 1px solid #333;
  169. }
  170.  
  171. .book:hover .back {
  172. transform: rotateY(-20deg) scale(1.1);
  173. }
  174.  
  175.  
  176. #nav {
  177. background-color: transparent;
  178. width: 250px;
  179. height:40px;
  180. margin:auto;
  181. position: absolute;
  182. right: 5%;
  183. bottom: 2%;
  184. text-align: center;
  185. z-index:1;
  186. }
  187.  
  188. #nav a, #nav a:link, #nav a:visited {
  189. display:inline-block;
  190. background: #dda0dd;
  191. color: #dda0dd;
  192. margin-top: 0px;
  193. margin-bottom: 0px;
  194. margin-left: 0px;
  195. height: 10px;
  196. width: 20px;
  197. border-radius: 5px;
  198. box-shadow: 0px 0px 5px #000;
  199. }
  200.  
  201. #nav a:active, #nav a:hover {
  202. display:inline-block;
  203. height: 10px;
  204. width: 20px;
  205. text-decoration:none;
  206. background: #000;
  207. color: #000;
  208. margin: 0px;
  209. box-shadow: 0px 0px 5px #dda0dd;
  210. }
  211.  
  212. #editthis{ position:fixed;height: 27px; width: 30px; bottom: 0%; right: 2%; margin: auto; z-index:99;}
  213.  
  214. #music1{ position:fixed; padding:2px; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out;}
  215.  
  216. #music1:hover #music2{ opacity: 0; margin-top:-20px; z-index:-1;}
  217.  
  218. #music1:hover #music3{ opacity: .5; margin-top:-5px; z-index:99;}
  219.  
  220. #music1:hover #musiclist{ opacity: .5;}
  221.  
  222. #music2{ opacity: .5; background-color:#000000; padding:6px; border-radius: 100%; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out;}
  223.  
  224. #music3{ opacity: 0; position:fixed; background-color:#000000; background-image: url('https://www.pngkey.com/png/full/11-113290_playbutton-video-player-button-pngx.png'); background-repeat: no-repeat; background-size: 25px; border:1px dotted #b3b3e5; border-radius: 50px; width:25px; height:25px; z-index:99 margin-left:0px; overflow:hidden; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out;-o-transition: all 0.5s ease-in-out;}
  225.  
  226. h1 {font-family: 'Walter Turncoat', cursive; text-align: center; border-bottom: 1px solid #000;}
  227. h2 {font-family: 'Neucha', cursive; }
  228. a {text-decoration: none; color: #000;}
  229. i {color: #0000FF; font-weight: bold;}
  230.  
  231. .credit{
  232. position: fixed;
  233. bottom: 0px;
  234. left: 2px;
  235. height: 25px;
  236. width: 25px;
  237. line-height: 15px;
  238. font-size: 10px;
  239. color: #000;
  240. text-align: center;
  241. font-family: roboto;
  242. }
  243.  
  244. #Layout {position: fixed; left: 0px; top: 0px; right: 0px; bottom: 0px;}
  245. </style>
  246.  
  247.  
  248. <div id="image"></div>
  249.  
  250. <div class="book">
  251.  
  252. <div class="back">
  253. <div id="nav">
  254. <a href="#one"></a>
  255. <a href="#two"></a>
  256. <a href="#three"></a>
  257. <a href="#four"></a>
  258. </div></div>
  259.  
  260. <div class="page6" style="overflow: auto; width: 280px; height: 350px;">
  261.  
  262. <a name="one"><img src="http://i.picpar.com/SjFc.jpg" style="float:left; width:100px; height:100px; border: 1px solid #000;"></a>
  263. <p>"<i>You can never permanently kill Sin, they will always come back, just luckily for us without the memories of their previous lives.</i>"</p>
  264.  
  265. <a name="two"><img src="http://i.picpar.com/VjFc.jpg" style="float:right; width:100px; height:100px; border: 1px solid #000;"></a>
  266. <p>Something that all the Sins' learned the hard way, death would never be the end for them as they did not fit within the category of "living" beings. They were raw emotion and what was considered the "evil" of humanity, birthed when human kind grew sentient and civilized enough to gain such concepts; the first was Pride, followed by Envy, then Greed, Lust, Wrath and finally Sloth. They were not created in Hell as most assume, even if they were considered 'evil' by nature, they roamed the Earth along side humans quietly; feeding off of them within the shadows like any other supernatural creature until they eventually ran into one another.
  267. </p>
  268.  
  269. <a name="three"><img src="http://i.picpar.com/XjFc.jpg" style="float:left; width:100px; height:100px; border: 1px solid #000;"></a>
  270. <p>It was then that a 'family' was formed, even if their bonds weren't sound and true, just as their own bodies were. With no allegiances to any one side outside of their own, the Sins' became stronger the longer time passed, and with each reincarnation they began to take the shape of the humans they fed from. This made it easier for them, feeding became less frantic and more leisure, their mannerisms were adopted alongside their languages and eventually they were not much different. Legends of their true forms died out, along with the memories of what they use to be, or how many times they had died only to come back with only one thought in mind.</p>
  271.  
  272. <p>Return home.</p>
  273.  
  274. <a name="four"><img src="http://i.picpar.com/YjFc.jpg" style="float:right; width:100px; height:100px; border: 1px solid #000;"></a>
  275. <p>Life is strange with a personified Sin, for they are neither demon nor angel, human or beast; they are concepts at best and an enigma at worst. What is stagnant among them, outside of their reincarnation, is their power; which far outweighs many species and puts them in a class of their own, alone they <b>might</b> be easier to kill, but as a family they are an undefeatable army.</p>
  276.  
  277. </div>
  278.  
  279. <div class="page5">
  280. <img src="https://i.pinimg.com/originals/95/58/b9/9558b95660d31cdbfb19167da2a707f4.gif" style="float:center; width:240px; height:300px;"></div>
  281. <div class="page4"></div>
  282. <div class="page3"></div>
  283. <div class="page2"></div>
  284. <div class="page1"></div>
  285. <div class="front"><b>Legend of The Cursed Immortal<br><br>
  286. <small>By Nayanna</small></b>
  287. <div id="editthis"><div id="music1"><div id="music2">
  288. <img src="http://38.media.tumblr.com/tumblr_m7w2py1dEP1r6o8v2.gif" style="opacity: 0.8;"></div>
  289. <div id="music3"><Div style="margin-top:4px;">
  290. <audio controls style="opacity: 0;"><source src="http://k003.kiwi6.com/hotlink/m7gko43anf/Satsuriku_no_Tenshi_-_Angels_of_Death_Opening_VITAL_FULL_by_Masaaki_Endo.mp3"></audio>
  291. </div></div></div></div>
  292. <div class="credit" title="Profile by RageQxeen">♛</div></div>
  293. </div>
  294.  
  295. </body>
  296. </html>
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!