API tools faq
paste
Advertisement
sashatheme

UNTITLED NEOCITIES THEME

sashatheme
Jul 25th, 2023 (edited)
1,339
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 8.92 KB | None | 0 0
raw download clone embed print report
  1. <html>
  2.  
  3. <head>
  4.  
  5. <meta charset="UTF-8">
  6.  
  7. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.  
  9. <title>SITE TITLE HERE</title>
  10.  
  11. <link href="/style.css" rel="stylesheet" type="text/css" media="all">
  12.  
  13. <link rel="icon" type="image/x-icon" href="FAVICON HERE">
  14.  
  15. <!--MUSIC PLAYER. DON'T DELETE THIS STUFF-->
  16.  
  17. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
  18.  
  19. <script>
  20.  
  21. var myAudio = document.getElementById("myAudio");
  22. var isPlaying = false;
  23.  
  24. function togglePlay() {
  25. isPlaying ? myAudio.pause() : myAudio.play();
  26. };
  27.  
  28. myAudio.onplaying = function() {
  29. isPlaying = true;
  30. };
  31. myAudio.onpause = function() {
  32. isPlaying = false;
  33. };
  34.  
  35. </script>
  36.  
  37. <!--MOVING SITE TITLE-->
  38.  
  39. <script>
  40.  
  41. var documentTitle = document.title + " ";
  42.  
  43. (function titleMarquee() {
  44. document.title = documentTitle = documentTitle.substring(1) + documentTitle.substring(0,1);
  45. setTimeout(titleMarquee, 200);
  46. })();
  47.  
  48. </script>
  49.  
  50. <style>
  51.  
  52. ::-webkit-scrollbar {
  53.  
  54. width: 0px;
  55.  
  56. }
  57.  
  58. #credit {
  59.  
  60. position:fixed;
  61.  
  62. left:12px;
  63.  
  64. bottom:6px;
  65.  
  66. font-size:14px;
  67.  
  68. }
  69.  
  70. body {
  71.  
  72. background-color: #fff;
  73.  
  74. width: 700px;
  75.  
  76. position: relative;
  77.  
  78. margin-left: auto;
  79.  
  80. margin-right: auto;
  81.  
  82. font-family: arial;
  83.  
  84. background-image: url("BACKGROUND IMAGE");
  85.  
  86. }
  87.  
  88. .wrap {
  89.  
  90. width: 605px;
  91.  
  92. height: auto;
  93.  
  94. border: 4px outset #fff;
  95.  
  96. padding: 4px;
  97.  
  98. overflow: auto;
  99.  
  100. scrollbar-width: none;
  101.  
  102. background-image: url("CONTAINER BACKGROUND");
  103.  
  104. }
  105.  
  106. .box1 {
  107.  
  108. width: 415px;
  109.  
  110. height: 220px;
  111.  
  112. border: 4px inset #fff;
  113.  
  114. display: inline-block;
  115.  
  116. padding: 10px;
  117.  
  118. overflow: auto;
  119.  
  120. scrollbar-width: none;
  121.  
  122. background-color: #fff;
  123.  
  124. background-image: url("INNER BACKGROUND");
  125.  
  126. margin-bottom: 4px;
  127.  
  128. color: #000;
  129.  
  130. text-align: justify;
  131.  
  132. }
  133.  
  134. .box2 {
  135.  
  136. width: 129px;
  137.  
  138. height: 220px;
  139.  
  140. border: 4px inset #fff;
  141.  
  142. display: inline-block;
  143.  
  144. padding: 10px;
  145.  
  146. float: right;
  147.  
  148. overflow: auto;
  149.  
  150. scrollbar-width: none;
  151.  
  152. background-color: #fff;
  153.  
  154. background-image: url("INNER BACKGROUND");
  155.  
  156. color: #000;
  157.  
  158. text-align: justify;
  159.  
  160. }
  161.  
  162. .box3 {
  163.  
  164. width: 576px;
  165.  
  166. height: 60px;
  167.  
  168. border: 4px inset #fff;
  169.  
  170. display: inline-block;
  171.  
  172. padding: 10px;
  173.  
  174. margin-top: 1px;
  175.  
  176. overflow: auto;
  177.  
  178. scrollbar-width: none;
  179.  
  180. background-color: #fff;
  181.  
  182. background-image: url("INNER BACKGROUND");
  183.  
  184. }
  185.  
  186. img {
  187.  
  188. max-width: 100%;
  189.  
  190. height: auto;
  191.  
  192. }
  193.  
  194. ul {
  195.  
  196. margin-left: -15px;
  197.  
  198. margin-top: -1px;
  199.  
  200. list-style-image: url('LIST BUTTONS');
  201.  
  202. line-height: 30px;
  203.  
  204. }
  205.  
  206. a {
  207.  
  208. color: #000;
  209.  
  210. }
  211.  
  212. #hvr-forward {
  213.  
  214. display: inline-block;
  215.  
  216. -webkit-transform: perspective(1px) translateZ(0);
  217.  
  218. transform: perspective(1px) translateZ(0);
  219.  
  220. box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  221.  
  222. -webkit-transition-duration: 0.3s;
  223.  
  224. transition-duration: 0.3s;
  225.  
  226. -webkit-transition-property: transform;
  227.  
  228. transition-property: transform;
  229.  
  230. }
  231.  
  232. #hvr-forward:hover, #hvr-forward:focus, #hvr-forward:active {
  233.  
  234. -webkit-transform: translateX(8px);
  235.  
  236. transform: translateX(8px);
  237.  
  238. }
  239.  
  240. </style>
  241.  
  242. <style>
  243.  
  244. @import url('https://fonts.googleapis.com/css2?family=Fuzzy+Bubbles&display=swap');
  245.  
  246. </style>
  247.  
  248. </head>
  249.  
  250. <body>
  251.  
  252. <div class="wrap">
  253.  
  254. <div class="box1">
  255.  
  256. <img src="https://cdn.discordapp.com/attachments/1015508067581964288/1133517101907333150/placeholder.png" style="float: right; width: 150px; margin-left: 10px;">Auctor augue mauris augue neque gravida in fermentum. Augue neque gravida in fermentum et sollicitudin ac orci. Tellus in metus vulputate eu scelerisque felis imperdiet. Sed sed risus pretium quam. Habitant morbi tristique senectus et. Id faucibus nisl tincidunt eget nullam. Nisi vitae suscipit tellus mauris. Id cursus metus aliquam eleifend mi. In nisl nisi scelerisque eu ultrices vitae auctor eu. Consequat ac felis donec et odio pellentesque diam. Nulla facilisi nullam vehicula ipsum a arcu cursus vitae. Nulla facilisi nullam vehicula ipsum a arcu cursus vitae congue. Nunc sed augue lacus viverra. Libero nunc consequat interdum varius sit amet mattis. Leo duis ut diam quam nulla porttitor massa id. Sed adipiscing diam donec adipiscing tristique risus nec. Blandit aliquam etiam erat velit scelerisque in dictum. Odio euismod lacinia at quis risus. Pretium lectus quam id leo in. Gravida dictum fusce ut placerat orci nulla pellentesque dignissim.
  257.  
  258. </div> <!--SHAKE-->
  259.  
  260. <div class="box2">
  261.  
  262. <center style="margin-top: 0px; margin-bottom: 5px; color: #fff; text-shadow: -1px -1px 0 #000, 0 -1px 0 #000, 1px -1px 0 #000, 1px 0 0 #917ab8, 1px 0 #000, 0 1px 0 #000, -1px 1px 0 #000, -1px 0 0 #000;">
  263.  
  264. <b>NAVIGATION</b>
  265.  
  266. </center>
  267.  
  268. <ul>
  269.  
  270. <li><a href="LINK" title="LINK TITLE" id="hvr-forward">LINK</a>
  271.  
  272. <li><a href="LINK" title="LINK TITLE" id="hvr-forward">LINK</a>
  273.  
  274. <li><a href="LINK" title="LINK TITLE" id="hvr-forward">LINK</a>
  275.  
  276. <li><a href="LINK" title="LINK TITLE" id="hvr-forward">LINK</a>
  277.  
  278. <li><a href="LINK" title="LINK TITLE" id="hvr-forward">LINK</a>
  279.  
  280. <li><a href="LINK" title="LINK TITLE" id="hvr-forward">LINK</a>
  281.  
  282. </ul>
  283.  
  284. </div> <!--box2-->
  285.  
  286. <br>
  287.  
  288. <div class="box2" style="float: left;">
  289.  
  290. <img src="https://cdn.discordapp.com/attachments/1015508067581964288/1133517101907333150/placeholder.png" style="border: 4px solid #fff; margin-top: -4px; margin-left: -4px;">
  291.  
  292. <marquee scrolldelay="120" style="margin-top: 17px; margin-left: -9px; margin-right: -9px;">
  293.  
  294. <img src="https://cdn.discordapp.com/attachments/1015508067581964288/1133518156124655836/placeholder.png"> &nbsp;
  295.  
  296. <img src="https://cdn.discordapp.com/attachments/1015508067581964288/1133518156124655836/placeholder.png"> &nbsp;
  297.  
  298. <img src="https://cdn.discordapp.com/attachments/1015508067581964288/1133518156124655836/placeholder.png">
  299.  
  300. </marquee>
  301.  
  302. <div class="player" style="margin-top: 12px;">
  303.  
  304. <a id="playme" class="playme fa fa-play" data-src="MP3 LINK" style="color: #fff; text-decoration: none; margin-right: 8px; margin-top: 2px; float: left; font-size: 15px; text-shadow: -1px -1px 0 #000, 0 -1px 0 #000, 1px -1px 0 #000, 1px 0 0 #000, 1px 0 #000, 0 1px 0 #000, -1px 1px 0 #000, -1px 0 0 #000;"></a>
  305.  
  306. <marquee scrolldelay="120" style="width: 100px; color: #000; margin-top: -4px; margin-left: 4px;">
  307.  
  308. SONG TITLE HERE
  309.  
  310. </marquee>
  311.  
  312. </div>
  313.  
  314. <script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-2c7831bb44f98c1391d6a4ffda0e1fd302503391ca806e7fcc7b9b87197aec26.js"></script>
  315.  
  316. <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
  317.  
  318. <script id="rendered-js">
  319.  
  320. var clicked_id;
  321. var audio_var = new Audio();
  322.  
  323.  
  324. $('.playme').on("click", function () {
  325. var datasrc = $(this).attr('data-src');
  326. clicked_id = $(this).attr('id');
  327. console.log(clicked_id);
  328. audio_var.pause();
  329.  
  330. $('.playme').not(this).each(function () {
  331. $(this).removeClass('fa-pause');
  332. $(this).addClass('fa-play');
  333. });
  334.  
  335. if ($(this).hasClass('fa-play')) {
  336. console.log('play_click');
  337. audio_var.src = datasrc;
  338. $(this).removeClass('fa-play');
  339. $(this).addClass('fa-pause');
  340. console.log(audio_var);
  341. audio_var.play();
  342. } else {
  343. console.log('pause_click');
  344. $(this).removeClass('fa-pause');
  345. $(this).addClass('fa-play');
  346. console.log(audio_var);
  347. audio_var.pause();
  348. //audio_var.src='';
  349. //audio_var.load();
  350. console.log(audio_var);
  351. }
  352.  
  353. });
  354.  
  355. audio_var.onended = function () {
  356. $("#" + clicked_id).removeClass('fa-pause');
  357. $("#" + clicked_id).addClass('fa-play');
  358. };
  359.  
  360. </script>
  361.  
  362. </div> <!--box2 2-->
  363.  
  364. <div class="box1" style="margin-left: 4px;">
  365.  
  366. <img src="https://cdn.discordapp.com/attachments/1015508067581964288/1133517101907333150/placeholder.png" style="float: right; width: 160px; margin-left: 10px; margin-bottom: 1px;">Auctor augue mauris augue neque gravida in fermentum. Augue neque gravida in fermentum et sollicitudin ac orci. Tellus in metus vulputate eu scelerisque felis imperdiet. Sed sed risus pretium quam. Habitant morbi tristique senectus et. Id faucibus nisl tincidunt eget nullam. Nisi vitae suscipit tellus mauris. Id cursus metus aliquam eleifend mi. In nisl nisi scelerisque eu ultrices vitae auctor eu. Consequat ac felis donec et odio pellentesque diam. Nulla facilisi nullam vehicula ipsum a arcu cursus vitae. Nulla facilisi nullam vehicula ipsum a arcu cursus vitae congue. Nunc sed augue lacus viverra. Libero nunc consequat interdum varius sit amet mattis. Leo duis ut diam quam nulla porttitor massa id. Sed adipiscing diam donec adipiscing tristique risus nec. Blandit aliquam etiam erat velit scelerisque in dictum. Odio euismod lacinia at quis risus. Pretium lectus quam id leo in. Gravida dictum fusce ut placerat orci nulla pellentesque dignissim.
  367.  
  368. </div> <!--SHAKE 2-->
  369.  
  370. <br>
  371.  
  372. <div class="box3"></div> <!--box3-->
  373.  
  374. </div> <!--WRAP 1-->
  375.  
  376. <div id="credit">
  377.  
  378. <a href="https://cod.tumblr.com/" target="_blank" title="CODED BY JOYBOY">🦩</a>
  379.  
  380. </div>
  381.  
  382. </body>
  383.  
  384. </html>
  385.  
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!