From e3baa90242338092cd60b14ee1d7f941467933b6 Mon Sep 17 00:00:00 2001 From: Saurav Kumar <125905089+saurav2208@users.noreply.github.com> Date: Sun, 11 Feb 2024 15:17:36 +0000 Subject: [PATCH 1/3] Addd newsletter subscription form --- .../Forms/Newsletter-Signup-Form/index.html | 49 ++++ .../Forms/Newsletter-Signup-Form/style.css | 267 ++++++++++++++++++ assets/html_files/forms.html | 13 + 3 files changed, 329 insertions(+) create mode 100644 Components/Forms/Newsletter-Signup-Form/index.html create mode 100644 Components/Forms/Newsletter-Signup-Form/style.css diff --git a/Components/Forms/Newsletter-Signup-Form/index.html b/Components/Forms/Newsletter-Signup-Form/index.html new file mode 100644 index 00000000..9f8d72dc --- /dev/null +++ b/Components/Forms/Newsletter-Signup-Form/index.html @@ -0,0 +1,49 @@ + + + + + +Newsletter Subscription Form + + + + + + + +
+
+
+

Subscribe to our Newsletter

+ +
+
+
+
Thanks for subscribing!
+
+ + + + + + diff --git a/Components/Forms/Newsletter-Signup-Form/style.css b/Components/Forms/Newsletter-Signup-Form/style.css new file mode 100644 index 00000000..747a34a3 --- /dev/null +++ b/Components/Forms/Newsletter-Signup-Form/style.css @@ -0,0 +1,267 @@ + +body { + font-size: 26px; + } + + body { + background-color: #fff; + } + + .sign-up-container { + width: 100%; + padding-top: 280px; + font-family: 'Source Sans Pro', sans-serif; + font-weight: 300; + } + + .paper { + width: 85%; + box-sizing: border-box; + margin: 0 auto; + position: relative; + top: -205px; + padding: 1rem 1.4rem 125px 1.4rem; + background: #fff; + background: -webkit-linear-gradient(top, #f1f1f1 43%, #fff 100%); + background: linear-gradient(to bottom, #f1f1f1 43%, #eee2b4 100%); + color: #db4344; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); + border-radius: 4px; + } + + h1 { + margin-bottom: 1rem; + margin-top: 0; + text-align: center; + font-size: 1em; + font-weight: 300; + } + + .text-input, + .button { + box-sizing: border-box; + padding: 0.8em 0.67em; + margin-bottom: 0.5rem; + background: transparent; + border: none; + border-radius: 2em; + outline: none; + } + + .button { + border: 1px solid #999; + -webkit-transition: background 0.1s, color 0.1s; + transition: background 0.1s, color 0.1s; + } + .button:hover { + background: #db4344; + color: #fef8e1; + } + + .text-input { + background: #fff; + color: #333; + } + .text-input::-webkit-input-placeholder { + color: inherit; + font-style: italic; + } + .text-input::-moz-placeholder { + color: inherit; + font-style: italic; + } + .text-input:-ms-input-placeholder { + color: inherit; + font-style: italic; + } + .text-input::placeholder { + color: inherit; + font-style: italic; + } + + .sign-up-form { + width: 100%; + } + .sign-up-form * { + width: 100%; + } + + .envelope { + position: relative; + width: 400px; + height: 250px; + margin: auto; + background: #fa5b5c; + border-radius: 24px; + } + .envelope:before { + content: ''; + display: block; + position: absolute; + top: -240px; + width: 0; + height: 0; + z-index: -1; + border-width: 125px 200px; + border-color: transparent; + border-style: solid; + border-bottom-color: #fa5b5c; + border-radius: 24px; + } + .envelope:after { + content: ''; + display: block; + position: absolute; + bottom: 0; + width: 0; + height: 0; + pointer-events: none; + border-width: 125px 200px; + border-style: solid; + border-color: #db4344; + border-top-color: transparent; + border-radius: 24px; + } + .envelope .bottom-flap { + width: 400px; + height: 250px; + display: block; + position: absolute; + top: 0; + z-index: 1; + border-radius: 24px; + overflow: hidden; + pointer-events: none; + } + .envelope .bottom-flap:after { + content: ''; + display: block; + position: absolute; + width: 400px; + height: 400px; + top: 40%; + border-radius: 24px; + background: #fa5b5c; + -webkit-transform: scaleY(0.7) rotate(45deg); + transform: scaleY(0.7) rotate(45deg); + box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.1); + } + + .thanks-text { + position: absolute; + width: 100%; + top: 320px; + z-index: -1; + text-align: center; + font-weight: 500; + font-size:30px; + } + + .submitted .paper { + -webkit-animation: paper-in 0.8s ease-out; + animation: paper-in 0.8s ease-out; + -webkit-animation-fill-mode: forwards; + animation-fill-mode: forwards; + } + .submitted.sign-up-container { + overflow: hidden; + } + .submitted .envelope { + -webkit-animation: fly-away 0.5s ease-in; + animation: fly-away 0.5s ease-in; + -webkit-animation-delay: 1.3s; + animation-delay: 1.3s; + -webkit-animation-fill-mode: forwards; + animation-fill-mode: forwards; + } + .submitted .envelope:before { + -webkit-animation: fold 0.5s ease-in; + animation: fold 0.5s ease-in; + -webkit-animation-delay: 0.7s; + animation-delay: 0.7s; + -webkit-animation-fill-mode: forwards; + animation-fill-mode: forwards; + } + + @-webkit-keyframes paper-in { + 30% { + -webkit-transform: translateY(-80px); + transform: translateY(-80px); + padding-bottom: 125px; + } + to { + top: 10px; + padding-bottom: 0; + } + } + + @keyframes paper-in { + 30% { + -webkit-transform: translateY(-80px); + transform: translateY(-80px); + padding-bottom: 125px; + } + to { + top: 10px; + padding-bottom: 0; + } + } + @-webkit-keyframes fly-away { + to { + -webkit-transform: translateX(200%) rotate(10deg); + transform: translateX(200%) rotate(10deg); + opacity: 0; + } + } + @keyframes fly-away { + to { + -webkit-transform: translateX(200%) rotate(10deg); + transform: translateX(200%) rotate(10deg); + opacity: 0; + } + } + @-webkit-keyframes fold { + from { + -webkit-transform-origin: bottom center; + transform-origin: bottom center; + z-index: 10; + } + to { + z-index: 10; + -webkit-transform-origin: bottom center; + transform-origin: bottom center; + -webkit-transform: rotateX(-180deg) translateY(10px); + transform: rotateX(-180deg) translateY(10px); + border-bottom-color: #5eb6e0; + } + } + @keyframes fold { + from { + -webkit-transform-origin: bottom center; + transform-origin: bottom center; + z-index: 10; + } + to { + z-index: 10; + -webkit-transform-origin: bottom center; + transform-origin: bottom center; + -webkit-transform: rotateX(-180deg) translateY(10px); + transform: rotateX(-180deg) translateY(10px); + border-bottom-color: #fa5b5c; + } + } + .reset-button { + display: block; + padding: 0.6em 1em; + margin-top: 50px; + margin-left: auto; + margin-right: auto; + font-size: 12px; + background: transparent; + border: 1px solid black; + } + .reset-button:hover { + color: white; + background: black; + } + \ No newline at end of file diff --git a/assets/html_files/forms.html b/assets/html_files/forms.html index ea0baa69..a43531c9 100644 --- a/assets/html_files/forms.html +++ b/assets/html_files/forms.html @@ -279,6 +279,19 @@

Animated Border Login Form

+
+

Newsletter SignupForm

+
+ + + +
+
+ + + +
+
From 604a47bb5a09e9c131c538569a7c6823fc60ebdf Mon Sep 17 00:00:00 2001 From: Saurav Kumar <125905089+saurav2208@users.noreply.github.com> Date: Mon, 12 Feb 2024 21:02:14 +0000 Subject: [PATCH 2/3] updated --- .../index.html | 0 .../style.css | 0 assets/html_files/forms.html | 6 +++--- 3 files changed, 3 insertions(+), 3 deletions(-) rename Components/Forms/{Newsletter-Signup-Form => Newsletter-Subscriptiom-Form}/index.html (100%) rename Components/Forms/{Newsletter-Signup-Form => Newsletter-Subscriptiom-Form}/style.css (100%) diff --git a/Components/Forms/Newsletter-Signup-Form/index.html b/Components/Forms/Newsletter-Subscriptiom-Form/index.html similarity index 100% rename from Components/Forms/Newsletter-Signup-Form/index.html rename to Components/Forms/Newsletter-Subscriptiom-Form/index.html diff --git a/Components/Forms/Newsletter-Signup-Form/style.css b/Components/Forms/Newsletter-Subscriptiom-Form/style.css similarity index 100% rename from Components/Forms/Newsletter-Signup-Form/style.css rename to Components/Forms/Newsletter-Subscriptiom-Form/style.css diff --git a/assets/html_files/forms.html b/assets/html_files/forms.html index a43531c9..89302976 100644 --- a/assets/html_files/forms.html +++ b/assets/html_files/forms.html @@ -280,14 +280,14 @@

Animated Border Login Form

-

Newsletter SignupForm

+

Newsletter Subscription Form

- +
- +
From 336ba26b5d2d2ad88062c3ba1eea345a76ad038b Mon Sep 17 00:00:00 2001 From: Saurav Kumar <125905089+saurav2208@users.noreply.github.com> Date: Sat, 17 Feb 2024 17:03:44 +0000 Subject: [PATCH 3/3] updated --- .../index.html | 0 .../style.css | 0 assets/html_files/forms.html | 4 ++-- 3 files changed, 2 insertions(+), 2 deletions(-) rename Components/Forms/{Newsletter-Subscriptiom-Form => Newsletter-Subscription-Form}/index.html (100%) rename Components/Forms/{Newsletter-Subscriptiom-Form => Newsletter-Subscription-Form}/style.css (100%) diff --git a/Components/Forms/Newsletter-Subscriptiom-Form/index.html b/Components/Forms/Newsletter-Subscription-Form/index.html similarity index 100% rename from Components/Forms/Newsletter-Subscriptiom-Form/index.html rename to Components/Forms/Newsletter-Subscription-Form/index.html diff --git a/Components/Forms/Newsletter-Subscriptiom-Form/style.css b/Components/Forms/Newsletter-Subscription-Form/style.css similarity index 100% rename from Components/Forms/Newsletter-Subscriptiom-Form/style.css rename to Components/Forms/Newsletter-Subscription-Form/style.css diff --git a/assets/html_files/forms.html b/assets/html_files/forms.html index 89302976..0e4adedf 100644 --- a/assets/html_files/forms.html +++ b/assets/html_files/forms.html @@ -282,12 +282,12 @@

Animated Border Login Form

Newsletter Subscription Form

- +
- +