API tools faq
paste
M-21

sinestia

M-21
Apr 21st, 2026
41
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 15.75 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2.  
  3. <head>
  4. <title>Sinesta</title>
  5. </head>
  6.  
  7. <style>
  8. body {
  9. background:-webkit-linear-gradient(180deg, #030C22, #20293F);
  10. background:-moz-linear-gradient(180deg, #030C22, #20293F);
  11. background:linear-gradient(180deg, #030C22, #20293F);
  12. height: 480px;
  13. margin: 0;
  14. overflow:hidden;
  15. background-repeat: no-repeat;
  16. background-attachment: fixed;
  17. }
  18. div.help {
  19. background-image: url('http://www.freeiconspng.com/uploads/stars-png-23.png'), url('http://www.freeiconspng.com/uploads/stars-png-23.png'), url('http://www.freeiconspng.com/uploads/stars-png-23.png'), url('http://www.freeiconspng.com/uploads/stars-png-23.png'), url('http://www.freeiconspng.com/uploads/stars-png-23.png'), url('http://www.freeiconspng.com/uploads/stars-png-23.png'), url('https://img00.deviantart.net/9710/i/2017/104/5/b/beautiful_moon_png_by_flowerpowerstock-db5rwxv.png');
  20. height:480px;
  21. margin:0;
  22. background-position: 1% 4%, 50% 8%, 70% 4%, 23% 100%, 23% 10%, 1% 90%, 120% -60%;
  23. background-size: 50px, 100px, 75px, 50px, 70px, 60px, 450px;
  24. background-repeat: no-repeat;
  25. }
  26. div.title {
  27. font-family: 'Montserrat', sans-serif;;
  28. text-align: center;
  29. font-size: 45px;
  30. margin-top: 0px;
  31. padding: 5px;
  32. color: #FFF;
  33. text-shadow: 0px 0px 1px #96A09F, 0px 0px 3px #96A09F, 0px 0px 3px #B4BEB5, 0px 0px 4px #B4BEB5;
  34. text-transform: uppercase;
  35. letter-spacing: 3px;
  36. }
  37. div.nav {
  38. border-radius:100%;
  39. overflow:hidden;
  40. width:235px;
  41. height:235px;
  42. background-color:#E7E3FF;
  43. float:left;
  44. margin-top:40px;
  45. margin-left: -180px;
  46. box-shadow: 0px 0px 1px #FFFFFF, 0px 0px 2px #FFFFFF;
  47. opacity:.7;
  48. animation: moonglow 5s linear 0s infinite alternate;
  49. }
  50. @-webkit-keyframes moonglow {
  51. 0% {box-shadow: 0px 0px 1px #FFFFFF, 0px 0px 2px #FFFFFF;}
  52. 25% {box-shadow: 0px 0px 1px #FFFFFF, 0px 0px 2px #FFFFFF;}
  53. 50% {box-shadow: 0px 0px 1px #FFFFFF, 0px 0px 2px #FFFFFF, 0px 0px 3px #FFFFFF;}
  54. 75% {box-shadow: 0px 0px 1px #FFFFFF, 0px 0px 2px #FFFFFF, 0px 0px 3px #FFFFFF, 0px 0px 4px #FFFFFF; }
  55. 100% {box-shadow: 0px 0px 1px #FFFFFF, 0px 0px 2px #FFFFFF, 0px 0px 3px #FFFFFF, 0px 0px 4px #FFFFFF, 0px 0px 5px #FFFFFF;}
  56. }
  57. @keyframes moonglow {
  58. 0% {box-shadow: 0px 0px 1px #FFFFFF, 0px 0px 2px #FFFFFF;}
  59. 25% {box-shadow: 0px 0px 1px #FFFFFF, 0px 0px 2px #FFFFFF;}
  60. 50% {box-shadow: 0px 0px 1px #FFFFFF, 0px 0px 2px #FFFFFF, 0px 0px 3px #FFFFFF;}
  61. 75% {box-shadow: 0px 0px 1px #FFFFFF, 0px 0px 2px #FFFFFF, 0px 0px 3px #FFFFFF, 0px 0px 4px #FFFFFF; }
  62. 100% {box-shadow: 0px 0px 1px #FFFFFF, 0px 0px 2px #FFFFFF, 0px 0px 3px #FFFFFF, 0px 0px 4px #FFFFFF, 0px 0px 5px #FFFFFF;}
  63. }
  64.  
  65. div#music {
  66. height: 1px;
  67. width: 1px;
  68. overflow: hidden;
  69. opacity:0;
  70. }
  71. div.crescent {
  72. height: 250px;
  73. width: 250px;
  74. margin: 35px 0px 5px 15px;
  75. float:left;
  76. overflow:hidden;
  77. }
  78. img.moon {
  79. height:250px;
  80. width:210px;
  81. -webkit-transform: scaleX(-1);
  82. transform: scaleX(-1);
  83. }
  84. ul {
  85. text-align:center;
  86. list-style-type:none;
  87. margin:0;
  88. padding:0;
  89. margin-top: 38px;
  90. margin-left: -5px;
  91. font-family: 'Work Sans', sans-serif;
  92. }
  93. li {
  94. width:100%;
  95. margin-top:5px;
  96. text-transform:uppercase;
  97. color: #000;
  98. background-color:#E7E3FF;
  99. -webkit-transition: background-color .5s ease-out, letter-spacing .1s linear;
  100. -moz-transition: background-color .5s ease-out, letter-spacing .1s linear;
  101. -o-transition: background-color .5s ease-out, letter-spacing .1s linear;
  102. transition: background-color .5s ease-out, letter-spacing .1s linear;
  103. }
  104. li:hover {
  105. background: #FFFFFF;
  106. letter-spacing: 4px;
  107. }
  108. div.info {
  109. -webkit-box-sizing: content-box;
  110. -moz-box-sizing: content-box;
  111. box-sizing: content-box;
  112. width: 230px;
  113. height: 230px;
  114. font-size:11px;
  115. line-height:13px;
  116. border: none;
  117. margin-left: 65px;
  118. margin-top: 300px;
  119. text-align:justified;
  120. padding:5px;
  121. -webkit-border-radius: 80% 0 55% 50% / 55% 0 80% 50%;
  122. border-radius: 80% 0 55% 50% / 55% 0 80% 50%;
  123. -o-text-overflow: hidden;
  124. text-overflow: hidden;
  125. background: #34344E;
  126. -webkit-box-shadow: 0 0 6px 2px rgba(255,255,255,0.5) ;
  127. box-shadow: 0 0 6px 2px rgba(255,255,255,0.5) ;
  128. -webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1) 10ms;
  129. -moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1) 10ms;
  130. -o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1) 10ms;
  131. transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1) 10ms;
  132. -webkit-transform: rotateZ(-45deg) ;
  133. transform: rotateZ(-45deg) ;
  134. }
  135.  
  136. p.why {
  137. color: white;
  138. font-size:11px;
  139. line-height:10px;
  140. width:130px;
  141. height:130px;
  142. overflow:hidden;
  143. margin-left: 60px;
  144. margin-top: 53px;
  145. font-family: 'Rubik', sans-serif;
  146. -webkit-transform: rotateZ(45deg) ;
  147. transform: rotateZ(45deg) ;
  148. }
  149. a {
  150. text-decoration:none;
  151. color: #000000;
  152. }
  153. div.box1 {
  154. width: 300px;
  155. height: 470px;
  156. background-color: #fff;
  157. opacity: .8;
  158. float: left;
  159. font-size: 12px;
  160. margin-top: -530px;
  161. padding: 25px;
  162. margin-left: 350px;
  163. line-height:14px;
  164. border-radius: 10px;
  165. box-shadow: 0px 0px 15px #FFFFFF;
  166. text-align: justify;
  167. overflow:hidden;
  168. color:#000;
  169. font-family: 'Rubik', sans-serif;
  170. }
  171. div.box2 {
  172. width: 300px;
  173. height: 150px;
  174. background-color: #CBDAD5;
  175. opacity: .8;
  176. float: left;
  177. font-size: 12px;
  178. margin-top: -529px;
  179. padding: 25px;
  180. margin-left: 710px;
  181. line-height:14px;
  182. border-radius: 10px;
  183. box-shadow: 0px 0px 15px #FFFFFF;
  184. text-align: justify;
  185. overflow:hidden;
  186. color:#000;
  187. font-family: 'Rubik', sans-serif;
  188. }
  189.  
  190. div.of1 {
  191. width:315px;
  192. height:470px;
  193. overflow:auto;
  194. padding: 0px 40px 0px 0px;
  195. }
  196.  
  197. div.of2 {
  198. width:315px;
  199. height:150px;
  200. overflow:auto;
  201. padding: 0px 40px 0px 0px;
  202. }
  203.  
  204. div.box3 {
  205. width: 300px;
  206. height: 260px;
  207. background-color: #89A7B1;
  208. opacity: .8;
  209. float: left;
  210. font-size: 12px;
  211. margin-top: -320px;
  212. padding: 25px;
  213. margin-left: 710px;
  214. line-height:14px;
  215. border-radius: 10px;
  216. box-shadow: 0px 0px 15px #FFFFFF;
  217. text-align: justify;
  218. overflow:hidden;
  219. color:#000;
  220. font-family: 'Rubik', sans-serif;
  221. }
  222.  
  223. div.of3 {
  224. width:315px;
  225. height:250px;
  226. overflow:auto;
  227. padding: 0px 40px 0px 0px;
  228. }
  229. </style>
  230. <link href="https://fonts.googleapis.com/css?family=Rubik" rel="stylesheet">
  231. <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
  232. <link href="https://fonts.googleapis.com/css?family=Work+Sans" rel="stylesheet">
  233. <body>
  234. <div class="help">
  235. <div class="title">Sinestia</div>
  236. <div class="crescent"><img class="moon" src="https://userscontent2.emaze.com/images/9983d61f-a211-4af1-acd5-216c3d6b5c71/54237556baecbf6cbee4ee530cf127fc.png"/></div>
  237. <div class="nav">
  238. <ul>
  239. <li>Home</li>
  240. <li>Link 1</li>
  241. <li>Link 2</li>
  242. <li>Link 3</li>
  243. <li>Link 4</li>
  244. <li>Link 5</li>
  245. <li><a href="http://www.marapets.com/profile.php?id=5481177">Credits</a></li>
  246. </ul>
  247. </div>
  248. <div class="info">
  249. <p class="why">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam molestie metus at molestie auctor. Suspendisse ac pharetra mi. In fermentum ut ipsum ut tristique. Sed commodo felis non viverra placerat. Nullam vel pulvinar nisi, a tempus lectus. This is the max</p>
  250. </div>
  251.  
  252. <div class="box1"><div class="of1">
  253. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam molestie metus at molestie auctor. Suspendisse ac pharetra mi. In fermentum ut ipsum ut tristique. Sed commodo felis non viverra placerat. Nullam vel pulvinar nisi, a tempus lectus. Maecenas venenatis erat et orci ultricies, a porttitor felis fermentum. Praesent a urna ut odio vestibulum malesuada vel at lacus. Fusce vulputate vel justo sit amet convallis. In nec auctor lorem. Vivamus iaculis elit id metus semper, non auctor quam finibus. Nulla maximus facilisis tempus. Fusce malesuada ligula nunc. Cras et imperdiet risus. Nullam sagittis urna nec sapien vulputate tempor. Maecenas at dignissim dolor. </br>
  254. </br>
  255. Curabitur malesuada ipsum nec bibendum efficitur. Aenean rhoncus mattis eros vitae tempor. Suspendisse lacinia pharetra sapien, sed semper ipsum. Nulla at sollicitudin odio. Morbi et semper tellus, vel egestas urna. Donec ac purus ultrices, pretium enim non, dictum libero. Phasellus sem enim, bibendum nec urna sed, faucibus cursus eros. Fusce nec ipsum nec libero mattis ullamcorper vel ut tellus. Aenean commodo faucibus lorem, eget mollis ligula mollis id. Donec sit amet mauris vitae orci convallis aliquet in eget lacus. In consectetur nunc id metus scelerisque, eget consectetur dui porttitor. Nullam volutpat sollicitudin ex, eu viverra eros feugiat ac. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam erat volutpat.</br></br>
  256. Proin nisi metus, molestie non tortor at, tempus semper lorem. Pellentesque nec nibh convallis, pretium turpis quis, bibendum odio. Aenean hendrerit scelerisque enim eu fermentum. Mauris a ipsum in risus porttitor hendrerit. Aliquam interdum, risus sit amet vestibulum accumsan, est mi fermentum quam, et finibus eros ex vestibulum ante. Pellentesque placerat lacus id rhoncus pulvinar. Suspendisse ac sapien sodales, iaculis ipsum ut, volutpat erat. Fusce cursus sit amet justo vel sodales. Etiam lobortis auctor egestas. Proin ut scelerisque tortor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec at fermentum nisi, in maximus nibh. Nulla non cursus ante. Nunc vitae massa sit amet nunc viverra egestas eget nec odio.</br></br>
  257. Donec nibh tellus, viverra eu ullamcorper a, viverra quis nulla. In hac habitasse platea dictumst. Praesent laoreet augue tellus, sit amet faucibus dolor ullamcorper efficitur. Quisque vulputate, turpis ut elementum consectetur, nunc magna lobortis justo, eget viverra enim augue sed purus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque iaculis lorem sit amet augue accumsan, eu ultrices est egestas. Nulla at cursus metus. Praesent ac ex vitae nisi gravida feugiat. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  258. </div>
  259. </div>
  260.  
  261. <div class="box2"><div class="of2">
  262. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam molestie metus at molestie auctor. Suspendisse ac pharetra mi. In fermentum ut ipsum ut tristique. Sed commodo felis non viverra placerat. Nullam vel pulvinar nisi, a tempus lectus. Maecenas venenatis erat et orci ultricies, a porttitor felis fermentum. Praesent a urna ut odio vestibulum malesuada vel at lacus. Fusce vulputate vel justo sit amet convallis. In nec auctor lorem. Vivamus iaculis elit id metus semper, non auctor quam finibus. Nulla maximus facilisis tempus. Fusce malesuada ligula nunc. Cras et imperdiet risus. Nullam sagittis urna nec sapien vulputate tempor. Maecenas at dignissim dolor. </br>
  263. </br>
  264. Curabitur malesuada ipsum nec bibendum efficitur. Aenean rhoncus mattis eros vitae tempor. Suspendisse lacinia pharetra sapien, sed semper ipsum. Nulla at sollicitudin odio. Morbi et semper tellus, vel egestas urna. Donec ac purus ultrices, pretium enim non, dictum libero. Phasellus sem enim, bibendum nec urna sed, faucibus cursus eros. Fusce nec ipsum nec libero mattis ullamcorper vel ut tellus. Aenean commodo faucibus lorem, eget mollis ligula mollis id. Donec sit amet mauris vitae orci convallis aliquet in eget lacus. In consectetur nunc id metus scelerisque, eget consectetur dui porttitor. Nullam volutpat sollicitudin ex, eu viverra eros feugiat ac. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam erat volutpat.</br></br>
  265. Proin nisi metus, molestie non tortor at, tempus semper lorem. Pellentesque nec nibh convallis, pretium turpis quis, bibendum odio. Aenean hendrerit scelerisque enim eu fermentum. Mauris a ipsum in risus porttitor hendrerit. Aliquam interdum, risus sit amet vestibulum accumsan, est mi fermentum quam, et finibus eros ex vestibulum ante. Pellentesque placerat lacus id rhoncus pulvinar. Suspendisse ac sapien sodales, iaculis ipsum ut, volutpat erat. Fusce cursus sit amet justo vel sodales. Etiam lobortis auctor egestas. Proin ut scelerisque tortor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec at fermentum nisi, in maximus nibh. Nulla non cursus ante. Nunc vitae massa sit amet nunc viverra egestas eget nec odio.</br></br>
  266. Donec nibh tellus, viverra eu ullamcorper a, viverra quis nulla. In hac habitasse platea dictumst. Praesent laoreet augue tellus, sit amet faucibus dolor ullamcorper efficitur. Quisque vulputate, turpis ut elementum consectetur, nunc magna lobortis justo, eget viverra enim augue sed purus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque iaculis lorem sit amet augue accumsan, eu ultrices est egestas. Nulla at cursus metus. Praesent ac ex vitae nisi gravida feugiat. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  267. </div></div>
  268.  
  269. <div class="box3"><div class="of3">
  270. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam molestie metus at molestie auctor. Suspendisse ac pharetra mi. In fermentum ut ipsum ut tristique. Sed commodo felis non viverra placerat. Nullam vel pulvinar nisi, a tempus lectus. Maecenas venenatis erat et orci ultricies, a porttitor felis fermentum. Praesent a urna ut odio vestibulum malesuada vel at lacus. Fusce vulputate vel justo sit amet convallis. In nec auctor lorem. Vivamus iaculis elit id metus semper, non auctor quam finibus. Nulla maximus facilisis tempus. Fusce malesuada ligula nunc. Cras et imperdiet risus. Nullam sagittis urna nec sapien vulputate tempor. Maecenas at dignissim dolor. </br>
  271. </br>
  272. Curabitur malesuada ipsum nec bibendum efficitur. Aenean rhoncus mattis eros vitae tempor. Suspendisse lacinia pharetra sapien, sed semper ipsum. Nulla at sollicitudin odio. Morbi et semper tellus, vel egestas urna. Donec ac purus ultrices, pretium enim non, dictum libero. Phasellus sem enim, bibendum nec urna sed, faucibus cursus eros. Fusce nec ipsum nec libero mattis ullamcorper vel ut tellus. Aenean commodo faucibus lorem, eget mollis ligula mollis id. Donec sit amet mauris vitae orci convallis aliquet in eget lacus. In consectetur nunc id metus scelerisque, eget consectetur dui porttitor. Nullam volutpat sollicitudin ex, eu viverra eros feugiat ac. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam erat volutpat.</br></br>
  273. Proin nisi metus, molestie non tortor at, tempus semper lorem. Pellentesque nec nibh convallis, pretium turpis quis, bibendum odio. Aenean hendrerit scelerisque enim eu fermentum. Mauris a ipsum in risus porttitor hendrerit. Aliquam interdum, risus sit amet vestibulum accumsan, est mi fermentum quam, et finibus eros ex vestibulum ante. Pellentesque placerat lacus id rhoncus pulvinar. Suspendisse ac sapien sodales, iaculis ipsum ut, volutpat erat. Fusce cursus sit amet justo vel sodales. Etiam lobortis auctor egestas. Proin ut scelerisque tortor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec at fermentum nisi, in maximus nibh. Nulla non cursus ante. Nunc vitae massa sit amet nunc viverra egestas eget nec odio.</br></br>
  274. Donec nibh tellus, viverra eu ullamcorper a, viverra quis nulla. In hac habitasse platea dictumst. Praesent laoreet augue tellus, sit amet faucibus dolor ullamcorper efficitur. Quisque vulputate, turpis ut elementum consectetur, nunc magna lobortis justo, eget viverra enim augue sed purus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque iaculis lorem sit amet augue accumsan, eu ultrices est egestas. Nulla at cursus metus. Praesent ac ex vitae nisi gravida feugiat. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  275. </div></div>
  276. <div id="music">
  277. <iframe width="100%" height="300" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/79639866&color=%23ff5500&auto_play=true&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true&visual=true"></iframe>
  278. </div>
  279. </div>
  280. </body>
  281.  
  282. </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!