updated website
This commit is contained in:
andmironov
parent
e661673007
commit
cce0c58ca6
905
src/css/main.css
905
src/css/main.css
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,20 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="52px" height="52px" viewBox="0 0 52 52" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: Sketch 43.2 (39069) - http://www.bohemiancoding.com/sketch -->
|
||||
<title>icon-android</title>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<defs></defs>
|
||||
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="1280" transform="translate(-819.000000, -2140.000000)" fill="#B6BBBF">
|
||||
<g id="Group-15" transform="translate(50.000000, 1606.000000)">
|
||||
<g id="Group-5" transform="translate(619.000000, 110.000000)">
|
||||
<g id="Group-17" transform="translate(0.000000, 416.000000)">
|
||||
<g id="Group" transform="translate(150.000000, 8.000000)">
|
||||
<path d="M15.9016071,36.0005208 C15.9016071,36.9171397 16.6555366,37.6671007 17.5770059,37.6671007 L19.2524046,37.6671007 L19.2524046,43.5001302 C19.2524046,44.8833915 20.3749217,46 21.7655027,46 C23.1560836,46 24.2786008,44.8833915 24.2786008,43.5001302 L24.2786008,37.6671007 L27.6293982,37.6671007 L27.6293982,43.5001302 C27.6293982,44.8833915 28.7519154,46 30.1424963,46 C31.5330773,46 32.6555944,44.8833915 32.6555944,43.5001302 L32.6555944,37.6671007 L34.3309931,37.6671007 C35.2524624,37.6671007 36.0063919,36.9171397 36.0063919,36.0005208 L36.0063919,19.3347221 L15.9016071,19.3347221 L15.9016071,36.0005208 L15.9016071,36.0005208 Z M11.7131103,19.3347221 C10.3225294,19.3347221 9.20001221,20.4513307 9.20001221,21.8345919 L9.20001221,33.500651 C9.20001221,34.8839123 10.3225294,36.0005208 11.7131103,36.0005208 C13.1036912,36.0005208 14.2262084,34.8839123 14.2262084,33.500651 L14.2262084,21.8345919 C14.2262084,20.4513307 13.1036912,19.3347221 11.7131103,19.3347221 L11.7131103,19.3347221 Z M40.1948887,19.3347221 C38.8043078,19.3347221 37.6817906,20.4513307 37.6817906,21.8345919 L37.6817906,33.500651 C37.6817906,34.8839123 38.8043078,36.0005208 40.1948887,36.0005208 C41.5854696,36.0005208 42.7079868,34.8839123 42.7079868,33.500651 L42.7079868,21.8345919 C42.7079868,20.4513307 41.5854696,19.3347221 40.1948887,19.3347221 L40.1948887,19.3347221 Z M31.868157,9.60189573 L34.0545524,7.42700901 C34.3812551,7.10202594 34.3812551,6.57705328 34.0545524,6.2520702 C33.7278496,5.92708713 33.200099,5.92708713 32.8733962,6.2520702 L30.3938061,8.71027551 C29.0534871,8.05197646 27.5540053,7.66866309 25.9539995,7.66866309 C24.3456167,7.66866309 22.8377579,8.05197646 21.4890619,8.71860841 L19.0010948,6.24373731 C18.674392,5.91875423 18.1466414,5.91875423 17.8199387,6.24373731 C17.4932359,6.56872038 17.4932359,7.09369304 17.8199387,7.41867611 L20.014711,9.60189573 C17.5267439,11.4268007 15.9016071,14.3599813 15.9016071,17.6681423 L36.0063919,17.6681423 C36.0063919,14.3516484 34.3728781,11.4184678 31.868157,9.60189573 L31.868157,9.60189573 Z M30.1424963,14.3328993 C30.6051449,14.3328993 30.9801957,13.9598227 30.9801957,13.4996094 C30.9801957,13.0393961 30.6051449,12.6663195 30.1424963,12.6663195 C29.6798477,12.6663195 29.304797,13.0393961 29.304797,13.4996094 C29.304797,13.9598227 29.6798477,14.3328993 30.1424963,14.3328993 Z M21.7655027,14.3328993 C22.2281513,14.3328993 22.603202,13.9598227 22.603202,13.4996094 C22.603202,13.0393961 22.2281513,12.6663195 21.7655027,12.6663195 C21.3028541,12.6663195 20.9278033,13.0393961 20.9278033,13.4996094 C20.9278033,13.9598227 21.3028541,14.3328993 21.7655027,14.3328993 Z" id="Shape"></path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.6 KiB |
|
|
@ -0,0 +1,20 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="52px" height="52px" viewBox="0 0 52 52" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: Sketch 43.2 (39069) - http://www.bohemiancoding.com/sketch -->
|
||||
<title>icon-apple</title>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<defs></defs>
|
||||
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="1280" transform="translate(-1061.000000, -2140.000000)" fill="#B6BBBF">
|
||||
<g id="Group-15" transform="translate(50.000000, 1606.000000)">
|
||||
<g id="Group-5" transform="translate(619.000000, 110.000000)">
|
||||
<g id="Group-17" transform="translate(242.000000, 416.000000)">
|
||||
<g id="Group-20" transform="translate(150.000000, 8.000000)">
|
||||
<path d="M31.6383379,13.1567246 C29.5570615,16.4276661 25.364368,16.3265461 25.364368,16.3265461 C25.364368,16.3265461 24.6638412,12.9686544 27.3307937,9.98432719 C29.9977462,7 33.2370503,7 33.2370503,7 C33.2370503,7 33.7196143,9.88578313 31.6383379,13.1567246 Z M36.6536259,16.3931473 C39.2510548,17.409105 40.8150367,19.6100825 40.8150367,19.6100825 C40.8150367,19.6100825 36.4776698,21.7168594 36.653627,26.9465546 C36.8295842,32.1762499 42,34.4048681 42,34.4048681 C42,34.4048681 40.0180765,38.6506702 38.0490749,41.1265569 C36.9790845,42.4719976 34.690843,44.3036196 33.0324929,44.3036196 C31.9571844,44.3036196 30.9503279,43.7073498 29.8125159,43.278511 C28.7978273,42.8960771 28.4935388,42.6422879 27.0545738,42.5687447 C25.8963457,42.5095496 24.301811,42.9614936 23.4445656,43.4080606 C22.5238938,43.8876685 20.6904871,44.7151261 18.8744148,44.0196458 C16.808646,43.2285422 14.9498213,41.0991195 13.4367744,38.5397661 C10.5935675,33.730417 10.0589439,29.7513723 10.0056191,27.3312643 C9.98618065,26.449064 9.9155969,23.4284957 11.8767496,20.2966249 C13.8379023,17.164754 16.6197413,16.3931473 16.6197413,16.3931473 C16.6197413,16.3931473 19.1984239,15.2936329 22.6000294,16.3931473 C24.5536104,17.024611 25.5511842,17.6634288 26.8219472,17.549599 C28.0927103,17.4357692 28.7139597,16.9119695 30.4671692,16.3931473 C32.1739815,15.8880553 34.8153802,15.6741362 36.6536259,16.3931473 Z" id="Apple-logo"></path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 666 KiB |
|
|
@ -0,0 +1,18 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="50px" height="50px" viewBox="0 0 50 50" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
|
||||
<title>Shape</title>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<defs></defs>
|
||||
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="1280-copy-2" transform="translate(-616.000000, -224.000000)" fill="#FFFFFF">
|
||||
<g id="Group-13" transform="translate(-36.000000, 79.000000)">
|
||||
<g id="Group-20" transform="translate(619.000000, 111.000000)">
|
||||
<g id="Group-6" transform="translate(33.000000, 34.000000)">
|
||||
<path d="M17.5760177,21.8068182 C16.0420978,21.798179 14.510541,21.929964 13,22.2005682 C14.2428613,10.7042635 23.8225011,1.99933219 35.2304071,2 C42.2144835,2 47,5.41965909 47,12.5 C47,19.5803409 41.2564387,23 32.8764885,23 C26.6903905,23 23.7621158,21.8068182 17.5760177,21.8068182 Z M17.1235115,26 C8.74356134,26 3,29.4196591 3,36.5 C3,43.5803409 7.78551648,47 14.7695929,47 C26.1774989,47.0006678 35.7571387,38.2957365 37,26.7994318 C35.489459,27.070036 33.9579022,27.201821 32.4239823,27.1931818 C26.2378842,27.1931818 23.3096095,26 17.1235115,26 Z" id="Shape"></path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
|
|
@ -0,0 +1,18 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
|
||||
<title>Combined Shape</title>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<defs></defs>
|
||||
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="1280-copy-2" transform="translate(-542.000000, -100.000000)" fill="#68C0F8">
|
||||
<g id="Group-13" transform="translate(-36.000000, 79.000000)">
|
||||
<g id="Group-9" transform="translate(557.000000, 0.000000)">
|
||||
<g id="Group-18" transform="translate(21.000000, 21.000000)">
|
||||
<path d="M10.0033915,8.58823529 C8.15457082,8.58823529 6.65580551,7.11340859 6.65580551,5.29411765 C6.65580551,3.47482671 8.15457082,2 10.0033915,2 C11.8522122,2 13.3509776,3.47482671 13.3509776,5.29411765 C13.3509776,7.11340859 11.8522122,8.58823529 10.0033915,8.58823529 Z M16.9095477,16.0413911 C17.0571409,17.1231009 16.2793325,18 15.1819283,18 L4.82485341,18 C3.72312238,18 2.90112951,17.1067101 3.10195,16.0217357 C3.10195,16.0217357 2.82999291,10.4705882 10.0033909,10.4705882 C17.1767888,10.4705882 16.9095477,16.0413911 16.9095477,16.0413911 Z" id="Combined-Shape"></path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
|
|
@ -0,0 +1,18 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
|
||||
<title>Combined Shape</title>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<defs></defs>
|
||||
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="1280-copy-2" transform="translate(-542.000000, -100.000000)" fill="#63C38F">
|
||||
<g id="Group-13" transform="translate(-36.000000, 79.000000)">
|
||||
<g id="Group-9" transform="translate(557.000000, 0.000000)">
|
||||
<g id="Group-18" transform="translate(21.000000, 21.000000)">
|
||||
<path d="M10.0033915,8.58823529 C8.15457082,8.58823529 6.65580551,7.11340859 6.65580551,5.29411765 C6.65580551,3.47482671 8.15457082,2 10.0033915,2 C11.8522122,2 13.3509776,3.47482671 13.3509776,5.29411765 C13.3509776,7.11340859 11.8522122,8.58823529 10.0033915,8.58823529 Z M16.9095477,16.0413911 C17.0571409,17.1231009 16.2793325,18 15.1819283,18 L4.82485341,18 C3.72312238,18 2.90112951,17.1067101 3.10195,16.0217357 C3.10195,16.0217357 2.82999291,10.4705882 10.0033909,10.4705882 C17.1767888,10.4705882 16.9095477,16.0413911 16.9095477,16.0413911 Z" id="Combined-Shape"></path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
|
|
@ -0,0 +1,18 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
|
||||
<title>Combined Shape</title>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<defs></defs>
|
||||
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="1280-copy-2" transform="translate(-542.000000, -100.000000)" fill="#FF8C74">
|
||||
<g id="Group-13" transform="translate(-36.000000, 79.000000)">
|
||||
<g id="Group-9" transform="translate(557.000000, 0.000000)">
|
||||
<g id="Group-18" transform="translate(21.000000, 21.000000)">
|
||||
<path d="M10.0033915,8.58823529 C8.15457082,8.58823529 6.65580551,7.11340859 6.65580551,5.29411765 C6.65580551,3.47482671 8.15457082,2 10.0033915,2 C11.8522122,2 13.3509776,3.47482671 13.3509776,5.29411765 C13.3509776,7.11340859 11.8522122,8.58823529 10.0033915,8.58823529 Z M16.9095477,16.0413911 C17.0571409,17.1231009 16.2793325,18 15.1819283,18 L4.82485341,18 C3.72312238,18 2.90112951,17.1067101 3.10195,16.0217357 C3.10195,16.0217357 2.82999291,10.4705882 10.0033909,10.4705882 C17.1767888,10.4705882 16.9095477,16.0413911 16.9095477,16.0413911 Z" id="Combined-Shape"></path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
|
|
@ -0,0 +1,18 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
|
||||
<title>Combined Shape</title>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<defs></defs>
|
||||
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="1280-copy-2" transform="translate(-542.000000, -100.000000)" fill="#F189BA">
|
||||
<g id="Group-13" transform="translate(-36.000000, 79.000000)">
|
||||
<g id="Group-9" transform="translate(557.000000, 0.000000)">
|
||||
<g id="Group-18" transform="translate(21.000000, 21.000000)">
|
||||
<path d="M10.0033915,8.58823529 C8.15457082,8.58823529 6.65580551,7.11340859 6.65580551,5.29411765 C6.65580551,3.47482671 8.15457082,2 10.0033915,2 C11.8522122,2 13.3509776,3.47482671 13.3509776,5.29411765 C13.3509776,7.11340859 11.8522122,8.58823529 10.0033915,8.58823529 Z M16.9095477,16.0413911 C17.0571409,17.1231009 16.2793325,18 15.1819283,18 L4.82485341,18 C3.72312238,18 2.90112951,17.1067101 3.10195,16.0217357 C3.10195,16.0217357 2.82999291,10.4705882 10.0033909,10.4705882 C17.1767888,10.4705882 16.9095477,16.0413911 16.9095477,16.0413911 Z" id="Combined-Shape"></path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
|
|
@ -0,0 +1,18 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: Sketch 44.1 (41455) - http://www.bohemiancoding.com/sketch -->
|
||||
<title>Combined Shape</title>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<defs></defs>
|
||||
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="1280-copy-2" transform="translate(-542.000000, -100.000000)" fill="#6673CE">
|
||||
<g id="Group-13" transform="translate(-36.000000, 79.000000)">
|
||||
<g id="Group-9" transform="translate(557.000000, 0.000000)">
|
||||
<g id="Group-18" transform="translate(21.000000, 21.000000)">
|
||||
<path d="M10.0033915,8.58823529 C8.15457082,8.58823529 6.65580551,7.11340859 6.65580551,5.29411765 C6.65580551,3.47482671 8.15457082,2 10.0033915,2 C11.8522122,2 13.3509776,3.47482671 13.3509776,5.29411765 C13.3509776,7.11340859 11.8522122,8.58823529 10.0033915,8.58823529 Z M16.9095477,16.0413911 C17.0571409,17.1231009 16.2793325,18 15.1819283,18 L4.82485341,18 C3.72312238,18 2.90112951,17.1067101 3.10195,16.0217357 C3.10195,16.0217357 2.82999291,10.4705882 10.0033909,10.4705882 C17.1767888,10.4705882 16.9095477,16.0413911 16.9095477,16.0413911 Z" id="Combined-Shape"></path>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
|
|
@ -0,0 +1,4 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<path d="M10.0033915,8.58823529 C8.15457082,8.58823529 6.65580551,7.11340859 6.65580551,5.29411765 C6.65580551,3.47482671 8.15457082,2 10.0033915,2 C11.8522122,2 13.3509776,3.47482671 13.3509776,5.29411765 C13.3509776,7.11340859 11.8522122,8.58823529 10.0033915,8.58823529 Z M16.9095477,16.0413911 C17.0571409,17.1231009 16.2793325,18 15.1819283,18 L4.82485341,18 C3.72312238,18 2.90112951,17.1067101 3.10195,16.0217357 C3.10195,16.0217357 2.82999291,10.4705882 10.0033909,10.4705882 C17.1767888,10.4705882 16.9095477,16.0413911 16.9095477,16.0413911 Z"></path>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 753 B |
143
src/index.html
143
src/index.html
|
|
@ -36,86 +36,89 @@
|
|||
<div class="container">
|
||||
<div class="slides">
|
||||
<div class="slide slide--one">
|
||||
|
||||
<div class="slide__inner">
|
||||
<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" target="_blank" href="https://blog.status.im/">Blog</a>
|
||||
<a class="nav__item nav__item--features" href="#">Features</a>
|
||||
<a class="nav__item nav__item--about" href="#">Discover</a>
|
||||
<a class="nav__item nav__item--about" target="_blank" href="https://hackathon.status.im/">Hackathon</a>
|
||||
<a class="nav__item nav__item--about" target="_blank" href="https://wiki.status.im/">Wiki</a>
|
||||
<a class="nav__item nav__item--about" target="_blank" href="https://github.com/status-im">Github</a>
|
||||
<a class="nav__item" target="_blank" href="https://hackathon.status.im/">Hackathon</a>
|
||||
<a class="nav__item" target="_blank" href="https://wiki.status.im/">Wiki</a>
|
||||
</div>
|
||||
<div class="nav nav--right">
|
||||
<a class="nav__item" target="_blank" href="https://blog.status.im/">Facebook</a>
|
||||
<a class="nav__item" target="_blank" href="https://twitter.com/ethstatus">Twitter</a>
|
||||
<a class="nav__item" target="_blank" href="http://slack.status.im/">Slack</a>
|
||||
<a class="nav__item" target="_blank" href="https://github.com/status-im">Github</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 class="tagline">
|
||||
<h2 class="tagline__title">Ethereum. Anywhere.</h2>
|
||||
<div class="tagline__body">Status is a browser, messenger, and gateway to a decentralized world.</div>
|
||||
<div class="tagline__form">
|
||||
<div class="email-form">
|
||||
<!-- Mailchimp -->
|
||||
<form action="//status.us13.list-manage.com/subscribe/post?u=d0c1a0be2adff281b52e27a7f&id=09e2d9ae07" method="post" name="mc-embedded-subscribe-form" id="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
|
||||
<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">
|
||||
<input type="submit" value="TRY THE ALPHA" 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>
|
||||
</div>
|
||||
<div class="tagline__footer">
|
||||
<div class="tagline__footer-inner">
|
||||
Available in Alpha for Android and iPhone
|
||||
<div class="crowdsale">
|
||||
|
||||
<div class="tokens">
|
||||
<div class="token-wrap token-wrap--status"><div class="token token--status"></div></div>
|
||||
<div class="token-wrap"><div class="token token--blue"></div></div>
|
||||
<div class="token-wrap"><div class="token token--pink"></div></div>
|
||||
<div class="token-wrap"><div class="token token--orange"></div></div>
|
||||
<div class="token-wrap"><div class="token token--purple"></div></div>
|
||||
<div class="token-wrap"><div class="token token--green"></div></div>
|
||||
<div class="token-wrap"><div class="token token--blue"></div></div>
|
||||
<div class="token-wrap"><div class="token token--pink"></div></div>
|
||||
<div class="token-wrap"><div class="token token--orange"></div></div>
|
||||
<div class="token-wrap"><div class="token token--purple"></div></div>
|
||||
<div class="token-wrap"><div class="token token--green"></div></div>
|
||||
<div class="token-wrap"><div class="token token--blue"></div></div>
|
||||
<div class="token-wrap"><div class="token token--pink"></div></div>
|
||||
<div class="token-wrap"><div class="token token--orange"></div></div>
|
||||
<div class="token-wrap"><div class="token token--purple"></div></div>
|
||||
<div class="token-wrap"><div class="token token--green"></div></div>
|
||||
</div>
|
||||
|
||||
<div class="tagline">
|
||||
<h2 class="tagline__title">Introducing the Status Network</h2>
|
||||
<div class="tagline__body">The Status Contribution Period will begin at 2pm (GMT+0) on June 17th 2017</div>
|
||||
<div class="tagline__buttons">
|
||||
<a class="button button--bg-white button--color-blue" target="_blank" href="https://status.im/whitepaper.pdf">Read the Whitepaper</a>
|
||||
<a class="button button--bg-white button--color-purple button--more" href="#">More about Status</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="phones">
|
||||
<div class="phone-wrap phone-wrap--iphone">
|
||||
<div class="phone phone--iphone the-iphone">
|
||||
<div class="the-iphone-dot"></div>
|
||||
<div class="the-iphone-line"></div>
|
||||
<div class="the-iphone-screen"></div>
|
||||
<div class="the-iphone-button"></div>
|
||||
|
||||
<div class="about">
|
||||
<div class="tagline">
|
||||
<h2 class="tagline__title">What is Status?</h2>
|
||||
<div class="tagline__body">Status is an open source messaging platform and mobile browser to interact with decentralized applications that run on the Ethereum Network.</div>
|
||||
<div class="tagline__buttons">
|
||||
<div class="app-buttons">
|
||||
<a class="app-button app-button--android" target="_blank" href="https://test.status.im">
|
||||
<span class="app-button__title">Download Alpha</span>
|
||||
<span class="app-button__platform">Android</span>
|
||||
<span class="app-button__icon"></span>
|
||||
</a>
|
||||
<a class="app-button app-button--ios" href="#">
|
||||
<span class="app-button__title">Request TestFlight</span>
|
||||
<span class="app-button__platform">IOS</span>
|
||||
<span class="app-button__icon"></span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tagline__footer">
|
||||
<div class="tagline__footer-inner">
|
||||
Available in Alpha for Android and iPhone
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="phone-wrap phone-wrap--android">
|
||||
<div class="phone phone--android the-android">
|
||||
<div class="the-android-dot"></div>
|
||||
<div class="the-android-line"></div>
|
||||
<div class="the-android-screen"></div>
|
||||
<div class="the-android-button"></div>
|
||||
</div>
|
||||
<div class="app">
|
||||
<div class="app-inner"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="features-wrap">
|
||||
<div class="features">
|
||||
<div class="features">
|
||||
<div class="features__item features__item--send">
|
||||
<span class="features__icon"></span>
|
||||
<div class="features-text">
|
||||
|
|
@ -137,7 +140,7 @@
|
|||
<p class="features__description">Discover nearby Status users to exchange goods and services.</p>
|
||||
</div>
|
||||
</div>
|
||||
<a class="button button--secondary button--more" href="#">Learn more</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -563,7 +566,21 @@
|
|||
<h2 class="slide__title">Early access</h2>
|
||||
<p class="slide__description">We're working hard to make Status available to everyone. Join our community today to try the alpha release, and be a part of the transition to a more open internet.</p>
|
||||
</div>
|
||||
<a href="#" class="button button--scroll-top">JOIN OUR COMMUNITY</a>
|
||||
<div class="email-form">
|
||||
<!-- Mailchimp -->
|
||||
<form action="//status.us13.list-manage.com/subscribe/post?u=d0c1a0be2adff281b52e27a7f&id=09e2d9ae07" method="post" name="mc-embedded-subscribe-form" id="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
|
||||
<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">
|
||||
<input type="submit" value="TRY THE ALPHA" 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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -9954,11 +9954,11 @@ var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol
|
|||
var body = document.querySelectorAll("body")[0];
|
||||
var tagline = document.querySelectorAll(".tagline")[0];
|
||||
|
||||
var iphone = document.querySelectorAll(".phone-wrap--iphone")[0],
|
||||
android = document.querySelectorAll(".phone-wrap--android")[0],
|
||||
features = document.querySelectorAll(".features-wrap")[0],
|
||||
var features = document.querySelectorAll(".features-wrap")[0],
|
||||
slideAbout = document.querySelectorAll(".about")[0],
|
||||
slideTwo = document.querySelectorAll(".slide--two")[0],
|
||||
slideThree = document.querySelectorAll(".slide--three")[0],
|
||||
slideFour = document.querySelectorAll(".slide--four")[0],
|
||||
slideSix = document.querySelectorAll(".slide--six")[0],
|
||||
cookieButton = document.querySelectorAll(".cookie-popup-button")[0];
|
||||
|
||||
|
|
@ -9972,7 +9972,7 @@ var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol
|
|||
}
|
||||
|
||||
document.querySelectorAll(".button--more")[0].addEventListener('click', function (event) {
|
||||
animateScroll(slideTwo, 600, "easeInOutCubic", 0);
|
||||
animateScroll(slideAbout, 600, "easeInOutCubic", 0);
|
||||
event.preventDefault();
|
||||
});
|
||||
|
||||
|
|
@ -9992,8 +9992,8 @@ var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol
|
|||
event.preventDefault();
|
||||
});
|
||||
|
||||
document.querySelectorAll(".button--scroll-top")[0].addEventListener('click', function (event) {
|
||||
animateScroll(body, 600, "easeInOutCubic", 0);
|
||||
document.querySelectorAll(".app-button--ios")[0].addEventListener('click', function (event) {
|
||||
animateScroll(slideFour, 600, "easeInOutCubic", 0);
|
||||
setTimeout(function () {
|
||||
document.querySelectorAll(".email-form__input--email")[0].focus();
|
||||
}, 1000);
|
||||
|
|
@ -10002,27 +10002,6 @@ var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol
|
|||
|
||||
new ScrollOver({
|
||||
keyframes: [{
|
||||
element: iphone,
|
||||
domain: [0, 800],
|
||||
animate: [{
|
||||
property: "translateY",
|
||||
range: [0, 60]
|
||||
}]
|
||||
}, {
|
||||
element: android,
|
||||
domain: [0, 800],
|
||||
animate: [{
|
||||
property: "translateY",
|
||||
range: [0, 110]
|
||||
}]
|
||||
}, {
|
||||
element: features,
|
||||
domain: [200, 800],
|
||||
animate: [{
|
||||
property: "translateY",
|
||||
range: [0, -40]
|
||||
}]
|
||||
}, {
|
||||
element: slideTwo,
|
||||
reveal: {
|
||||
when: 440,
|
||||
|
|
|
|||
|
|
@ -4,11 +4,11 @@ let animateScroll = require("./lib/animatescroll.js")
|
|||
let body = document.querySelectorAll("body")[0]
|
||||
let tagline = document.querySelectorAll(".tagline")[0]
|
||||
|
||||
let iphone = document.querySelectorAll(".phone-wrap--iphone")[0],
|
||||
android = document.querySelectorAll(".phone-wrap--android")[0],
|
||||
features = document.querySelectorAll(".features-wrap")[0],
|
||||
let features = document.querySelectorAll(".features-wrap")[0],
|
||||
slideAbout = document.querySelectorAll(".about")[0],
|
||||
slideTwo = document.querySelectorAll(".slide--two")[0],
|
||||
slideThree = document.querySelectorAll(".slide--three")[0],
|
||||
slideFour = document.querySelectorAll(".slide--four")[0],
|
||||
slideSix = document.querySelectorAll(".slide--six")[0],
|
||||
cookieButton = document.querySelectorAll(".cookie-popup-button")[0]
|
||||
|
||||
|
|
@ -20,7 +20,7 @@ if (statusCookiePolicyAccepted == "accepted") {
|
|||
}
|
||||
|
||||
document.querySelectorAll(".button--more")[0].addEventListener('click', function(event){
|
||||
animateScroll(slideTwo, 600, "easeInOutCubic", 0)
|
||||
animateScroll(slideAbout, 600, "easeInOutCubic", 0)
|
||||
event.preventDefault()
|
||||
})
|
||||
|
||||
|
|
@ -40,8 +40,8 @@ cookieButton.addEventListener('click', function(event){
|
|||
event.preventDefault()
|
||||
})
|
||||
|
||||
document.querySelectorAll(".button--scroll-top")[0].addEventListener('click', function(event){
|
||||
animateScroll(body, 600, "easeInOutCubic", 0)
|
||||
document.querySelectorAll(".app-button--ios")[0].addEventListener('click', function(event){
|
||||
animateScroll(slideFour, 600, "easeInOutCubic", 0)
|
||||
setTimeout(function(){
|
||||
document.querySelectorAll(".email-form__input--email")[0].focus()
|
||||
}, 1000)
|
||||
|
|
@ -51,36 +51,6 @@ document.querySelectorAll(".button--scroll-top")[0].addEventListener('click', fu
|
|||
|
||||
new ScrollOver({
|
||||
keyframes : [
|
||||
{
|
||||
element : iphone,
|
||||
domain : [0, 800],
|
||||
animate: [
|
||||
{
|
||||
property : "translateY",
|
||||
range : [0, 60]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
element : android,
|
||||
domain : [0, 800],
|
||||
animate: [
|
||||
{
|
||||
property : "translateY",
|
||||
range : [0, 110]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
element : features,
|
||||
domain : [200, 800],
|
||||
animate: [
|
||||
{
|
||||
property : "translateY",
|
||||
range : [0, -40]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
element : slideTwo,
|
||||
reveal:
|
||||
|
|
|
|||
|
|
@ -1,16 +1,3 @@
|
|||
.header-wrap {
|
||||
margin: 30px 0 0 0;
|
||||
width: 1080px;
|
||||
height: 130px;
|
||||
background-color: rgba(73, 87, 184, 1);
|
||||
background-image: url(../img/new-site/dot.svg);
|
||||
box-shadow: 0px 10px 14px 0px rgba(79,90,166,0.35);
|
||||
border-top-left-radius: 10px;
|
||||
border-top-right-radius: 10px;
|
||||
transform: translate3d(0, 0, 0);
|
||||
transition: transform .6s ease, opacity .3s ease;
|
||||
}
|
||||
|
||||
.header {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
|
|
@ -22,7 +9,7 @@
|
|||
}
|
||||
|
||||
.header__inner {
|
||||
width: 1012px;
|
||||
width: 1080px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
|
@ -77,7 +64,7 @@ a.logo {
|
|||
}
|
||||
|
||||
.header .nav a {
|
||||
color: $colorWhite;
|
||||
color: #49555F;
|
||||
}
|
||||
|
||||
.header .nav a.nav__item--blog::before {
|
||||
|
|
@ -164,82 +151,39 @@ li.social-link a {
|
|||
|
||||
@media (max-width: 1140px) {
|
||||
|
||||
.header {
|
||||
top: 20px;
|
||||
box-sizing: border-box;
|
||||
padding: 0 20px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 960px) {
|
||||
|
||||
}
|
||||
|
||||
@media (max-width: 840px) {
|
||||
|
||||
.header {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.header__inner {
|
||||
width: 100%;
|
||||
margin: 40px;
|
||||
margin: 20px 0 0 0;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.header-wrap {
|
||||
margin: 0 0 0 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media (max-width: 960px) {
|
||||
.nav {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.nav:first-child {
|
||||
display: none;
|
||||
}
|
||||
|
||||
a.logo,
|
||||
.shares {
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 840px) {
|
||||
.header__inner {
|
||||
margin: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.header__inner {
|
||||
margin: 20px 20px 20px 17px;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.header-wrap {
|
||||
height: 92px;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.logo__icon {
|
||||
height: 48px;
|
||||
width: 48px;
|
||||
background-size: 48px;
|
||||
flex-shrink: 0;
|
||||
flex-grow: 0;
|
||||
}
|
||||
|
||||
.logo__title {
|
||||
font-size: 18px;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
.logo__description {
|
||||
font-size: 14px;
|
||||
line-height: 15px;
|
||||
}
|
||||
|
||||
.logo__description span{
|
||||
display: none;
|
||||
}
|
||||
|
||||
.logo_text {
|
||||
margin: 0px 0 0 4px;
|
||||
}
|
||||
|
||||
.shares .social-links li.social-link {
|
||||
margin: 0 0 0 7px;
|
||||
}
|
||||
|
||||
.header .social-link.social-link--fb {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@
|
|||
@import "cookies";
|
||||
|
||||
@import "slides";
|
||||
@import "tokens";
|
||||
@import "slide--one";
|
||||
@import "slide--two";
|
||||
@import "slide--three";
|
||||
|
|
|
|||
|
|
@ -12,15 +12,10 @@
|
|||
width: auto;
|
||||
}
|
||||
|
||||
.slide.slide--four .button {
|
||||
margin: 20px auto 0;
|
||||
width: 170px;
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
|
||||
.slide.slide--four {
|
||||
padding: 0px 0px 60px 0px
|
||||
padding: 0px 0px 0 0px
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,81 +1,186 @@
|
|||
.slide.slide--one {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.slide.slide--one .slide__inner {
|
||||
margin: 30px 0 0 0;
|
||||
height: 780px;
|
||||
background-color: #4957B8;
|
||||
background-image: url(../img/new-site/dot.svg);
|
||||
box-shadow: 0px 10px 14px 0px rgba(79,90,166,0.35);
|
||||
border-radius: 10px;
|
||||
transform: translate3d(0, 0, 0);
|
||||
transition: transform .6s ease, opacity .3s ease;
|
||||
margin: 0 0 0 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.tagline {
|
||||
display: flex;
|
||||
flex-wrap:wrap;
|
||||
justify-content:center;
|
||||
position: absolute;
|
||||
z-index: 200;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
width: 440px;
|
||||
left: 90px;
|
||||
top: 260px;
|
||||
margin: 50px 0;
|
||||
}
|
||||
|
||||
.crowdsale {
|
||||
background-color: $colorWhite;
|
||||
box-shadow: 0 5px 8px 0 rgba(72,89,102,0.10);
|
||||
padding: 0 0 60px 0;
|
||||
background-image: linear-gradient(0deg, #FFFFFF 0%, #F2F5F8 93%);
|
||||
}
|
||||
|
||||
.crowdsale .tagline {
|
||||
margin: 130px 0 30px 0;
|
||||
}
|
||||
|
||||
.tagline .tagline__title {
|
||||
width: 440px;
|
||||
font-family:$PostGroteskMedium;
|
||||
color: $colorWhite;
|
||||
font-size: 25px;
|
||||
color: #49555F;
|
||||
font-size: 27px;
|
||||
line-height: 35px;
|
||||
margin: 0 0 5px 0;
|
||||
}
|
||||
|
||||
.crowdsale .tagline .tagline__title {
|
||||
opacity: 0;
|
||||
transform: translate3d(0, 20px, 0);
|
||||
transition: transform .6s ease, opacity .6s ease;
|
||||
transition-delay: .1s;
|
||||
transition-delay: .2s;
|
||||
}
|
||||
|
||||
.shown .tagline__title {
|
||||
.shown .crowdsale .tagline .tagline__title {
|
||||
opacity: 1;
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
|
||||
.tagline .tagline__body {
|
||||
color: $colorWhite;
|
||||
width: 440px;
|
||||
color: #70808D;
|
||||
opacity: .6;
|
||||
font-size: 18px;
|
||||
line-height: 25px;
|
||||
margin: 0 0 20px 0;
|
||||
|
||||
opacity: 0;
|
||||
transform: translate3d(0, 20px, 0);
|
||||
transition: transform .6s ease,opacity .6s ease;
|
||||
transition-delay: .2s;
|
||||
line-height: 26px;
|
||||
margin: 10px 0 20px 0;
|
||||
}
|
||||
|
||||
.shown .tagline__body {
|
||||
opacity: .6;
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
|
||||
.tagline__form {
|
||||
.crowdsale .tagline .tagline__body {
|
||||
opacity: 0;
|
||||
transform: translate3d(0, 20px, 0);
|
||||
transition: transform .6s ease,opacity .6s ease;
|
||||
transition-delay: .3s;
|
||||
}
|
||||
|
||||
.shown .tagline__form {
|
||||
|
||||
.shown .crowdsale .tagline .tagline__body {
|
||||
opacity: .6;
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
|
||||
.tagline__buttons {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.crowdsale .tagline .tagline__buttons {
|
||||
opacity: 0;
|
||||
transform: translate3d(0, 20px, 0);
|
||||
transition: transform .6s ease,opacity .6s ease;
|
||||
transition-delay: .4s;
|
||||
}
|
||||
|
||||
.shown .crowdsale .tagline .tagline__buttons {
|
||||
opacity: 1;
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
|
||||
.tagline__buttons .button {
|
||||
margin: 0 8px;
|
||||
width: 224px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.tagline__buttons .button:hover {
|
||||
box-shadow: 0 5px 12px 0 rgba(175,192,202,0.4);
|
||||
transform: translate3d(0, -2px, 0);
|
||||
}
|
||||
|
||||
.button.button--bg-white {
|
||||
background-color: $colorWhite;
|
||||
box-shadow: 0 3px 8px 0 rgba(175,192,202,0.48);
|
||||
}
|
||||
|
||||
.button.button--color-blue {
|
||||
color: #68C0F8;
|
||||
}
|
||||
|
||||
.button.button--color-purple {
|
||||
color: #6673CE;
|
||||
}
|
||||
|
||||
.about {
|
||||
padding: 50px 0 0 0
|
||||
}
|
||||
|
||||
|
||||
.app-buttons {
|
||||
display: flex;
|
||||
margin: 0 0 0 0;
|
||||
}
|
||||
|
||||
.app-button {
|
||||
display: block;
|
||||
text-align: left;
|
||||
width: 210px;
|
||||
height: 68px;
|
||||
padding: 16px;
|
||||
box-sizing: border-box;
|
||||
margin: 0 8px 0 8px;
|
||||
background: $colorWhite;
|
||||
box-shadow: 0 3px 8px 0 rgba(175,192,202,0.48);
|
||||
border-radius: 10px;
|
||||
position: relative;
|
||||
transform: translate3d(0, 0, 0);
|
||||
transition: box-shadow .2s ease, transform .2s ease
|
||||
}
|
||||
|
||||
.app-button:hover {
|
||||
box-shadow: 0 5px 12px 0 rgba(175,192,202,0.4);
|
||||
transform: translate3d(0, -2px, 0);
|
||||
}
|
||||
|
||||
.app-button__title {
|
||||
display: block;
|
||||
color: #A9B3BB;
|
||||
font-size: 14px;
|
||||
line-height: 15px;
|
||||
padding: 0 0 6px 0;
|
||||
}
|
||||
|
||||
.app-button__platform {
|
||||
display: block;
|
||||
color: #49555F;
|
||||
font-size: 15px;
|
||||
line-height: 15px;
|
||||
}
|
||||
|
||||
.app-button__icon {
|
||||
display: block;
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
position: absolute;
|
||||
right: 8px;
|
||||
top: 8px;
|
||||
background-size: 52px;
|
||||
}
|
||||
|
||||
.app-button--android .app-button__icon {
|
||||
background-image: url(../img/crowdsale/icon-android.svg);
|
||||
}
|
||||
|
||||
.app-button--ios .app-button__icon {
|
||||
background-image: url(../img/crowdsale/icon-apple.svg);
|
||||
}
|
||||
|
||||
.email-form {
|
||||
display: flex;
|
||||
width: 400px;
|
||||
position: relative;
|
||||
margin: 20px 0 0 0;
|
||||
}
|
||||
|
||||
.email-form.email-form--error .email-form__inner{
|
||||
.email-form.email-form--error .email-form__inner {
|
||||
animation-duration: .6s;
|
||||
animation-fill-mode: both;
|
||||
animation-name: shakeIt;
|
||||
|
|
@ -83,7 +188,7 @@
|
|||
}
|
||||
|
||||
.email-form a {
|
||||
color: rgba(255, 255, 255, 1);
|
||||
color: #6673CE;
|
||||
font-family: $PostGroteskMedium;
|
||||
}
|
||||
|
||||
|
|
@ -92,6 +197,8 @@
|
|||
width: 100%;
|
||||
text-align: left;
|
||||
margin: 10px 0 0 0;
|
||||
min-height: 80px;
|
||||
color: #70808D;
|
||||
}
|
||||
|
||||
.email-form__error-message {
|
||||
|
|
@ -111,8 +218,8 @@
|
|||
font-size: 15px;
|
||||
border-radius: 8px;
|
||||
text-align: left;
|
||||
background-color: rgba(255, 255, 255, .12);
|
||||
color: rgba(255, 255, 255, 1);
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
color: #70808D;
|
||||
line-height: 22px;
|
||||
|
||||
opacity: 0;
|
||||
|
|
@ -139,8 +246,8 @@
|
|||
|
||||
.email-form__input--email {
|
||||
text-align: left;
|
||||
background-color: rgba(255, 255, 255, .12);
|
||||
color: rgba(255, 255, 255, 1);
|
||||
background-color: #E5EAEE;
|
||||
color: #49555f;
|
||||
width: 215px;
|
||||
padding: 0 15px;
|
||||
margin: 0 10px 0 0;
|
||||
|
|
@ -153,8 +260,8 @@
|
|||
}
|
||||
|
||||
input.email-form__input--email:disabled {
|
||||
color: rgba(255, 255, 255, .4);
|
||||
background-color: rgba(255, 255, 255, .12);
|
||||
color: #8596A1;
|
||||
background-color: #E5EAEE;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
|
|
@ -167,12 +274,12 @@ input.email-form__input--email:disabled {
|
|||
}
|
||||
|
||||
.email-form__input--email:focus {
|
||||
background-color: rgba(255, 255, 255, .2);
|
||||
color: rgba(255, 255, 255, 1);
|
||||
background-color: #E5EAEE;
|
||||
color: #49555f;
|
||||
}
|
||||
|
||||
.email-form__input--email::-webkit-input-placeholder {
|
||||
color: rgba(255, 255, 255, .6);
|
||||
color: #8596A1;
|
||||
}
|
||||
|
||||
.email-form__input--email::-moz-placeholder {
|
||||
|
|
@ -191,7 +298,6 @@ input.email-form__input--email:disabled {
|
|||
width: 175px;
|
||||
flex-shrink: 0;
|
||||
flex-grow: 0;
|
||||
box-shadow: 0px 10px 10px 0px rgba(80,92,174,0.30);
|
||||
}
|
||||
|
||||
.email-form input[type="submit"]:disabled {
|
||||
|
|
@ -283,11 +389,12 @@ input.email-form__input--email:disabled {
|
|||
z-index: 400
|
||||
}
|
||||
|
||||
.features-wrap {
|
||||
position: relative;
|
||||
top: -139px;
|
||||
width: 1180px;
|
||||
height: 300px;
|
||||
.app-inner {
|
||||
width: 1035px;
|
||||
height: 537px;
|
||||
margin: 0 auto;
|
||||
background-size: 1035px;
|
||||
background-image: url(../img/crowdsale/phone@2x.png);
|
||||
}
|
||||
|
||||
.features {
|
||||
|
|
@ -295,12 +402,12 @@ input.email-form__input--email:disabled {
|
|||
width: 100%;
|
||||
height: 100%;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
padding: 20px 80px;
|
||||
|
||||
background: $colorWhite;
|
||||
box-shadow: 0px -2px 18px 0px rgba(72,89,102,0.25);
|
||||
justify-content: center;
|
||||
padding: 0 80px 60px 20px;
|
||||
border-radius: 10px;
|
||||
margin: -40px 0 0 0;
|
||||
|
||||
display: none;
|
||||
|
||||
// opacity: 0;
|
||||
// transform: translate3d(0, 40px, 0);
|
||||
|
|
@ -319,26 +426,14 @@ input.email-form__input--email:disabled {
|
|||
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;
|
||||
}
|
||||
|
||||
.button.button--secondary:hover {
|
||||
background-color: rgba(99, 112, 202, .2);
|
||||
}
|
||||
|
||||
.button.button--more:active {
|
||||
transform: translate3d(-50%, 0, 0) scale(.99)
|
||||
}
|
||||
|
||||
.features__item {
|
||||
text-align: center;
|
||||
width: 240px;
|
||||
margin: 0 32px;
|
||||
}
|
||||
|
||||
.features__icon {
|
||||
|
|
@ -375,63 +470,46 @@ input.email-form__input--email:disabled {
|
|||
}
|
||||
|
||||
|
||||
@media (max-width: 1280px) {
|
||||
|
||||
|
||||
}
|
||||
|
||||
@media (max-width: 1220px) {
|
||||
|
||||
.features-wrap {
|
||||
width: 1040px;
|
||||
|
||||
}
|
||||
|
||||
@media (max-width: 1080px) {
|
||||
|
||||
.crowdsale {
|
||||
//min-height: 700px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.features {
|
||||
padding: 20px 50px;
|
||||
.crowdsale .tagline {
|
||||
margin: 430px 0 30px 0;
|
||||
}
|
||||
|
||||
.tagline {
|
||||
left: 65px
|
||||
.app {
|
||||
position: relative;
|
||||
height: 415px;
|
||||
}
|
||||
|
||||
.phones {
|
||||
right: 40px;
|
||||
.app-inner {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
margin: 0 0 0 -400px;
|
||||
width: 800px;
|
||||
height: 415px;
|
||||
background-size: 800px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1140px) {
|
||||
|
||||
.slide.slide--one {
|
||||
margin: 20px 20px 0 20px;
|
||||
}
|
||||
|
||||
.slide.slide--one .slide__inner {
|
||||
margin: 0 0 0 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.features-wrap {
|
||||
width: 100%
|
||||
}
|
||||
|
||||
.features {
|
||||
width: auto;
|
||||
margin: 0 20px;
|
||||
}
|
||||
|
||||
.tagline {
|
||||
justify-content: flex-start;
|
||||
text-align: left;
|
||||
left: 40px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media (max-width: 1030px) {
|
||||
|
||||
.tagline {
|
||||
width: 300px;
|
||||
top: 230px;
|
||||
}
|
||||
|
||||
.email-form__success-message {
|
||||
|
||||
}
|
||||
|
||||
.email-form.email-form--valid input[type="submit"] {
|
||||
display: none;
|
||||
|
|
@ -439,12 +517,12 @@ input.email-form__input--email:disabled {
|
|||
|
||||
.email-form {
|
||||
flex-direction: column;
|
||||
width: 300px;
|
||||
//width: 300px;
|
||||
}
|
||||
|
||||
.email-form__inner {
|
||||
flex-direction: column;
|
||||
width: 300px;
|
||||
//width: 300px;
|
||||
}
|
||||
|
||||
.email-form__input--email {
|
||||
|
|
@ -460,115 +538,21 @@ input.email-form__input--email:disabled {
|
|||
|
||||
@media (max-width: 960px) {
|
||||
|
||||
.tagline,
|
||||
.email-form,
|
||||
.email-form__inner {
|
||||
width: 280px;
|
||||
}
|
||||
|
||||
.features-wrap {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.features {
|
||||
padding: 20px
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media (max-width: 922px) {
|
||||
|
||||
.slide.slide--one .slide__inner {
|
||||
height: 693px;
|
||||
}
|
||||
|
||||
|
||||
.tagline {
|
||||
width: 260px;
|
||||
top: 180px;
|
||||
}
|
||||
|
||||
.email-form,
|
||||
.email-form__inner {
|
||||
width: 260px;
|
||||
}
|
||||
|
||||
.phones {
|
||||
width: 404px;
|
||||
height: 548px;
|
||||
top: 91px;
|
||||
}
|
||||
|
||||
.phone-wrap--iphone {
|
||||
width: 247px;
|
||||
height: 516px;
|
||||
}
|
||||
|
||||
.phone-wrap--android {
|
||||
width: 246px;
|
||||
height: 486px;
|
||||
left: 149px;
|
||||
}
|
||||
|
||||
.the-iphone {
|
||||
width: 252px;
|
||||
height: 516px;
|
||||
}
|
||||
|
||||
.the-iphone-dot {
|
||||
top: 26px;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
}
|
||||
|
||||
.the-iphone-line {
|
||||
top: 38px;
|
||||
height: 5px;
|
||||
}
|
||||
|
||||
.the-iphone-screen {
|
||||
width: 229px;
|
||||
height: 405px;
|
||||
background-size: 229px;
|
||||
}
|
||||
|
||||
.the-iphone-button {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
bottom: 13px;
|
||||
}
|
||||
|
||||
.the-android {
|
||||
width: 246px;
|
||||
height: 486px;
|
||||
}
|
||||
|
||||
.the-android-screen {
|
||||
width: 222px;
|
||||
height: 394px;
|
||||
background-size: 222px;
|
||||
}
|
||||
|
||||
.the-android-button {
|
||||
bottom: 21px;
|
||||
}
|
||||
|
||||
.features__item {
|
||||
margin: 0 15px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 840px) {
|
||||
|
||||
.slide.slide--one .slide__inner {
|
||||
height: 670px;
|
||||
.email-form {
|
||||
margin: 20px auto 0;
|
||||
}
|
||||
|
||||
.tagline {
|
||||
left: 30px;
|
||||
}
|
||||
|
||||
.tagline,
|
||||
.email-form,
|
||||
.email-form__inner {
|
||||
width: 246px;
|
||||
|
|
@ -577,7 +561,6 @@ input.email-form__input--email:disabled {
|
|||
.tagline .tagline__title {
|
||||
font-size: 21px;
|
||||
line-height: 35px;
|
||||
margin: 0 0 0 0;
|
||||
}
|
||||
|
||||
.tagline .tagline__body {
|
||||
|
|
@ -615,38 +598,34 @@ input.email-form__input--email:disabled {
|
|||
right: 20px;
|
||||
top: 69px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
|
||||
.about {
|
||||
padding: 20px 0 0 0;
|
||||
}
|
||||
|
||||
.app-buttons {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.app-button {
|
||||
margin: 8px 0 8px ;
|
||||
}
|
||||
|
||||
input.email-form__input--email {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.slide.slide--one {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.slide.slide--one .slide__inner {
|
||||
height: auto;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.tagline {
|
||||
position: static;
|
||||
flex-direction: column;
|
||||
width: auto;
|
||||
left: 0;
|
||||
top: 0;
|
||||
margin: 110px 0 0px 0;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
.tagline,
|
||||
.email-form,
|
||||
.email-form__inner {
|
||||
width: auto;
|
||||
max-width: 300px;
|
||||
}
|
||||
|
||||
.email-form__success-message {
|
||||
margin: 0 0 40px 0;
|
||||
}
|
||||
|
||||
.email-form.email-form--error .email-form__inner{
|
||||
|
|
@ -657,88 +636,33 @@ input.email-form__input--email:disabled {
|
|||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.tagline .tagline__title {
|
||||
width: 100%;
|
||||
max-width: 340px;
|
||||
box-sizing: border-box;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
.tagline .tagline__body {
|
||||
width: 100%;
|
||||
max-width: 340px;
|
||||
box-sizing: border-box;
|
||||
padding: 0 20px;
|
||||
margin: 0 0 10px 0;
|
||||
}
|
||||
|
||||
.tagline__footer {
|
||||
display: block;
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
.phones {
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 340px;
|
||||
width: auto;
|
||||
max-width: 500px;
|
||||
overflow: hidden;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.phone-wrap--iphone {
|
||||
left: 10px;
|
||||
transform: translate3d(0, 0, 0) !important;
|
||||
}
|
||||
|
||||
.phone-wrap--android {
|
||||
left: auto;
|
||||
right: 10px;
|
||||
transform: translate3d(0, 0, 0) !important;
|
||||
}
|
||||
|
||||
.features-wrap {
|
||||
top: 0;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.features {
|
||||
margin: 0;
|
||||
border-radius: 0;
|
||||
height: auto;
|
||||
.tagline__buttons {
|
||||
flex-direction: column;
|
||||
padding: 5px 20px 5px 10px;
|
||||
}
|
||||
|
||||
.features__item {
|
||||
width: auto;
|
||||
text-align: left;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 0;
|
||||
.tagline__buttons .button {
|
||||
margin: 8px 0;
|
||||
}
|
||||
|
||||
.features__title {
|
||||
font-size: 16px;
|
||||
line-height: 20px;
|
||||
.crowdsale .tagline {
|
||||
margin: 390px 0 0 0
|
||||
}
|
||||
|
||||
.features__icon {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
flex-shrink: 0;
|
||||
flex-grow: 0;
|
||||
background-position: center center;
|
||||
}
|
||||
|
||||
.features__item--send .features__icon {
|
||||
background-size: 70px
|
||||
}
|
||||
|
||||
.features-text {
|
||||
margin: 0 0 0 10px;
|
||||
padding: 25px 0;
|
||||
border-bottom: 1px solid #EEF2F5;
|
||||
}
|
||||
|
||||
.features__item:nth-child(3) .features-text {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.button.button--more {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes shakeIt {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
.slide.slide--two {
|
||||
padding: 40px 0 40px 0;
|
||||
margin: -140px 0 0 0;
|
||||
}
|
||||
|
||||
.dapps {
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
}
|
||||
|
||||
.container {
|
||||
max-width: 1280px;
|
||||
//max-width: 1280px;
|
||||
margin: 0 auto;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,333 @@
|
|||
.tokens {
|
||||
position: relative;
|
||||
top: 80px;
|
||||
height: 340px;
|
||||
width: 1280px;
|
||||
margin: 0 auto 0;
|
||||
}
|
||||
|
||||
.token-wrap {
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
transition: transform 2.2s cubic-bezier(0.140, 0.805, 0.275, 1.080), opacity .4s ease;
|
||||
}
|
||||
|
||||
.token {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
background: $colorWhite;
|
||||
box-shadow: 0 4px 6px 0 rgba(175,192,202,0.28);
|
||||
}
|
||||
|
||||
.token-wrap:nth-child(2) {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
top: 12px;
|
||||
left: -32px;
|
||||
transition-delay: 1.6s;
|
||||
transform: translate3d(-60px, 90px, 0);
|
||||
}
|
||||
|
||||
.token-wrap:nth-child(3) {
|
||||
width: 46px;
|
||||
height: 46px;
|
||||
top: 47px;
|
||||
left: 154px;
|
||||
transition-delay: 1.8s;
|
||||
transform: translate3d(-70px, 140px, 0);
|
||||
}
|
||||
|
||||
.token-wrap:nth-child(4) {
|
||||
width: 46px;
|
||||
height: 46px;
|
||||
top: 25px;
|
||||
left: 292px;
|
||||
transition-delay: 1.65s;
|
||||
transform: translate3d(-90px, 150px, 0);
|
||||
}
|
||||
|
||||
.token-wrap:nth-child(5) {
|
||||
width: 46px;
|
||||
height: 46px;
|
||||
top: 181px;
|
||||
left: 79px;
|
||||
transition-delay: 1.7s;
|
||||
transform: translate3d(-40px, 180px, 0);
|
||||
}
|
||||
|
||||
.token-wrap:nth-child(6) {
|
||||
width: 54px;
|
||||
height: 54px;
|
||||
top: 187px;
|
||||
left: 227px;
|
||||
transition-delay: 1.8s;
|
||||
transform: translate3d(-20px, 100px, 0);
|
||||
}
|
||||
|
||||
.token-wrap:nth-child(7) {
|
||||
width: 54px;
|
||||
height: 54px;
|
||||
top: 130px;
|
||||
left: 387px;
|
||||
transition-delay: 1.9s;
|
||||
transform: translate3d(-30px, 190px, 0);
|
||||
}
|
||||
|
||||
.token-wrap:nth-child(8) {
|
||||
width: 62px;
|
||||
height: 62px;
|
||||
top: 0px;
|
||||
left: 521px;
|
||||
transition-delay: 1.6s;
|
||||
transform: translate3d(-40px, 180px, 0);
|
||||
}
|
||||
|
||||
.token-wrap:nth-child(9) {
|
||||
width: 66px;
|
||||
height: 66px;
|
||||
top: 252px;
|
||||
left: 442px;
|
||||
transition-delay: 1.76s;
|
||||
transform: translate3d(-40px, 160px, 0);
|
||||
}
|
||||
|
||||
.token-wrap:nth-child(10) {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
top: 69px;
|
||||
right: 462px;
|
||||
transition-delay: 1.5s;
|
||||
transform: translate3d(20px, 190px, 0);
|
||||
}
|
||||
|
||||
.token-wrap:nth-child(11) {
|
||||
width: 58px;
|
||||
height: 58px;
|
||||
top: 170px;
|
||||
right: 355px;
|
||||
transition-delay: 1.6s;
|
||||
transform: translate3d(30px, 110px, 0);
|
||||
}
|
||||
|
||||
.token-wrap:nth-child(12) {
|
||||
width: 54px;
|
||||
height: 54px;
|
||||
top: 101px;
|
||||
right: 221px;
|
||||
transition-delay: 1.7s;
|
||||
transform: translate3d(20px, 130px, 0);
|
||||
}
|
||||
|
||||
.token-wrap:nth-child(13) {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
top: 50px;
|
||||
right: 104px;
|
||||
transition-delay: 1.8s;
|
||||
transform: translate3d(20px, 140px, 0);
|
||||
}
|
||||
|
||||
.token-wrap:nth-child(14) {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
top: 237px;
|
||||
right: 504px;
|
||||
transition-delay: 1.9s;
|
||||
transform: translate3d(40px, 120px, 0);
|
||||
}
|
||||
|
||||
.token-wrap:nth-child(15) {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
top: 233px;
|
||||
right: 142px;
|
||||
transition-delay: 2s;
|
||||
transform: translate3d(30px, 140px, 0);
|
||||
}
|
||||
|
||||
.token-wrap:nth-child(16) {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
top: 130px;
|
||||
right: -40px;
|
||||
transition-delay: 1.6s;
|
||||
transform: translate3d(20px, 140px, 0);
|
||||
}
|
||||
|
||||
.shown .token-wrap {
|
||||
opacity: 1;
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
|
||||
.token {
|
||||
animation: floatUp 12s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.token-wrap:nth-child(2) .token { animation-delay: 1; }
|
||||
.token-wrap:nth-child(3) .token { animation-delay: 1.2s; }
|
||||
.token-wrap:nth-child(4) .token { animation-delay: 1.4s; }
|
||||
.token-wrap:nth-child(5) .token { animation-name: floatDown; animation-delay: 1.6s; }
|
||||
.token-wrap:nth-child(6) .token { animation-delay: 1.8s;}
|
||||
.token-wrap:nth-child(7) .token { animation-name: floatDown; animation-delay: 2s; }
|
||||
.token-wrap:nth-child(8) .token { animation-delay: 2.2s; }
|
||||
.token-wrap:nth-child(9) .token { animation-name: floatDown; animation-delay: 2.4s; }
|
||||
.token-wrap:nth-child(10) .token { animation-delay: 2.6s; }
|
||||
.token-wrap:nth-child(11) .token { animation-delay: 2.6s; }
|
||||
.token-wrap:nth-child(12) .token { animation-name: floatDown; animation-delay: 1.4s; }
|
||||
.token-wrap:nth-child(13) .token { animation-name: floatDown; animation-delay: 1.4s; }
|
||||
.token-wrap:nth-child(14) .token { animation-delay: 2.6s; }
|
||||
.token-wrap:nth-child(15) .token { animation-delay: 2.6s; }
|
||||
|
||||
@keyframes floatUp {
|
||||
0% { transform: translatey(0px); }
|
||||
50% { transform: translatey(-26px); }
|
||||
100% { transform: translatey(0px); }
|
||||
}
|
||||
@keyframes floatDown {
|
||||
0% { transform: translatey(0px); }
|
||||
50% { transform: translatey(26px); }
|
||||
100% { transform: translatey(0px); }
|
||||
}
|
||||
|
||||
.token-wrap.token-wrap--status {
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
margin: -58px 0 0 -58px;
|
||||
width: 116px;
|
||||
height: 116px;
|
||||
transition-delay: .0s;
|
||||
transform: translate3d(0px, 80px, 0) scale(.8);
|
||||
transition: transform 1s cubic-bezier(0.140, 0.805, 0.275, 1.080), opacity .4s ease;
|
||||
}
|
||||
|
||||
|
||||
.shown .token-wrap.token-wrap--status {
|
||||
opacity: 1;
|
||||
transform: translate3d(0, 0, 0) scale(1);
|
||||
}
|
||||
|
||||
.token.token--status {
|
||||
background: #5B6DEE;
|
||||
box-shadow: 0 8px 16px 0 rgba(83,88,120,0.15);
|
||||
}
|
||||
|
||||
.token::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
margin: -10px 0 0 -10px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background-image: url(../img/crowdsale/user.svg);
|
||||
background-size: 20px;
|
||||
}
|
||||
|
||||
.token.token--blue::after {
|
||||
background-image: url(../img/crowdsale/user-blue.svg);
|
||||
}
|
||||
.token.token--pink::after {
|
||||
background-image: url(../img/crowdsale/user-pink.svg);
|
||||
}
|
||||
.token.token--orange::after {
|
||||
background-image: url(../img/crowdsale/user-orange.svg);
|
||||
}
|
||||
.token.token--purple::after {
|
||||
background-image: url(../img/crowdsale/user-purple.svg);
|
||||
}
|
||||
.token.token--green::after {
|
||||
background-image: url(../img/crowdsale/user-green.svg);
|
||||
}
|
||||
|
||||
.token.token--status::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
margin: -25px 0 0 -25px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background-image: url(../img/crowdsale/status-symbol.svg);
|
||||
background-size: 50px;
|
||||
}
|
||||
|
||||
@media (max-width: 1280px) {
|
||||
|
||||
.tokens {
|
||||
width: 1080px
|
||||
}
|
||||
|
||||
.token-wrap:nth-child(2) { top: 22px; left: -32px; }
|
||||
.token-wrap:nth-child(3) { top: 47px; left: 114px; }
|
||||
.token-wrap:nth-child(4) { top: 75px; left: 272px; }
|
||||
|
||||
.token-wrap:nth-child(8) { top: 0px; left: 421px; }
|
||||
.token-wrap:nth-child(9) { top: 252px; left: 302px; }
|
||||
|
||||
.token-wrap:nth-child(10) { top: 69px; right: 362px; }
|
||||
|
||||
.token-wrap:nth-child(14) { top: 267px; right: 264px; }
|
||||
}
|
||||
|
||||
@media (max-width: 1080px) {
|
||||
|
||||
|
||||
.tokens {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
margin: 0 0 0 -540px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media (max-width: 840px) {
|
||||
|
||||
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
|
||||
.token-wrap.token-wrap--status {
|
||||
margin: -36px 0 0 -36px;
|
||||
width: 72px;
|
||||
height: 72px;
|
||||
transition: transform 1s cubic-bezier(0.140, 0.805, 0.275, 1.080), opacity .4s ease;
|
||||
}
|
||||
|
||||
.token.token--status::after {
|
||||
content: "";
|
||||
margin: -16px 0 0 -16px;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
background-image: url(../img/crowdsale/status-symbol.svg);
|
||||
background-size: 32px;
|
||||
}
|
||||
|
||||
.token-wrap:nth-child(2) { width: 40px; height: 40px; top: 32px; left: 348px;}
|
||||
.token-wrap:nth-child(2) { width: 46px; height: 46px; top: 10px; left: 424px;}
|
||||
.token-wrap:nth-child(3) { width: 38px; height: 38px; top: 65px; left: 492px;}
|
||||
|
||||
.token-wrap:nth-child(5) { width: 40px; height: 40px; top: 41px; left: 349px;}
|
||||
.token-wrap:nth-child(6) { width: 40px; height: 40px; top: 240px; left: 467px;}
|
||||
.token-wrap:nth-child(7) { width: 52px; height: 52px; top: 100px; left: 397px;}
|
||||
|
||||
.token-wrap:nth-child(8) { width: 46px; height: 46px; top: 210px; left: 371px;}
|
||||
.token-wrap:nth-child(9) { display: none}
|
||||
|
||||
.token-wrap:nth-child(10) { width: 40px; height: 40px; top: 69px; right: 442px;}
|
||||
.token-wrap:nth-child(11) { width: 44px; height: 44px; top: 210px; right: 445px;}
|
||||
.token-wrap:nth-child(12) { width: 50px; height: 50px; top: 0px; right: 371px;}
|
||||
.token-wrap:nth-child(13) { top: 111px; right: 384px;}
|
||||
.token-wrap:nth-child(14) { width: 46px; height: 46px; top: 267px; right: 374px;}
|
||||
.token-wrap:nth-child(15) { display: none}
|
||||
|
||||
|
||||
.token::after {
|
||||
margin: -7px 0 0 -7px;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
background-size: 14px;
|
||||
}
|
||||
|
||||
}
|
||||
Loading…
Reference in New Issue