status-im
/
design.status.im
mirror of https://github.com/status-im/design.status.im.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

some adjustments

This commit is contained in:
andmironov 2018-04-29 18:45:23 +03:00
parent 8975154b60
commit 6ed72ab675
8 changed files with 446 additions and 217 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
.DS_Store vendored
View File

Binary file not shown.

221
css/main.css
View File

@ -1,4 +1,3 @@
@charset "UTF-8";
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
@ -579,7 +578,7 @@ select[multiple] {
left: 0;
width: 100%;
height: 100%;
background-color: rgba(120, 135, 148, 0.4);
background-color: rgba(120, 135, 148, 0.6);
z-index: 999;
box-sizing: border-box;
overflow: auto;
@ -596,7 +595,7 @@ select[multiple] {
.popup {
box-sizing: border-box;
width: 864px;
width: 900px;
margin: 132px auto 40px;
background-color: white;
border-radius: 10px;
@ -676,13 +675,13 @@ select[multiple] {
right: 0; }
.popup__button.popup__button--close::after {
background-image: url(../img/new-site/icon-close.svg); }
background-image: url(../img/icon-close.svg); }
.popup__button.popup__button--minimize {
right: 54px; }
.popup__button.popup__button--minimize::after {
background-image: url(../img/new-site/icon-minimize.svg); }
background-image: url(../img/icon-minimize.svg); }
.popup__buttons a {
margin: 0 10px 0 0; }
@ -697,16 +696,9 @@ select[multiple] {
line-height: 22px;
color: #49555F;
padding: 16px 16px 16px 24px;
margin: 0 32px 16px 32px;
margin: 0 32px 0 32px;
counter-reset: paragraph; }
.terms p:before {
font-size: small;
margin-left: -15px;
color: #CCC;
content: counter(paragraph) ". ";
counter-increment: paragraph; }
.terms h6 {
padding-top: 15px;
padding-bottom: 10px;
@ -829,7 +821,7 @@ input[type=checkbox] {
position: absolute;
width: 16px;
height: 16px;
background-image: url(../img/new-site/icon-checkbox.svg);
background-image: url(../img/icon-checkbox.svg);
background-size: 16px;
top: 4px;
left: 4px;
@ -854,11 +846,8 @@ input[type=checkbox] {
line-height: 24px; }
.popup__footer {
background-color: #F6F9FA;
border-top: 1px solid #E7ECEE;
border-radius: 0 0 10px 10px;
padding: 16px 32px 32px 32px;
margin: 16px 0 0 0; }
padding: 24px 32px 24px 32px;
margin: 0 0 0 0; }
.popup__footer-title {
text-align: left;
@ -869,13 +858,27 @@ input[type=checkbox] {
width: 100%;
display: flex;
align-items: center;
justify-content: flex-end;
justify-content: space-between;
position: relative; }
.button.button--agree {
opacity: 1; }
.button.button--apply {
background-color: #4360df;
color: #ffffff; }
.button.button--apply:hover {
background-color: rgba(67, 96, 223, 0.8);
color: #ffffff; }
.button.button--recommend {
background-color: rgba(67, 96, 223, 0.1);
color: #4360df; }
.button.button--recommend:hover {
background-color: rgba(67, 96, 223, 0.2);
color: #4360df; }
.tooltip {
display: none;
position: absolute;
font-size: 14px;
line-height: 17px;
@ -886,7 +889,7 @@ input[type=checkbox] {
width: 220px;
border-radius: 8px;
top: -72px;
right: -37px;
right: 10px;
opacity: 0;
transform: translate3d(0, -8px, 0) scale(1);
visibility: hidden;
@ -1212,7 +1215,7 @@ body {
.home-wrap {
width: 1200px;
margin: 80vh auto 0;
margin: 70vh auto 0;
position: relative;
align-content: center;
display: flex;
@ -1227,7 +1230,7 @@ body {
left: 50%;
top: 0;
margin: 32px 0 0 -600px;
z-index: 999; }
z-index: 998; }
.header-left {
display: flex;
@ -1307,7 +1310,7 @@ body {
display: flex;
align-items: center;
flex-direction: column;
padding: 0px 0 82px;
padding: 0px 0 160px;
color: #FFFFFF;
text-align: center;
width: 540px; }
@ -1355,85 +1358,74 @@ body {
background-color: rgba(255, 255, 255, 0.2); }
.positions {
width: 960px;
margin: 32px auto; }
width: 900px;
margin: 0 auto; }
.positions-wrap {
margin: 16px 0 0 0;
margin: 0 0 0 0;
display: flex;
flex-wrap: wrap; }
.positions-item {
display: flex;
width: 100%;
position: relative;
width: 50%;
height: 350px;
background-color: #FFFFFF;
margin: 0 0 24px 0;
width: 100%;
height: 150px;
border-color: #E0E3E6;
border-style: solid;
cursor: pointer; }
.positions-item:nth-child(1) {
border-top-left-radius: 12px;
border-right-width: 1px;
border-bottom-width: 1px; }
.positions-item:nth-child(2) {
border-top-right-radius: 12px;
border-bottom-width: 1px; }
.positions-item:nth-child(3) {
border-bottom-left-radius: 12px;
border-right-width: 1px; }
.positions-item:nth-child(4) {
border-bottom-right-radius: 12px; }
.positions-item-background {
position: absolute;
display: flex;
flex-direction: column;
justify-content: space-between;
left: 0;
top: 0;
right: 0;
bottom: 0;
background-color: #FFFFFF;
border-radius: 12px;
transition: all 0.2s cubic-bezier(0.685, 0, 0.025, 1.185);
z-index: 100; }
.positions-item:last-child {
margin-bottom: 0; }
.positions-item-inner {
position: absolute;
display: flex;
position: relative;
width: 100%;
flex-direction: column;
justify-content: space-between;
left: 0;
top: 0;
right: 0;
bottom: 0;
background-color: #FFFFFF;
border-radius: 12px;
padding: 32px;
padding: 24px;
z-index: 200; }
.positions-arrow {
position: absolute;
width: 24px;
height: 24px;
right: 24px;
top: 50%;
margin: -12px 0 0 0;
background-image: url(../img/icon_forward-gray.svg);
transform: translate3d(0, 0, 0);
transition: transform .2s ease; }
.positions-item:hover .positions-arrow {
transform: translate3d(6px, 0, 0); }
.positions-item:hover {
z-index: 999; }
z-index: 998; }
.positions-item:hover .positions-item-background {
transform: scale(1.05);
transform: scale(1.01);
box-shadow: 0 4px 13px 0 rgba(193, 201, 208, 0.57); }
.positions-item-top {
transition: transform 0.2s ease; }
.positions-item:hover .positions-item-top {
transform: translate3d(-12px, -12px, 0); }
.positions-item h2 {
font-size: 24px;
font-size: 18px;
font-family: "PostGrotesk-Medium", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
padding: 0 0 8px 0; }
padding: 0 0 4px 0;
transition: color .2s ease; }
.positions-item h2 span {
color: #8D99A4; }
.positions-item:hover h2 {
color: #4360DF; }
.positions-item p {
font-size: 24px;
@ -1442,60 +1434,35 @@ body {
font-size: 16px;
line-height: 24px; }
.reward {
display: flex;
align-items: center; }
.reward .reward-amount {
display: block;
position: relative;
width: 44px;
height: 44px;
border-radius: 27px;
background-color: #4360DF;
color: #FFFFFF;
background-color: rgba(67, 96, 223, 0.1);
color: #4360df;
padding: 6px 14px 5px;
margin: 0 12px 0 0;
border-radius: 8px;
letter-spacing: 1px;
font-size: 14px;
font-family: "PostGrotesk-Medium", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
transition: all .2s ease; }
.positions-item:hover .reward .reward-amount {
width: 111px; }
.reward {
transition: all .2s ease; }
.positions-item:hover .reward {
transform: translate3d(-12px, 12px, 0); }
.reward .reward-amount-text {
position: absolute;
left: 8px;
top: 10px;
transition: all .2s ease; }
.positions-item:hover .reward .reward-amount-text {
position: absolute;
left: 24px;
top: 10px; }
.reward .reward-amount .currency {
opacity: 0;
transition: all .2s ease; }
.positions-item:hover .reward .reward-amount .currency {
opacity: 1; }
.positions-item p.reward-description {
display: block;
width: 220px;
font-size: 16px;
line-height: 22px;
padding: 0 0 12px 0; }
padding: 0 0 0 0; }
.section-header {
margin: 0 auto;
width: 960px;
width: 900px;
padding: 100px 0 32px 0; }
.section-header h2 {
font-size: 28px;
font-size: 26px;
font-family: "PostGrotesk-Medium", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
padding: 0 0 8px 0; }
@ -1534,7 +1501,7 @@ body {
border-radius: 12px; }
.section {
width: 960px;
width: 900px;
height: 460px;
display: flex;
align-items: center;
@ -1579,7 +1546,7 @@ body {
.people {
display: flex;
flex-wrap: wrap;
width: 960px;
width: 900px;
margin: 0 auto; }
.person {
@ -1594,6 +1561,20 @@ body {
line-height: 24px;
margin: 0 0 6px 0; }
.person.person--extra h3 {
color: #4360DF; }
.person .button {
position: absolute;
bottom: 24px;
left: 24px;
display: block;
background-color: rgba(67, 96, 223, 0.1);
color: #4360df; }
.person .button:hover {
background-color: rgba(67, 96, 223, 0.2); }
.person p {
font-size: 16px;
line-height: 20px;
@ -1607,9 +1588,6 @@ body {
width: 100%;
padding: 24px; }
.person.person--extra .person-inner {
background-color: #4360DF; }
.person-image {
position: absolute;
left: 24px;
@ -1648,7 +1626,7 @@ body {
.blog-posts {
display: flex;
flex-wrap: wrap;
width: 960px;
width: 900px;
margin: 0 auto; }
.blog-post {
@ -1680,13 +1658,12 @@ body {
font-size: 14px;
text-transform: uppercase;
letter-spacing: 1px;
color: #4360DF;
color: #8D99A4;
line-height: 24px;
opacity: 0;
transform: translate3d(0, 10px, 0);
transition: transform .2s ease, opacity .2s ease; }
transition: color .2s ease, opacity .2s ease; }
.blog-post:hover a {
color: #4360DF;
opacity: 1;
transform: translate3d(0, 0, 0); }
@ -1710,7 +1687,7 @@ body {
.social-blocks {
display: flex;
flex-wrap: wrap;
width: 960px;
width: 900px;
margin: 0 auto 24px; }
.social-block {

1
img/icon-close.svg Normal file
View File

@ -0,0 +1 @@
<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg"><path d="M8 6.624L3.161 1.785a.973.973 0 0 0-1.376 1.376L6.624 8l-4.839 4.839a.973.973 0 0 0 1.376 1.376L8 9.376l4.839 4.839a.973.973 0 0 0 1.376-1.376L9.376 8l4.839-4.839a.973.973 0 0 0-1.376-1.376L8 6.624z" fill="#A9AFB4" fill-rule="evenodd"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 314 B

1
img/icon_forward-gray.svg Normal file
View File

@ -0,0 +1 @@
<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M16.065 12.087a1 1 0 0 1-.288.62l-7.068 7.067a.999.999 0 1 1-1.414-1.414l6.377-6.377-6.377-6.376A.999.999 0 1 1 8.71 4.192l7.068 7.068a1 1 0 0 1 .288.827z" fill="#8D99A4" fill-rule="evenodd"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 270 B

4
img/logo-blue.svg
View File

@ -1,3 +1 @@
<svg width="24" height="26" xmlns="http://www.w3.org/2000/svg">
<path d="M16.45 12.387c-3.405.187-5.54-.57-8.944-.382-.817.045-1.683.158-2.506.349C5.502 6.35 9.959 1.097 16.019.764c3.719-.205 7.436 1.984 7.638 5.538.198 3.494-2.596 5.83-7.208 6.085M7.503 25.44c-3.487.195-6.971-1.885-7.16-5.262-.186-3.318 2.433-5.538 6.757-5.78 3.191-.177 5.192.541 8.384.363a13.82 13.82 0 0 0 2.35-.331c-.471 5.704-4.65 10.694-10.331 11.01" fill="#4360DF" fill-rule="evenodd"/>
</svg>
<svg width="24" height="26" xmlns="http://www.w3.org/2000/svg"><path d="M16.45 12.387c-3.405.187-5.54-.57-8.944-.382-.817.045-1.683.158-2.506.349C5.502 6.35 9.959 1.097 16.019.764c3.719-.205 7.436 1.984 7.638 5.538.198 3.494-2.596 5.83-7.208 6.085M7.503 25.44c-3.487.195-6.971-1.885-7.16-5.262-.186-3.318 2.433-5.538 6.757-5.78 3.191-.177 5.192.541 8.384.363a13.82 13.82 0 0 0 2.35-.331c-.471 5.704-4.65 10.694-10.331 11.01" fill="#4360DF" fill-rule="evenodd"/></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 472 B

After

Width:  |  Height:  |  Size: 467 B

376
index.html
View File

@ -7,15 +7,219 @@
<link rel="stylesheet" href="./css/main.css">
</head>
<body>
<div class="overlay overlay--agreement">
<div class="popup popup--agreement">
<div class="overlay">
<div class="popup">
<a class="popup__button popup__button--close"></a>
<h4 class="popup__title">Contribution Agreement & Terms and Conditions</h4>
<div class="popup__text">You must read and agree to the following information before you can proceed.</div>
<div class="popup__steps">3 Open Positions</div>
<h4 class="popup__title">UI/UX Designer</h4>
<div class="popup__text">
Status is building powerful decentralized apps on Ethereum that change the way we do things on the web. Our rapidly growing team is made up of self-motivated individuals who prosper in a fast-paced environment and value the ability to work from anywhere.</br></br>
As a product, Status is an open source discovery tool for the Ethereum blockchain that makes it easy for anyone to access apps and services built on the decentralized web. Status also allows users to browse, chat, make payments and more.</div>
<div class="terms">
<h6>Requirements:</h6>
<ul>
<li>3+ years of experience</li>
<li>Fluent English</li>
<li>Great communication skills</li>
<li>Self-starter who can collaborate</li>
<li>Experience working with PMs, UXRs, content strategists, marketing</li>
<li>Experience in designing for IOS and Android</li>
<li>Understanding of technical limitations</li>
<li>Experience and/or desire to work in a remote design team</li>
<li>A great portfolio that showcases interaction and visual skills</li>
<li>Think in systems and patterns but with ability to break them</li>
<li>Experience shipping mobile products</li>
<li>Modern design stack: Sketch, Figma, Invision, Framer, Principle, Zeplin</li>
<li>A love for making things beautiful, usable and elegant</li>
<li>Strong hands-on work attitude</li>
<li>Living in CET ± 2h</li>
</ul>
<h6>Nice to have</h6>
<ul>
<li>Have used GitHub before</li>
<li>Interested in blockchain, decentralized web and privacy</li>
<li>Owns a Crypto Kitty </li>
</ul>
<h6>About us</h6>
<p>We care deeply about open source software, and our organizational structure does away with strict hierarchy and fixed work hours. We believe in working with a high degree of autonomy while supporting the organisation's priorities:</p>
<ul>
<li>We are Remote and Decentralized.</li>
<li>We are 70+ employees spread across 20+ different countries</li>
<li>We believe in complete transparency. That's why everything we do including metrics, Town Halls, and more, are completely public to the entire community</li>
</ul>
</div>
<div class="popup__footer">
<div class="input-wrap">
<a class="button button--apply" href="#">Apply</a>
<div class="tooltip tooltip--shown">Get 10 000 SNT ($1000 value) for a recommendation</div>
<a class="button button--recommend" href="#">Recommend Someone</a>
</div>
</div>
</div>
</div>
<div class="overlay">
<div class="popup">
<a class="popup__button popup__button--close"></a>
<div class="popup__steps">3 Open Positions</div>
<h4 class="popup__title">UI/UX Designer</h4>
<div class="popup__text">
Status is building powerful decentralized apps on Ethereum that change the way we do things on the web. Our rapidly growing team is made up of self-motivated individuals who prosper in a fast-paced environment and value the ability to work from anywhere.</br></br>
As a product, Status is an open source discovery tool for the Ethereum blockchain that makes it easy for anyone to access apps and services built on the decentralized web. Status also allows users to browse, chat, make payments and more.</div>
<div class="terms">
<h6>Requirements:</h6>
<ul>
<li>3+ years of experience</li>
<li>Fluent English</li>
<li>Great communication skills</li>
<li>Self-starter who can collaborate</li>
<li>Experience working with PMs, UXRs, content strategists, marketing</li>
<li>Experience in designing for IOS and Android</li>
<li>Understanding of technical limitations</li>
<li>Experience and/or desire to work in a remote design team</li>
<li>A great portfolio that showcases interaction and visual skills</li>
<li>Think in systems and patterns but with ability to break them</li>
<li>Experience shipping mobile products</li>
<li>Modern design stack: Sketch, Figma, Invision, Framer, Principle, Zeplin</li>
<li>A love for making things beautiful, usable and elegant</li>
<li>Strong hands-on work attitude</li>
<li>Living in CET ± 2h</li>
</ul>
<h6>Nice to have</h6>
<ul>
<li>Have used GitHub before</li>
<li>Interested in blockchain, decentralized web and privacy</li>
<li>Owns a Crypto Kitty </li>
</ul>
<h6>About us</h6>
<p>We care deeply about open source software, and our organizational structure does away with strict hierarchy and fixed work hours. We believe in working with a high degree of autonomy while supporting the organisation's priorities:</p>
<ul>
<li>We are Remote and Decentralized.</li>
<li>We are 70+ employees spread across 20+ different countries</li>
<li>We believe in complete transparency. That's why everything we do including metrics, Town Halls, and more, are completely public to the entire community</li>
</ul>
</div>
<div class="popup__footer">
<div class="input-wrap">
<a class="button button--apply" href="#">Apply</a>
<div class="tooltip tooltip--shown">Get 10 000 SNT ($1000 value) for a recommendation</div>
<a class="button button--recommend" href="#">Recommend Someone</a>
</div>
</div>
</div>
</div>
<div class="overlay">
<div class="popup">
<a class="popup__button popup__button--close"></a>
<div class="popup__steps">3 Open Positions</div>
<h4 class="popup__title">UI/UX Designer</h4>
<div class="popup__text">
Status is building powerful decentralized apps on Ethereum that change the way we do things on the web. Our rapidly growing team is made up of self-motivated individuals who prosper in a fast-paced environment and value the ability to work from anywhere.</br></br>
As a product, Status is an open source discovery tool for the Ethereum blockchain that makes it easy for anyone to access apps and services built on the decentralized web. Status also allows users to browse, chat, make payments and more.</div>
<div class="terms">
<h6>Requirements:</h6>
<ul>
<li>3+ years of experience</li>
<li>Fluent English</li>
<li>Great communication skills</li>
<li>Self-starter who can collaborate</li>
<li>Experience working with PMs, UXRs, content strategists, marketing</li>
<li>Experience in designing for IOS and Android</li>
<li>Understanding of technical limitations</li>
<li>Experience and/or desire to work in a remote design team</li>
<li>A great portfolio that showcases interaction and visual skills</li>
<li>Think in systems and patterns but with ability to break them</li>
<li>Experience shipping mobile products</li>
<li>Modern design stack: Sketch, Figma, Invision, Framer, Principle, Zeplin</li>
<li>A love for making things beautiful, usable and elegant</li>
<li>Strong hands-on work attitude</li>
<li>Living in CET ± 2h</li>
</ul>
<h6>Nice to have</h6>
<ul>
<li>Have used GitHub before</li>
<li>Interested in blockchain, decentralized web and privacy</li>
<li>Owns a Crypto Kitty </li>
</ul>
<h6>About us</h6>
<p>We care deeply about open source software, and our organizational structure does away with strict hierarchy and fixed work hours. We believe in working with a high degree of autonomy while supporting the organisation's priorities:</p>
<ul>
<li>We are Remote and Decentralized.</li>
<li>We are 70+ employees spread across 20+ different countries</li>
<li>We believe in complete transparency. That's why everything we do including metrics, Town Halls, and more, are completely public to the entire community</li>
</ul>
</div>
<div class="popup__footer">
<div class="input-wrap">
<a class="button button--apply" href="#">Apply</a>
<div class="tooltip tooltip--shown">Get 10 000 SNT ($1000 value) for a recommendation</div>
<a class="button button--recommend" href="#">Recommend Someone</a>
</div>
</div>
</div>
</div>
<div class="overlay">
<div class="popup">
<a class="popup__button popup__button--close"></a>
<div class="popup__steps">3 Open Positions</div>
<h4 class="popup__title">UI/UX Designer</h4>
<div class="popup__text">
Status is building powerful decentralized apps on Ethereum that change the way we do things on the web. Our rapidly growing team is made up of self-motivated individuals who prosper in a fast-paced environment and value the ability to work from anywhere.</br></br>
As a product, Status is an open source discovery tool for the Ethereum blockchain that makes it easy for anyone to access apps and services built on the decentralized web. Status also allows users to browse, chat, make payments and more.</div>
<div class="terms">
<h6>Requirements:</h6>
<ul>
<li>3+ years of experience</li>
<li>Fluent English</li>
<li>Great communication skills</li>
<li>Self-starter who can collaborate</li>
<li>Experience working with PMs, UXRs, content strategists, marketing</li>
<li>Experience in designing for IOS and Android</li>
<li>Understanding of technical limitations</li>
<li>Experience and/or desire to work in a remote design team</li>
<li>A great portfolio that showcases interaction and visual skills</li>
<li>Think in systems and patterns but with ability to break them</li>
<li>Experience shipping mobile products</li>
<li>Modern design stack: Sketch, Figma, Invision, Framer, Principle, Zeplin</li>
<li>A love for making things beautiful, usable and elegant</li>
<li>Strong hands-on work attitude</li>
<li>Living in CET ± 2h</li>
</ul>
<h6>Nice to have</h6>
<ul>
<li>Have used GitHub before</li>
<li>Interested in blockchain, decentralized web and privacy</li>
<li>Owns a Crypto Kitty </li>
</ul>
<h6>About us</h6>
<p>We care deeply about open source software, and our organizational structure does away with strict hierarchy and fixed work hours. We believe in working with a high degree of autonomy while supporting the organisation's priorities:</p>
<ul>
<li>We are Remote and Decentralized.</li>
<li>We are 70+ employees spread across 20+ different countries</li>
<li>We believe in complete transparency. That's why everything we do including metrics, Town Halls, and more, are completely public to the entire community</li>
</ul>
</div>
<div class="popup__footer">
<div class="input-wrap">
<a class="button button--apply" href="#">Apply</a>
<div class="tooltip tooltip--shown">Get 10 000 SNT ($1000 value) for a recommendation</div>
<a class="button button--recommend" href="#">Recommend Someone</a>
</div>
</div>
</div>
</div>
<div class="home-cover">
<div class="header">
@ -124,85 +328,6 @@
</div>
</div>
<!-- div class="positions">
<h4>Open Positions <span>8</span></h4>
<div class="positions-wrap">
<div class="positions-item">
<div class="positions-item-background"></div>
<div class="positions-item-inner">
<div class="positions-item-top">
<h2>UI/UX Designer</h2>
<p>Store, send & receive Eth and ERC-20 tokens with Status Hardwallet</p>
</div>
<div class="reward">
<p class="reward-description">Bonus for a recommendation<br/>$1000 value</p>
<div class="reward-amount">
<span class="reward-amount-text">
<span class="number">10K</span>
<span class="currency">SNT</span>
</span>
</div>
</div>
</div>
</div>
<div class="positions-item">
<div class="positions-item-background"></div>
<div class="positions-item-inner">
<div class="positions-item-top">
<h2>UI/UX Designer</h2>
<p>Store, send & receive Eth and ERC-20 tokens with Status Hardwallet</p>
</div>
<div class="reward">
<p class="reward-description">Bonus for a recommendation<br/>$1000 value</p>
<div class="reward-amount">
<span class="reward-amount-text">
<span class="number">10K</span>
<span class="currency">SNT</span>
</span>
</div>
</div>
</div>
</div>
<div class="positions-item">
<div class="positions-item-background"></div>
<div class="positions-item-inner">
<div class="positions-item-top">
<h2>UI/UX Designer</h2>
<p>Store, send & receive Eth and ERC-20 tokens with Status Hardwallet</p>
</div>
<div class="reward">
<p class="reward-description">Bonus for a recommendation<br/>$1000 value</p>
<div class="reward-amount">
<span class="reward-amount-text">
<span class="number">10K</span>
<span class="currency">SNT</span>
</span>
</div>
</div>
</div>
</div>
<div class="positions-item">
<div class="positions-item-background"></div>
<div class="positions-item-inner">
<div class="positions-item-top">
<h2>UI/UX Designer</h2>
<p>Store, send & receive Eth and ERC-20 tokens with Status Hardwallet</p>
</div>
<div class="reward">
<p class="reward-description">Bonus for a recommendation<br/>$1000 value</p>
<div class="reward-amount">
<span class="reward-amount-text">
<span class="number">10K</span>
<span class="currency">SNT</span>
</span>
</div>
</div>
</div>
</div>
</div>
</div-->
<div class="section-header">
<h2>Who We Are</h2>
<p>Store, send & receive Eth andStore, send & receive Eth and ERC-20 tokens Store, send & receive Eth and ERC-20 tokens with Status Hardwallet tokens Store, send & receive Eth and ERC-20 tokens with Status Hardwallet</p>
@ -246,11 +371,92 @@
</div>
<div class="person person--extra">
<div class="person-inner">
<h3>+ 65 more core contributors</h3>
<p>Want to join? Contact us, we’ll be happy to have a chat</p>
<a class="button" href="#">Contact Us</a>
</div>
</div>
</div>
<div class="section-header">
<h2>Who Are We Looking For</h2>
<p>Store, send & receive Eth andStore, send & receive Eth and ERC-20 tokens Store, send & receive Eth and ERC-20 tokens with Status Hardwallet tokens Store, send & receive Eth and ERC-20 tokens with Status Hardwallet</p>
</div>
<div class="positions">
<div class="positions-wrap">
<div class="positions-item">
<div class="positions-item-inner">
<div class="positions-arrow"></div>
<div class="positions-item-top">
<h2>UI/UX Designer <span>X3</span> </h2>
<p>Store, send & receive Eth and ERC-20 tokens with Status Hardwallet</p>
</div>
<div class="reward">
<div class="reward-amount">
<span class="reward-amount-text">
<span class="number">SNT 10 000</span>
</span>
</div>
<p class="reward-description">Bonus for a recommendation $1000 value</p>
</div>
</div>
</div>
<div class="positions-item">
<div class="positions-item-inner">
<div class="positions-arrow"></div>
<div class="positions-item-top">
<h2>UI/UX Designer</h2>
<p>Store, send & receive Eth and ERC-20 tokens with Status Hardwallet</p>
</div>
<div class="reward">
<div class="reward-amount">
<span class="reward-amount-text">
<span class="number">SNT 10 000</span>
</span>
</div>
<p class="reward-description">Bonus for a recommendation $1000 value</p>
</div>
</div>
</div>
<div class="positions-item">
<div class="positions-item-inner">
<div class="positions-arrow"></div>
<div class="positions-item-top">
<h2>UI/UX Designer</h2>
<p>Store, send & receive Eth and ERC-20 tokens with Status Hardwallet</p>
</div>
<div class="reward">
<div class="reward-amount">
<span class="reward-amount-text">
<span class="number">SNT 10 000</span>
</span>
</div>
<p class="reward-description">Bonus for a recommendation $1000 value</p>
</div>
</div>
</div>
<div class="positions-item">
<div class="positions-item-inner">
<div class="positions-arrow"></div>
<div class="positions-item-top">
<h2>UI/UX Designer</h2>
<p>Store, send & receive Eth and ERC-20 tokens with Status Hardwallet</p>
</div>
<div class="reward">
<div class="reward-amount">
<span class="reward-amount-text">
<span class="number">SNT 10 000</span>
</span>
</div>
<p class="reward-description">Bonus for a recommendation $1000 value</p>
</div>
</div>
</div>
</div>
</div>
<div class="section-header">
<h2>Read our Blog</h2>
<p>Store, send & receive Eth andStore, send & receive Eth and ERC-20 tokens Store, send & receive Eth and ERC-20 tokens with Status Hardwallet tokens Store, send & receive Eth and ERC-20 tokens with Status Hardwallet</p>

56
js/bundle.js
View File

@ -25032,7 +25032,53 @@ let pattern = document.querySelectorAll(".pattern")[0];
let homeCover = document.querySelectorAll(".home-cover")[0];
let header = document.querySelectorAll(".header")[0];
let intro = document.querySelectorAll(".intro")[0];
let logo = document.querySelectorAll(".logo")[0];
/* Popups */
let vacancys = document.querySelectorAll(".positions-item");
let popups = document.querySelectorAll(".popup");
let overlays = document.querySelectorAll(".overlay");
let closeButtons = document.querySelectorAll(".popup__button--close");
let activePopup = null;
let activeOverlay = null;
vacancys[0].addEventListener('click', function (event) {
showPopup(overlays[0], popups[0]);
event.preventDefault();
});
vacancys[1].addEventListener('click', function (event) {
showPopup(overlays[1], popups[1]);
event.preventDefault();
});
vacancys[2].addEventListener('click', function (event) {
showPopup(overlays[2], popups[2]);
event.preventDefault();
});
vacancys[3].addEventListener('click', function (event) {
showPopup(overlays[3], popups[3]);
event.preventDefault();
});
closeButtons.forEach(button => {
button.addEventListener('click', closeActivePopup);
});
function showPopup(whichOverlay, whichPopup) {
activePopup = whichPopup;
activeOverlay = whichOverlay;
addClassToElement(whichOverlay, "overlay--shown");
addClassToElement(whichPopup, "popup--shown");
}
function closeActivePopup() {
removeClassFromElement(activeOverlay, "overlay--shown");
removeClassFromElement(activePopup, "popup--shown");
activePopup = null;
activeOverlay = null;
}
new ScrollOver({
keyframes: [{
@ -25054,14 +25100,14 @@ new ScrollOver({
}
}, {
element: homeCover,
domain: [200, 400],
domain: [250, 400],
animate: [{
property: "backgroundColor",
range: ["rgb(67, 96, 223)", "rgb(238, 242, 245)"]
}]
}, {
element: pattern,
domain: [100, 300],
domain: [200, 250],
animate: [{
property: "opacity",
range: ["1", "0"]
@ -25078,13 +25124,13 @@ new ScrollOver({
}]
}, {
element: header,
domain: [0, 650],
domain: [300, 400],
animate: [{
property: "opacity",
range: ["1", "0"]
}, {
property: "translateY",
range: ["0", "-20"]
range: ["0", "-50"]
}]
}]
}).init();

4
js/bundle.js.map
View File

File diff suppressed because one or more lines are too long