status-im/status-site-legacy
2
0
Fork 0
mirror of https://github.com/status-im/status-site-legacy.git synced 2025-02-19 18:38:21 +00:00
Code Issues Projects Releases Wiki Activity

update footer

Browse Source
This commit is contained in:
Andrei Mironov 2017-02-14 13:48:43 +03:00
parent 0185a3bf93
commit 59f8ac73d3
12 changed files with 564 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

190
src/css/main.css
View File

@ -791,10 +791,17 @@ li.social-link a {
.cookie-popup__inner {
display: none; } }
.container-wrap {
z-index: 2;
margin-bottom: 420px;
background-color: #eef2f5;
box-shadow: 0 0 30px 0 rgba(54, 69, 79, 0.86); }
.container {
max-width: 1280px;
margin: 0 auto;
overflow: hidden; }
overflow: hidden;
position: relative; }
.slides {
display: -ms-flexbox;
@ -853,6 +860,8 @@ li.social-link a {
margin: 0; } }
@media (max-width: 767px) {
.container-wrap {
margin-bottom: 600px; }
.slide__header {
padding: 0 20px;
margin: 0 auto;
@ -1935,46 +1944,171 @@ input.email-form__input--email:disabled {
@media (max-width: 767px) {
.slide.slide--four {
padding: 0px; } }
padding: 0px 0px 60px 0px; } }
.footer {
position: fixed;
width: 100%;
bottom: 0;
left: 0;
z-index: -1;
display: -ms-flexbox;
display: flex;
-ms-flex-pack: center;
justify-content: center;
background-color: #4A5C69;
border-top: 100px solid #4A5C69; }
.footer-inner {
display: -ms-flexbox;
display: flex;
-ms-flex-pack: justify;
justify-content: space-between;
width: 1080px; }
.footer-logo-wrap {
width: 280px;
display: -ms-flexbox;
display: flex; }
.footer-logo-wrap__inner {
display: -ms-flexbox;
display: flex;
text-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-direction: column;
flex-direction: column;
padding: 0 0 60px 0; }
-ms-flex-pack: justify;
justify-content: space-between;
padding: 65px 0 75px 0; }
.address {
width: 160px;
.footer-logo {
width: 52px;
height: 52px;
background-size: 52px;
background-image: url(../img/new-site/footer-logo@2x.png); }
.footer-address {
color: white;
padding: 20px 0 0 0;
opacity: .8; }
.footer .social-links {
margin: 0 0 20px 0; }
.footer-table {
display: -ms-flexbox;
display: flex; }
.social-link.social-link--inversed a {
box-shadow: 0px 4px 6px 0px rgba(189, 208, 223, 0.12); }
.footer-table__column {
box-sizing: border-box;
padding: 60px 40px; }
.social-link.social-link--fb.social-link--inversed a {
background-image: url(../img/new-site/icon_fb.svg);
background-color: #6081CB; }
.footer-header {
color: white;
opacity: .8;
font-size: 17px;
margin: 0 0 40px 0; }
.social-link.social-link--tw.social-link--inversed a {
background-image: url(../img/new-site/icon_tw.svg);
background-color: #6DBDFB; }
.footer-link {
height: 32px;
line-height: 32px;
font-size: 16px;
margin: 0 0 15px 0; }
.social-link.social-link--sl.social-link--inversed a {
background-image: url(../img/new-site/icon_sl.svg);
background-color: #E3306D; }
.footer-link a {
display: -ms-flexbox;
display: flex;
-ms-flex-align: center;
align-items: center; }
.footer .social-links li.social-link {
margin: 0 5px; }
.footer-icon {
display: inline-block;
width: 32px;
height: 32px;
background-color: rgba(255, 255, 255, 0.1);
border-radius: 50%;
margin: 0 15px 0 0;
background-repeat: no-repeat;
background-size: 24px;
background-position: center; }
.footer-link--fb .footer-icon {
background-image: url(../img/new-site/icon_fb2.svg); }
.footer-link--tw .footer-icon {
background-image: url(../img/new-site/icon_tw2.svg); }
.footer-link--sl .footer-icon {
background-image: url(../img/new-site/icon_sl2.svg); }
.footer-link--gh .footer-icon {
background-image: url(../img/new-site/icon_gh2.svg); }
.footer-link--rd .footer-icon {
background-image: url(../img/new-site/icon_rd2.svg); }
.footer-link a {
color: white; }
.footer-link a:hover {
opacity: .8; }
.language-switcher {
font-family: "PostGrotesk-Book", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
color: white;
-webkit-appearance: none;
font-size: 16px;
line-height: 32px;
padding: 0 24px 0 0;
background-image: url(../img/new-site/icon_dropdown-white.svg);
background-size: 24px;
background-repeat: no-repeat;
background-position: right center; }
.language-switcher:focus {
outline: none; }
@media (max-width: 1140px) {
.footer-inner {
width: 728px;
-ms-flex-pack: distribute;
justify-content: space-around; } }
@media (max-width: 767px) {
.address {
font-size: 15px;
line-height: 21px; }
.footer {
padding: 60px 0 60px 0; } }
.footer-inner {
-ms-flex-direction: column;
flex-direction: column; }
.footer-table {
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-align: center;
align-items: center;
-ms-flex-pack: center;
justify-content: center; }
.footer-table__column {
text-align: center;
padding: 10px 16px; }
.footer-logo-wrap {
width: auto;
-ms-flex-order: 2;
order: 2; }
.footer-header {
margin: 0 0 10px 0;
opacity: .6; }
.footer-logo-wrap__inner {
width: 100%;
padding: 0 0 40px 0;
-ms-flex-align: center;
align-items: center;
text-align: center; }
.footer-link {
text-align: center;
height: 24px;
line-height: 24px;
margin: 0 0 10px 0; }
.footer-link a {
-ms-flex-pack: center;
justify-content: center;
text-align: center; }
.footer-icon {
display: none; }
.footer-logo {
display: none; }
.footer-address {
opacity: .6; } }

BIN
src/img/new-site/footer-logo@2x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.1 KiB

24
src/img/new-site/icon_dropdown-white.svg Normal file
View File

@ -0,0 +1,24 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 42 (36781) - http://www.bohemiancoding.com/sketch -->
<title>icon_dropdown-dark</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" opacity="0.600000024">
<g id="1280" transform="translate(-1162.000000, -3269.000000)" fill="#FFFFFF">
<g id="Group-18" transform="translate(0.000000, 3148.000000)">
<g id="Group-16" transform="translate(99.000000, 20.000000)">
<g id="Group-17" transform="translate(604.000000, 0.000000)">
<g id="Group-14" transform="translate(363.000000, 0.000000)">
<g id="Group-10" transform="translate(45.000000, 101.000000)">
<g id="Group-6" transform="translate(51.000000, 0.000000)">
<path d="M12,14.3300632 L8.46236609,10.7924293 C8.07770436,10.4077676 7.44077682,10.404005 7.05025253,10.7945293 C6.65700558,11.1877763 6.65878803,11.8172784 7.04815252,12.2066429 L11.2949932,16.4534836 C11.4869793,16.6454697 11.741806,16.7425721 11.9974742,16.7431263 C12.2565137,16.7456044 12.5106708,16.6478196 12.7050068,16.4534836 L16.9518475,12.2066429 C17.3365092,11.8219811 17.3402718,11.1850536 16.9497475,10.7945293 C16.5565005,10.4012824 15.9269984,10.4030648 15.5376339,10.7924293 L12,14.3300632 L12,14.3300632 Z" id="Combined-Shape"></path>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.8 KiB

24
src/img/new-site/icon_fb2.svg Normal file
View File

@ -0,0 +1,24 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 42 (36781) - http://www.bohemiancoding.com/sketch -->
<title>icon_fb</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Artboard-Copy" transform="translate(-587.000000, -2194.000000)" fill="#FFFFFF">
<g id="Group-18" transform="translate(0.000000, 2073.000000)">
<g id="Group-16" transform="translate(211.000000, 20.000000)">
<g id="Group-17" transform="translate(332.000000, 0.000000)">
<g id="Group-12">
<g id="Group-2" transform="translate(40.000000, 97.000000)">
<g id="icon_fb" transform="translate(4.000000, 4.000000)">
<path d="M13.2034286,13.0698692 L15.552,13.0698692 L15.9051429,10.4367263 L13.2034286,10.4367263 L13.2034286,8.74758345 C13.2034286,7.98301202 13.416,7.46186917 14.552,7.46186917 L16,7.46186917 L16,5.09958345 C15.2985259,5.03061768 14.5939938,4.99743181 13.8891429,5.00015488 C11.8011429,5.00015488 10.3714286,6.22529774 10.3714286,8.48586917 L10.3714286,10.4367263 L8,10.4367263 L8,13.0698692 L10.3714286,13.0698692 L10.3714286,19.8572977 L13.2034286,19.8572977 L13.2034286,13.0698692 L13.2034286,13.0698692 Z" id="Shape"></path>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

24
src/img/new-site/icon_gh2.svg Normal file
View File

@ -0,0 +1,24 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 42 (36781) - http://www.bohemiancoding.com/sketch -->
<title>icon_gh</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Artboard-Copy" transform="translate(-588.000000, -2326.000000)" fill="#FFFFFF">
<g id="Group-18" transform="translate(0.000000, 2073.000000)">
<g id="Group-16" transform="translate(211.000000, 20.000000)">
<g id="Group-17" transform="translate(332.000000, 0.000000)">
<g id="Group-12">
<g id="Group-2" transform="translate(40.000000, 97.000000)">
<g id="icon_github" transform="translate(5.000000, 136.000000)">
<path d="M4,12.3335891 C4,16.0154087 6.3875298,19.1385862 9.69896764,20.240523 C10.1159029,20.3172596 10.2678412,20.0599364 10.2678412,19.8389351 C10.2678412,19.6414664 10.2606792,19.1171 10.2565866,18.4218668 C7.93863122,18.9252586 7.44956362,17.3045827 7.44956362,17.3045827 C7.07048508,16.3417948 6.52412085,16.0854947 6.52412085,16.0854947 C5.76749849,15.568802 6.58141748,15.5790335 6.58141748,15.5790335 C7.41784585,15.6378649 7.85780206,16.4379713 7.85780206,16.4379713 C8.60112342,17.7112864 9.80844511,17.3434626 10.2831886,17.130135 C10.358902,16.591956 10.5742759,16.2246437 10.8121592,16.0164319 C8.9617852,15.8061737 7.01625792,15.0909891 7.01625792,11.8977255 C7.01625792,10.9881416 7.3411093,10.2437971 7.87417252,9.66162252 C7.78822759,9.4508528 7.50225605,8.60316973 7.95602484,7.45621413 C7.95602484,7.45621413 8.65535058,7.23214341 10.2473782,8.31054769 C10.9119167,8.12535682 11.625055,8.03327297 12.3335891,8.02969193 C13.0416117,8.03327297 13.7542384,8.12535682 14.4198001,8.31054769 C16.0108045,7.23214341 16.7091071,7.45621413 16.7091071,7.45621413 C17.163899,8.60316973 16.8779275,9.4508528 16.7924941,9.66162252 C17.3265805,10.2437971 17.648874,10.9881416 17.648874,11.8977255 C17.648874,15.0991743 15.7002773,15.8036158 13.844276,16.0097814 C14.1430369,16.2671046 14.4095685,16.7756121 14.4095685,17.5532091 C14.4095685,18.6669122 14.399337,19.565753 14.399337,19.8389351 C14.399337,20.0619827 14.5497406,20.3213522 14.9723032,20.2400115 C18.2811832,19.1355167 20.6666667,16.0143855 20.6666667,12.3335891 C20.6666667,7.73093097 16.9352241,4 12.332566,4 C7.73144254,4 4,7.73093097 4,12.3335891 Z" id="Fill-3"></path>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.8 KiB

27
src/img/new-site/icon_rd2.svg Normal file
View File

@ -0,0 +1,27 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 42 (36781) - http://www.bohemiancoding.com/sketch -->
<title>icon_rd</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Artboard-Copy" transform="translate(-587.000000, -2370.000000)">
<g id="Group-18" transform="translate(0.000000, 2073.000000)">
<g id="Group-16" transform="translate(211.000000, 20.000000)">
<g id="Group-17" transform="translate(332.000000, 0.000000)">
<g id="Group-12">
<g id="Group-2" transform="translate(40.000000, 97.000000)">
<g id="icon_rd" transform="translate(4.000000, 180.000000)">
<rect id="Rectangle-13" fill="#D8D8D8" opacity="0" x="0" y="0" width="24" height="24"></rect>
<path d="M19.6500244,13 C20.3645556,13 21.0248096,12.6188022 21.3820752,12 C21.7393408,11.3811979 21.7393408,10.6188021 21.3820752,9.99999999 C21.0248096,9.38119783 20.3645556,8.99999998 19.6500244,9 C18.5454549,9 17.6500244,9.8954305 17.6500244,11 C17.6500244,12.1045695 18.5454549,13 19.6500244,13 Z M4.34999998,13 C5.06453116,13 5.72478521,12.6188022 6.0820508,12 C6.4393164,11.3811979 6.4393164,10.6188021 6.0820508,9.99999999 C5.72478521,9.38119783 5.06453116,8.99999998 4.34999998,9 C3.24543049,9 2.35,9.8954305 2.35,11 C2.35,12.1045695 3.24543049,13 4.34999998,13 L4.34999998,13 Z M12,21 C16.694,21 20.5,18.314 20.5,15 C20.5,11.686 16.694,9 12,9 C7.306,9 3.5,11.686 3.5,15 C3.5,18.314 7.306,21 12,21 Z M11.998,18.958 L11.998,18.957 C10.8732913,18.9560499 9.76488464,18.6880308 8.764,18.175 C8.638,18.109 8.546,18.055 8.483,18.015 C8.109,17.762 8.049,17.272 8.358,16.952 C8.639,16.661 9.133,16.617 9.476,16.85 C10.534,17.586 12.474,17.954 14.584,16.81 C14.947,16.607 15.432,16.692 15.684,17.007 C15.97,17.353 15.849,17.833 15.45,18.055 C14.314,18.675 13.151,18.958 11.998,18.958 Z M8.6,14.9 C7.66111593,14.9 6.9,14.1388841 6.9,13.2 C6.9,12.2611159 7.66111593,11.5 8.6,11.5 C9.53888407,11.5 10.3,12.2611159 10.3,13.2 C10.3,14.1388841 9.53888407,14.9 8.6,14.9 Z M15.4,14.9 C14.4611159,14.9 13.7,14.1388841 13.7,13.2 C13.7,12.2611159 14.4611159,11.5 15.4,11.5 C16.3388841,11.5 17.1,12.2611159 17.1,13.2 C17.1,14.1388841 16.3388841,14.9 15.4,14.9 Z" id="Combined-Shape" fill="#FFFFFF" fill-rule="nonzero"></path>
<polyline id="Shape" stroke="#FFFFFF" stroke-width="1.5" points="11.844 11.805 12.337 6.261 16.46 5.191"></polyline>
<circle id="Oval" stroke="#FFFFFF" stroke-width="0.8" fill="#FFFFFF" fill-rule="nonzero" cx="16.7" cy="5.1" r="1.5"></circle>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.1 KiB

41
src/img/new-site/icon_sl2.svg Normal file
View File

@ -0,0 +1,41 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 42 (36781) - http://www.bohemiancoding.com/sketch -->
<title>icon_sl</title>
<desc>Created with Sketch.</desc>
<defs>
<polygon id="path-1" points="0.0477292594 15.9921311 12.284357 15.9921311 12.284357 0.00497516103 0.0477292594 0.00497516103 0.0477292594 15.9921311"></polygon>
</defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Artboard-Copy" transform="translate(-588.000000, -2282.000000)">
<g id="Group-18" transform="translate(0.000000, 2073.000000)">
<g id="Group-16" transform="translate(211.000000, 20.000000)">
<g id="Group-17" transform="translate(332.000000, 0.000000)">
<g id="Group-12">
<g id="Group-2" transform="translate(40.000000, 97.000000)">
<g id="icon_sl" transform="translate(5.000000, 92.000000)">
<g id="slack_cmyk" transform="translate(3.000000, 4.000000)">
<g id="Group-4" transform="translate(1.836066, 0.000000)">
<mask id="mask-2" fill="white">
<use xlink:href="#path-1"></use>
</mask>
<g id="Clip-2"></g>
<path d="M8.53665574,0.989901639 C8.2935082,0.241442623 7.48970492,-0.168131148 6.74137705,0.075147541 C5.99291803,0.318295082 5.58334426,1.12209836 5.82662295,1.87042623 L9.51081967,13.2057705 C9.76380328,13.904918 10.519082,14.2978361 11.2440656,14.0891803 C12.0002623,13.8714754 12.4612459,13.0683279 12.2199344,12.3256393 C12.2107541,12.2973115 8.53665574,0.989901639 8.53665574,0.989901639" id="Fill-1" fill="#FFFFFF" mask="url(#mask-2)"></path>
<path d="M2.82806557,2.84472131 C2.58478689,2.09639344 1.78098361,1.68681967 1.03265574,1.92996721 C0.284196721,2.17311475 -0.125377049,2.97691803 0.117901639,3.72537705 L3.80209836,15.0607213 C4.05508197,15.7598689 4.81036066,16.1527869 5.53534426,15.944 C6.29154098,15.7264262 6.75252459,14.9232787 6.51121311,14.180459 C6.50203279,14.1522623 2.82806557,2.84472131 2.82806557,2.84472131" id="Fill-3" fill="#FFFFFF" mask="url(#mask-2)"></path>
</g>
<path d="M15.0100984,10.3778361 C15.7585574,10.1346885 16.168,9.33088525 15.9248525,8.58242623 C15.6817049,7.83409836 14.8779016,7.42452459 14.1295738,7.66767213 L2.79422951,11.352 C2.09508197,11.6048525 1.70216393,12.3601311 1.91081967,13.0851148 C2.12852459,13.8413115 2.93167213,14.3022951 3.67436066,14.0609836 C3.70268852,14.0518033 15.0100984,10.3778361 15.0100984,10.3778361" id="Fill-5" fill="#FFFFFF"></path>
<path d="M5.15672131,13.5794098 C5.89455738,13.3396721 6.8455082,13.0306885 7.86596721,12.6991475 C7.62622951,11.9613115 7.3172459,11.0102295 6.98557377,9.98963934 L4.27619672,10.8702951 L5.15672131,13.5794098" id="Fill-6" fill="#FFFFFF"></path>
<path d="M10.8654426,11.724459 C11.8897049,11.3917377 12.8417049,11.0823607 13.5746885,10.8441967 C13.3349508,10.1063607 13.0258361,9.15501639 12.6941639,8.13416393 L9.98478689,9.01481967 L10.8654426,11.724459" id="Fill-7" fill="#FFFFFF"></path>
<path d="M13.1552787,4.66911475 C13.9036066,4.42596721 14.3131803,3.62216393 14.0700328,2.87370492 C13.8268852,2.12537705 13.023082,1.71580328 12.274623,1.95895082 L0.939278689,5.64327869 C0.240131148,5.89613115 -0.152786885,6.65140984 0.056,7.37639344 C0.27357377,8.13259016 1.07672131,8.59357377 1.81954098,8.3522623 C1.8477377,8.34308197 13.1552787,4.66911475 13.1552787,4.66911475" id="Fill-9" fill="#FFFFFF"></path>
<path d="M3.30137705,7.87081967 C4.03921311,7.63108197 4.99042623,7.32196721 6.01101639,6.99042623 C5.67829508,5.96603279 5.36891803,5.01403279 5.1307541,4.28091803 L2.42072131,5.16170492 L3.30137705,7.87081967" id="Fill-11" fill="#FFFFFF"></path>
<path d="M9.00996721,6.016 C10.0344918,5.68314754 10.986623,5.37377049 11.7197377,5.13547541 C11.3868852,4.11095082 11.0775082,3.15868852 10.8392131,2.42544262 L8.12931148,3.30622951 L9.00996721,6.016" id="Fill-12" fill="#FFFFFF"></path>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 4.8 KiB

24
src/img/new-site/icon_tw2.svg Normal file
View File

@ -0,0 +1,24 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 42 (36781) - http://www.bohemiancoding.com/sketch -->
<title>icon_tw</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Artboard-Copy" transform="translate(-587.000000, -2238.000000)" fill="#FFFFFF">
<g id="Group-18" transform="translate(0.000000, 2073.000000)">
<g id="Group-16" transform="translate(211.000000, 20.000000)">
<g id="Group-17" transform="translate(332.000000, 0.000000)">
<g id="Group-12">
<g id="Group-2" transform="translate(40.000000, 97.000000)">
<g id="icon_tw" transform="translate(4.000000, 48.000000)">
<path d="M18.2323077,8.05615385 C18.8669231,7.65 19.3561538,7.00615385 19.5857692,6.24 C18.9870251,6.6200228 18.3250229,6.8896695 17.6311538,7.03615385 C17.0671391,6.38246901 16.2479779,6.00465349 15.3846154,6 C13.685,6 12.3073077,7.46884615 12.3073077,9.28153846 C12.306997,9.53296291 12.3340799,9.7836729 12.3880769,10.0292308 C9.83,9.89307692 7.56153846,8.58692308 6.04423077,6.60115385 C5.76885957,7.10738224 5.62559626,7.67487953 5.62769231,8.25115385 C5.62769231,9.38884615 6.17,10.3938462 6.99615385,10.9823077 C6.50435851,10.9649589 6.02491344,10.8236655 5.60230769,10.5715385 L5.60230769,10.6130769 C5.60230769,12.2030769 6.66384615,13.53 8.07153846,13.8311538 C7.61952151,13.9624855 7.14234168,13.9818894 6.68115385,13.8876923 C7.07346154,15.1915385 8.21,16.14 9.55653846,16.1665385 C8.29347062,17.2347899 6.64189594,17.7274602 5,17.5257692 C6.38670346,18.4836251 8.03156619,18.9978459 9.71692308,19.0003846 C15.3776923,19.0003846 18.4734615,13.9996154 18.4734615,9.66230769 C18.4734615,9.52038462 18.47,9.37846154 18.4642308,9.23769231 C19.0726014,8.76685061 19.5925867,8.19178049 20,7.53923077 C19.441662,7.80353736 18.8450804,7.97799466 18.2323077,8.05615385 L18.2323077,8.05615385 Z" id="Shape"></path>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.4 KiB

66
src/index.html
View File

@ -36,10 +36,11 @@
<div class="cookie-popup__inner">
<p class="cookie-popup-text">Status.im uses cookies to help improve our website</p>
<a class="cookie-popup-button" href="#">Accept</a>
</div>
</div>
<div class="container-wrap">
<div class="container">
<div class="slides">
<div class="slide slide--one">
@ -332,22 +333,55 @@
</div>
</div>
</div>
<div class="footer">
<ul class="social-links ">
<li class="social-link social-link--fb social-link--inversed"><a href="https://www.facebook.com/ethstatus" target="_blank"></a></li>
<li class="social-link social-link--tw social-link--inversed"><a href="https://twitter.com/ethstatus" target="_blank"></a></li>
<li class="social-link social-link--sl social-link--inversed"><a href="http://slack.status.im/" target="_blank"></a></li>
<li class="social-link social-link--gh social-link--inversed"><a href="https://github.com/status-im" target="_blank"></a></li>
<li class="social-link social-link--rd social-link--inversed"><a href="https://www.reddit.com/r/statusim/" target="_blank"></a></li>
</ul>
<div class="address">
Status Holdings Pte.&nbsp;Ltd.<br/>22&nbsp;Sin&nbsp;Ming&nbsp;Lane<br/>Singapore
</div>
</div>
</div>
</div>
<div class="footer">
<div class="footer-inner">
<div class="footer-logo-wrap">
<div class="footer-logo-wrap__inner">
<div class="footer-logo"></div>
<div class="footer-address"> Status Holdings Pte.&nbsp;Ltd.<br/>22&nbsp;Sin&nbsp;Ming&nbsp;Lane<br/>Singapore</div>
</div>
</div>
<div class="footer-table">
<div class="footer-table__column">
<h4 class="footer-header">Social links</h4>
<ul class="footer-list">
<li class="footer-link footer-link--fb"><a href="https://www.facebook.com/ethstatus" target="_blank"><span class="footer-icon"></span><span class="footer-link-label">Facebook</span></a></li>
<li class="footer-link footer-link--tw"><a href="https://twitter.com/ethstatus" target="_blank"><span class="footer-icon"></span><span class="footer-link-label">Twitter</span></a></li>
<li class="footer-link footer-link--sl"><a href="http://slack.status.im/" target="_blank"><span class="footer-icon"></span><span class="footer-link-label">Slack</span></a></li>
<li class="footer-link footer-link--gh"><a href="https://github.com/status-im" target="_blank"><span class="footer-icon"></span><span class="footer-link-label">Github</span></a></li>
<li class="footer-link footer-link--rd"><a href="https://www.reddit.com/r/statusim/" target="_blank"><span class="footer-icon"></span><span class="footer-link-label">Reddit</span></a></li>
</ul>
</div>
<div class="footer-table__column">
<h4 class="footer-header">More</h4>
<ul class="footer-list">
<li class="footer-link"><a href="https://www.facebook.com/ethstatus" target="_blank">Wiki</a></li>
<li class="footer-link"><a href="https://twitter.com/ethstatus" target="_blank">Privacy policy</a></li>
</ul>
</div>
<div class="footer-table__column">
<h4 class="footer-header">Language</h4>
<ul class="footer-list">
<li class="footer-link">
<select class="language-switcher" name="lang">
<option value="en">English</option>
</select>
</li>
</ul>
</div>
</div>
</div>
</div>
<script src="js/app.js?v=44d5354"></script>
<script src="js/mc-validate.js"></script>
<!-- Google Analytics -->

202
src/scss/footer.scss
View File

@ -1,53 +1,199 @@
.footer {
display: flex;
text-align: center;
align-items:center;
flex-direction: column;
padding: 0 0 60px 0;
.footer {
position: fixed;
width: 100%;
bottom: 0;
left: 0;
z-index: -1;
display: flex;
justify-content: center;
background-color: #4A5C69;
border-top: 100px solid #4A5C69
}
.address {
width: 160px;
.footer-inner {
display: flex;
justify-content: space-between;
width: 1080px;
}
.footer-logo-wrap {
width: 280px;
display: flex;
}
.footer-logo-wrap__inner {
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 65px 0 75px 0;
}
.footer-logo {
width: 52px;
height: 52px;
background-size: 52px;
background-image: url(../img/new-site/footer-logo@2x.png);
}
.footer-address {
color: $colorWhite;
padding: 20px 0 0 0;
opacity: .8;
}
.footer .social-links {
margin: 0 0 20px 0
.footer-table {
display: flex;
}
.social-link.social-link--inversed a{
box-shadow: 0px 4px 6px 0px rgba(189,208,223,0.12);
.footer-table__column {
box-sizing: border-box;
padding: 60px 40px;
}
.social-link.social-link--fb.social-link--inversed a{
background-image: url(../img/new-site/icon_fb.svg);
background-color: #6081CB
.footer-header {
color: $colorWhite;
opacity: .8;
font-size: 17px;
margin: 0 0 40px 0;
}
.social-link.social-link--tw.social-link--inversed a{
background-image: url(../img/new-site/icon_tw.svg);
background-color: #6DBDFB
.footer-link {
height: 32px;
line-height: 32px;
font-size: 16px;
margin: 0 0 15px 0;
}
.social-link.social-link--sl.social-link--inversed a{
background-image: url(../img/new-site/icon_sl.svg);
background-color: #E3306D
.footer-link a {
display: flex;
align-items: center;
}
.footer .social-links li.social-link {
margin: 0 5px;
.footer-icon {
display: inline-block;
width: 32px;
height: 32px;
background-color: rgba(255, 255, 255, .1);
border-radius: 50%;
margin: 0 15px 0 0;
background-repeat: no-repeat;
background-size: 24px;
background-position: center;
}
.footer-link--fb .footer-icon {
background-image: url(../img/new-site/icon_fb2.svg);
}
.footer-link--tw .footer-icon {
background-image: url(../img/new-site/icon_tw2.svg);
}
.footer-link--sl .footer-icon {
background-image: url(../img/new-site/icon_sl2.svg);
}
.footer-link--gh .footer-icon {
background-image: url(../img/new-site/icon_gh2.svg);
}
.footer-link--rd .footer-icon {
background-image: url(../img/new-site/icon_rd2.svg);
}
.footer-link a {
color: $colorWhite;
}
.footer-link a:hover {
opacity: .8
}
.language-switcher {
font-family: $PostGroteskBook;
color: $colorWhite;
-webkit-appearance: none;
font-size: 16px;
line-height: 32px;
padding: 0 24px 0 0;
background-image: url(../img/new-site/icon_dropdown-white.svg);
background-size: 24px;
background-repeat: no-repeat;
background-position: right center;
}
.language-switcher:focus{
outline: none;
}
@media (max-width: 1140px) {
.footer-inner {
width: 728px;
justify-content: space-around;
}
}
@media (max-width: 767px) {
.address {
font-size: 15px;
line-height: 21px;
.footer-inner {
flex-direction: column;
}
.footer {
padding: 60px 0 60px 0;
.footer-table {
flex-direction: column;
align-items: center;
justify-content: center;
}
.footer-table__column {
text-align: center;
padding: 10px 16px;
}
.footer-logo-wrap {
width: auto;
order: 2
}
.footer-header {
margin: 0 0 10px 0;
opacity: .6
}
.footer-logo-wrap__inner {
width: 100%;
padding: 0 0 40px 0;
align-items: center;
text-align: center;
}
.footer-link {
text-align: center;
height: 24px;
line-height: 24px;
margin: 0 0 10px 0;
}
.footer-link a {
justify-content: center;
text-align: center;
}
.footer-icon {
display: none;
}
.footer-logo {
display: none;
}
.footer-address {
opacity: .6
}
}

2
src/scss/slide--four.scss
View File

@ -20,7 +20,7 @@
@media (max-width: 767px) {
.slide.slide--four {
padding: 0px
padding: 0px 0px 60px 0px
}
}

13
src/scss/slides.scss
View File

@ -1,7 +1,15 @@
.container-wrap {
z-index: 2;
margin-bottom: 420px;
background-color: $colorBg;
box-shadow: 0 0 30px 0 rgba(54,69,79,0.86);
}
.container {
max-width: 1280px;
margin: 0 auto;
overflow: hidden;
position: relative;
}
.slides {
@ -72,6 +80,11 @@
@media (max-width: 767px) {
.container-wrap {
margin-bottom: 600px;
}
.slide__header {
padding: 0 20px;
margin: 0 auto;