API tools faq
paste
Advertisement
godea7er

Untitled

godea7er
May 11th, 2023 (edited)
418
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 10.45 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>Tranquil Moss</title>
  7. <link rel="icon" type="image/x-icon" href="">
  8.  
  9.  
  10. <script type="text/javascript">
  11. // <![CDATA[
  12. var colours=new Array("#fbf8c7", "#fdf89b", "#f0ff95", "#ffe495", "#ffe495"); // what colour are the blobs
  13. var speed=50; // speed of animation, lower is faster
  14. var blobs=20; // how many blobs are in the jar
  15. var size=45; // maximum blob size
  16.  
  17. /***************************\
  18. * Blobs in a Jar Effect *
  19. *(c)2012-20 mf2fm web-design*
  20. * http://www.mf2fm.com/rv *
  21. * DON'T EDIT BELOW THIS BOX *
  22. \***************************/
  23.  
  24. var div;
  25. var xpos=new Array();
  26. var ypos=new Array();
  27. var zpos=new Array();
  28. var dx=new Array();
  29. var dy=new Array();
  30. var dz=new Array();
  31. var blob=new Array();
  32. var swide=800;
  33. var sleft=0;
  34. var shigh=600;
  35. var sdown=0;
  36. var x=400;
  37. var y=300;
  38.  
  39. function addLoadEvent(funky) {
  40. var oldonload=window.onload;
  41. if (typeof(oldonload)!='function') window.onload=funky;
  42. else window.onload=function() {
  43. if (oldonload) oldonload();
  44. funky();
  45. }
  46. }
  47.  
  48. addLoadEvent(fill_the_jar);
  49.  
  50. function fill_the_jar() {
  51. var i, dvs;
  52. div=document.createElement('div');
  53. dvs=div.style;
  54. dvs.position='fixed';
  55. dvs.left='0px';
  56. dvs.top='0px';
  57. dvs.width='1px';
  58. dvs.height='1px';
  59. document.body.appendChild(div);
  60. set_scroll();
  61. set_width();
  62. for (i=0; i<blobs; i++) {
  63. add_blob(i);
  64. jamjar(i);
  65. }
  66. }
  67.  
  68. function add_blob(ref) {
  69. var dv, sy;
  70. dv=document.createElement('div');
  71. sy=dv.style;
  72. sy.width=size/2+"px";
  73. sy.height=size/2+"px";
  74. sy.borderRadius="50%";
  75. sy.position='absolute';
  76. sy.backgroundColor=colours[ref%colours.length];
  77. do {
  78. ypos[ref]=Math.floor(shigh*Math.random());
  79. xpos[ref]=Math.floor(swide*Math.random());
  80. }
  81. while (checkity(ref));
  82. zpos[ref]=Math.random()*size/4;
  83. dy[ref]=(0.5+Math.random())*(Math.random()>.5?2:-2);
  84. dx[ref]=(0.5+Math.random())*(Math.random()>.5?2:-2);
  85. dz[ref]=(0.5+Math.random())*(Math.random()>.5?.2:-.2);
  86. blob[ref]=dv;
  87. div.appendChild(blob[ref]);
  88. set_blob(ref);
  89. }
  90.  
  91. function checkity(j) {
  92. var i, r=false;
  93. if (j) for (var i=0; i<j; i++) {
  94. if (Math.abs(xpos[i]-xpos[j])<size && Math.abs(ypos[i]-ypos[j])<size) r=true;
  95. }
  96. return (r);
  97. }
  98.  
  99. function rejig(ref, xy) {
  100. if (xy=='y') {
  101. dx[ref]=(0.5+Math.random())*sign(dx[ref]);
  102. dy[ref]=(0.5+Math.random())*-sign(dy[ref]);
  103. }
  104. else {
  105. dx[ref]=(0.5+Math.random())*-sign(dx[ref]);
  106. dy[ref]=(0.5+Math.random())*sign(dy[ref]);
  107. }
  108. }
  109.  
  110. function sign(a) {
  111. if (a<0) return (-2);
  112. else if (a>0) return (2);
  113. else return (0);
  114. }
  115.  
  116. function set_blob(ref) {
  117. var sy;
  118. sy=blob[ref].style;
  119. sy.top=ypos[ref]-size/4+'px';
  120. sy.left=xpos[ref]-size/4+'px';
  121. sy.filter='blur('+zpos[ref]+'px)';
  122. }
  123.  
  124. function jamjar(ref) {
  125. var i;
  126. if (ypos[ref]+dy[ref]<-size/2 || ypos[ref]+dy[ref]>shigh+size/2) rejig(ref, 'y');
  127. else if (xpos[ref]+dx[ref]<-size/2 || xpos[ref]+dx[ref]>swide+size/2) rejig(ref, 'x');
  128. else if (Math.abs(ypos[ref]+dy[ref]-y)<size/2 && Math.abs(xpos[ref]+dx[ref]-x)<size/2 && zpos[ref]<size/20) {
  129. if (Math.abs(ypos[ref]+dy[ref]-y)>Math.abs(xpos[ref]+dx[ref]-x)) dy[ref]=-dy[ref];
  130. else dx[ref]=-dx[ref];
  131. }
  132. else for (i=0; i<blobs; i++) {
  133. if (i==ref) continue;
  134. if (Math.abs(ypos[ref]+dy[ref]-ypos[i])<size/2 && Math.abs(xpos[ref]+dx[ref]-xpos[i])<size/2 && Math.abs(zpos[ref]-zpos[i])<size/20) {
  135. if (Math.abs(ypos[ref]+dy[ref]-ypos[i])>Math.abs(xpos[ref]+dx[ref]-xpos[i])) dy[ref]=-dy[ref];
  136. else dx[ref]=-dx[ref];
  137. }
  138. }
  139. ypos[ref]+=dy[ref];
  140. xpos[ref]+=dx[ref];
  141. if (zpos[ref]+dz[ref]<0) dz[ref]=Math.abs(dz[ref]);
  142. else if (zpos[ref]+dz[ref]>size/4) dz[ref]=-Math.abs(dz[ref]);
  143. zpos[ref]+=dz[ref];
  144. set_blob(ref);
  145. setTimeout("jamjar("+ref+")", speed);
  146. }
  147.  
  148. document.onmousemove=mouse;
  149. function mouse(e) {
  150. if (e) {
  151. y=e.pageY;
  152. x=e.pageX;
  153. }
  154. else {
  155. set_scroll();
  156. y=event.y+sdown;
  157. x=event.x+sleft;
  158. }
  159. }
  160.  
  161. document.onscroll=set_scroll;
  162. function set_scroll() {
  163. if (typeof(self.pageYOffset)=="number") {
  164. sdown=self.pageYOffset;
  165. sleft=self.pageXOffset;
  166. }
  167. else if (document.body.scrollTop || document.body.scrollLeft) {
  168. sdown=document.body.scrollTop;
  169. sleft=document.body.scrollLeft;
  170. }
  171. else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {
  172. sleft=document.documentElement.scrollLeft;
  173. sdown=document.documentElement.scrollTop;
  174. }
  175. else {
  176. sdown=0;
  177. sleft=0;
  178. }
  179. }
  180.  
  181. window.onresize=set_width;
  182. function set_width() {
  183. var sw_min=999999;
  184. var sh_min=999999;
  185. if (document.documentElement && document.documentElement.clientWidth) {
  186. if (document.documentElement.clientWidth>0) sw_min=document.documentElement.clientWidth;
  187. if (document.documentElement.clientHeight>0) sh_min=document.documentElement.clientHeight;
  188. }
  189. if (typeof(self.innerWidth)!="undefined" && self.innerWidth) {
  190. if (self.innerWidth>0 && self.innerWidth<sw_min) sw_min=self.innerWidth;
  191. if (self.innerHeight>0 && self.innerHeight<sh_min) sh_min=self.innerHeight;
  192. }
  193. if (document.body.clientWidth) {
  194. if (document.body.clientWidth>0 && document.body.clientWidth<sw_min) sw_min=document.body.clientWidth;
  195. if (document.body.clientHeight>0 && document.body.clientHeight<sh_min) sh_min=document.body.clientHeight;
  196. }
  197. if (sw_min==999999 || sh_min==999999) {
  198. sw_min=800;
  199. sh_min=600;
  200. }
  201. swide=sw_min;
  202. shigh=sh_min;
  203. }
  204. // ]]>
  205. </script>
  206.  
  207. @import url('https://fonts.googleapis.com/css2?family=Old+Standard+TT:ital@1&display=swap');
  208.  
  209. body {
  210. background-color: #9ab973;
  211. color: black;
  212. font-family: Verdana;
  213. }
  214.  
  215. #header {
  216. background-image: url("https://i.pinimg.com/736x/29/5c/98/295c9884610ed8c0e4536d79dfb8d8a0.jpg");
  217. background-size: ;
  218. border: double 3px #507d2a;
  219. width: 1000px;
  220. height:200px;
  221. position: relative;
  222. margin-left: 250px;
  223.  
  224. }
  225.  
  226.  
  227. .title {
  228. font-size: 40px;
  229. border: double 3px #507d2a;
  230. width: 1000px;
  231. height:70px;
  232. margin-left: 250px;
  233. margin-top: 10px;
  234. position: relative;
  235. text-align: center;
  236. background-color: #d1e189;
  237. font-family: 'Old Standard TT', serif;
  238. letter-spacing: 7px;
  239. line-height: 70px;
  240. }
  241.  
  242. .lilypads {
  243. position: absolute;
  244. margin-left: 200px;
  245. margin-top: -100px;
  246. z-index: 5;
  247.  
  248. }
  249.  
  250. #wrapper {
  251. width: 1000px;
  252. margin-left: 250px;
  253. }
  254.  
  255. .container {
  256. border: double 3px #507d2a;
  257. position: relative;
  258. margin-top: 30px;
  259. width: 300px;
  260. background-color: #c2dc96;
  261. float: left;
  262.  
  263. }
  264.  
  265. #container1 {
  266. font-family: 'Old Standard TT', serif;
  267. font-size: 25px;
  268. text-align: center;
  269. line-height: 15px;
  270. padding: 5px;
  271. }
  272.  
  273. .main {
  274. border: double 3px #507d2a;
  275. width: 680px;
  276. background-color: #c2dc96;
  277. position: relative;
  278. float: right;
  279. margin-top: 30px;
  280. margin-left: 10px;
  281. }
  282.  
  283. #main1 {
  284. font-family: 'Old Standard TT', serif;
  285. font-size: 25px;
  286. text-align: justify;
  287. padding: 10px;
  288. }
  289.  
  290. #footer {
  291. border: double 3px #507d2a;
  292. bottom:0;
  293. width:1000px;
  294. margin-top: 32%;
  295. margin-left: 250px;
  296. clear: both;
  297. background-color: #c2dc96;
  298. font-family: 'Old Standard TT', serif;
  299. }
  300.  
  301. #tape {
  302. position: fixed;
  303. text-align: left;
  304. margin-left: -70px;
  305. }
  306.  
  307. #tape2 {
  308. position: fixed;
  309. text-align: right;
  310. margin-left: 1350px;
  311. margin-top: -200px;
  312. }
  313.  
  314. h1 {
  315. font-family: 'Old Standard TT', serif;
  316. border-bottom: double 3px #507d2a;
  317. text-align: center;
  318. line-height: 50px;
  319. display: block;
  320. font-size: 2em;
  321. margin-top: 0em;
  322. margin-bottom: 0.67em;
  323. margin-left: 0;
  324. margin-right: 0;
  325. font-weight: normal;
  326. }
  327.  
  328. h2 {
  329. font-family: 'Old Standard TT', serif;
  330. border-bottom: double 3px #507d2a;
  331. text-align: left;
  332. line-height: 50px;
  333. display: block;
  334. font-size: 2em;
  335. margin-top: 0em;
  336. margin-bottom: 0.67em;
  337. margin-left: 0;
  338. margin-right: 0;
  339. font-weight: normal;
  340. }
  341.  
  342. a {
  343. text-decoration: none;
  344. }
  345.  
  346. a:hover {
  347. text-decoration: underline;
  348. }
  349.  
  350. </head>
  351.  
  352. <body>
  353.  
  354. <div id="header">
  355.  
  356. </div>
  357.  
  358. <div class="lilypads">
  359. <img src="https://i.postimg.cc/7PF569dm/02f1b81dad8c708cf01e07a83e2ebb41-removebg-preview.png" width=270>
  360. </div>
  361.  
  362. <div class="title">
  363. Tranquil Moss
  364. </div>
  365.  
  366. <div id="wrapper">
  367.  
  368. <div class="container">
  369. <h1 style="background-color:#d1e189;">Navigation</h1>
  370. <div id="container1">
  371. <img src="https://i.postimg.cc/nzn16ZY9/1afada67ee8e32803dd9e1a3ba618342-removebg-preview.png" width=50px align=center><a href="">Link</a><br>
  372. <img src="https://i.postimg.cc/MZNsdnrv/8eb52de58b5d4603b867719db5ac05c9-removebg-preview.png" width=50px align=center><a href="">Link</a><br>
  373. <img src="https://i.postimg.cc/nzn16ZY9/1afada67ee8e32803dd9e1a3ba618342-removebg-preview.png" width=50px align=center><a href="">Link</a><br>
  374. <img src="https://i.postimg.cc/MZNsdnrv/8eb52de58b5d4603b867719db5ac05c9-removebg-preview.png" width=50px align=center><a href="">Link</a><br>
  375. <img src="https://i.postimg.cc/nzn16ZY9/1afada67ee8e32803dd9e1a3ba618342-removebg-preview.png" width=50px align=center><a href="">Link</a><br>
  376. <img src="https://i.postimg.cc/MZNsdnrv/8eb52de58b5d4603b867719db5ac05c9-removebg-preview.png" width=50px align=center><a href="">Link</a><br>
  377. <img src="https://i.postimg.cc/nzn16ZY9/1afada67ee8e32803dd9e1a3ba618342-removebg-preview.png" width=50px align=center><a href="">Link</a><br>
  378.  
  379. </div>
  380. </div>
  381.  
  382. <div class="main">
  383. <h2 style="background-color:#d1e189;">&nbsp; Welcome</h2>
  384. <div id="main1">
  385. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Et pharetra pharetra massa massa ultricies mi. Quis viverra nibh cras pulvinar mattis nunc sed blandit. Dignissim diam quis enim lobortis scelerisque. Sed sed risus pretium quam vulputate dignissim suspendisse in. Ultricies mi eget mauris pharetra et ultrices. Rhoncus aenean vel elit scelerisque mauris pellentesque. Massa vitae tortor condimentum lacinia quis vel. Viverra vitae congue eu consequat ac felis donec.
  386. </div>
  387. </div>
  388. </div>
  389.  
  390. <div id="tape">
  391. <img src="https://i.postimg.cc/yN2Pn5v2/72e784f19fde2dae17f15c87796a252b-removebg-preview.png" width=250px>
  392. </div>
  393.  
  394. <div id="tape2">
  395. <img src="https://i.postimg.cc/yN2Pn5v2/72e784f19fde2dae17f15c87796a252b-removebg-preview.png" width=250px>
  396. </div>
  397. <!-- dont remove credits -->
  398. <div id="footer"><br>
  399. <p align=center> Layout by <a href="https://godeater.neocities.org/">godeater</a></p>
  400. </div>
  401.  
  402.  
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!