diff options
| author | Jules Laplace <julescarbon@gmail.com> | 2020-10-01 15:55:39 +0200 |
|---|---|---|
| committer | Jules Laplace <julescarbon@gmail.com> | 2020-10-01 15:55:39 +0200 |
| commit | 560d7864bcf6ea2f623b613b67811ab0cd3cc8cb (patch) | |
| tree | fdf69f13689c341b9a240e9bf152f8b89c832154 /animism-align/frontend | |
| parent | e74bf621be41c532ae2a45cbd6818e86bc8ad2c3 (diff) | |
subscription form
Diffstat (limited to 'animism-align/frontend')
| -rw-r--r-- | animism-align/frontend/app/views/viewer/player/components.inline/inline.utility.js | 11 | ||||
| -rw-r--r-- | animism-align/frontend/app/views/viewer/player/player.transcript.css | 41 |
2 files changed, 49 insertions, 3 deletions
diff --git a/animism-align/frontend/app/views/viewer/player/components.inline/inline.utility.js b/animism-align/frontend/app/views/viewer/player/components.inline/inline.utility.js index 83996a7..0ae002a 100644 --- a/animism-align/frontend/app/views/viewer/player/components.inline/inline.utility.js +++ b/animism-align/frontend/app/views/viewer/player/components.inline/inline.utility.js @@ -196,10 +196,15 @@ const CreditsVenue = ({ venue }) => { export const SubscriptionForm = () => { return ( - <div className="subscription-form"> + <form className="subscription-form"> Stay up to date and get notified when the next episode is available - <input type="text" placeholder="Email address here" /> - </div> + <input + required + type="text" + placeholder="Email address here" + /> + <Arrow type='right' /> + </form> ) } diff --git a/animism-align/frontend/app/views/viewer/player/player.transcript.css b/animism-align/frontend/app/views/viewer/player/player.transcript.css index 72faf7b..95105ce 100644 --- a/animism-align/frontend/app/views/viewer/player/player.transcript.css +++ b/animism-align/frontend/app/views/viewer/player/player.transcript.css @@ -385,3 +385,44 @@ .venue-info .credits-info div { min-height: 0.875rem; } + +/* subscription form */ + +.subscription-form { + font-family: "Freight Text", serif; + font-size: 3rem; + line-height: 1; + width: 80%; + max-width: 60rem; + margin: 0 auto; + margin-top: 4rem; + margin-bottom: 10rem; + position: relative; +} +.subscription-form input { + font-family: "Freight Text", serif; + font-size: 3rem; + line-height: 1; + background: transparent; + border: 0; + padding: 0; + width: 100%; + border-bottom: 1px solid #000; +} +.subscription-form input::placeholder { + color: #bbb; + border-bottom: 1px solid #bbb; +} +.subscription-form input[type='text']:invalid { + border-bottom: 1px solid #bbb; +} +.subscription-form svg { + position: absolute; + bottom: 0; + right: -1rem; + width: 2.5rem; + height: 2.5rem; +} +.subscription-form svg polygon { + fill: #666; +}
\ No newline at end of file |