From be36c9e086561c5d892e7ee534459291b416064f Mon Sep 17 00:00:00 2001 From: Andrii-Moshenskyi Date: Thu, 10 Jun 2021 22:35:15 +0300 Subject: Add Hubspot forms styling --- sass/forms.sass | 160 ++++++++++++++++++++++++++++++++++ sass/main.sass | 1 + sass/settings.sass | 1 + site/get/contributor-subscriptions.md | 6 +- site/img/forms/bg.svg | 89 +++++++++++++++++++ 5 files changed, 255 insertions(+), 2 deletions(-) create mode 100644 sass/forms.sass create mode 100644 site/img/forms/bg.svg diff --git a/sass/forms.sass b/sass/forms.sass new file mode 100644 index 0000000..505bae5 --- /dev/null +++ b/sass/forms.sass @@ -0,0 +1,160 @@ +@import settings.sass + +div.hbspt-form + background-image: url(../img/forms/bg.svg) + padding-top: 25px + padding-bottom: 70px + margin-top: 50px + margin-bottom: 70px + +resp(sm) + padding-bottom: 50px + padding-top: 15px + +resp(esm) + margin-top: 30px + margin-bottom: 50px + + h1, h2, h3, h4, h5, h6 + color: $white + text-align: center + + h2 + +resp(sm) + margin-bottom: 12px !important + + form + max-width: 800px + margin-left: auto + margin-right: auto + +resp(md) + max-width: 100% + padding-left: 50px + padding-right: 50px + +resp(esm) + padding-left: 30px + padding-right: 30px + + > fieldset + max-width: 100% + margin-bottom: 20px + +resp(sm) + margin-bottom: 15px + + > div + + > label + color: $white + display: block + font-size: 16px + + > span + display: inline-block + margin-bottom: 10px + + &:empty + display: none + + > div.input + margin-right: 0 !important + display: flex + + textarea, input + width: 100% !important + color: $form-fields + font-size: 16px + font-family: sans-serif + +resp(sm) + font-size: 14px + + &.invalid + border: 2px solid red + + input + height: 46px + padding: 0 15px + +resp(sm) + height: 41px + + textarea + height: 58px + padding: 12px 15px + resize: none + line-height: 140% + +resp(sm) + height: 53px + + > ul.hs-error-msgs + padding: 0 !important + list-style-type: none + color: red + + > li + padding: 0 !important + margin: 7px 0 0 !important + font-size: 14px + +resp(sm) + margin-top: 5px !important + + &:before + content: none !important + + &.form-columns-2 + display: flex + justify-content: space-between + +resp(sm) + flex-direction: column + + > div + float: none !important + width: calc(50% - 10px) !important + +resp(sm) + width: 100% !important + + &:first-child + +resp(sm) + margin-bottom: 15px + + &.form-columns-3 + display: flex + justify-content: space-between + +resp(sm) + flex-direction: column + + > div + float: none !important + width: calc(33.33% - 13px) !important + +resp(sm) + width: 100% !important + margin-bottom: 15px + + &:last-child + +resp(sm) + margin-bottom: 0 + + > div.hs_recaptcha + display: none + + > div.hs_error_rollup + display: none + + > div.hs-submit + + > div.actions + text-align: center + + input[type=submit] + background-color: $orange + color: $black + font-weight: 700 + font-size: 16px + width: 245px + height: 60px + cursor: pointer + border: 1px solid $orange + transition: 0.3s + +resp(sm) + height: 50px + +resp(esm) + width: 100% + + &:hover + background-color: $white \ No newline at end of file diff --git a/sass/main.sass b/sass/main.sass index 882446c..4b513cd 100644 --- a/sass/main.sass +++ b/sass/main.sass @@ -99,5 +99,6 @@ div.container @import front-page/main-text.sass @import front-page/inform-columns.sass @import front-page/bottom-text.sass +@import forms.sass @import footer.sass @import google-analytics-message.sass \ No newline at end of file diff --git a/sass/settings.sass b/sass/settings.sass index 01b3d95..7628830 100644 --- a/sass/settings.sass +++ b/sass/settings.sass @@ -4,6 +4,7 @@ $orange : #FFBE12 $black : #18191C $grey : #747577 $dark-orange: #FD8F01 +$form-fields: #666666 // mixins @mixin resp($media) diff --git a/site/get/contributor-subscriptions.md b/site/get/contributor-subscriptions.md index 30ef707..937b519 100644 --- a/site/get/contributor-subscriptions.md +++ b/site/get/contributor-subscriptions.md @@ -24,16 +24,18 @@ please supply links to posts or recorded talks. track record of posting abo or speaking about it at live events (offline or online). Answering on the forums also counts. -

Apply for a subscription

+
+
+
diff --git a/site/img/forms/bg.svg b/site/img/forms/bg.svg new file mode 100644 index 0000000..89fd785 --- /dev/null +++ b/site/img/forms/bg.svg @@ -0,0 +1,89 @@ + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + \ No newline at end of file -- cgit v1.2.3