From 09613e5904a64f0b430fe72e932cea3e4989d70c Mon Sep 17 00:00:00 2001 From: vishesh-baghel Date: Mon, 15 Jan 2024 09:14:29 +0530 Subject: [PATCH 1/5] added thank you page --- index.html | 55 +++++++++++++++++++- thankyou.css | 140 +++++++++++++++++++++++++++++++++++++++++++++++++++ thankyou.ts | 13 +++++ 3 files changed, 207 insertions(+), 1 deletion(-) create mode 100644 thankyou.css create mode 100644 thankyou.ts diff --git a/index.html b/index.html index 31072b2..1adf45c 100644 --- a/index.html +++ b/index.html @@ -1,5 +1,5 @@ - + + + + + + + + + + + + + + +
+
+
+
+
+
+
+
+ + +
+ +

+ Thanks a bunch for filling that out. It means a lot to us, just like you + do! We really appreciate you giving us a moment of your time today. + Thanks for being you. +

+
+ + + diff --git a/thankyou.css b/thankyou.css new file mode 100644 index 0000000..c996d42 --- /dev/null +++ b/thankyou.css @@ -0,0 +1,140 @@ +@import url(https://fonts.googleapis.com/css?family=Open+Sans:300); + +.inner { + position: absolute; + margin: auto; + width: 50px; + height: 95px; + top: 0px; + left: 0px; + bottom: 0px; + right: 0px; +} + +.inner > div { + width: 50px; + height: 50px; + background-color: rgba(255, 255, 255, 0.7); + border-radius: 100%; + position: absolute; + transition: all 0.5s ease; +} + +.inner > div:first-child { + margin-left: -27px; + animation: one 1.5s linear 1; +} + +.inner > div:nth-child(2) { + margin-left: 27px; + animation: two 1.5s linear 1; +} + +.inner > div:nth-child(3) { + margin-top: 54px; + margin-left: -27px; + animation: four 1.5s linear 1; +} + +.inner > div:nth-child(4) { + margin-top: 54px; + margin-left: 27px; + animation: three 1.5s linear 1; +} + +@keyframes one { + 0% { + transform: scale(1); + } + 25% { + transform: scale(0.3); + } + 50% { + transform: scale(1); + } + 75% { + transform: scale(1.4); + } + 100% { + transform: scale(1); + } +} + +@keyframes two { + 0% { + transform: scale(1.4); + } + 25% { + transform: scale(1); + } + 50% { + transform: scale(0.3); + } + 75% { + transform: scale(1); + } + 100% { + transform: scale(1.4); + } +} + +@keyframes three { + 0% { + transform: scale(1); + } + 25% { + transform: scale(1.4); + } + 50% { + transform: scale(1); + } + 75% { + transform: scale(0.3); + } + 100% { + transform: scale(1); + } +} + +@keyframes four { + 0% { + transform: scale(0.3); + } + 25% { + transform: scale(1); + } + 50% { + transform: scale(1.4); + } + 75% { + transform: scale(1); + } + 100% { + transform: scale(0.3); + } +} + +.inner > div.done { + margin-left: 0px; + margin-top: 27px; +} + +.inner > div.page { + transform: scale(40); +} + +.pageLoad { + position: fixed; + top: 0px; + left: 0px; + width: 100%; + height: 100vh; + background-color: #0a0a0a; + transition: all 0.3s ease; + z-index: 2; +} + +.pageLoad.off { + opacity: 0; + pointer-events: none; +} diff --git a/thankyou.ts b/thankyou.ts new file mode 100644 index 0000000..643a0e0 --- /dev/null +++ b/thankyou.ts @@ -0,0 +1,13 @@ +setTimeout(function () { + $(".inner div").addClass("done"); + + setTimeout(function () { + $(".inner div").addClass("page"); + + setTimeout(function () { + $(".pageLoad").addClass("off"); + + $("body, html").addClass("on"); + }, 500); + }, 500); +}, 1500); From 9313e5a36ef02311dddea2f53f04098cca09f6eb Mon Sep 17 00:00:00 2001 From: vishesh-baghel Date: Mon, 15 Jan 2024 09:19:04 +0530 Subject: [PATCH 2/5] added demo video --- index.html | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/index.html b/index.html index 1adf45c..ce18ae2 100644 --- a/index.html +++ b/index.html @@ -59,6 +59,16 @@

do! We really appreciate you giving us a moment of your time today. Thanks for being you.

+
+ +