From 37bf58443d386319556606e7728e0211c7bd4c39 Mon Sep 17 00:00:00 2001 From: Ankita Thakur Date: Thu, 30 Oct 2025 11:02:29 +0530 Subject: [PATCH 1/2] Scrolling --- .DS_Store | Bin 20484 -> 22532 bytes Scrolling_background/index.html | 97 ++++++++++++++++++++++++++++++++ Scrolling_background/style.css | 40 +++++++++++++ loading_ladder/.DS_Store | Bin 0 -> 6148 bytes 4 files changed, 137 insertions(+) create mode 100644 Scrolling_background/index.html create mode 100644 Scrolling_background/style.css create mode 100644 loading_ladder/.DS_Store diff --git a/.DS_Store b/.DS_Store index 598e2e2ddd9f318cbb2b01ea030b7c7296f9cffd..1d97b9c6d8f2b135b87a38a6812a02294e751c09 100644 GIT binary patch delta 908 zcmbtTL2DCH5T4m>H(T2zZFdizG#H{#SkqooQ4^~zu|liCRM3NzY<8O!ce633vA1~W zMGE3F7f+=JMetJb9RxuTMEnW<01x^Hq>2Zfx9O#NiMqo)W_RBA&Ad0?Ztmdb3p4-# zFRVK=02K~(_DW=&#g9?t9ep}!(wY1;4%4HOg&I96U!w=-ro^Q3bvU}86bXGu$J6w! zd?j}anjpOa%Mh|Tm;A79`=QN*;{ZwnAhk_}i@Wp`Pl@DsL8ZM(tJkfzn||2jEFilH zRj5Oo@jhFhZxw8)@z>kTEi>y}{lp6Ao%&6jy%4F+^zg`+<~yD=y=wW{U}236TIaFs_|gS!lJ znIyyVk;C@n@agS@smLX5C#ltuzCX~-ArI(h+l>Se4U8c!fibOO&s{R6|bKV#L delta 250 zcmZqKz}T{YQJ8^&fzhcn#gKu)1IXk6VvmW!HjJkx1{`J-nf$;&eDZn&14h=#29EBG zY?Ji_EhoD=sc#l!`o=o3fp;@I2MY(I?&dT>bLP!~V!JpuD=_gfZ{}7=V%xk~Z4LA0 znOY&tn~n8$F-~5oFEUx3(O@#aLC55``Vx$Go9`I>XWOi7F_mrd7rQ1#)5+!bxsxM+ zhVeTnF-~qa5CJPw++5-~n{9F@W6)$?0l&!;1?EluYoWx!4s<8TsgwBwBpA7Y&Uwx} cnLosrhY{ih1|S_UIU{7^=0vx3jA**$0oJ2P$N&HU diff --git a/Scrolling_background/index.html b/Scrolling_background/index.html new file mode 100644 index 00000000..7ae84d20 --- /dev/null +++ b/Scrolling_background/index.html @@ -0,0 +1,97 @@ + + + + + + Infinite Scrolling Text + + + +
+
+

elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. + Ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. + Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. + Ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. + Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. + Excepteur sint occaecat cupidatat non proident sunt in culpa qui officia deserunt mollit anim id est laborum. + Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. + Ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. + Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. + Excepteur sint occaecat cupidatat non proident sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. + Ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. + Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. + Excepteur sint occaecat cupidatat non proident sunt in culpa qui officia deserunt mollit anim id est laborum. + Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. + Ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. + Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. + Excepteur sint occaecat cupidatat non proident sunt in culpa qui officia deserunt mollit anim id est laborum. + Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. + Ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. + Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. + Excepteur sint occaecat cupidatat non proident sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. + Ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. + Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. + Excepteur sint occaecat cupidatat non proident sunt in culpa qui officia deserunt mollit anim id est laborum. + Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. + Ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. + Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. + Excepteur sint occaecat cupidatat non proident sunt in culpa qui officia deserunt mollit anim id est laborum. + Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. + Ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. + Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. + Excepteur sint occaecat cupidatat non proident sunt in culpa qui officia deserunt mollit anim id est laborum. +

+
+
+

+ Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. + Ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. + Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. + Excepteur sint occaecat cupidatat non proident sunt in culpa qui officia deserunt mollit anim id est laborum. + Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. + Ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. + Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. + Excepteur sint occaecat cupidatat non proident sunt in culpa qui officia deserunt mollit anim id est laborum. + Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. + Ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. + Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. + Excepteur sint occaecat cupidatat non proident sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. + Ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. + Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. + Excepteur sint occaecat cupidatat non proident sunt in culpa qui officia deserunt mollit anim id est laborum. + Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. + Ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. + Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. + Excepteur sint occaecat cupidatat non proident sunt in culpa qui officia deserunt mollit anim id est laborum. + Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. + Ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. + Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. + Excepteur sint occaecat cupidatat non proident sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. + Ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. + Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. + Excepteur sint occaecat cupidatat non proident sunt in culpa qui officia deserunt mollit anim id est laborum. + Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. + Ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. + Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. + Excepteur sint occaecat cupidatat non proident sunt in culpa qui officia deserunt mollit anim id est laborum. + Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. + Ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. + Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. + Excepteur sint occaecat cupidatat non proident sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. + Ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. + Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. + Excepteur sint occaecat cupidatat non proident sunt in culpa qui officia deserunt mollit anim id est laborum. + Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. + Ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. + Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. + Excepteur sint occaecat cupidatat non proident sunt in culpa qui officia deserunt mollit anim id est laborum. + Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. + Ut enim ad minim veniam quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. + Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. + Excepteur sint occaecat cupidatat non proident sunt in culpa qui officia deserunt mollit anim id est laborum. +

+
+
+ + diff --git a/Scrolling_background/style.css b/Scrolling_background/style.css new file mode 100644 index 00000000..0ccd20fd --- /dev/null +++ b/Scrolling_background/style.css @@ -0,0 +1,40 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} +body { + background-color: #32004b; + overflow: hidden; + height: 100vh; +} +.scroll-container { + position: relative; + width: 100%; + height: 100vh; + overflow: hidden; +} +.scroll-text { + position: absolute; + top: 0; + width: 100%; + height: 100%; + color: white; + font-style: italic; + font-size: 1.4rem; + line-height: 1.6; + padding: 3rem; + text-align: justify; + animation: scroll-up 25s linear infinite; +} +.scroll-text.duplicate { + top: 100%; +} +@keyframes scroll-up { + 0% { + transform: translateY(0); + } + 100% { + transform: translateY(-100%); + } +} diff --git a/loading_ladder/.DS_Store b/loading_ladder/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..45b8a8acafbf2e646deed3cb8e8b36291b0c3668 GIT binary patch literal 6148 zcmeHKO>fgc5S>j^YPUto0i+&R;u@9ER;?;7CX@qLjNnjEh-)jg>UyKtA)qLd&+uco z@=N$T@Md?5TGC!=Rn17VZ$IX(y>D0hK}4!QO`j2Uh$w(Fwn8M=7`L-8Sy%STDP?qN{$3a6Bq>aSc3vDW;M>2gAxE@{88$Ss%mG!v z5&D?YIGI&r&-U2%;I`jPpkfLa?GW-#uUj#ewe(= zv)Q2Y=%p#^VP0kvOUTmiOYL zudDa=_ZEvVc>Lt)^EZRD;=DB9>9(dzCw)* zYySkL>L2BPAnLMmD2j;!qJSuH%L@4YFW9){|B%m%0;0g(Q-Jpe4QGrzHV*C9fy6!m zfP9U#hCE*vnWH^M9vg>ffhk7?I;!$d4CUyk*FG-t*f?}_QvUIw{Fjw~p(y)x^sj9= zsmP(EqJSuHRe=>(?C|;j>gMNkKXCAB<^TWy literal 0 HcmV?d00001 From e3f77756f23dd11f8b5a04b8d6527025d051c479 Mon Sep 17 00:00:00 2001 From: Ankita Thakur Date: Thu, 30 Oct 2025 11:30:34 +0530 Subject: [PATCH 2/2] Pop --- .DS_Store | Bin 22532 -> 20484 bytes Click_to_pop/index.html | 123 ++++++++++++++++++++++++++++++++++++++++ Click_to_pop/style.css | 107 ++++++++++++++++++++++++++++++++++ 3 files changed, 230 insertions(+) create mode 100644 Click_to_pop/index.html create mode 100644 Click_to_pop/style.css diff --git a/.DS_Store b/.DS_Store index 1d97b9c6d8f2b135b87a38a6812a02294e751c09..0044ce4b64dccabcf64492db8c3f2e2349fd192b 100644 GIT binary patch delta 279 zcmZqKz}T{YQJ8^&fzhcn#gKu)1IXk6VvmW!HjFnX23()KSKokwCYH%D z+HMXoSkFKCzMbsk3Pv85|3EOYP?=F_vzfzo_Q{=$UYi3g*0H0>%X6>;-2rmSWPT3` jMxM=rOwXAo^ZWSnFhQIc0g{}Y;WKfwvg;`(pfQdB`qnzl diff --git a/Click_to_pop/index.html b/Click_to_pop/index.html new file mode 100644 index 00000000..adc6f707 --- /dev/null +++ b/Click_to_pop/index.html @@ -0,0 +1,123 @@ + + + + + + Party Popper Button (No JS) + + + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + diff --git a/Click_to_pop/style.css b/Click_to_pop/style.css new file mode 100644 index 00000000..658cb73d --- /dev/null +++ b/Click_to_pop/style.css @@ -0,0 +1,107 @@ +body { + background: black; + height: 100vh; + margin: 0; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + font-family: system-ui, sans-serif; +} +.button { + background: #9fe870; + color: white; + font-weight: bold; + padding: 18px 48px; + border: none; + border-radius: 14px; + cursor: pointer; + font-size: 1.2rem; + box-shadow: 0 8px 20px rgba(255,255,255,0.2); + transition: transform 0.15s ease; + user-select: none; +} +.button:active { + transform: scale(0.96); +} +.confetti-container { + position: fixed; + inset: 0; + pointer-events: none; + overflow: hidden; +} + +.confetti { + position: absolute; + top: 50%; + left: 50%; + width: 8px; + height: 8px; + opacity: 0; + border-radius: 2px; + transform: translate(-50%, -50%); +} +#trigger:checked ~ .confetti-container .confetti { + animation: pop 3s ease-out forwards; +} +@keyframes pop { + 0% { + opacity: 1; + transform: translate(-50%, -50%) scale(1); + } + 100% { + opacity: 0; + transform: translate( + calc(-50% + var(--x) * 300px), + calc(-50% + var(--y) * 300px) + ) + rotate(1080deg); + } +} +.confetti:nth-child(1) { --x: 0.99; --y: -0.14; background: #ff3b30; } +.confetti:nth-child(2) { --x: 0.90; --y: -0.43; background: #ff9500; } +.confetti:nth-child(3) { --x: 0.70; --y: -0.71; background: #ffcc00; } +.confetti:nth-child(4) { --x: 0.43; --y: -0.90; background: #34c759; } +.confetti:nth-child(5) { --x: 0.00; --y: -1.00; background: #5ac8fa; } +.confetti:nth-child(6) { --x: -0.43; --y: -0.90; background: #007aff; } +.confetti:nth-child(7) { --x: -0.70; --y: -0.71; background: #5856d6; } +.confetti:nth-child(8) { --x: -0.90; --y: -0.43; background: #ff2d55; } +.confetti:nth-child(9) { --x: -1.00; --y: 0.00; background: #ff6b6b; } +.confetti:nth-child(10) { --x: -0.90; --y: 0.43; background: #f06595; } +.confetti:nth-child(11) { --x: -0.70; --y: 0.71; background: #ffcc00; } +.confetti:nth-child(12) { --x: -0.43; --y: 0.90; background: #34c759; } +.confetti:nth-child(13) { --x: 0.00; --y: 1.00; background: #5ac8fa; } +.confetti:nth-child(14) { --x: 0.43; --y: 0.90; background: #007aff; } +.confetti:nth-child(15) { --x: 0.70; --y: 0.71; background: #5856d6; } +.confetti:nth-child(16) { --x: 0.90; --y: 0.43; background: #ff2d55; } + +.confetti:nth-child(17) { --x: 0.97; --y: -0.26; background: #ff4081; } +.confetti:nth-child(18) { --x: 0.87; --y: -0.50; background: #ffeb3b; } +.confetti:nth-child(19) { --x: 0.68; --y: -0.73; background: #8bc34a; } +.confetti:nth-child(20) { --x: 0.35; --y: -0.94; background: #03a9f4; } +.confetti:nth-child(21) { --x: 0.00; --y: -1.00; background: #673ab7; } +.confetti:nth-child(22) { --x: -0.36; --y: -0.93; background: #9c27b0; } +.confetti:nth-child(23) { --x: -0.68; --y: -0.73; background: #ff5722; } +.confetti:nth-child(24) { --x: -0.88; --y: -0.47; background: #cddc39; } +.confetti:nth-child(25) { --x: -0.99; --y: -0.14; background: #009688; } +.confetti:nth-child(26) { --x: -0.93; --y: 0.36; background: #03a9f4; } +.confetti:nth-child(27) { --x: -0.68; --y: 0.73; background: #4caf50; } +.confetti:nth-child(28) { --x: -0.36; --y: 0.93; background: #ffc107; } +.confetti:nth-child(29) { --x: 0.00; --y: 1.00; background: #e91e63; } +.confetti:nth-child(30) { --x: 0.36; --y: 0.93; background: #03a9f4; } +.confetti:nth-child(31) { --x: 0.64; --y: 0.77; background: #ff4081; } +.confetti:nth-child(32) { --x: 0.84; --y: 0.54; background: #8bc34a; } +.confetti:nth-child(33) { --x: 0.97; --y: 0.25; background: #cddc39; } +.confetti:nth-child(34) { --x: 1.00; --y: 0.00; background: #ff5722; } +.confetti:nth-child(35) { --x: 0.93; --y: -0.36; background: #9c27b0; } +.confetti:nth-child(36) { --x: 0.77; --y: -0.64; background: #03a9f4; } +.confetti:nth-child(37) { --x: 0.54; --y: -0.84; background: #009688; } +.confetti:nth-child(38) { --x: 0.25; --y: -0.97; background: #673ab7; } +.confetti:nth-child(39) { --x: -0.07; --y: -1.00; background: #ffeb3b; } +.confetti:nth-child(40) { --x: -0.36; --y: -0.93; background: #4caf50; } +.confetti:nth-child(50) { --x: -0.9; --y: -0.43; background: #03a9f4; } +.confetti:nth-child(60) { --x: 0.5; --y: 0.87; background: #ff6b6b; } +.confetti:nth-child(70) { --x: -0.64; --y: 0.77; background: #34c759; } +.confetti:nth-child(80) { --x: 0.93; --y: -0.36; background: #5856d6; } +.confetti:nth-child(90) { --x: -0.25; --y: -0.97; background: #ffcc00; } +.confetti:nth-child(100) { --x: 0.00; --y: 1.00; background: #007aff; }