diff --git a/__screenshots/party.png b/__screenshots/party.png new file mode 100644 index 0000000..02fb0d7 Binary files /dev/null and b/__screenshots/party.png differ diff --git a/data/pages.json b/data/pages.json index 8c1e649..64404aa 100644 --- a/data/pages.json +++ b/data/pages.json @@ -49,6 +49,11 @@ "imageUrl": "https://raw.githubusercontent.com/tsparticles/404-templates/main/__screenshots/pole.png?raw=true", "url": "pole/404.html" }, + { + "description": "Party 404", + "imageUrl": "https://github.com/Ahasasjain/404-templates/blob/404-party-template/__screenshots/party.png", + "url": "party/404.html" + }, { "description": "Fireworks 404", "imageUrl": "https://raw.githubusercontent.com/tsparticles/404-templates/main/__screenshots/fireworks.png?raw=true", diff --git a/party/404.html b/party/404.html new file mode 100644 index 0000000..535bf64 --- /dev/null +++ b/party/404.html @@ -0,0 +1,49 @@ + + + + Party | tsParticles 404 + + + + + +
+ +

404

+
+
+

OOPS! Wrong Door

+

+ You can either Join Them or + +

+ + Dancing Person -1 + Dancing Person -2 + Dancing Person -3 + Dancing Person -4 + + + + + + + diff --git a/party/images/Dance-1.gif b/party/images/Dance-1.gif new file mode 100644 index 0000000..cb86552 Binary files /dev/null and b/party/images/Dance-1.gif differ diff --git a/party/images/Dance-2.gif b/party/images/Dance-2.gif new file mode 100644 index 0000000..db2c5a0 Binary files /dev/null and b/party/images/Dance-2.gif differ diff --git a/party/images/Dance-3.gif b/party/images/Dance-3.gif new file mode 100644 index 0000000..5deec22 Binary files /dev/null and b/party/images/Dance-3.gif differ diff --git a/party/images/Dance-4.gif b/party/images/Dance-4.gif new file mode 100644 index 0000000..d75e13d Binary files /dev/null and b/party/images/Dance-4.gif differ diff --git a/party/script.js b/party/script.js new file mode 100644 index 0000000..242f00e --- /dev/null +++ b/party/script.js @@ -0,0 +1,335 @@ +tsParticles.load("tsparticles", { + emitters: [ + { + life: { + duration: 500, + count: 10, + }, + position: { + x: 0, + y: 0, + }, + particles: { + move: { + direction: "bottom", + }, + }, + }, + { + life: { + duration: 500, + count: 10, + }, + position: { + x: 10, + y: 0, + }, + particles: { + move: { + direction: "bottom", + }, + }, + }, + { + life: { + duration: 500, + count: 10, + }, + position: { + x: 20, + y: 0, + }, + particles: { + move: { + direction: "bottom", + }, + }, + }, + { + life: { + duration: 500, + count: 10, + }, + position: { + x: 30, + y: 0, + }, + particles: { + move: { + direction: "bottom", + }, + }, + }, + { + life: { + duration: 500, + count: 10, + }, + position: { + x: 40, + y: 0, + }, + particles: { + move: { + direction: "bottom", + }, + }, + }, + { + life: { + duration: 500, + count: 10, + }, + position: { + x: 50, + y: 0, + }, + particles: { + move: { + direction: "bottom", + }, + }, + }, + { + life: { + duration: 500, + count: 10, + }, + position: { + x: 60, + y: 0, + }, + particles: { + move: { + direction: "bottom", + }, + }, + }, + { + life: { + duration: 500, + count: 10, + }, + position: { + x: 70, + y: 0, + }, + particles: { + move: { + direction: "bottom", + }, + }, + }, + { + life: { + duration: 500, + count: 10, + }, + position: { + x: 80, + y: 0, + }, + particles: { + move: { + direction: "bottom", + }, + }, + }, + { + life: { + duration: 500, + count: 10, + }, + position: { + x: 90, + y: 0, + }, + particles: { + move: { + direction: "bottom", + }, + }, + }, + { + life: { + duration: 500, + count: 10, + }, + position: { + x: 100, + y: 0, + }, + particles: { + move: { + direction: "bottom", + }, + }, + }, + { + life: { + duration: 500, + count: 10, + }, + position: { + x: 0, + y: 0, + }, + particles: { + move: { + direction: "bottom", + }, + }, + }, + { + life: { + duration: 500, + count: 10, + }, + position: { + x: 10, + y: 0, + }, + particles: { + move: { + direction: "bottom", + }, + }, + }, + { + life: { + duration: 500, + count: 10, + }, + position: { + x: 20, + y: 0, + }, + particles: { + move: { + direction: "bottom", + }, + }, + }, + { + life: { + duration: 500, + count: 10, + }, + position: { + x: 30, + y: 0, + }, + particles: { + move: { + direction: "bottom", + }, + }, + }, + { + life: { + duration: 500, + count: 10, + }, + position: { + x: 40, + y: 0, + }, + particles: { + move: { + direction: "bottom", + }, + }, + }, + { + life: { + duration: 500, + count: 10, + }, + position: { + x: 50, + y: 0, + }, + particles: { + move: { + direction: "bottom", + }, + }, + }, + { + life: { + duration: 500, + count: 10, + }, + position: { + x: 60, + y: 0, + }, + particles: { + move: { + direction: "bottom", + }, + }, + }, + { + life: { + duration: 500, + count: 10, + }, + position: { + x: 70, + y: 0, + }, + particles: { + move: { + direction: "bottom", + }, + }, + }, + { + life: { + duration: 500, + count: 10, + }, + position: { + x: 80, + y: 0, + }, + particles: { + move: { + direction: "bottom", + }, + }, + }, + { + life: { + duration: 500, + count: 10, + }, + position: { + x: 90, + y: 0, + }, + particles: { + move: { + direction: "bottom", + }, + }, + }, + { + life: { + duration: 500, + count: 10, + }, + position: { + x: 100, + y: 0, + }, + particles: { + move: { + direction: "bottom", + }, + }, + }, + ], + preset: "confetti", +}); diff --git a/party/style.css b/party/style.css new file mode 100644 index 0000000..243c56e --- /dev/null +++ b/party/style.css @@ -0,0 +1,106 @@ +html { + height: 100%; + overflow: hidden; +} + +body { + background-color: #262327; + height: 500px; + background-position: center; + background-repeat: no-repeat; + background-size: cover; + position: relative; + font-family: "Varela", sans-serif; + height: calc(100%); +} + +#tsparticles { + width: 100%; + height: 100%; + position: absolute; + z-index: -1; +} + +#heading { + align-items: center; + text-align: center; + font-family: "Gemunu Libre", sans-serif; + color: orange; + animation: animate 4s infinite; + font-size: 150px; +} + +#subheading { + bottom: 20%; + position: relative; + color: rgb(255, 7, 106); + align-items: center; + text-align: center; + font-family: "Noto Serif Gujarati", serif; + font-size: 45px; +} + +#subheading1 { + bottom: 19%; + position: relative; + color: rgb(3, 241, 209); + align-items: center; + text-align: center; + font-family: "Noto Serif Gujarati", serif; +} + +.img3 { + position: absolute; + top: 355px; + left: 1%; + height: 300px; + width: auto; +} + +.img2 { + position: absolute; + top: 355px; + left: 29%; + height: 315px; + width: auto; +} + +.img1 { + position: absolute; + top: 355px; + left: 53%; + height: 315px; + width: auto; +} + +.img4 { + position: absolute; + top: 360px; + left: 78%; + height: 300px; + width: auto; +} + +.button-88 { + font-family: "Noto Serif Gujarati", serif; + font-weight: 650; + font-size: 27px; + color: white; + background: #ad5389; + background: linear-gradient(0deg, rgb(170, 6, 192) 0%, rgb(173, 1, 253) 100%); + border: none; + box-shadow: 0 0.7em 1.5em -0.5em #14a73e98; + border-radius: 10em; + cursor: pointer; + user-select: none; + -webkit-user-select: none; + touch-action: manipulation; +} + +.button-88:hover { + box-shadow: 0 0.5em 1.5em -0.5em #14a73e98; +} + +.button-88:active { + box-shadow: 0 0.3em 1em -0.5em #14a73e98; +}