-
Notifications
You must be signed in to change notification settings - Fork 342
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Added Newsletter Subscription Form (#569)
- Loading branch information
1 parent
f72beb9
commit 2d936f3
Showing
3 changed files
with
329 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,49 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <title>Newsletter Subscription Form</title> | ||
| <link rel="stylesheet" href="./style.css"> | ||
|
|
||
|
|
||
| </head> | ||
| <body> | ||
|
|
||
|
|
||
| <div class="sign-up-container"> | ||
| <div class="envelope"> | ||
| <div class="paper"> | ||
| <h1>Subscribe to our Newsletter</h1> | ||
| <form class="sign-up-form"> | ||
| <input type="text" placeholder="Name" class="text-input"/> | ||
| <input type="email" placeholder="Email" class="text-input"/> | ||
| <button type="submit" class="button">Sign up</button> | ||
| </form> | ||
| </div> | ||
| <div class="bottom-flap"></div> | ||
| </div> | ||
| <div class="thanks-text"> <span>Thanks for subscribing!</span></div> | ||
| </div> | ||
|
|
||
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> | ||
|
|
||
| <script> | ||
| $(document).ready(function() { | ||
| $('.sign-up-form').on('submit', submit); | ||
| $('.reset-button').on('click', reset); | ||
| }); | ||
|
|
||
| function submit(e) { | ||
| $('.sign-up-container').addClass('submitted'); | ||
| e.preventDefault(); | ||
| } | ||
|
|
||
| function reset() { | ||
| $('.sign-up-container').removeClass('submitted'); | ||
| $('.sign-up-form')[0].reset(); | ||
| } | ||
|
|
||
| </script> | ||
| </body> | ||
| </html> |
267 changes: 267 additions & 0 deletions
267
Components/Forms/Newsletter-Subscription-Form/style.css
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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; | ||
| } | ||
|
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters