some adjustments
This commit is contained in:
andmironov
parent
6ed72ab675
commit
d18a1ea52e
99
css/main.css
99
css/main.css
|
|
@ -1186,43 +1186,59 @@ body {
|
|||
line-height: 25px;
|
||||
color: #000000;
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased; }
|
||||
-webkit-font-smoothing: antialiased;
|
||||
background-color: #EEF2F5; }
|
||||
|
||||
.home-cover {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: transparent;
|
||||
background-color: #4360DF;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
.wrap {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0; }
|
||||
bottom: 0;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #4360DF; }
|
||||
|
||||
.pattern {
|
||||
position: absolute;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-image: url("../img/pattern.png"); }
|
||||
|
||||
.home-cover {
|
||||
background-color: transparent;
|
||||
width: 100%;
|
||||
height: 600px; }
|
||||
|
||||
.home-cover.no-pattern {
|
||||
background-image: none; }
|
||||
|
||||
.home-wrap {
|
||||
background-color: #EEF2F5;
|
||||
position: relative;
|
||||
z-index: 5;
|
||||
width: 1200px;
|
||||
margin: 70vh auto 0;
|
||||
border-radius: 12px;
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
align-content: center;
|
||||
display: flex;
|
||||
flex-direction: column; }
|
||||
|
||||
@media (max-width: 1248px) {
|
||||
.home-wrap {
|
||||
width: 100%;
|
||||
background-color: transparent;
|
||||
padding: 0 24px; } }
|
||||
|
||||
.header {
|
||||
position: absolute;
|
||||
position: fixed;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 1200px;
|
||||
|
|
@ -1306,18 +1322,31 @@ body {
|
|||
.secondary-nav li:last-child {
|
||||
margin-right: 0; }
|
||||
|
||||
@media (max-width: 1248px) {
|
||||
.header {
|
||||
width: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
margin: 32px 0 0 0;
|
||||
padding: 0 24px; } }
|
||||
|
||||
.intro {
|
||||
position: fixed;
|
||||
top: 280px;
|
||||
left: 50%;
|
||||
margin: 0 0 0 -270px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
padding: 0px 0 160px;
|
||||
padding: 0px 0 32px;
|
||||
color: #FFFFFF;
|
||||
text-align: center;
|
||||
width: 540px; }
|
||||
width: 540px;
|
||||
z-index: 4; }
|
||||
|
||||
.intro h1 {
|
||||
font-family: "PostGrotesk-Medium", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
|
||||
font-size: 32px;
|
||||
font-size: 30px;
|
||||
padding: 0 0 12px 0; }
|
||||
|
||||
.intro p {
|
||||
|
|
@ -1468,7 +1497,7 @@ body {
|
|||
|
||||
.section-header p {
|
||||
font-size: 16px;
|
||||
width: 960px;
|
||||
width: 900px;
|
||||
color: #8D99A4;
|
||||
line-height: 24px; }
|
||||
|
||||
|
|
@ -1543,6 +1572,42 @@ body {
|
|||
.section:nth-child(odd) .section__image {
|
||||
order: 0; }
|
||||
|
||||
@media (max-width: 1248px) {
|
||||
.sections {
|
||||
width: 100%; }
|
||||
.section {
|
||||
width: 900px; } }
|
||||
|
||||
@media (max-width: 996px) {
|
||||
.section {
|
||||
width: 100%;
|
||||
padding: 0 24px; } }
|
||||
|
||||
@media (max-width: 740px) {
|
||||
.section__text {
|
||||
padding: 0 16px; }
|
||||
.section__text h2 {
|
||||
font-size: 20px;
|
||||
line-height: 24px; }
|
||||
.section__image {
|
||||
transform: scale(0.9); } }
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.section {
|
||||
height: auto;
|
||||
flex-direction: column;
|
||||
padding: 32px 0; }
|
||||
.section__image {
|
||||
height: 260px; }
|
||||
.section__text {
|
||||
width: 100%;
|
||||
padding: 0 24px 24px 24px; }
|
||||
.section .section__text {
|
||||
order: 1; }
|
||||
.section .section__image {
|
||||
order: 0; } }
|
||||
|
||||
/* People */
|
||||
.people {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
|
|
|||
60
index.html
60
index.html
|
|
@ -220,35 +220,32 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="home-cover">
|
||||
<div class="header">
|
||||
|
||||
<div class="header-left">
|
||||
<a class="logo" href="/"></a>
|
||||
<ul class="main-nav">
|
||||
<li><a href="#">Open Positions</a></li>
|
||||
<li><a href="#">How We Work</a></li>
|
||||
<li><a href="#">Who We Are</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<ul class="secondary-nav">
|
||||
<li><a href="#">About Status</a></li>
|
||||
<li class="social-link social-link--twitter"><a href="#"></a></li>
|
||||
<li class="social-link social-link--github"><a href="#"></a></li>
|
||||
<div class="wrap"></div>
|
||||
<div class="pattern"></div>
|
||||
<div class="home-cover"></div>
|
||||
<div class="header">
|
||||
<div class="header-left">
|
||||
<a class="logo" href="/"></a>
|
||||
<ul class="main-nav">
|
||||
<li><a href="#">Open Positions</a></li>
|
||||
<li><a href="#">How We Work</a></li>
|
||||
<li><a href="#">Who We Are</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="pattern"></div>
|
||||
<div class="intro">
|
||||
<h1>Status is looking for designers</h1>
|
||||
<p>Store, send & receive Eth and ERC-20 tokens with Status Store, send & receive Eth and ERC-20 tokens with Status HardwalletHardwallet</p>
|
||||
<div class="intro-buttons">
|
||||
<a class="button" href="">More about us</a>
|
||||
<a class="button button--secondary" href="">Open positions</a>
|
||||
</div>
|
||||
|
||||
<ul class="secondary-nav">
|
||||
<li><a href="#">About Status</a></li>
|
||||
<li class="social-link social-link--twitter"><a href="#"></a></li>
|
||||
<li class="social-link social-link--github"><a href="#"></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="intro">
|
||||
<h1>Status is looking for designers</h1>
|
||||
<p>Store, send & receive Eth and ERC-20 tokens with Status Store, send & receive Eth and ERC-20 tokens with Status HardwalletHardwallet</p>
|
||||
<div class="intro-buttons">
|
||||
<a class="button" href="">More about us</a>
|
||||
<a class="button button--secondary" href="">Open positions</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="home-wrap">
|
||||
<div class="sections">
|
||||
<div class="inner-header">
|
||||
|
|
@ -257,7 +254,7 @@
|
|||
</div>
|
||||
<div class="section section--odd section--one">
|
||||
<div class="section__text">
|
||||
<h2>Contactless transactions, built for mobile</h2>
|
||||
<h2>Swarms</h2>
|
||||
<div class="text">
|
||||
<p>With NFC & Bluetooth, you can now use the Status Hardwallet combined with your mobile device to approve & send payments.</p>
|
||||
</div>
|
||||
|
|
@ -300,7 +297,7 @@
|
|||
</div>
|
||||
<div class="section section--even section--two">
|
||||
<div class="section__text">
|
||||
<h2>Safer by design</h2>
|
||||
<h2>Objectives and Key Results</h2>
|
||||
<div class="text">
|
||||
<p>Forget leaving your assets in the vulnerable hands of exchanges or hot wallets online. Isolate your private keys into the safety of your Status Hardwallet offline.</p>
|
||||
</div>
|
||||
|
|
@ -311,7 +308,7 @@
|
|||
</div>
|
||||
<div class="section section--odd section--three">
|
||||
<div class="section__text">
|
||||
<h2>Transactions with Eth and most tokens</h2>
|
||||
<h2>Status Open Bounty</h2>
|
||||
<div class="text">
|
||||
<p>Status Hardwallet is built to be compatible with all major cryptocurrencies including Eth and ERC-20 token tokens.</p>
|
||||
</div>
|
||||
|
|
@ -407,7 +404,7 @@
|
|||
<div class="positions-item-inner">
|
||||
<div class="positions-arrow"></div>
|
||||
<div class="positions-item-top">
|
||||
<h2>UI/UX Designer</h2>
|
||||
<h2>Web Designer</h2>
|
||||
<p>Store, send & receive Eth and ERC-20 tokens with Status Hardwallet</p>
|
||||
</div>
|
||||
<div class="reward">
|
||||
|
|
@ -424,7 +421,7 @@
|
|||
<div class="positions-item-inner">
|
||||
<div class="positions-arrow"></div>
|
||||
<div class="positions-item-top">
|
||||
<h2>UI/UX Designer</h2>
|
||||
<h2>Lead Brand Designer</h2>
|
||||
<p>Store, send & receive Eth and ERC-20 tokens with Status Hardwallet</p>
|
||||
</div>
|
||||
<div class="reward">
|
||||
|
|
@ -441,7 +438,7 @@
|
|||
<div class="positions-item-inner">
|
||||
<div class="positions-arrow"></div>
|
||||
<div class="positions-item-top">
|
||||
<h2>UI/UX Designer</h2>
|
||||
<h2>Brand Designer</h2>
|
||||
<p>Store, send & receive Eth and ERC-20 tokens with Status Hardwallet</p>
|
||||
</div>
|
||||
<div class="reward">
|
||||
|
|
@ -512,7 +509,6 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="footer">
|
||||
<div class="footer-inner">
|
||||
<div class="footer-table">
|
||||
|
|
|
|||
|
|
@ -25032,6 +25032,7 @@ 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 wrap = document.querySelectorAll(".wrap")[0];
|
||||
|
||||
/* Popups */
|
||||
|
||||
|
|
@ -25099,7 +25100,7 @@ new ScrollOver({
|
|||
className: "section--shown"
|
||||
}
|
||||
}, {
|
||||
element: homeCover,
|
||||
element: wrap,
|
||||
domain: [250, 400],
|
||||
animate: [{
|
||||
property: "backgroundColor",
|
||||
|
|
@ -25130,7 +25131,7 @@ new ScrollOver({
|
|||
range: ["1", "0"]
|
||||
}, {
|
||||
property: "translateY",
|
||||
range: ["0", "-50"]
|
||||
range: ["0", "-30"]
|
||||
}]
|
||||
}]
|
||||
}).init();
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue