status-im/open-bounty
2
0
Fork 0
mirror of https://github.com/status-im/open-bounty.git synced 2025-01-24 00:11:14 +00:00
Code Issues Projects Releases Wiki Activity

Add HubSpot form and style

Browse Source
This commit is contained in:
Noman 2017-10-31 03:00:47 -04:00
parent 9846d3f2e9
commit 2966da5593
No known key found for this signature in database
GPG Key ID: ACD1C4A99857525C
3 changed files with 49 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
static_langing_page/index.html
View File

@ -104,54 +104,27 @@
</div>
<div class="action">
<img src="assets/organisations.svg" class="logo-organisations">
<h1>For organizations</h1>
<h2>Find talented developers fast</h2>
<p>
Post bounties, build your team and move your project forward today.
</p>
<img src="assets/organisations.svg" class="logo-organisations">
<h1>For organizations</h1>
<h2>Find talented developers fast</h2>
<p>
Post bounties, build your team and move your project forward today.
</p>
<div class="email-form">
<!--[if lte IE 8]>
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2-legacy.js"></script>
<![endif]-->
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
<script>
function signup() {
console.log("Signing up");
hbspt.forms.create({
portalId: '3954379',
formId: '9a0a26a8-3163-45a8-a933-774de4853609'
});
}
hbspt.forms.create({
css: '',
portalId: '3954379',
formId: 'b6c83d22-0bcf-4cfa-b9df-88fbaa09dee7'
});
</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&amp;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 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>
</form>
<!-- End Mailchimp -->
</div>
<!-- <button onclick="signup()">Sign up for beta</button> -->
</div>
</div>
</div>

11
static_langing_page/src/scss/actions.scss
View File

@ -57,9 +57,8 @@
color: #ffffff;
}
.action button {
width: 240px;
height: 45px;
.action button,
.hs_submit .hs-button {
object-fit: contain;
border-radius: 8px;
background-color: #1e3751;
@ -69,13 +68,15 @@
font-weight: 500;
line-height: 1.15;
letter-spacing: 1px;
padding: 16px 32px;
text-align: center;
text-transform: uppercase;
color: #ffffff;
transition: opacity .2s ease;
}
.action button:hover {
.action button:hover,
.hs_submit .hs-button:hover {
opacity: 0.5;
cursor: pointer;
}
@ -97,4 +98,4 @@
.logo-organisations {
padding-top: 35px;
}
}
}

61
static_langing_page/src/scss/email-form.scss
View File

@ -1,6 +1,5 @@
.email-form {
display: flex;
width: 460px;
position: relative;
}
@ -78,25 +77,23 @@
.email-form__inner {
display: flex;
width: 460px;
position: relative;
}
.email-form__input {
height: 45px;
line-height: 45px;
.email-form .hs_email.hs-form-field label {
display: none;
}
.email-form__input--email {
.email-form__input--email,
.email-form .hs_email.hs-form-field input {
text-align: left;
background-color: #F2F6F8;
color: #49555F;
width: 240px;
padding: 0 15px;
background-color: #4c81b6;
color: #b6cbe1;
padding: 16px 15px 15px 15px;
margin: 0 0 0 0;
font-family: 'PostGrotesk-Book', sans-serif;
box-sizing: border-box;
border-radius: 8px 0 0 8px;
border-radius: 8px;
transition: background-color .2s ease;
font-weight: 400;
@ -121,14 +118,8 @@ input.email-form__input--email:disabled {
}
.email-form__input--email::-webkit-input-placeholder {
color: #AEB5BA;
}
.email-form__input--email::-moz-placeholder {
color: #AEB5BA;
}
.email-form__input--email::-webkit-input-placeholder,
.email-form__input--email::-moz-placeholder,
.email-form__input--email:-ms-input-placeholder {
color: #AEB5BA;
}
@ -137,11 +128,28 @@ input.email-form__input--email:disabled {
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"] {
width: 220px;
flex-shrink: 0;
flex-grow: 0;
border-radius: 0 8px 8px 0;
margin-left: 1em;
border-radius: 8px;
}
.email-form input[type="submit"]:hover {
@ -170,17 +178,6 @@ input.email-form__input--email:disabled {
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 {
width: 240px;
text-align: center;