Merge pull request #135 from status-im/welcome-page

Added welcome pages
This commit is contained in:
Teemu Patja 2017-11-01 17:35:26 +02:00 committed by GitHub
commit e7c5a683b9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
13 changed files with 589 additions and 8 deletions

View File

@ -222,9 +222,16 @@ a {
margin: 0 auto;
margin-top: 40px;
border-radius: 10px;
box-shadow: 0 10px 18px 0 rgba(122, 135, 142, 0.33);
z-index: 900;
max-width: 1200px; } }
max-width: 1200px; }
.header-welcome {
margin: 0;
border-radius: 0;
box-shadow: 0;
max-width: inherit;
padding-bottom: 0; }
}
.header__inner {
display: -ms-flexbox;
@ -239,7 +246,7 @@ a {
.header__inner {
-ms-flex-direction: row;
flex-direction: row;
padding: 30px 0 0 30px; } }
padding: 40px 0 38px 80px; } }
.header-section {
display: -ms-flexbox;
@ -644,6 +651,134 @@ li.social-link a {
line-height: 20px;
margin: 0 0 15px 0; } }
.welcome-block {
display: -ms-flexbox;
display: flex;
-ms-flex-pack: center;
justify-content: center;
position: relative;
top: -28px; }
.welcome-block__top {
display: -ms-flexbox;
display: flex;
-ms-flex-pack: center;
justify-content: center;
width: 550px;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-align: center;
align-items: center;
text-align: center; }
.welcome-block__image {
width: 126px;
height: 138px;
background-image: url(../img/new-site/welcome@2x.png);
background-size: 126px;
background-position: center;
margin: 0 0 16px 0; }
.welcome-block__top h2 {
font-family: "PostGrotesk-Medium", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
font-size: 25px;
font-weight: 500;
line-height: 1.36;
text-align: center;
color: #42505c; }
.welcome-block__top p {
font-family: "PostGrotesk-Medium", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
font-size: 18px;
line-height: 1.39;
text-align: center;
color: #8d99a4;
margin-top: 24px;
margin-bottom: 10px; }
.welcome-block .button {
width: 200px; }
.welcome-home-link {
display: block;
padding-top: 24px;
padding-bottom: 60px;
margin: 0 auto;
font-family: "PostGrotesk-Medium", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
font-size: 17px;
line-height: 1.41;
text-align: center;
color: #8d99a4; }
.welcome-home-link:hover {
opacity: 1; }
.welcome-actions {
max-width: 723px;
margin: 0 auto;
padding: 24px 32px;
border-radius: 8px;
background-color: #ffffff;
box-shadow: 0 5px 16px 0 rgba(230, 235, 238, 0.68); }
.welcome-action h2 {
font-family: "PostGrotesk-Medium", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
font-size: 18px;
font-weight: 500;
line-height: 1.72;
text-align: left;
color: #42505c; }
.welcome-action p {
opacity: 0.5;
font-family: "PostGrotesk-Medium", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
font-size: 16px;
line-height: 1.5;
text-align: left;
color: #42505c; }
.welcome-icon {
width: 32px;
height: 32px;
padding: 7px;
border-radius: 100px;
border: solid 1px #ecf0f3; }
.welcome-button {
display: block;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
margin-top: 16px;
border-radius: 8px;
background-color: rgba(87, 167, 237, 0.2);
border: solid 1px rgba(199, 206, 209, 0.12);
font-family: "PostGrotesk-Medium", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
font-size: 13px;
font-weight: 500;
line-height: 1.15;
letter-spacing: 1px;
text-align: center;
color: #57a7ed;
padding: 15px; }
.welcome-action:first-of-type .welcome-button {
margin-bottom: 40px; }
@media (max-width: 740px) {
.welcome-block__top {
width: 100%;
padding: 0 32px; }
.welcome-block__top h2 {
font-size: 22px;
line-height: 26px;
padding: 0 24px; }
.welcome-block__top p {
padding: 0 24px; }
.welcome-block__image {
-ms-transform: scale(0.9);
transform: scale(0.9); } }
.cards {
position: relative;
width: 300px;

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 10 KiB

View File

@ -222,9 +222,14 @@ a {
margin: 0 auto;
margin-top: 40px;
border-radius: 10px;
box-shadow: 0 10px 18px 0 rgba(122, 135, 142, 0.33);
z-index: 900;
max-width: 1200px; } }
max-width: 1200px; }
.header-welcome {
margin: 0;
border-radius: 0;
box-shadow: 0;
max-width: inherit;
padding-bottom: 0; } }
.header__inner {
display: -ms-flexbox;
@ -239,7 +244,7 @@ a {
.header__inner {
-ms-flex-direction: row;
flex-direction: row;
padding: 30px 0 0 30px; } }
padding: 40px 0 38px 80px; } }
.header-section {
display: -ms-flexbox;
@ -644,6 +649,134 @@ li.social-link a {
line-height: 20px;
margin: 0 0 15px 0; } }
.welcome-block {
display: -ms-flexbox;
display: flex;
-ms-flex-pack: center;
justify-content: center;
position: relative;
top: -28px; }
.welcome-block__top {
display: -ms-flexbox;
display: flex;
-ms-flex-pack: center;
justify-content: center;
width: 550px;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-align: center;
align-items: center;
text-align: center; }
.welcome-block__image {
width: 126px;
height: 138px;
background-image: url(../img/new-site/welcome@2x.png);
background-size: 126px;
background-position: center;
margin: 0 0 16px 0; }
.welcome-block__top h2 {
font-family: "PostGrotesk-Medium", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
font-size: 25px;
font-weight: 500;
line-height: 1.36;
text-align: center;
color: #42505c; }
.welcome-block__top p {
font-family: "PostGrotesk-Medium", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
font-size: 18px;
line-height: 1.39;
text-align: center;
color: #8d99a4;
margin-top: 24px;
margin-bottom: 10px; }
.welcome-block .button {
width: 200px; }
.welcome-home-link {
display: block;
padding-top: 24px;
padding-bottom: 60px;
margin: 0 auto;
font-family: "PostGrotesk-Medium", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
font-size: 17px;
line-height: 1.41;
text-align: center;
color: #8d99a4; }
.welcome-home-link:hover {
opacity: 1; }
.welcome-actions {
max-width: 723px;
margin: 0 auto;
padding: 24px 32px;
border-radius: 8px;
background-color: #ffffff;
box-shadow: 0 5px 16px 0 rgba(230, 235, 238, 0.68); }
.welcome-action h2 {
font-family: "PostGrotesk-Medium", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
font-size: 18px;
font-weight: 500;
line-height: 1.72;
text-align: left;
color: #42505c; }
.welcome-action p {
opacity: 0.5;
font-family: "PostGrotesk-Medium", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
font-size: 16px;
line-height: 1.5;
text-align: left;
color: #42505c; }
.welcome-icon {
width: 32px;
height: 32px;
padding: 7px;
border-radius: 100px;
border: solid 1px #ecf0f3; }
.welcome-button {
display: block;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
margin-top: 16px;
border-radius: 8px;
background-color: rgba(87, 167, 237, 0.2);
border: solid 1px rgba(199, 206, 209, 0.12);
font-family: "PostGrotesk-Medium", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
font-size: 13px;
font-weight: 500;
line-height: 1.15;
letter-spacing: 1px;
text-align: center;
color: #57a7ed;
padding: 15px; }
.welcome-action:first-of-type .welcome-button {
margin-bottom: 40px; }
@media (max-width: 740px) {
.welcome-block__top {
width: 100%;
padding: 0 32px; }
.welcome-block__top h2 {
font-size: 22px;
line-height: 26px;
padding: 0 24px; }
.welcome-block__top p {
padding: 0 24px; }
.welcome-block__image {
-ms-transform: scale(0.9);
transform: scale(0.9); } }
.cards {
position: relative;
width: 300px;

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 10 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 21 KiB

View File

@ -15,11 +15,17 @@
margin: 0 auto;
margin-top: 40px;
border-radius: 10px;
box-shadow: 0 10px 18px 0 rgba(122, 135, 142, 0.33);
z-index: 900;
max-width: 1200px;
}
.header-welcome {
margin: 0;
border-radius: 0;
box-shadow: 0;
max-width: inherit;
padding-bottom: 0;
}
}
.header__inner {
@ -32,7 +38,7 @@
@media (min-width: 640px) {
.header__inner {
flex-direction: row;
padding: 30px 0 0 30px;
padding: 40px 0 38px 80px;
}
}

View File

@ -3,6 +3,7 @@
@import "page";
@import "welcome";
@import "cards";
@import "actions";
@import "slides";

View File

@ -0,0 +1,141 @@
.welcome-block {
display: flex;
justify-content: center;
position: relative;
top: -28px;
}
.welcome-block__top {
display: flex;
justify-content: center;
width: 550px;
flex-direction: column;
align-items: center;
text-align: center;
}
.welcome-block__image {
width: 126px;
height: 138px;
background-image: url(../img/new-site/welcome@2x.png);
background-size: 126px;
background-position: center;
margin: 0 0 16px 0;
}
.welcome-block__top h2 {
font-family: $PostGroteskMedium;
font-size: 25px;
font-weight: 500;
line-height: 1.36;
text-align: center;
color: #42505c;
}
.welcome-block__top p {
font-family: $PostGroteskMedium;
font-size: 18px;
line-height: 1.39;
text-align: center;
color: #8d99a4;
margin-top: 24px;
margin-bottom: 10px;
}
.welcome-block .button {
width: 200px;
}
.welcome-home-link {
display: block;
padding-top: 24px;
padding-bottom: 60px;
margin: 0 auto;
font-family: $PostGroteskMedium;
font-size: 17px;
line-height: 1.41;
text-align: center;
color: #8d99a4;
}
.welcome-home-link:hover {
opacity: 1
}
.welcome-actions {
max-width: 723px;
margin: 0 auto;
padding: 24px 32px;
border-radius: 8px;
background-color: #ffffff;
box-shadow: 0 5px 16px 0 rgba(230, 235, 238, 0.68);
}
.welcome-action h2 {
font-family: $PostGroteskMedium;
font-size: 18px;
font-weight: 500;
line-height: 1.72;
text-align: left;
color: #42505c;
}
.welcome-action p {
opacity: 0.5;
font-family: $PostGroteskMedium;
font-size: 16px;
line-height: 1.5;
text-align: left;
color: #42505c;
}
.welcome-icon {
width: 32px;
height: 32px;
padding: 7px;
border-radius: 100px;
border: solid 1px #ecf0f3;
}
.welcome-button {
display: block;
width: fit-content;
margin-top: 16px;
border-radius: 8px;
background-color: rgba(87, 167, 237, 0.2);
border: solid 1px rgba(199, 206, 209, 0.12);
font-family: $PostGroteskMedium;
font-size: 13px;
font-weight: 500;
line-height: 1.15;
letter-spacing: 1px;
text-align: center;
color: #57a7ed;
padding: 15px;
}
.welcome-action:first-of-type .welcome-button {
margin-bottom: 40px;
}
@media (max-width: 740px) {
.welcome-block__top {
width: 100%;
padding: 0 32px;
}
.welcome-block__top h2 {
font-size: 22px;
line-height: 26px;
padding: 0 24px;
}
.welcome-block__top p {
padding: 0 24px;
}
.welcome-block__image {
transform: scale(.9);
}
}

View File

@ -0,0 +1,165 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Thanks for signing up — Status Open Bounty</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/png" href="dest/img/new-site/logo-32.png?v=002" sizes="32x32" />
<link rel="icon" type="image/png" href="dest/img/new-site/logo-16.png?v=002" sizes="16x16" />
<link rel="apple-touch-icon" href="dest/img/new-site/apple-touch-icon-1024.png?v=002">
<link rel="apple-touch-icon" sizes="76x76" href="dest/img/new-site/apple-touch-icon-76.png?v=002">
<link rel="apple-touch-icon" sizes="120x120" href="dest/img/new-site/apple-touch-icon-120.png?v=002">
<link rel="apple-touch-icon" sizes="152x152" href="dest/img/new-site/apple-touch-icon-152.png?v=002">
<link rel="apple-touch-icon" sizes="180x180" href="dest/img/new-site/apple-touch-icon-180.png?v=002">
<link rel="mask-icon" href="dest/img/new-site/logo-mask.svg" color="4360DF">
<link rel="shortcut icon" href="/img/favicon.ico" />
<link rel="stylesheet" href="dest/css/main.css?v=002">
</head>
<body>
<div class="container-wrap container-wrap--not-fancy">
<div class="container container--page">
<div class="header header-welcome">
<div class="header__inner">
<div class="header-section header-section--left">
<a class="logo" href="/">
<div class="logo__icon-wrap">
<div class="logo__icon"></div>
</div>
<div class="logo__text">
<span class="logo__title">Status</span>
<span class="logo__subtitle">Open Bounty</span>
</div>
</a>
</div>
<div class="header-section header-section--right">
<div class="nav">
<a class="nav__item nav__item-features" href="#">Features</a>
<a class="nav__item nav__item--external" target="_blank" href="https://status.im/">Status Home</a>
</div>
</div>
</div>
</div>
<div class="welcome-block">
<div class="welcome-block__top">
<div class="welcome-block__image"></div>
<h2>Hello and welcome to Status Open Bounty!</h2>
<p>Thank you for joining our community of committed developers.
Get started now and start getting paid for contributing
to open source projects!</p>
</div>
</div>
<div class="welcome-actions">
<div class="welcome-action">
<img class="welcome-icon" src="dest/img/new-site/icon-gh-24@2x.png" />
<h2>Join the conversation on Riot</h2>
<p>Stay up to date on the latest news, bounties and special programs that only take place within the Status Open Bounty Riot Room</p>
<a href="https://chat.status.im/#/register" class="welcome-button">Join Now</a>
</div>
<div class="welcome-action">
<img class="welcome-icon" src="dest/img/new-site/icon-gh-24@2x.png" />
<h2>Star us on Github</h2>
<p>Help us raise awareness and attract more talented contributors just like you. Star us on Github and help spread the word.</p>
<a href="https://github.com/status-im/status-open-bounty" class="welcome-button">Open Github</a>
</div>
</div>
<a href="/" class="welcome-home-link">Back to Homepage</a>
</div>
</div>
<div class="footer footer--not-fancy">
<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 Research & Development GmbH<br/>Baarerstrasse 10<br/>Zug, Switzerland</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--rt"><a href="https://chat.status.im/#/register" target="_blank"><span class="footer-icon"></span><span class="footer-link-label">Riot</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>
<li class="footer-link footer-link--yt"><a href="https://www.youtube.com/channel/UCFzdJTUdzqyX4e9dOW7UpPQ/" target="_blank"><span class="footer-icon"></span><span class="footer-link-label">YouTube</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>
<li class="footer-link"><a href="https://status.im/jobs.html" target="_blank">Jobs</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>
<script src="dest/js/main.js?v=0002"></script>
<!-- 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');
try {
ga('create', 'UA-79146816-1', 'auto');
ga('send', 'pageview');
} catch (e) {}
</script>
<!-- /Google Analytics -->
<!-- Facebook Pixel Code -->
<script>
!function(f,b,e,v,n,t,s)
{if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};
if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];
s.parentNode.insertBefore(t,s)}(window, document,'script',
'https://connect.facebook.net/en_US/fbevents.js');
fbq('init', '293089407869419');
fbq('track', 'PageView');
</script>
<noscript><img height="1" width="1" style="display:none"
src="https://www.facebook.com/tr?id=293089407869419&ev=PageView&noscript=1"
/></noscript>
<!-- End Facebook Pixel Code -->
</body>
</html>