mirror of
https://github.com/status-im/open-bounty.git
synced 2025-02-03 05:03:38 +00:00
Add HubSpot form and style
This commit is contained in:
parent
9846d3f2e9
commit
2966da5593
@ -110,48 +110,21 @@
|
|||||||
<p>
|
<p>
|
||||||
Post bounties, build your team and move your project forward today.
|
Post bounties, build your team and move your project forward today.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
|
<div class="email-form">
|
||||||
<!--[if lte IE 8]>
|
<!--[if lte IE 8]>
|
||||||
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2-legacy.js"></script>
|
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2-legacy.js"></script>
|
||||||
<![endif]-->
|
<![endif]-->
|
||||||
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
|
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
|
||||||
<script>
|
<script>
|
||||||
function signup() {
|
|
||||||
console.log("Signing up");
|
|
||||||
hbspt.forms.create({
|
hbspt.forms.create({
|
||||||
|
css: '',
|
||||||
portalId: '3954379',
|
portalId: '3954379',
|
||||||
formId: '9a0a26a8-3163-45a8-a933-774de4853609'
|
formId: 'b6c83d22-0bcf-4cfa-b9df-88fbaa09dee7'
|
||||||
});
|
});
|
||||||
}
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
||||||
<!-- HACK(oskarth): Mailchimp - should probably be Hubspot but we can hack this with JS
|
|
||||||
Also adds ad hoc margin-left to action and border radius styles.
|
|
||||||
TODO Add background style.
|
|
||||||
|
|
||||||
-->
|
|
||||||
<div class="email-form">
|
|
||||||
<!-- XXX: Mailchimp -->
|
|
||||||
<form action="//status.us13.list-manage.com/subscribe/post?u=d0c1a0be2adff281b52e27a7f&id=09e2d9ae07" method="post" name="mc-embedded-subscribe-form" id="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate="novalidate" _lpchecked="1">
|
|
||||||
<div class="email-form__inner">
|
|
||||||
<input type="email" value="" name="EMAIL" class="required email-input mce-EMAIL email-form__input email-form__input--email" placeholder="Enter your email" aria-required="true" style="border-bottom-right-radius: .5em; border-top-right-radius: .5em;">
|
|
||||||
|
|
||||||
<button style="margin-left: 1em;" onclick="signup()">Sign up for beta</button>
|
|
||||||
<!-- <input type="submit" value="GET EARLY ACCESS" name="subscribe" class="button email-form__input email-form__input--sumbit mc-embedded-subscribe button email-button">
|
|
||||||
-->
|
|
||||||
<div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_d0c1a0be2adff281b52e27a7f_09e2d9ae07" tabindex="-1" value=""></div>
|
|
||||||
</div>
|
</div>
|
||||||
<div id="mce-responses" class="email-form__responces">
|
|
||||||
<div class="response email-form__error-message" id="mce-error-response"></div>
|
|
||||||
<div class="email-form__success-message response" id="mce-success-response"></div>
|
|
||||||
</div>
|
</div>
|
||||||
</form>
|
|
||||||
<!-- End Mailchimp -->
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- <button onclick="signup()">Sign up for beta</button> -->
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
@ -57,9 +57,8 @@
|
|||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.action button {
|
.action button,
|
||||||
width: 240px;
|
.hs_submit .hs-button {
|
||||||
height: 45px;
|
|
||||||
object-fit: contain;
|
object-fit: contain;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
background-color: #1e3751;
|
background-color: #1e3751;
|
||||||
@ -69,13 +68,15 @@
|
|||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
line-height: 1.15;
|
line-height: 1.15;
|
||||||
letter-spacing: 1px;
|
letter-spacing: 1px;
|
||||||
|
padding: 16px 32px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
transition: opacity .2s ease;
|
transition: opacity .2s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
.action button:hover {
|
.action button:hover,
|
||||||
|
.hs_submit .hs-button:hover {
|
||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
@ -1,6 +1,5 @@
|
|||||||
.email-form {
|
.email-form {
|
||||||
display: flex;
|
display: flex;
|
||||||
width: 460px;
|
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -78,25 +77,23 @@
|
|||||||
|
|
||||||
.email-form__inner {
|
.email-form__inner {
|
||||||
display: flex;
|
display: flex;
|
||||||
width: 460px;
|
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
.email-form__input {
|
.email-form .hs_email.hs-form-field label {
|
||||||
height: 45px;
|
display: none;
|
||||||
line-height: 45px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.email-form__input--email {
|
.email-form__input--email,
|
||||||
|
.email-form .hs_email.hs-form-field input {
|
||||||
text-align: left;
|
text-align: left;
|
||||||
background-color: #F2F6F8;
|
background-color: #4c81b6;
|
||||||
color: #49555F;
|
color: #b6cbe1;
|
||||||
width: 240px;
|
padding: 16px 15px 15px 15px;
|
||||||
padding: 0 15px;
|
|
||||||
margin: 0 0 0 0;
|
margin: 0 0 0 0;
|
||||||
font-family: 'PostGrotesk-Book', sans-serif;
|
font-family: 'PostGrotesk-Book', sans-serif;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
border-radius: 8px 0 0 8px;
|
border-radius: 8px;
|
||||||
|
|
||||||
transition: background-color .2s ease;
|
transition: background-color .2s ease;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
@ -121,14 +118,8 @@ input.email-form__input--email:disabled {
|
|||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.email-form__input--email::-webkit-input-placeholder {
|
.email-form__input--email::-webkit-input-placeholder,
|
||||||
color: #AEB5BA;
|
.email-form__input--email::-moz-placeholder,
|
||||||
}
|
|
||||||
|
|
||||||
.email-form__input--email::-moz-placeholder {
|
|
||||||
color: #AEB5BA;
|
|
||||||
}
|
|
||||||
|
|
||||||
.email-form__input--email:-ms-input-placeholder {
|
.email-form__input--email:-ms-input-placeholder {
|
||||||
color: #AEB5BA;
|
color: #AEB5BA;
|
||||||
}
|
}
|
||||||
@ -137,11 +128,28 @@ input.email-form__input--email:disabled {
|
|||||||
color: rgba(255, 255, 255, .6);
|
color: rgba(255, 255, 255, .6);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.email-form .hbspt-form {
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
& > .submitted-message {
|
||||||
|
color: #ffffff;
|
||||||
|
opacity: 0.6;
|
||||||
|
}
|
||||||
|
|
||||||
|
& > form > div {
|
||||||
|
display: inline-block;
|
||||||
|
|
||||||
|
& > div {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.email-form input[type="submit"] {
|
.email-form input[type="submit"] {
|
||||||
width: 220px;
|
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
flex-grow: 0;
|
flex-grow: 0;
|
||||||
border-radius: 0 8px 8px 0;
|
margin-left: 1em;
|
||||||
|
border-radius: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.email-form input[type="submit"]:hover {
|
.email-form input[type="submit"]:hover {
|
||||||
@ -170,17 +178,6 @@ input.email-form__input--email:disabled {
|
|||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
|
|
||||||
.email-form__input--email {
|
|
||||||
width: 240px;
|
|
||||||
border-radius: 8px;
|
|
||||||
margin: 0 0 16px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.email-form input[type="submit"] {
|
|
||||||
width: 240px;
|
|
||||||
border-radius: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.email-form__responces {
|
.email-form__responces {
|
||||||
width: 240px;
|
width: 240px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
Loading…
x
Reference in New Issue
Block a user