diff --git a/Components/Forms/Newsletter-Subscription-Form/index.html b/Components/Forms/Newsletter-Subscription-Form/index.html new file mode 100644 index 00000000..9f8d72dc --- /dev/null +++ b/Components/Forms/Newsletter-Subscription-Form/index.html @@ -0,0 +1,49 @@ + + + + + +Newsletter Subscription Form + + + + + + + +
+
+
+

Subscribe to our Newsletter

+ +
+
+
+
Thanks for subscribing!
+
+ + + + + + diff --git a/Components/Forms/Newsletter-Subscription-Form/style.css b/Components/Forms/Newsletter-Subscription-Form/style.css new file mode 100644 index 00000000..747a34a3 --- /dev/null +++ b/Components/Forms/Newsletter-Subscription-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 659c717a..d1690abc 100644 --- a/assets/html_files/forms.html +++ b/assets/html_files/forms.html @@ -300,6 +300,19 @@

Drag and Drop Form

+
+

Newsletter Subscription Form

+
+ + + +
+
+ + + +
+