API tools faq
paste
Advertisement
sashatheme

PINK SEA NEOCITIES THEME

sashatheme
Apr 13th, 2024
138
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 9.84 KB | None | 0 0
raw download clone embed print report
  1. <html>
  2.  
  3. <head>
  4.  
  5. <!-- READ ME BEFORE YOU CUSTOMIZE
  6.  
  7. This Neocities theme uses a lot of code frankensteining.
  8.  
  9. If you want to change the borders you have to change the styling on both the CONTAINERS, and the FIXBORDER divs.
  10.  
  11. KEEP ALL BORDER SIZES AT 4PX, UNLESS YOU'RE READY TO CHANGE A LOT OF MARGINS, OK?
  12.  
  13. Thanks!
  14.  
  15. Anything to customize is labelled along the lines of "(BLANK FEATURE) HERE"
  16.  
  17. Add anything extra that you want, just be aware that the code can break if you you mess around with too much stuff I'm holding this together with glue.
  18.  
  19. -->
  20.  
  21. <meta charset="UTF-8">
  22.  
  23. <title>SITE TITLE HERE</title>
  24.  
  25. <link rel="icon" type="image/x-icon" href="FAVICON URL HERE">
  26.  
  27. <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
  28.  
  29. <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
  30.  
  31. <!--MAKES THE CALENDAR DRAGGABLE-->
  32.  
  33. <script>
  34.  
  35. $( function() {
  36. $( "#calendar" ).draggable();
  37. } );
  38.  
  39. </script>
  40.  
  41. <!--MAKES THE OTHER STUFF DRAGGABLE-->
  42.  
  43. <script>
  44.  
  45. $( function() {
  46. $( "#other" ).draggable();
  47. } );
  48.  
  49. </script>
  50.  
  51. <script>
  52.  
  53. $( function() {
  54. $( "#other2" ).draggable();
  55. } );
  56.  
  57. </script>
  58.  
  59. <!--STUFF-->
  60.  
  61. <style>
  62.  
  63. /**DON'T REMOVE MEEE however! You can change the EMOJI that the credit uses if you want, at the bottom of the code!**/
  64.  
  65. #credit {
  66.  
  67. position: fixed;
  68.  
  69. left: 12px;
  70.  
  71. bottom: 6px;
  72.  
  73. font-size: 14px;
  74.  
  75. }
  76.  
  77. ::-webkit-scrollbar {
  78.  
  79. display: none;
  80.  
  81. }
  82.  
  83. body {
  84.  
  85. background-color: #fff;
  86.  
  87. background-image: url("BACKGROUND IMAGE URL HERE");
  88.  
  89. background-size: CHOOSE BETWEEN: COVER, AUTO OR CONTAIN;
  90.  
  91. font-family: times; /** FONT FAMILY HERE **/
  92.  
  93. }
  94.  
  95. a {
  96.  
  97. color: LINK COLOR HERE;
  98.  
  99. text-decoration: none;
  100.  
  101. }
  102.  
  103. a:hover {
  104.  
  105. color: LINK HOVER COLOR HERE;
  106.  
  107. transition: 0.8s;
  108.  
  109. }
  110.  
  111. /**DON'T CHANGE THIS DIV OK?**/
  112.  
  113. .container {
  114.  
  115. width: 900px;
  116.  
  117. margin-top: 50px;
  118.  
  119. }
  120.  
  121. .floaty1 {
  122.  
  123. width: auto;
  124.  
  125. height: auto;
  126.  
  127. position: absolute;
  128.  
  129. z-index: 99;
  130.  
  131. }
  132.  
  133. .floaty2 {
  134.  
  135. width: auto;
  136.  
  137. height: auto;
  138.  
  139. float: right;
  140.  
  141. z-index: 99;
  142.  
  143. }
  144.  
  145.  
  146. .header {
  147.  
  148. width: 640px;
  149.  
  150. padding: 10px;
  151.  
  152. height: 20px;
  153.  
  154. background-color: #fff; /**BACKGROUND COLOR HERE**/
  155.  
  156. border-top: 4px solid #000; /**BORDER COLOR & STYLE HERE **/
  157.  
  158. border-left: 4px solid #000; /**BORDER COLOR & STYLE HERE **/
  159.  
  160. border-right: 4px solid #000; /**BORDER COLOR & STYLE HERE **/
  161.  
  162. border-top-right-radius: 25px;
  163.  
  164. overflow: auto;
  165.  
  166. scrollbar-width: none;
  167.  
  168. }
  169.  
  170. .container1 {
  171.  
  172. width: 640px;
  173.  
  174. padding: 10px;
  175.  
  176. height: 300px;
  177.  
  178. background-color: #fff; /**BACKGROUND COLOR HERE**/
  179.  
  180. border-top: 4px solid #000; /**BORDER COLOR & STYLE HERE **/
  181.  
  182. border-left: 4px solid #000; /**BORDER COLOR & STYLE HERE **/
  183.  
  184. border-right: 4px solid #000; /**BORDER COLOR & STYLE HERE **/
  185.  
  186. text-align: justify;
  187.  
  188. overflow: auto;
  189.  
  190. scrollbar-width: none;
  191.  
  192. }
  193.  
  194. .container2 {
  195.  
  196. width: 445px;
  197.  
  198. padding: 10px;
  199.  
  200. display: inline-block;
  201.  
  202. height: 220px;
  203.  
  204. background-color: #fff; /**BACKGROUND COLOR HERE**/
  205.  
  206. border-left: 4px solid #000; /**BORDER COLOR & STYLE HERE **/
  207.  
  208. border-right: 4px solid #000; /**BORDER COLOR & STYLE HERE **/
  209.  
  210. margin-left: 5px;
  211.  
  212. margin-top: -4px;
  213.  
  214. text-align: justify;
  215.  
  216. overflow: auto;
  217.  
  218. scrollbar-width: none;
  219.  
  220. }
  221.  
  222. .container3 {
  223.  
  224. width: 640px;
  225.  
  226. padding: 10px;
  227.  
  228. height: 300px;
  229.  
  230. background-color: #fff; /**BACKGROUND COLOR HERE**/
  231.  
  232. border-bottom: 4px solid #000; /**BORDER COLOR & STYLE HERE **/
  233.  
  234. border-left: 4px solid #000; /**BORDER COLOR & STYLE HERE **/
  235.  
  236. border-right: 4px solid #000; /**BORDER COLOR & STYLE HERE **/
  237.  
  238. margin-top: -5px;
  239.  
  240. text-align: justify;
  241.  
  242. overflow: auto;
  243.  
  244. scrollbar-width: none;
  245.  
  246. }
  247.  
  248. .fixborder {
  249.  
  250. width: 202px;
  251.  
  252. border-bottom: 4px solid #000; /**BORDER COLOR & STYLE HERE **/
  253.  
  254. height: 0px;
  255.  
  256. margin-left: -465px;
  257.  
  258. margin-top: -4px;
  259.  
  260. z-index: 90;
  261.  
  262. }
  263.  
  264. .fixborder2 {
  265.  
  266. width: 202px;
  267.  
  268. border-top: 4px solid #000; /**BORDER COLOR & STYLE HERE **/
  269.  
  270. height: 5px;
  271.  
  272. background-color: transparent;
  273.  
  274. margin-left: -465px;
  275.  
  276. margin-top: -8px;
  277.  
  278. z-index: 99;
  279.  
  280. }
  281.  
  282. .calendar {
  283.  
  284. width: auto;
  285.  
  286. height: 200px;
  287.  
  288. border: 3px solid #000; /**BORDER COLOR & STYLE HERE **/
  289.  
  290. display: inline-block;
  291.  
  292. margin-top: 9px;
  293.  
  294. vertical-align: top;
  295.  
  296. padding: 4px;
  297.  
  298. background-color: #fff; /**BACKGROUND COLOR HERE**/
  299.  
  300. }
  301.  
  302. table {
  303.  
  304. font-size: 16px;
  305.  
  306. color: #000; /** CALENDAR FONT COLOR HERE **/
  307.  
  308. font-family: times; /** CALENDAR FONT FAMILY HERE **/
  309.  
  310. }
  311.  
  312. td {
  313.  
  314. font-size: 16px;
  315.  
  316. }
  317.  
  318. /**FRAMES FOR THE BOBBING ANIMATION**/
  319.  
  320. @-webkit-keyframes hvr-bob {
  321. 0% {
  322. translateY(-18px);
  323. }
  324. 50% {translateY(-4px);
  325. }
  326. 100% {
  327. -webkit-transform: translateY(-18px);
  328. transform: translateY(-18px);
  329. }
  330. }
  331. @keyframes hvr-bob {
  332. 0% {
  333. -webkit-transform: translateY(-18px);
  334. transform: translateY(-18px);
  335. }
  336. 50% {
  337. -webkit-transform: translateY(-4px);
  338. transform: translateY(-4px);
  339. }
  340. 100% {
  341. -webkit-transform: translateY(-18px);
  342. transform: translateY(-18px);
  343. }
  344. }
  345. @-webkit-keyframes hvr-bob-float {
  346. 100% {
  347. -webkit-transform: translateY(-18px);
  348. transform: translateY(-18px);
  349. }
  350. }
  351. @keyframes hvr-bob-float {
  352. 100% {
  353. -webkit-transform: translateY(-18px);
  354. transform: translateY(-18px);
  355. }
  356. }
  357.  
  358. #hvr-bob {
  359. -webkit-animation-name: hvr-bob-float, hvr-bob;
  360. animation-name: hvr-bob-float, hvr-bob;
  361. -webkit-animation-duration: .3s, 1.5s;
  362. animation-duration: .3s, 1.5s;
  363. -webkit-animation-delay: 0s, .3s;
  364. animation-delay: 0s, .3s;
  365. -webkit-animation-timing-function: ease-out, ease-in-out;
  366. animation-timing-function: ease-out, ease-in-out;
  367. -webkit-animation-iteration-count: 1, infinite;
  368. animation-iteration-count: 1, infinite;
  369. -webkit-animation-fill-mode: forwards;
  370. animation-fill-mode: forwards;
  371. -webkit-animation-direction: normal, alternate;
  372. animation-direction: normal, alternate;
  373. }
  374.  
  375. </style>
  376.  
  377. </head>
  378.  
  379. <body>
  380.  
  381. <center>
  382.  
  383. <div class="container">
  384.  
  385. <div class="floaty1" id="other">
  386.  
  387. <img src="FLOATING IMAGE 1" id="hvr-bob">
  388.  
  389. </div> <!--FLOATY 1-->
  390.  
  391. <div class="header"></div> <!--HEADER-->
  392.  
  393. <div class="container1">
  394.  
  395. <!--POSITION THIS MARQUEE WHEREEVER YOU WANT-->
  396.  
  397. <marquee scrolldelay="90" style="margin-bottom: 10px;">
  398.  
  399. IMAGES OR TEXT CAN GO HERE! ANYTHING AT ALL!
  400.  
  401. </marquee>
  402.  
  403. </div> <!--CONTAINER 1-->
  404.  
  405. <div class="fixborder"></div><!--FIX BORDER-->
  406.  
  407. <div class="calendar" align="center" id="calendar">
  408. <script text="JavaScript">
  409.  
  410. monthnames = new Array(
  411. 'January',
  412. 'February',
  413. 'March',
  414. 'April',
  415. 'May',
  416. 'June',
  417. 'July',
  418. 'August',
  419. 'September',
  420. 'October',
  421. 'November',
  422. 'December'
  423. );
  424. var linkcount = 0;
  425. class addlink {
  426. constructor(month, day, href) {
  427. var entry = new Array(3);
  428. entry[0] = month;
  429. entry[1] = day;
  430. entry[2] = href;
  431. this[(linkcount += 1)] = entry;
  432. }
  433. }
  434.  
  435. Array.prototype.addlink = addlink;
  436. linkdays = [];
  437. monthdays = new Array(12);
  438. monthdays[0] = 31;
  439. monthdays[1] = 28;
  440. monthdays[2] = 31;
  441. monthdays[3] = 30;
  442. monthdays[4] = 31;
  443. monthdays[5] = 30;
  444. monthdays[6] = 31;
  445. monthdays[7] = 31;
  446. monthdays[8] = 30;
  447. monthdays[9] = 31;
  448. monthdays[10] = 30;
  449. monthdays[11] = 31;
  450. todayDate = new Date();
  451. thisday = todayDate.getDay();
  452. thismonth = todayDate.getMonth();
  453. thisdate = todayDate.getDate();
  454. thisyear = todayDate.getYear();
  455. thisyear = thisyear % 100;
  456. thisyear = thisyear < 50 ? 2000 + thisyear : 1900 + thisyear;
  457. if ((thisyear % 4 === 0 && !(thisyear % 100 === 0)) || thisyear % 400 === 0) {
  458. monthdays[1] += 1;
  459. }
  460. startspaces = thisdate;
  461. while (startspaces > 7) {
  462. startspaces -= 7;
  463. }
  464. startspaces = thisday - startspaces + 1;
  465. if (startspaces < 0) {
  466. startspaces += 7;
  467. }
  468. document.write("<font face='CALEDNAR FONT HERE'>");
  469. document.write('<table border=0 ');
  470. document.write(' style="text-align: center;" cellpadding=2 cellspacing=4>');
  471. document.write(
  472. '<tr><td colspan=7><center>' +
  473. monthnames[thismonth] +
  474. ' ' +
  475. thisyear +
  476. '</strong></center></font></td></tr>'
  477. );
  478. document.write('<tr>');
  479. document.write('<td align=center><b>S</b></td>');
  480. document.write('<td align=center><b>M</b></td>');
  481. document.write('<td align=center><b>T</b></td>');
  482. document.write('<td align=center><b>W</b></td>');
  483. document.write('<td align=center><b>T</b></td>');
  484. document.write('<td align=center><b>F</b></td>');
  485. document.write('<td align=center><b>S</b></td>');
  486. document.write('</tr>');
  487. document.write('<tr>');
  488. for (s = 0; s < startspaces; s += 1) {
  489. document.write('<td> </td>');
  490. }
  491. count = 1;
  492. while (count <= monthdays[thismonth]) {
  493. for (b = startspaces; b < 7; b += 1) {
  494. linktrue = false;
  495. document.write('<td>');
  496. for (c = 0; c < linkdays.length; c += 1) {
  497. if (linkdays[c] != null) {
  498. if (linkdays[c][0] === thismonth + 1 && linkdays[c][1] === count) {
  499. document.write('<a href="' + linkdays[c][2] + '">');
  500. linktrue = true;
  501. }
  502. }
  503. }
  504. if (count === thisdate) {
  505. document.write("<b><font color='COLOR FOR WHAT DAY IT IS HERE'></b>");
  506. }
  507. if (count <= monthdays[thismonth]) {
  508. document.write(count);
  509. } else {
  510. document.write(' ');
  511. }
  512. if (count === thisdate) {
  513. document.write('</font>');
  514. }
  515. if (linktrue) {
  516. document.write('</a>');
  517. }
  518. document.write('</td>');
  519. count += 1;
  520. }
  521. document.write('</tr>');
  522. document.write('<tr>');
  523. startspaces = 0;
  524. }
  525. document.write('</table>');
  526.  
  527.  
  528. </script>
  529.  
  530. </font></div> <!--CALENDAR-->
  531.  
  532. <div class="container2">
  533.  
  534. </div> <!--CONTAINER 2-->
  535.  
  536. <div class="fixborder2"></div> <!--FIX BORDER 2-->
  537.  
  538. <div class="container3">
  539.  
  540. </div> <!--CONTAINER 3-->
  541.  
  542. <div class="floaty2" id="other2">
  543.  
  544. <img src="FLOATING IMAGE 2" id="hvr-bob">
  545.  
  546. </div> <!--FLOATY 2-->
  547.  
  548. </div> <!--CONTAINER-->
  549.  
  550. </center>
  551.  
  552. <div id="credit">
  553.  
  554. <a href="https://doffy.tumblr.com/" target="_blank" title="CODED BY JOYBOY">🦩</a>
  555.  
  556. </div>
  557.  
  558. </body>
  559.  
  560. </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!