added success and JObs page

This commit is contained in:
Andrei Mironov 2017-03-15 19:17:24 +03:00
parent 4322b6be79
commit 72188b5f16
12 changed files with 498 additions and 76 deletions

View File

@ -73,6 +73,7 @@ gulp.task('dapps', function() {
.pipe(gulp.dest('build/dapps'))
})
gulp.task('watch', ['css', 'browserify', 'browser-sync'], function() {
gulp.watch('src/scss/**/*.+(sass|scss)', ['css'])
gulp.watch('src/*.html', browserSync.reload)

View File

@ -30,6 +30,7 @@
"d3-ease": "^1.0.2",
"d3-interpolate": "^1.1.2",
"d3-scale": "^1.0.4",
"gulp-file-include": "^1.0.0",
"lodash.assign": "^4.2.0",
"lodash.clone": "^4.0.1",
"lodash.foreach": "^4.0.0",

View File

@ -638,8 +638,9 @@ li.social-link a {
background: white;
border-radius: 8px; }
.page__content.page__content--success {
padding: 160px 40px;
.page__content.page__content--centered {
max-width: 100%;
padding: 50px 160px;
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
@ -669,12 +670,101 @@ li.social-link a {
.page__content p strong {
font-family: "PostGrotesk-Medium", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; }
.page__content.page__content--success .page__title {
.page__content.page__content--centered .page__title {
max-width: 500px; }
.page__content.page__content--success .page__text {
.page__content.page__content--centered .page__text {
max-width: 500px; }
.page h3 {
font-family: "PostGrotesk-Medium", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
font-size: 22px;
margin: 32px 0 8px 0; }
.page h5 {
font-size: 15px;
opacity: 1;
padding: 16px; }
.page__social {
width: 100%;
padding: 48px 0; }
.page__social-buttons {
width: 100%;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap; }
.page__social-button-wrap {
-ms-flex-preferred-size: 33.3%;
flex-basis: 33.3%;
-ms-flex-negative: 1;
flex-shrink: 1;
-ms-flex-positive: 1;
flex-grow: 1;
margin: 12px;
position: relative;
border-radius: 8px;
border: 1px solid #e9eaf4;
text-align: center;
box-shadow: 0 2px 5px 0 rgba(71, 91, 106, 0.12);
transition: box-shadow .2s ease; }
.page__social-button-wrap:first-child {
margin-left: 0; }
.page__social-button-wrap:last-child {
margin-right: 0; }
.page__social-button-wrap:hover {
box-shadow: 0 4px 10px 0 rgba(71, 91, 106, 0.16); }
.page__social-button {
padding: 24px;
height: 92px;
overflow: hidden; }
.big-button-wrap {
margin: 48px 0 0 0; }
.button.button--big {
height: 56px;
line-height: 56px;
font-size: 15px;
letter-spacing: 1.2px; }
.button.button--secondary.button--page {
display: inline-block;
padding: 0 40px;
background-color: #4A5C69;
color: white; }
.button.button--secondary.button--page.button--page--slack {
background-color: #E3306D; }
.button.button--secondary.button--page.button--page--wiki {
background-color: #4A55BF; }
.button.button--secondary.button--page:hover {
opacity: .8;
background-color: #4A5C69; }
.button.button--secondary.button--page.button--page--slack:hover {
opacity: .8;
background-color: #E3306D; }
.button.button--secondary.button--page.button--page--wiki:hover {
opacity: .8;
background-color: #4A55BF; }
.page__social-button-label {
display: block;
text-align: center;
opacity: .6;
padding: 16px; }
.page__footer {
position: absolute;
bottom: 0;
@ -709,6 +799,18 @@ li.social-link a {
margin: 0 0 30px 0; } }
@media (max-width: 1140px) {
.page__social {
padding: 16px 0; }
.page__social-buttons {
-ms-flex-wrap: wrap;
flex-wrap: wrap; }
.page__social-button-wrap {
width: 100%;
-ms-flex-preferred-size: 100%;
flex-basis: 100%; }
.page__social-button-wrap {
margin-left: 0;
margin-right: 0; }
.page {
margin: 20px 20px 0 20px; }
.page__content-wrap {
@ -723,13 +825,13 @@ li.social-link a {
.page__content-wrap {
top: -20px;
margin: 0 0 20px 0; }
.page__content.page__content--success {
.page__content.page__content--centered {
padding: 100px 20px; } }
@media (max-width: 767px) {
.page {
margin: 0; }
.page__content.page__content--success,
.page__content.page__content--centered,
.page__content {
padding: 40px 0 80px 0; }
.page__content-wrap {
@ -1143,27 +1245,23 @@ input.email-form__input--email:disabled {
box-shadow: 0px -2px 18px 0px rgba(72, 89, 102, 0.25);
border-radius: 10px; }
.more-button {
font-family: "PostGrotesk-Medium", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
text-transform: uppercase;
line-height: 15px;
text-align: center;
transform: translate3d(-50%, 0, 0);
padding: 14px 35px 14px;
font-size: 13px;
letter-spacing: 1px;
.button.button--secondary {
color: #6370CA;
background-color: rgba(99, 112, 202, 0.1);
border-radius: 10px;
box-shadow: none; }
.button.button--more {
padding: 0 35px;
transform: translate3d(-50%, 0, 0);
position: absolute;
bottom: 30px;
left: 50%;
transition: transform .2s ease, background-color .2s ease; }
.more-button:hover {
.button.button--secondary:hover {
background-color: rgba(99, 112, 202, 0.2); }
.more-button:active {
.button.button--more:active {
transform: translate3d(-50%, 0, 0) scale(0.99); }
.features__item {
@ -1423,7 +1521,7 @@ input.email-form__input--email:disabled {
border-bottom: 1px solid #EEF2F5; }
.features__item:nth-child(3) .features-text {
border-bottom: none; }
.more-button {
.button.button--more {
display: none; } }
@keyframes shakeIt {

View File

@ -144,7 +144,7 @@
<p class="features__description">Discover nearby Status users to&nbsp;exchange goods and&nbsp;services.</p>
</div>
</div>
<a class="more-button" href="#">Learn more</a>
<a class="button button--secondary button--more" href="#">Learn more</a>
</div>
</div>
</div>
@ -335,18 +335,16 @@
</div>
</div>
</div>
<div class="footer">
<div class="footer-inner">
<div class="footer-logo-wrap">
<div class="footer-logo-wrap__inner">
<div class="footer-logo"></div>
<div class="footer-address"> Status Holdings Pte.&nbsp;Ltd.<br/>22&nbsp;Sin&nbsp;Ming&nbsp;Lane<br/>Singapore</div>
</div>
</div>
<div class="footer-table">
<div class="footer-table__column">
<h4 class="footer-header">Social links</h4>
<ul class="footer-list">
@ -357,7 +355,6 @@
<li class="footer-link footer-link--rd"><a href="https://www.reddit.com/r/statusim/" target="_blank"><span class="footer-icon"></span><span class="footer-link-label">Reddit</span></a></li>
</ul>
</div>
<div class="footer-table__column">
<h4 class="footer-header">More</h4>
<ul class="footer-list">
@ -365,7 +362,6 @@
<li class="footer-link"><a href="https://blog.status.im/?gi=73d6676925e9" target="_blank">Status Blog</a></li>
</ul>
</div>
<div class="footer-table__column">
<h4 class="footer-header">Language</h4>
<ul class="footer-list">
@ -376,11 +372,10 @@
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="js/app.js?v=44d5354"></script>
<script src="js/mc-validate.js"></script>

183
src/jobs.html Normal file
View File

@ -0,0 +1,183 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Status | The Mobile Ethereum Client</title>
<meta name="description" content="Status is an interface to access Ethereum, built for Android & iOS. Enjoy encrypted messaging, a cryptocurrency wallet, and seamless access to DApps.">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/png" href="img/new-site/logo-32.png" sizes="32x32" />
<link rel="icon" type="image/png" href="img/new-site/logo-16.png" sizes="16x16" />
<link rel="apple-touch-icon" href="img/new-site/apple-touch-icon-1024.png">
<link rel="apple-touch-icon" sizes="76x76" href="img/new-site/apple-touch-icon-76.png">
<link rel="apple-touch-icon" sizes="120x120" href="img/new-site/apple-touch-icon-120.png">
<link rel="apple-touch-icon" sizes="152x152" href="img/new-site/apple-touch-icon-152.png">
<link rel="apple-touch-icon" sizes="180x180" href="img/new-site/apple-touch-icon-180.png">
<link rel="mask-icon" href="img/new-site/logo-mask.svg" color="4360DF">
<!-- favicon.ico in the root directory -->
<link rel="stylesheet" href="css/main.css?v=16d1099">
<meta property="og:title" content="Status, a Mobile Ethereum OS" />
</head>
<body>
<div class="container">
<div class="page">
<div class="header-wrap">
<div class="header">
<div class="header__inner">
<a class="logo" href="/">
<span class="logo__icon"></span>
<div class="logo_text">
<span class="logo__title">Status</span>
<span class="logo__description"><span>A </span>Mobile Ethereum OS</span>
</div>
</a>
<div class="nav">
<a class="nav__item nav__item--blog" target="_blank" href="https://blog.status.im/">Blog</a>
<a class="nav__item nav__item--features" href="/">About</a>
</div>
<div class="shares">
<ul class="social-links">
<li class="social-link social-link--fb"><a href="https://www.facebook.com/ethstatus" target="_blank"></a></li>
<li class="social-link social-link--tw"><a href="https://twitter.com/ethstatus" target="_blank"></a></li>
<li class="social-link social-link--sl"><a href="http://slack.status.im/" target="_blank"></a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="page__content-wrap">
<div class="page__content">
<h2 class="page__title">Love Clojure? Status is looking for Contributors.</h2>
<div class="page__text">
<p class="page__subheader">Were building an open source messaging platform for the decentralized web.<br/>Powered by Ethereum.</p>
<h3>Welcome to Web 3.0.</h3>
<p>With the new suite of protocols Ethereum has introduced, we have a clear path towards a more democratic internet where we can communicate securely without fear of institutional surveillance, where we can trade freely without borders, and controlling your own wealth without the dependency on intermediaries or centralized servers charging outrageously high fees.</p>
<h3>Status is an interface for the decentralized web.</h3>
<p>Were observing an emerging ecosystem of decentralized applications built on top of Ethereums protocols, and Status aims to provide an interface to access them. You can think of Status as a browser for the decentralized web, that uses messaging as a platform, akin to an open source, peer-to-peer version of WeChat.</p>
<h3>The technology</h3>
<p>Status is already in alpha. Were built using re-natal + re-frame + cljs + golang. Its communication protocol uses an Ethereum sub-protocol called SHH/Whisper (not to be confused with Signal) which is an identity-based encrypted messaging protocol with dark routing. You can learn more about it in this presentation.</p>
<p>In Ethereum (and Status), there is a concept called 'web3', files are stored using SWARM (a kademlia-like decentralised file storage solution) and 'server-side logic' is done using Smart Contracts and on the blockchain. This allows us to create trust-less, censorship resistant systems.</p>
<h3>Still interested? Come Get Involved!</h3>
<p>As an open sourceproject anyone is free to contribute to Status. Regardless of your experience or background all contributors are welcome to join our community and help us shape the direction of the project:</p>
</div>
<div class="page__social">
<div class="page__social-buttons">
<div class="page__social-button-wrap page__social-button-wrap--gh">
<div class="page__social-button page__social-button--github"><iframe src="https://ghbtns.com/github-btn.html?user=status-im&repo=status-react&type=star&count=true&size=large" frameborder="0" scrolling="0" width="160px" height="30px"></iframe></div>
<span class="page__social-button-label">Star us on Github to raise awareness</span>
</div>
<div class="page__social-button-wrap page__social-button-wrap--sl">
<div class="page__social-button"><a href="http://slack.status.im" class="button button--secondary button--page button--page--slack">Slack</a></div>
<span class="page__social-button-label">Come say hi, and meet our team of contributors</span>
</div>
<div class="page__social-button-wrap page__social-button-wrap--wk">
<div class="page__social-button"><a href="https://wiki.status.im/getting-started/mission-and-core-values/" class="button button--secondary button--page button--page--wiki">Wiki</a></div>
<span class="page__social-button-label">Read about Our Mission and Values</span>
</div>
</div>
</div>
<div class="page__text">
<h3>Join Us Full Time</h3>
<p>In addition to our wonderful community of part-time contributors, we have a full-time team of 8, and are looking to hire full-time Core Contributors who are passionate about smart contracts, crypto-currencies and are fluent in Lisp-dialect. Experience with ClojureScript and re-frame is ideal. You will be able to work remotely from anywhere in the world, and salaries competitive. (> pull-requests CVs)</p>
<div class="big-button-wrap">
<a class="button button--big button--secondary" href="https://status-platform.workable.com/jobs/406019/candidates/new">Apply as a Core Contributor</a>
</div>
</div>
</div>
<div class="page__footer">
<a class="page__footer-link" href="/">Learn more about Status</a>
</div>
</div>
</div>
</div>
<div class="footer footer--page">
<div class="footer-inner">
<div class="footer-logo-wrap">
<div class="footer-logo-wrap__inner">
<div class="footer-logo"></div>
<div class="footer-address"> Status Holdings Pte.&nbsp;Ltd.<br/>22&nbsp;Sin&nbsp;Ming&nbsp;Lane<br/>Singapore</div>
</div>
</div>
<div class="footer-table">
<div class="footer-table__column">
<h4 class="footer-header">Social links</h4>
<ul class="footer-list">
<li class="footer-link footer-link--fb"><a href="https://www.facebook.com/ethstatus" target="_blank"><span class="footer-icon"></span><span class="footer-link-label">Facebook</span></a></li>
<li class="footer-link footer-link--tw"><a href="https://twitter.com/ethstatus" target="_blank"><span class="footer-icon"></span><span class="footer-link-label">Twitter</span></a></li>
<li class="footer-link footer-link--sl"><a href="http://slack.status.im/" target="_blank"><span class="footer-icon"></span><span class="footer-link-label">Slack</span></a></li>
<li class="footer-link footer-link--gh"><a href="https://github.com/status-im" target="_blank"><span class="footer-icon"></span><span class="footer-link-label">Github</span></a></li>
<li class="footer-link footer-link--rd"><a href="https://www.reddit.com/r/statusim/" target="_blank"><span class="footer-icon"></span><span class="footer-link-label">Reddit</span></a></li>
</ul>
</div>
<div class="footer-table__column">
<h4 class="footer-header">More</h4>
<ul class="footer-list">
<li class="footer-link"><a href="https://wiki.status.im" target="_blank">Status Wiki</a></li>
<li class="footer-link"><a href="https://blog.status.im/?gi=73d6676925e9" target="_blank">Status Blog</a></li>
</ul>
</div>
<div class="footer-table__column">
<h4 class="footer-header">Language</h4>
<ul class="footer-list">
<li class="footer-link">
<select class="language-switcher" name="lang">
<option value="en">English</option>
</select>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- Google Analytics -->
<script>
(function(i, s, o, g, r, a, m) {
i['GoogleAnalyticsObject'] = r;
i[r] = i[r] || function() {
(i[r].q = i[r].q || []).push(arguments)
}, i[r].l = 1 * new Date();
a = s.createElement(o),
m = s.getElementsByTagName(o)[0];
a.async = 1;
a.src = g;
m.parentNode.insertBefore(a, m)
})(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');
ga('create', 'UA-79146816-1', 'auto');
ga('send', 'pageview');
</script>
<!-- /Google Analytics -->
<!-- Heap Analytics -->
<script type="text/javascript">
window.heap=window.heap||[],heap.load=function(e,t){window.heap.appid=e,window.heap.config=t=t||{};var r=t.forceSSL||"https:"===document.location.protocol,a=document.createElement("script");a.type="text/javascript",a.async=!0,a.src=(r?"https:":"http:")+"//cdn.heapanalytics.com/js/heap-"+e+".js";var n=document.getElementsByTagName("script")[0];n.parentNode.insertBefore(a,n);for(var o=function(e){return function(){heap.push([e].concat(Array.prototype.slice.call(arguments,0)))}},p=["addEventProperties","addUserProperties","clearEventProperties","identify","removeEventProperty","setEventProperties","track","unsetEventProperty"],c=0;c<p.length;c++)heap[p[c]]=o(p[c])};
heap.load("1816593697");
</script>
<!-- /Heap Analytics -->
<!-- Twitter buttons -->
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
<!-- /Twitter buttons -->
<!-- Optimizely -->
<script src="https://cdn.optimizely.com/js/7577170144.js"></script>
<!-- /Optimizely -->
</body>
</html>

View File

@ -9970,7 +9970,7 @@ var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol
hideCookiePopup();
}
document.querySelectorAll(".more-button")[0].addEventListener('click', function (event) {
document.querySelectorAll(".button--more")[0].addEventListener('click', function (event) {
animateScroll(slideTwo, 600, "easeInOutCubic", 0);
event.preventDefault();
});

View File

@ -18,7 +18,7 @@ if (statusCookiePolicyAccepted == "accepted") {
hideCookiePopup()
}
document.querySelectorAll(".more-button")[0].addEventListener('click', function(event){
document.querySelectorAll(".button--more")[0].addEventListener('click', function(event){
animateScroll(slideTwo, 600, "easeInOutCubic", 0)
event.preventDefault()
})

View File

@ -69,16 +69,13 @@
</div>
<div class="footer footer--page">
<div class="footer-inner">
<div class="footer-logo-wrap">
<div class="footer-logo-wrap__inner">
<div class="footer-logo"></div>
<div class="footer-address"> Status Holdings Pte.&nbsp;Ltd.<br/>22&nbsp;Sin&nbsp;Ming&nbsp;Lane<br/>Singapore</div>
</div>
</div>
<div class="footer-table">
<div class="footer-table__column">
<h4 class="footer-header">Social links</h4>
<ul class="footer-list">
@ -89,7 +86,6 @@
<li class="footer-link footer-link--rd"><a href="https://www.reddit.com/r/statusim/" target="_blank"><span class="footer-icon"></span><span class="footer-link-label">Reddit</span></a></li>
</ul>
</div>
<div class="footer-table__column">
<h4 class="footer-header">More</h4>
<ul class="footer-list">
@ -97,7 +93,6 @@
<li class="footer-link"><a href="https://blog.status.im/?gi=73d6676925e9" target="_blank">Status Blog</a></li>
</ul>
</div>
<div class="footer-table__column">
<h4 class="footer-header">Language</h4>
<ul class="footer-list">
@ -108,9 +103,7 @@
</li>
</ul>
</div>
</div>
</div>
</div>

View File

@ -68,16 +68,13 @@
</div>
<div class="footer footer--page">
<div class="footer-inner">
<div class="footer-logo-wrap">
<div class="footer-logo-wrap__inner">
<div class="footer-logo"></div>
<div class="footer-address"> Status Holdings Pte.&nbsp;Ltd.<br/>22&nbsp;Sin&nbsp;Ming&nbsp;Lane<br/>Singapore</div>
</div>
</div>
<div class="footer-table">
<div class="footer-table__column">
<h4 class="footer-header">Social links</h4>
<ul class="footer-list">
@ -88,7 +85,6 @@
<li class="footer-link footer-link--rd"><a href="https://www.reddit.com/r/statusim/" target="_blank"><span class="footer-icon"></span><span class="footer-link-label">Reddit</span></a></li>
</ul>
</div>
<div class="footer-table__column">
<h4 class="footer-header">More</h4>
<ul class="footer-list">
@ -96,7 +92,6 @@
<li class="footer-link"><a href="https://blog.status.im/?gi=73d6676925e9" target="_blank">Status Blog</a></li>
</ul>
</div>
<div class="footer-table__column">
<h4 class="footer-header">Language</h4>
<ul class="footer-list">
@ -107,11 +102,11 @@
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Google Analytics -->
<script>
(function(i, s, o, g, r, a, m) {

View File

@ -26,15 +26,15 @@
border-radius: 8px;
}
.page__content.page__content--success {
padding: 160px 40px;
.page__content.page__content--centered {
max-width: 100%;
padding: 50px 160px;
display: flex;
align-items: center;
flex-direction: column;
text-align: center;
}
.page__title {
font-family:$PostGroteskMedium;
font-size: 24px;
@ -61,14 +61,121 @@
font-family: $PostGroteskMedium;
}
.page__content.page__content--success .page__title {
.page__content.page__content--centered .page__title {
max-width: 500px;
}
.page__content.page__content--success .page__text {
.page__content.page__content--centered .page__text {
max-width: 500px;
}
.page h3 {
font-family: $PostGroteskMedium;
font-size: 22px;
margin: 32px 0 8px 0;
}
.page h5 {
font-size: 15px;
opacity: 1;
padding: 16px;
}
.page__social {
width: 100%;
padding: 48px 0
}
.page__social-buttons {
width: 100%;
display: flex;
flex-wrap: nowrap;
}
.page__social-button-wrap {
flex-basis: 33.3%;
flex-shrink: 1;
flex-grow: 1;
margin: 12px;
position: relative;
//background-color: $colorBg;
border-radius: 8px;
border: 1px solid rgba(233, 234, 244, 1);
text-align: center;
box-shadow: 0 2px 5px 0 rgba(71,91,106,0.12);
transition: box-shadow .2s ease;
}
.page__social-button-wrap:first-child {
margin-left: 0;
}
.page__social-button-wrap:last-child {
margin-right: 0;
}
.page__social-button-wrap:hover {
box-shadow: 0 4px 10px 0 rgba(71,91,106,0.16);
}
.page__social-button {
padding: 24px;
height: 92px;
overflow: hidden;
}
.big-button-wrap {
margin: 48px 0 0 0;
}
.button.button--big {
height: 56px;
line-height: 56px;
font-size: 15px;
letter-spacing: 1.2px
}
.page__social-button.page__social-button--github {
//margin: 0 0 0 30px;
}
.button.button--secondary.button--page {
display: inline-block;
padding: 0 40px;
background-color: #4A5C69;
color: $colorWhite
}
.button.button--secondary.button--page.button--page--slack {
background-color: #E3306D
}
.button.button--secondary.button--page.button--page--wiki {
background-color: #4A55BF
}
.button.button--secondary.button--page:hover {
opacity: .8;
background-color: #4A5C69;
}
.button.button--secondary.button--page.button--page--slack:hover {
opacity: .8;
background-color: #E3306D;
}
.button.button--secondary.button--page.button--page--wiki:hover {
opacity: .8;
background-color: #4A55BF;
}
.page__social-button-label {
display: block;
text-align: center;
opacity: .6;
padding: 16px;
}
.page__footer {
position: absolute;
bottom: 0;
@ -109,6 +216,25 @@
@media (max-width: 1140px) {
.page__social {
padding: 16px 0;
}
.page__social-buttons {
flex-wrap: wrap;
}
.page__social-button-wrap {
width: 100%;
flex-basis: 100%;
}
.page__social-button-wrap {
margin-left: 0;
margin-right: 0
}
.page {
margin: 20px 20px 0 20px;
}
@ -121,6 +247,8 @@
width: auto;
}
}
@media (max-width: 840px) {
@ -135,7 +263,7 @@
margin: 0 0 20px 0;
}
.page__content.page__content--success {
.page__content.page__content--centered {
padding: 100px 20px;
}
}
@ -146,7 +274,7 @@
margin: 0;
}
.page__content.page__content--success,
.page__content.page__content--centered,
.page__content {
padding: 40px 0 80px 0;
}

View File

@ -313,29 +313,26 @@ input.email-form__input--email:disabled {
// transform: translate3d(0, 0, 0);
// }
.more-button {
font-family:$PostGroteskMedium;
text-transform: uppercase;
line-height: 15px;
text-align: center;
transform: translate3d(-50%, 0, 0);
padding: 14px 35px 14px;
font-size: 13px;
letter-spacing: 1px;
.button.button--secondary {
color: #6370CA;
background-color: rgba(99, 112, 202, .1);
border-radius: 10px;
box-shadow: none;
}
.button.button--more {
padding: 0 35px;
transform: translate3d(-50%, 0, 0);
position: absolute;
bottom: 30px;
left: 50%;
transition: transform .2s ease, background-color .2s ease;
}
.more-button:hover {
.button.button--secondary:hover {
background-color: rgba(99, 112, 202, .2);
}
.more-button:active {
.button.button--more:active {
transform: translate3d(-50%, 0, 0) scale(.99)
}
@ -739,7 +736,7 @@ input.email-form__input--email:disabled {
border-bottom: none;
}
.more-button {
.button.button--more {
display: none;
}
}

View File

@ -54,17 +54,53 @@
</div>
<div class="page__content-wrap">
<div class="page__content page__content--success">
<h2 class="page__title">Youve been added to the Waitlist.<br />Could you help us spread the word?</h2>
<div class="page__content page__content--centered">
<h2 class="page__title">Welcome to the Status Community</h2>
<div class="page__text">
<p class="page__subheader">Please help support our open source project with a tweet, or&nbsp;follow us to stay updated on our progress:</p>
<p class="page__subheader">Get involved and lets shape the future of the decentralized&nbsp;web&nbsp;together</p>
</div>
<div class="page__socilal-buttons">
<a href="https://twitter.com/share" class="twitter-share-button" data-show-count="false" data-text="Check out Status (@ethstatus) - an open source project that will bring Ethereum to Android and iOS!" data-url="https://status.im/" data-size="large">Tweet</a>
<a href="https://twitter.com/ethstatus" class="twitter-follow-button" data-size="large" data-show-screen-name="false" data-show-count="false">Follow @ethstatus</a>
<div class="page__social">
<h5>Start with simple tasks to help grow our community</h5>
<div class="page__social-buttons">
<div class="page__social-button-wrap page__social-button-wrap--tw">
<div class="page__social-button"><a href="https://twitter.com/ethstatus" class="twitter-follow-button" data-size="large" data-show-screen-name="false" data-show-count="false">Follow @ethstatus</a></div>
<span class="page__social-button-label">Connect with Status and follow us on&nbsp;Twitter</span>
</div>
<div class="page__social-button-wrap page__social-button-wrap--gh">
<div class="page__social-button page__social-button--github"><iframe src="https://ghbtns.com/github-btn.html?user=status-im&repo=status-react&type=star&count=true&size=large" frameborder="0" scrolling="0" width="160px" height="30px"></iframe></div>
<span class="page__social-button-label">Star us on Github to raise awareness</span>
</div>
<div class="page__social-button-wrap page__social-button-wrap--fb">
<div class="page__social-button"><iframe src="https://www.facebook.com/plugins/like.php?href=https%3A%2F%2Fwww.facebook.com%2Fethstatus&width=63&layout=button&action=like&size=large&show_faces=true&share=false&height=65&appId" width="63" height="65" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe></div>
<span class="page__social-button-label">Follow our progress directly from Facebook</span>
</div>
</div>
</div>
<div class="page__social">
<h5>Or try something slightly more challenging</h5>
<div class="page__social-buttons">
<div class="page__social-button-wrap page__social-button-wrap--sl">
<div class="page__social-button"><a href="http://slack.status.im" class="button button--secondary button--page button--page--slack">Slack</a></div>
<span class="page__social-button-label">Join the Conversation on Slack</span>
</div>
<div class="page__social-button-wrap page__social-button-wrap--dc">
<div class="page__social-button"><a href=" https://wiki.status.im/contributing/development/introduction/" class="button button--secondary button--page button--page--docs">Docs</a></div>
<span class="page__social-button-label">Contribute to Our Codebase</span>
</div>
<div class="page__social-button-wrap page__social-button-wrap--wk">
<div class="page__social-button"><a href="https://wiki.status.im/getting-started/mission-and-core-values/" class="button button--secondary button--page button--page--wiki">Wiki</a></div>
<span class="page__social-button-label">Read about Our Mission and Values</span>
</div>
</div>
</div>
</div>
<div class="page__footer">
<a class="page__footer-link" href="http://slack.status.im/">Learn more about Status</a>
</div>
@ -73,16 +109,13 @@
</div>
<div class="footer footer--page">
<div class="footer-inner">
<div class="footer-logo-wrap">
<div class="footer-logo-wrap__inner">
<div class="footer-logo"></div>
<div class="footer-address"> Status Holdings Pte.&nbsp;Ltd.<br/>22&nbsp;Sin&nbsp;Ming&nbsp;Lane<br/>Singapore</div>
</div>
</div>
<div class="footer-table">
<div class="footer-table__column">
<h4 class="footer-header">Social links</h4>
<ul class="footer-list">
@ -93,7 +126,6 @@
<li class="footer-link footer-link--rd"><a href="https://www.reddit.com/r/statusim/" target="_blank"><span class="footer-icon"></span><span class="footer-link-label">Reddit</span></a></li>
</ul>
</div>
<div class="footer-table__column">
<h4 class="footer-header">More</h4>
<ul class="footer-list">
@ -101,7 +133,6 @@
<li class="footer-link"><a href="https://blog.status.im/?gi=73d6676925e9" target="_blank">Status Blog</a></li>
</ul>
</div>
<div class="footer-table__column">
<h4 class="footer-header">Language</h4>
<ul class="footer-list">
@ -112,11 +143,11 @@
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Google Analytics -->
<script>
(function(i, s, o, g, r, a, m) {