<header>
<section id="desktop-menu" class="desktop-menu">
<nav class="sidebar flex-column-nowrap">
<a class="sidebar__logo" href="#">
<abbr class="logo">FB</abbr>
</a>
<ul class="sidebar__nav-list flex-column-nowrap" role="menubar" aria-label="Main desktop menu">
<li class="nav-list__item about-me active fake-button flex-column-nowrap" role="menuitem">
<a class="flex-row-wrap" href="#" tabindex="0">
<svg height="38.095242" width="40" viewBox="0 0 44.017969 41.921879" role="img" aria-labelledby="About me"><path d="m 21.936719,23.52688 c 6.505156,0 11.781484,-5.27641 11.781484,-11.78148 C 33.718203,5.24032 28.441797,0 21.936719,0 15.431641,0 10.155234,5.27641 10.155234,11.7454 c 0,6.46898 5.276329,11.78148 11.781485,11.78148 z m 0,-20.455 c 4.77039,0 8.673515,3.90305 8.673515,8.67352 0,4.77046 -3.903125,8.67343 -8.673515,8.67343 -4.770391,0 -8.673516,-3.90304 -8.673516,-8.67351 0,-4.77047 3.903047,-8.67344 8.673516,-8.67344 z" id="path2" class="path" style="fill:#c6c6c6;stroke-width:0.8;stroke:#1B1D1D;" /><path d="M 1.5539844,41.92188 H 42.463984 c 0.867344,0 1.553985,-0.68664 1.553985,-1.55398 0,-8.13141 -6.613516,-14.7811 -14.781094,-14.7811 H 14.781094 C 6.6496875,25.5868 0,32.20032 0,40.3679 c 0,0.86734 0.68664062,1.55398 1.5539844,1.55398 z M 14.781094,28.69477 h 14.455781 c 5.926875,0 10.805703,4.40906 11.564688,10.11906 H 3.2164063 C 3.9753125,33.14 8.8542188,28.69477 14.781094,28.69477 Z" id="path4" class="path" style="fill:#c6c6c6;stroke-width:0.8;stroke:#1B1D1D;" /></svg>
<span class="u-uppercase">About me</span>
</a>
</li>
<li class="nav-list__item skills fake-button flex-column-nowrap" role="menuitem">
<a class="flex-row-wrap" href="#" tabindex="0">
<svg viewBox="0 0 32.265313 27.8375" height="34.510746" width="40" role="img" aria-labelledby="Skills"><g id="g4547"><path style="fill:#c6c6c6;stroke-width:0.3;stroke:#1B1D1D;" id="path2" class="path" d="M 30.702812,0 H 1.5625 C 0.69945313,0 0,0.69953 0,1.5625 v 18.28125 c 0,0.86297 0.69945313,1.5625 1.5625,1.5625 h 10.898281 v 3.54063 H 8.2199219 c -0.7969532,0 -1.4453125,0.64835 -1.4453125,1.44531 0,0.79695 0.6483593,1.44531 1.4453125,1.44531 H 24.045391 c 0.796953,0 1.445312,-0.64836 1.445312,-1.44531 0,-0.79696 -0.648359,-1.44531 -1.445312,-1.44531 h -4.24086 v -3.54063 h 10.898281 c 0.863047,0 1.5625,-0.69953 1.5625,-1.5625 V 1.5625 C 32.265312,0.69953 31.565859,0 30.702812,0 Z m -0.78125,19.0625 H 2.34375 V 2.34375 h 27.577812 z" /><path style="fill:#c6c6c6;stroke-width:0.3;stroke:#1B1D1D;" id="path4" class="path" d="m 5.6125953,11.58586 4.9284377,2.29187 c 0.127422,0.059 0.263047,0.0889 0.403281,0.0889 0.182656,0 0.360625,-0.0519 0.515391,-0.15031 0.277187,-0.17711 0.442656,-0.47891 0.442656,-0.80742 v -0.0252 c 0,-0.37117 -0.217578,-0.71211 -0.554375,-0.86867 L 8.2655641,10.683 11.348064,9.25065 c 0.336719,-0.15656 0.554297,-0.49758 0.554297,-0.86859 v -0.0249 c 0,-0.32899 -0.165547,-0.63078 -0.442578,-0.80735 -0.153281,-0.098 -0.331797,-0.14968 -0.516094,-0.14968 -0.138906,0 -0.278359,0.0305 -0.403125,0.0885 L 5.6125172,9.78019 C 5.2759547,9.93684 5.0585328,10.27777 5.0585328,10.64871 v 0.0686 c -7.81e-5,0.37047 0.2172656,0.71133 0.5540625,0.86852 z" /><path style="fill:#c6c6c6;stroke-width:0.2;stroke:#1B1D1D;" id="path6" class="path" d="m 13.723594,16.25398 c 0.179765,0.24602 0.468906,0.39289 0.773515,0.39289 h 0.02461 c 0.418125,0 0.784531,-0.26765 0.911875,-0.66531 L 18.680234,5.92219 C 18.773364,5.6318 18.721644,5.31141 18.541875,5.06484 18.362109,4.81883 18.072969,4.67187 17.768359,4.67187 h -0.02453 c -0.418281,0 -0.785,0.26766 -0.912422,0.66532 l -3.247031,10.06023 c -0.09234,0.29063 -0.04031,0.6107 0.139218,0.85656 z" /><path style="fill:#c6c6c6;stroke-width:0.2;stroke:#1B1D1D;" id="path8" class="path" d="m 20.362952,8.38203 c 0,0.37078 0.217343,0.71172 0.554296,0.86891 l 3.082422,1.43203 -3.082422,1.43203 c -0.336796,0.15656 -0.554375,0.4975 -0.554375,0.86867 v 0.0252 c 0,0.32851 0.165391,0.63031 0.442891,0.8075 0.154219,0.0983 0.332344,0.15023 0.515234,0.15023 0.14,0 0.275547,-0.0299 0.403829,-0.0892 l 4.928203,-2.29179 c 0.336484,-0.15696 0.553828,-0.49782 0.553828,-0.86836 v -0.0686 c 0,-0.37093 -0.217422,-0.71187 -0.554141,-0.86851 L 21.724592,7.48842 c -0.124297,-0.0577 -0.263515,-0.0884 -0.4025,-0.0884 -0.184219,0 -0.362812,0.0517 -0.515937,0.14937 -0.277657,0.17688 -0.443203,0.47868 -0.443203,0.80766 z" /></g></svg>
<span class="u-uppercase">Skills</span>
</a>
</li>
<li class="nav-list__item my-work fake-button flex-column-nowrap" role="menuitem">
<a class="flex-row-wrap" href="#" tabindex="0">
<svg viewBox="0 0 40 25" height="25" width="40" role="img" aria-labelledby="My work"><path d="M 20,0 C 11.276641,0 3.7155469,5.0797656 0,12.5 3.7155469,19.920234 11.276641,25 20,25 28.723125,25 36.284297,19.920234 40,12.5 36.284453,5.0797656 28.723125,0 20,0 Z m 9.861328,6.6290625 C 32.211484,8.1280469 34.202891,10.135859 35.69875,12.5 34.202969,14.864141 32.211328,16.871953 29.861328,18.370938 26.908437,20.254453 23.498359,21.25 20,21.25 16.501562,21.25 13.091563,20.254453 10.138672,18.370938 7.7886719,16.871875 5.7972656,14.864062 4.3014063,12.5 5.7971875,10.135781 7.7886719,8.1279688 10.138672,6.6290625 10.291719,6.5314062 10.446328,6.4367969 10.601875,6.3439062 10.212891,7.4114063 10,8.5635156 10,9.765625 c 0,5.522734 4.477187,10 10,10 5.522734,0 10,-4.477266 10,-10 0,-1.2021094 -0.212891,-2.3542188 -0.601797,-3.4217969 0.155313,0.092891 0.310078,0.1875781 0.463125,0.2852344 z M 20,8.515625 c 0,2.071094 -1.678906,3.75 -3.75,3.75 -2.071094,0 -3.75,-1.678906 -3.75,-3.75 0,-2.0710937 1.678906,-3.75 3.75,-3.75 2.071094,0 3.75,1.6789063 3.75,3.75 z" id="path2" class="path" style="fill:#c6c6c6;stroke-width:0.8;stroke:#1B1D1D;" /></svg>
<span class="u-uppercase">My work</span>
</a>
</li>
<li class="nav-list__item contact fake-button flex-column-nowrap" role="menuitem">
<a class="flex-row-wrap" href="#" tabindex="0">
<svg height="27.213362" width="40" viewBox="0 0 18.832891 12.812657" role="img" aria-labelledby="Contact"><path style="fill:#c6c6c6;stroke-width:0.2;stroke:#1B1D1D;" id="path2" class="path" d="M 15.515781,2.4900782 9.4171094,7.8642188 3.3171094,2.49 C 3.0742188,2.2760156 2.7039844,2.2995313 2.4900781,2.5422656 2.27625,2.7850782 2.2995313,3.1553125 2.5424219,3.3692969 l 6.4874219,5.7155469 c 0.1107031,0.0975 0.2490625,0.14625 0.3873437,0.14625 0.1382812,0 0.2767188,-0.04875 0.3874219,-0.1463281 L 16.290703,3.3692188 C 16.533438,3.1553125 16.556797,2.785 16.342891,2.5421875 16.128828,2.2996094 15.758672,2.2761719 15.515781,2.4900782 Z" /><path style="fill:#c6c6c6;stroke-width:0.2;stroke:#1B1D1D; " id="path4" d="M 17.075078,2.5e-8 H 1.7578125 C 0.78859375,2.5e-8 0,0.78851565 0,1.7578125 v 9.2970315 c 0,0.969297 0.78859375,1.757812 1.7578125,1.757812 H 17.075078 c 0.969219,0 1.757813,-0.788515 1.757813,-1.757812 V 1.7578125 C 18.832891,0.78859378 18.044297,2.5e-8 17.075078,2.5e-8 Z M 17.661016,11.054844 c 0,0.323047 -0.262813,0.585937 -0.585938,0.585937 H 1.7578125 c -0.323125,0 -0.5859375,-0.26289 -0.5859375,-0.585937 V 1.7578125 c 0,-0.3230468 0.2628125,-0.5859375 0.5859375,-0.5859375 H 17.075078 c 0.323125,0 0.585938,0.2628907 0.585938,0.5859375 z" /></svg>
<span class="u-uppercase">Contact</span>
</a>
</li>
</ul>
<ul class="sidebar__extra-content" role="menu">
<li class="extra-content__language" role="menuitem">
<svg height="39.999043" width="40.000126" viewBox="0 0 1.1718787 1.1718469" role="img" aria-labelledby="Language"><path d="M 1.1704687,0.546847 C 1.15125,0.254347 0.9175,0.020519 0.625,0.0013 V 0 H 0.5859375 0.546875 V 0.0013 C 0.254375,0.020519 0.02054688,0.254347 0.00132813,0.546847 H 0 v 0.03906 0.03906 H 0.00132813 C 0.02054688,0.917467 0.254375,1.151217 0.546875,1.170436 v 0.00141 H 0.5859375 0.625 v -0.0014 C 0.9175,1.151227 1.15125,0.917478 1.1704687,0.624978 h 0.00141 V 0.58591 0.546847 Z M 0.36679688,0.127706 c -0.0377344,0.05016 -0.0690625,0.113047 -0.091875,0.184766 H 0.15789063 C 0.20882813,0.233022 0.28117188,0.168722 0.36679688,0.127706 Z M 0.11703125,0.390597 H 0.254375 C 0.2439062,0.439967 0.2372656,0.492394 0.2351562,0.546847 H 0.07960937 C 0.08375,0.491847 0.09671875,0.439269 0.11703125,0.390597 Z M 0.07960937,0.624972 h 0.15554688 c 0.002109,0.05445 0.00875,0.106875 0.0192188,0.15625 H 0.11703125 C 0.09671875,0.73255 0.08375,0.679972 0.07960937,0.624972 Z m 0.07828126,0.234375 h 0.11695312 c 0.0228125,0.07172 0.0541406,0.134609 0.0919531,0.184766 C 0.28117188,1.003097 0.20882813,0.938878 0.15789063,0.859347 Z M 0.546875,1.088722 C 0.4665625,1.067238 0.39742188,0.980988 0.35546875,0.859347 H 0.546875 Z m 0,-0.3075 H 0.33351562 C 0.3225,0.73255 0.31554688,0.679972 0.31328125,0.624972 H 0.546875 Z m 0,-0.234375 H 0.31328125 c 0.002266,-0.055 0.009219,-0.107578 0.0202344,-0.15625 H 0.546875 Z m 0,-0.234375 H 0.35546875 C 0.39742188,0.190831 0.4665625,0.104581 0.546875,0.083175 Z m 0.4671094,0 H 0.89710938 C 0.87421878,0.240752 0.84296878,0.177863 0.80507808,0.127706 0.89062498,0.168726 0.96304683,0.233019 1.0139844,0.312472 Z M 0.625,0.083175 c 0.0802344,0.02141 0.14945312,0.107656 0.19140625,0.229297 H 0.625 Z m 0,0.307422 h 0.21328125 c 0.0110938,0.048672 0.0178906,0.10125 0.0203125,0.15625 H 0.625 Z m 0,0.234375 h 0.23359375 c -0.002266,0.055 -0.009219,0.107578 -0.0203125,0.15625 H 0.625 Z m 0,0.46375 V 0.859347 H 0.81640625 C 0.77445312,0.980988 0.70523437,1.067238 0.625,1.088722 Z m 0.18007812,-0.04461 c 0.0377344,-0.05023 0.0691406,-0.113047 0.0920313,-0.184766 H 1.0139844 C 0.9630469,0.938876 0.890625,1.003096 0.80507812,1.044112 Z M 1.0548437,0.781222 H 0.9175 C 0.9279688,0.731852 0.9346094,0.679425 0.9367188,0.624972 h 0.1554687 c -0.00406,0.055 -0.017031,0.107578 -0.037344,0.15625 z M 0.93671875,0.546847 c -0.002109,-0.05445 -0.00875,-0.106875 -0.0192188,-0.15625 H 1.0548436 c 0.020312,0.04867 0.033281,0.10125 0.037422,0.15625 z" id="path2" style="fill:#c6c6c6;stroke-width:0.078125" /></svg><svg height="17.021526" width="9.999999" viewBox="0 0 9.6094522 16.356756"><g transform="matrix(0.03324517,0,0,0.03324517,-3.3736534,0)" id="g6"><path style="fill:#c6c6c6" id="path2" d="M 382.678,226.804 163.73,7.86 C 158.666,2.792 151.906,0 144.698,0 137.49,0 130.73,2.792 125.666,7.86 l -16.124,16.12 c -10.492,10.504 -10.492,27.576 0,38.064 L 293.398,245.9 109.338,429.96 c -5.064,5.068 -7.86,11.824 -7.86,19.028 0,7.212 2.796,13.968 7.86,19.04 l 16.124,16.116 c 5.068,5.068 11.824,7.86 19.032,7.86 7.208,0 13.968,-2.792 19.032,-7.86 L 382.678,265 c 5.076,-5.084 7.864,-11.872 7.848,-19.088 0.016,-7.244 -2.772,-14.028 -7.848,-19.108 z" /></g></svg>
<span class="u-uppercase">Language</span>
<ul class="extra-content__language-selector flex-column-nowrap" aria-label="submenu" aria-hidden="true" aria-expanded="false" aria-haspopup="true">
<li class="language-selector__item u-uppercase ca" role="menuitem">
<a href="#" tabindex="-1">
<svg viewBox="0 0 20 20.000012" height="20.000011" width="20" role="img" aria-labelledby="Catalan"><g transform="matrix(1.3333333,0,0,1.3333333,0,-3.9999884)" id="g4506"><path d="M 13.751667,6.36 H 1.2483333 A 7.4641667,7.4641667 0 0 0 0.4325,8.0083333 H 14.566667 A 7.425,7.425 0 0 0 13.751667,6.36 Z M 7.5,3 A 7.4683333,7.4683333 0 0 0 2.7308333,4.7116667 H 12.269167 A 7.4683333,7.4683333 0 0 0 7.5,3 Z" id="path2" style="fill:#ffeb00;stroke-width:0.83333331" /><path d="M 12.269167,4.7116667 H 2.7308333 A 7.5291667,7.5291667 0 0 0 1.2483333,6.36 H 13.750833 A 7.505,7.505 0 0 0 12.269167,4.7116667 Z" id="path4" style="fill:#d81016;stroke-width:0.83333331" /><path d="M 15,10.5 C 15,10.214167 14.980833,9.9341667 14.95,9.6566667 H 0.05 C 0.01916667,9.9341667 0,10.214167 0,10.5 c 0,0.2725 0.01666667,0.54 0.04416667,0.805 H 14.955 C 14.984167,11.04 15,10.7725 15,10.5 Z" id="path6" style="fill:#ffeb00;stroke-width:0.83333331" /><path d="M 14.5675,8.0083333 H 0.4325 A 7.465,7.465 0 0 0 0.05,9.6566667 h 14.9 A 7.465,7.465 0 0 0 14.5675,8.0083333 Z M 13.775,14.601667 H 1.225 A 7.5,7.5 0 0 0 2.6883333,16.25 H 12.311667 A 7.5433333,7.5433333 0 0 0 13.775,14.601667 Z" id="path8" style="fill:#d81016;stroke-width:0.83333331" /><path d="M 2.6883333,16.25 C 3.9908333,17.340833 5.6675,18 7.5,18 c 1.8325,0 3.509167,-0.659167 4.811667,-1.75 z" id="path10" style="fill:#ffeb00;stroke-width:0.83333331" /><path d="M 14.955833,11.305 H 0.04416667 C 0.105,11.8775 0.23583333,12.4275 0.41833333,12.953333 H 14.580833 a 7.4766667,7.4766667 0 0 0 0.375,-1.648333 z" id="path12" style="fill:#d81016;stroke-width:0.83333331" /><path d="M 14.580833,12.953333 H 0.41916667 c 0.2025,0.585834 0.4725,1.139167 0.80666663,1.648334 H 13.775833 a 7.4833333,7.4833333 0 0 0 0.805,-1.648334 z" id="path14" style="fill:#ffeb00;stroke-width:0.83333331" /></g></svg>
<span class="u-uppercase">CAT</span>
</a>
</li>
<li class="language-selector__item u-uppercase es" role="menuitem">
<a href="#" tabindex="-1">
<svg height="20" width="20" viewBox="0 0 20 20" role="img" aria-labelledby="Spanish"><g transform="translate(0,-492)" id="g4527"><path style="fill:#ffda44;stroke-width:0.0390625" d="m 0,502 c 0,1.2232 0.22003906,2.39492 0.62199219,3.47824 L 10,506.34781 19.378008,505.47824 C 19.779961,504.39492 20,503.2232 20,502 c 0,-1.2232 -0.220039,-2.39492 -0.621992,-3.47824 L 10,497.65219 0.62199219,498.52176 C 0.22003906,499.60508 0,500.7768 0,502 Z" id="path2" /><path id="path4" d="M 19.378008,498.52176 C 17.965078,494.71379 14.299648,492 10,492 c -4.2996484,0 -7.9650781,2.71379 -9.37800781,6.52176 z" style="fill:#d80027;stroke-width:0.0390625" /><path id="path6" d="M 0.62199219,505.47824 C 2.0349219,509.28621 5.7003516,512 10,512 c 4.299648,0 7.965078,-2.71379 9.378008,-6.52176 z" style="fill:#d80027;stroke-width:0.0390625" /></g></svg>
<span class="u-uppercase">ES</span>
</a>
</li>
<li class="language-selector__item u-uppercase eng is-selected" role="menuitem">
<a href="#" tabindex="-1">
<svg height="20" width="20" viewBox="0 0 20 20" role="img" aria-labelledby="English"><circle id="circle2" r="10" cy="10" cx="10" style="fill:#f0f0f0;stroke-width:0.0390625" role="presentation" /><g transform="scale(0.0390625)" id="g20"><path id="path4" d="M 52.92,100.142 C 32.811,126.305 17.648,156.46 8.819,189.219 h 133.178 z" style="fill:#0052b4" /><path id="path6" d="m 503.181,189.219 c -8.829,-32.758 -23.993,-62.913 -44.101,-89.076 l -89.075,89.076 z" style="fill:#0052b4" /><path id="path8" d="m 8.819,322.784 c 8.83,32.758 23.993,62.913 44.101,89.075 l 89.074,-89.075 z" style="fill:#0052b4" /><path id="path10" d="M 411.858,52.921 C 385.695,32.812 355.541,17.649 322.782,8.819 v 133.177 z" style="fill:#0052b4" /><path id="path12" d="m 100.142,459.079 c 26.163,20.109 56.318,35.272 89.076,44.102 V 370.005 Z" style="fill:#0052b4" /><path id="path14" d="m 189.217,8.819 c -32.758,8.83 -62.913,23.993 -89.075,44.101 l 89.075,89.075 z" style="fill:#0052b4" /><path id="path16" d="m 322.783,503.181 c 32.758,-8.83 62.913,-23.993 89.075,-44.101 l -89.075,-89.075 z" style="fill:#0052b4" /><path id="path18" d="m 370.005,322.784 89.075,89.076 c 20.108,-26.162 35.272,-56.318 44.101,-89.076 z" style="fill:#0052b4" /></g><g transform="scale(0.0390625)" id="g32"><path id="path22" d="m 509.833,222.609 h -220.44 -10e-4 V 2.167 C 278.461,0.744 267.317,0 256,0 244.681,0 233.539,0.744 222.609,2.167 v 220.44 0.001 H 2.167 C 0.744,233.539 0,244.683 0,256 c 0,11.319 0.744,22.461 2.167,33.391 h 220.44 0.001 V 509.833 C 233.539,511.256 244.681,512 256,512 c 11.317,0 22.461,-0.743 33.391,-2.167 v -220.44 -10e-4 H 509.833 C 511.256,278.461 512,267.319 512,256 c 0,-11.317 -0.744,-22.461 -2.167,-33.391 z" style="fill:#d80027" /><path id="path24" d="m 322.783,322.784 v 0 L 437.019,437.02 c 5.254,-5.252 10.266,-10.743 15.048,-16.435 l -97.802,-97.802 h -31.482 z" style="fill:#d80027" /><path id="path26" d="m 189.217,322.784 h -0.002 L 74.98,437.019 c 5.252,5.254 10.743,10.266 16.435,15.048 l 97.802,-97.804 z" style="fill:#d80027" /><path id="path28" d="m 189.217,189.219 v -0.002 L 74.981,74.98 C 69.727,80.232 64.715,85.723 59.933,91.415 l 97.803,97.803 h 31.481 z" style="fill:#d80027" /><path id="path30" d="m 322.783,189.219 v 0 L 437.02,74.981 C 431.768,69.727 426.277,64.715 420.585,59.934 l -97.802,97.803 z" style="fill:#d80027" /></g></svg>
<span class="u-uppercase">ENG</span>
</a>
</li>
</ul>
</li>
<li class="extra-content__share fake-button flex-row-wrap" role="menuitem">
<a href="#" tabindex="0">
<svg height="40" width="40" viewBox="0 0 4.53125 4.53125"><g transform="scale(0.078125)" id="g4530"><path style="fill:#c6c6c6;stroke-width:2;stroke:#c6c6c6" id="path2" d="M 54.319,37.839 C 54.762,35.918 55,33.96 55,32 55,22.905 50.369,14.623 42.611,9.847 42.138,9.557 41.524,9.704 41.235,10.174 40.945,10.645 41.092,11.26 41.562,11.55 48.724,15.96 53,23.604 53,32 53,33.726 52.8,35.451 52.427,37.147 51.966,37.051 51.489,37 51,37 c -3.86,0 -7,3.141 -7,7 0,3.859 3.14,7 7,7 3.86,0 7,-3.141 7,-7 0,-2.659 -1.491,-4.976 -3.681,-6.161 z M 51,49 c -2.757,0 -5,-2.243 -5,-5 0,-2.757 2.243,-5 5,-5 2.757,0 5,2.243 5,5 0,2.757 -2.243,5 -5,5 z" /><path style="fill:#c6c6c6;stroke-width:2;stroke:#c6c6c6;" id="path4" d="M 38.171,54.182 C 35.256,55.388 32.171,56 29,56 22.615,56 16.473,53.425 11.983,48.908 13.229,47.643 14,45.911 14,44 c 0,-3.859 -3.14,-7 -7,-7 -3.86,0 -7,3.141 -7,7 0,3.859 3.14,7 7,7 1.226,0 2.378,-0.319 3.381,-0.875 C 15.26,55.136 21.994,58 29,58 c 3.435,0 6.778,-0.663 9.936,-1.971 0.51,-0.211 0.753,-0.796 0.542,-1.307 -0.211,-0.509 -0.797,-0.751 -1.307,-0.54 z M 2,44 c 0,-2.757 2.243,-5 5,-5 2.757,0 5,2.243 5,5 0,2.757 -2.243,5 -5,5 -2.757,0 -5,-2.243 -5,-5 z" /><path style="fill:#c6c6c6;stroke-width:2;stroke:#c6c6c6" id="path6" d="m 4,31.213 c 0.024,0.002 0.048,0.003 0.071,0.003 0.521,0 0.959,-0.402 0.997,-0.93 C 5.78,20.197 12.654,11.766 22.288,8.972 23.142,11.874 25.825,14 29,14 32.86,14 36,10.859 36,7 36,3.141 32.86,0 29,0 25.149,0 22.015,3.127 22.001,6.975 11.42,9.922 3.851,19.12 3.073,30.146 3.034,30.696 3.449,31.175 4,31.213 Z M 29,2 c 2.757,0 5,2.243 5,5 0,2.757 -2.243,5 -5,5 -2.757,0 -5,-2.243 -5,-5 0,-2.757 2.243,-5 5,-5 z" /></g></svg>
<span class="u-uppercase">Share</span>
</a>
</li>
</ul>
</nav>
</section>
<section id="mobile-menu" class="mobile-menu navbar flex-row-wrap">
<a class="navbar__logo" href="#">
<span class="logo">FB</span>
</a>
<div class="navbar__mobile-menu">
<div class="menu">
<span></span>
<span></span>
<span></span>
</div>
</div>
<nav class="navbar__mobile-menu__nav" aria-label="Main mobile menu" aria-hidden="true">
<ul class="navbar__mobile-menu__list flex-column-nowrap" role="menu">
<li class="navbar__mobile-menu__item flex-row-wrap about-me u-uppercase fake-button active" role="menuitem">
<a href="#" tabindex="-1">About me</a>
</li>
<li class="navbar__mobile-menu__item flex-row-wrap skills u-uppercase fake-button" role="menuitem">
<a href="#" tabindex="-1">Skills</a>
</li>
<li class="navbar__mobile-menu__item flex-row-wrap my-work u-uppercase fake-button" role="menuitem">
<a href="#" tabindex="-1">My work</a>
</li>
<li class="navbar__mobile-menu__item flex-row-wrap contact u-uppercase fake-button" role="menuitem">
<a href="#" tabindex="-1">Contact</a>
</li>
<li class="navbar__mobile-menu__item flex-row-wrap language u-uppercase fake-button" role="menuitem" aria-haspopup="true" aria-expanded="false">
<a class="flex-row-nowrap">
<span>Language</span>
<svg class="arrow-icon" height="17.021526" width="9.999999" viewBox="0 0 9.6094522 16.356756"><g transform="matrix(0.03324517,0,0,0.03324517,-3.3736534,0)" id="g6"><path style="fill:#c6c6c6" id="path2" d="M 382.678,226.804 163.73,7.86 C 158.666,2.792 151.906,0 144.698,0 137.49,0 130.73,2.792 125.666,7.86 l -16.124,16.12 c -10.492,10.504 -10.492,27.576 0,38.064 L 293.398,245.9 109.338,429.96 c -5.064,5.068 -7.86,11.824 -7.86,19.028 0,7.212 2.796,13.968 7.86,19.04 l 16.124,16.116 c 5.068,5.068 11.824,7.86 19.032,7.86 7.208,0 13.968,-2.792 19.032,-7.86 L 382.678,265 c 5.076,-5.084 7.864,-11.872 7.848,-19.088 0.016,-7.244 -2.772,-14.028 -7.848,-19.108 z"></path></g></svg>
</a>
<ul class="language__list flex-row-nowrap" role="submenu" aria-hidden="true" aria-expanded="false">
<li class="language__item ca" role="menuitem">
<a class="flex-row-nowrap" href="#" tabindex="-2">
<svg viewBox="0 0 20 20.000012" height="20.000011" width="20" role="img" aria-labelledby="Catalan"><g transform="matrix(1.3333333,0,0,1.3333333,0,-3.9999884)" id="g4506"><path d="M 13.751667,6.36 H 1.2483333 A 7.4641667,7.4641667 0 0 0 0.4325,8.0083333 H 14.566667 A 7.425,7.425 0 0 0 13.751667,6.36 Z M 7.5,3 A 7.4683333,7.4683333 0 0 0 2.7308333,4.7116667 H 12.269167 A 7.4683333,7.4683333 0 0 0 7.5,3 Z" id="path2" style="fill:#ffeb00;stroke-width:0.83333331" /><path d="M 12.269167,4.7116667 H 2.7308333 A 7.5291667,7.5291667 0 0 0 1.2483333,6.36 H 13.750833 A 7.505,7.505 0 0 0 12.269167,4.7116667 Z" id="path4" style="fill:#d81016;stroke-width:0.83333331" /><path d="M 15,10.5 C 15,10.214167 14.980833,9.9341667 14.95,9.6566667 H 0.05 C 0.01916667,9.9341667 0,10.214167 0,10.5 c 0,0.2725 0.01666667,0.54 0.04416667,0.805 H 14.955 C 14.984167,11.04 15,10.7725 15,10.5 Z" id="path6" style="fill:#ffeb00;stroke-width:0.83333331" /><path d="M 14.5675,8.0083333 H 0.4325 A 7.465,7.465 0 0 0 0.05,9.6566667 h 14.9 A 7.465,7.465 0 0 0 14.5675,8.0083333 Z M 13.775,14.601667 H 1.225 A 7.5,7.5 0 0 0 2.6883333,16.25 H 12.311667 A 7.5433333,7.5433333 0 0 0 13.775,14.601667 Z" id="path8" style="fill:#d81016;stroke-width:0.83333331" /><path d="M 2.6883333,16.25 C 3.9908333,17.340833 5.6675,18 7.5,18 c 1.8325,0 3.509167,-0.659167 4.811667,-1.75 z" id="path10" style="fill:#ffeb00;stroke-width:0.83333331" /><path d="M 14.955833,11.305 H 0.04416667 C 0.105,11.8775 0.23583333,12.4275 0.41833333,12.953333 H 14.580833 a 7.4766667,7.4766667 0 0 0 0.375,-1.648333 z" id="path12" style="fill:#d81016;stroke-width:0.83333331" /><path d="M 14.580833,12.953333 H 0.41916667 c 0.2025,0.585834 0.4725,1.139167 0.80666663,1.648334 H 13.775833 a 7.4833333,7.4833333 0 0 0 0.805,-1.648334 z" id="path14" style="fill:#ffeb00;stroke-width:0.83333331" /></g></svg>
<span>CA</span>
</a>
</li>
<li class="language__item es" role="menuitem">
<a class="flex-row-nowrap" href="#" tabindex="-2">
<svg height="20" width="20" viewBox="0 0 20 20" role="img" aria-labelledby="Spanish"><g transform="translate(0,-492)" id="g4527"><path style="fill:#ffda44;stroke-width:0.0390625" d="m 0,502 c 0,1.2232 0.22003906,2.39492 0.62199219,3.47824 L 10,506.34781 19.378008,505.47824 C 19.779961,504.39492 20,503.2232 20,502 c 0,-1.2232 -0.220039,-2.39492 -0.621992,-3.47824 L 10,497.65219 0.62199219,498.52176 C 0.22003906,499.60508 0,500.7768 0,502 Z" id="path2" /><path id="path4" d="M 19.378008,498.52176 C 17.965078,494.71379 14.299648,492 10,492 c -4.2996484,0 -7.9650781,2.71379 -9.37800781,6.52176 z" style="fill:#d80027;stroke-width:0.0390625" /><path id="path6" d="M 0.62199219,505.47824 C 2.0349219,509.28621 5.7003516,512 10,512 c 4.299648,0 7.965078,-2.71379 9.378008,-6.52176 z" style="fill:#d80027;stroke-width:0.0390625" /></g></svg>
<span>ES</span>
</a>
</li>
<li class="language__item eng is-selected" role="menuitem">
<a class="flex-row-nowrap" href="#" tabindex="-2">
<svg height="20" width="20" viewBox="0 0 20 20" role="img" aria-labelledby="English"><circle id="circle2" r="10" cy="10" cx="10" style="fill:#f0f0f0;stroke-width:0.0390625" role="presentation" /><g transform="scale(0.0390625)" id="g20"><path id="path4" d="M 52.92,100.142 C 32.811,126.305 17.648,156.46 8.819,189.219 h 133.178 z" style="fill:#0052b4" /><path id="path6" d="m 503.181,189.219 c -8.829,-32.758 -23.993,-62.913 -44.101,-89.076 l -89.075,89.076 z" style="fill:#0052b4" /><path id="path8" d="m 8.819,322.784 c 8.83,32.758 23.993,62.913 44.101,89.075 l 89.074,-89.075 z" style="fill:#0052b4" /><path id="path10" d="M 411.858,52.921 C 385.695,32.812 355.541,17.649 322.782,8.819 v 133.177 z" style="fill:#0052b4" /><path id="path12" d="m 100.142,459.079 c 26.163,20.109 56.318,35.272 89.076,44.102 V 370.005 Z" style="fill:#0052b4" /><path id="path14" d="m 189.217,8.819 c -32.758,8.83 -62.913,23.993 -89.075,44.101 l 89.075,89.075 z" style="fill:#0052b4" /><path id="path16" d="m 322.783,503.181 c 32.758,-8.83 62.913,-23.993 89.075,-44.101 l -89.075,-89.075 z" style="fill:#0052b4" /><path id="path18" d="m 370.005,322.784 89.075,89.076 c 20.108,-26.162 35.272,-56.318 44.101,-89.076 z" style="fill:#0052b4" /></g><g transform="scale(0.0390625)" id="g32"><path id="path22" d="m 509.833,222.609 h -220.44 -10e-4 V 2.167 C 278.461,0.744 267.317,0 256,0 244.681,0 233.539,0.744 222.609,2.167 v 220.44 0.001 H 2.167 C 0.744,233.539 0,244.683 0,256 c 0,11.319 0.744,22.461 2.167,33.391 h 220.44 0.001 V 509.833 C 233.539,511.256 244.681,512 256,512 c 11.317,0 22.461,-0.743 33.391,-2.167 v -220.44 -10e-4 H 509.833 C 511.256,278.461 512,267.319 512,256 c 0,-11.317 -0.744,-22.461 -2.167,-33.391 z" style="fill:#d80027" /><path id="path24" d="m 322.783,322.784 v 0 L 437.019,437.02 c 5.254,-5.252 10.266,-10.743 15.048,-16.435 l -97.802,-97.802 h -31.482 z" style="fill:#d80027" /><path id="path26" d="m 189.217,322.784 h -0.002 L 74.98,437.019 c 5.252,5.254 10.743,10.266 16.435,15.048 l 97.802,-97.804 z" style="fill:#d80027" /><path id="path28" d="m 189.217,189.219 v -0.002 L 74.981,74.98 C 69.727,80.232 64.715,85.723 59.933,91.415 l 97.803,97.803 h 31.481 z" style="fill:#d80027" /><path id="path30" d="m 322.783,189.219 v 0 L 437.02,74.981 C 431.768,69.727 426.277,64.715 420.585,59.934 l -97.802,97.803 z" style="fill:#d80027" /></g></svg>
<span>ENG</span>
</a>
</li>
</ul>
</li>
<li class="navbar__mobile-menu__item flex-row-wrap share u-uppercase fake-button" role="menuitem">
<a href="#" tabindex="-1">Share</a>
</li>
</ul>
</nav>
</section>
</header>// Variables
$c-main: hsla(0, 100%, 100%, .75);
$c-secondary: hsla(200, 5%, 11%, 1);
$c-secondary-complementary: hsla(0, 0%, 13%, 1);
$c-third: hsla(180, 4%, 36%, 1);
$c-malabars: hsla(178, 40%, 49%, 1);
$c-shadow-main: hsla(240, 3%, 19%, 1);
$c-shadow-secondary: hsla(0, 0%, 0%, .26);
$bg-main: hsla(210, 3%, 15%, 1);
$media550: 550px;
$media768: 768px;
// Fonts
@import url('https://fonts.googleapis.com/css?family=Josefin+Sans');
// General
* {
box-sizing: border-box;
}
body {
font-size: 12px; // 1rem=12px
font-family: 'Josefin Sans', 'Roboto', sans-serif;
background-color: $bg-main;
color: $c-main;
overflow: hidden;
}
a {
color: inherit;
text-decoration: none;
outline: none;
}
li {
width: 100%;
}
svg {
width: 100%;
max-width: 30px;
transition: all .3s ease;
}
.u-uppercase {
text-transform: uppercase;
}
.fake-button {
&::active {
transform: scale(.95);
}
}
.flex-column-nowrap {
display: flex;
flex-flow: column nowrap;
}
.flex-row-wrap {
display: flex;
flex-flow: row wrap;
}
.flex-row-nowrap {
display: flex;
flex-flow: row nowrap;
}
// Specific
.sidebar__logo,
.navbar__logo {
position: relative;
margin-top: .5rem;
padding-top: .4rem;
z-index: 10;
.logo {
top: 50%;
left: 50%;
color: $c-main;
font-size: 2rem;
font-weight: bold;
letter-spacing: -4px;
text-shadow: 0 .2rem .4rem $c-shadow-main, 0 .2rem .4rem $c-shadow-main;
transform: translate(-50%, 100%);
}
&::before,
&::after {
content: '';
position: absolute;
left: 50%;
top: 50%;
display: block;
width: 2rem;
padding: 1rem;
border: 5px solid $c-malabars;
transform: translate(-50%, -50%) rotate(0deg);
animation: 10s infinite alternate ease-in-out spin;
}
&::before {
border-color: $c-malabars $c-malabars transparent transparent;
z-index: -1;
}
&::after {
border-color: transparent transparent $c-malabars $c-malabars;
z-index: 1;
box-shadow: 4px 2px 1px $c-shadow-main;
}
@media screen and (max-width: $media768) {
margin: 0 0 0 1.5rem;
}
@media screen and (max-width: $media550) {
margin: 0 0 0 2.5rem;
}
}
.desktop-menu {
display: flex;
position: relative;
.sidebar {
position: fixed;
width: 100%;
max-width: 75px;
height: 100vh;
justify-content: space-between;
align-content: center;
text-align: center;
z-index: 10;
background-color: $c-secondary;
box-shadow: 0 2px 5px $c-shadow-secondary;
@media screen and (max-width: $media768) {
width: 100%;
max-width: 100vw;
height: 100%;
max-height: 75px;
flex-flow: row nowrap;
align-items: center;
}
}
.sidebar__nav-list {
.nav-list__item {
margin-bottom: 2rem;
opacity: .5;
cursor: pointer;
transition: all .3s ease;
a {
position: relative;
justify-content: center;
align-items: center;
transition: transform .15s ease;
@media screen and (max-width: $media768) {
height: 100%;
}
svg {
@media screen and (max-width: $media768) {
align-self: flex-end;
margin-top: .5rem;
}
}
span {
display: block;
flex-basis: 100%;
padding-top: .25rem;
transform: translateX(-200px);
transition: all .15s ease;
@media screen and (max-width: $media768) {
transform: translateY(-200px);
align-self: flex-end;
padding-bottom: .5rem;
}
}
}
&:last-child {
margin-bottom: 0;
@media screen and (max-width: $media768) {
margin-right: 0;
}
}
&.active, &:hover {
opacity: 1;
span {
transform: translateX(0);
color: $c-malabars;
font-weight: bold;
}
svg {
transform: scale(1.1);
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
animation: dash 12s ease alternate;
}
}
@media screen and (max-width: $media768) {
height: 100%;
margin: 0;
}
}
@media screen and (max-width: $media768) {
flex-flow: row nowrap;
align-items: center;
width: 100%;
max-width: 45%;
height: 100%;
}
@media screen and (max-width: $media550) {
display: none;
}
}
@media screen and (max-width: $media550) {
display: none;
}
.sidebar__extra-content {
display: flex;
flex-flow: column nowrap;
span {
display: block;
width: 100%;
text-align: center;
color: $c-malabars;
font-weight: bold;
transition: all .15s ease;
transform: translateX(-200px);
@media screen and (max-width: $media768) {
align-self: flex-end;
padding-bottom: .5rem;
transform: translateY(-200px);
}
}
.extra-content__language {
display: flex;
position: relative;
flex-flow: row wrap;
justify-content: center;
margin-bottom: 1rem;
cursor: pointer;
transition: all .15s ease;
svg {
@media screen and (max-width: $media768) {
align-self: flex-end;
margin-top: .5rem;
}
}
.extra-content__language-selector {
position: absolute;
top: 0;
right: -200px;
left: 75px;
width: 130px;
padding-left: 1.5rem;
visibility: hidden;
z-index: 1;
transition: visibility 0ms ease-out 600ms;
.language-selector__item {
margin-bottom: 0;
padding: .5rem 0;
border-bottom: 1px solid $c-main;
background-color: $c-secondary;
opacity: 0;
transform: translateX(-200px);
a {
display: flex;
flex-flow: row nowrap;
justify-content: center;
}
span {
width: 25px;
height: 6px; // Set to center vertically the span (because scale modifies it)
align-self: center;
color: $c-main;
transform: scale(1);
}
svg {
@media screen and (max-width: $media768) {
margin: 0;
}
}
&:nth-of-type(1) {
border-top: 1px solid $c-main;
}
@for $i from 1 through 3 {
&:nth-child(#{$i}) {
transition: transform .15s ease #{-($i - 3 - 1) * .1}s, opacity 100ms ease-out #{-($i - 3 - 1) * .1}s;
}
}
&.is-selected {
background-color: $c-third;
font-weight: bold;
a span {
color: $c-malabars;
}
}
&:hover {
background-color: $c-third;
}
@media screen and (max-width: $media768) {
transform: translateX(200px);
}
}
@media screen and (max-width: $media768) {
left: -17px;
top: 83px
}
}
svg:nth-of-type(2) {
position: absolute;
top: 50%;
right: 2rem;
width: 1.1rem;
opacity: 0;
transform: translateY(-85%);
transition: all .15s ease;
@media screen and (max-width: $media768) {
transform: translateY(-130%) rotate(90deg);
}
}
&:hover {
transform: translateX(-1rem);
span {
transform: translateX(1rem);
}
svg:nth-of-type(2) {
opacity: 1;
right: -.5rem;
}
}
&.is-open {
transform: translateX(-1rem);
.extra-content__language-selector {
visibility: visible;
transition: visibility 0ms ease-out 0ms;
@for $i from 1 through 3 {
li:nth-of-type(#{$i}) {
opacity: 1;
transform: none;
transition: transform .15s ease #{$i * .1}s, opacity .1s ease-out #{$i * .1}s;
}
}
}
span {
transform: scale(.95) translateX(1rem);
}
svg {
transform: scale(.95);
&:nth-of-type(2) {
right: -.5rem;
opacity: 1;
transform: translateY(-85%) scale(.90) rotate(180deg);
@media screen and (max-width: $media768) {
transform: translateY(-130%) scale(.90) rotate(-90deg);
}
}
}
}
@media screen and (max-width: $media768) {
margin-bottom: 0;
}
}
.extra-content__share {
justify-content: center;
margin-bottom: .5rem;
cursor: pointer;
transition: all .3s ease;
svg {
@media screen and (max-width: $media768) {
align-self: flex-end;
margin-top: .5rem;
}
}
span {
@media screen and (max-width: $media768) {
align-self: flex-end;
padding-bottom: .5rem;
}
}
&:hover span {
transform: translateX(0);
}
@media screen and (max-width: $media768) {
margin-bottom: 0;
}
}
@media screen and (max-width: $media768) {
flex-flow: row nowrap;
height: 100%;
}
@media screen and (max-width: $media550) {
display: none;
}
}
}
.mobile-menu {
display: none;
position: relative;
align-items: center;
justify-content: space-between;
box-shadow: 0 2px 5px $c-shadow-secondary;
background-color: $c-secondary;
transition: all .3s ease;
.navbar__mobile-menu {
display: none;
position: relative;
height: 100%;
.menu {
position: relative;
width: 50px;
height: 40px;
margin: 1.55rem 1.55rem 0 1.55rem;
text-align: left;
cursor: pointer;
transition: all .5s ease;
span {
display: inline-block;
position: absolute;
height: 3px;
width: 50px;
background: $c-main;
border-radius: 2px;
transition: all .5s ease;
&:nth-of-type(1) {
transition: width .15s .15s, top .15s, right .15s, transform .15s;
}
&:nth-of-type(2) {
top: 10px;
transition: transform .15s;
}
&:nth-of-type(3) {
top: 20px;
right: 0;
transition: width .15s .15s, top .15s, right .15s, transform .15s;
}
}
}
@media screen and (max-width: $media550) {
display: block;
}
}
.navbar__mobile-menu__nav {
display: block;
position: absolute;
left: 100%;
top: 64px;
height: calc(100vh - 65px);
min-height: calc(100vh - 65px);
width: 100vw;
background: $c-secondary;
overflow-x: hidden;
transition: all .3s ease #{.10 * 5}s;
.navbar__mobile-menu__list {
margin-top: 1rem;
font-size: 1.5rem;
justify-content: center;
.navbar__mobile-menu__item {
padding: 1rem 0;
justify-content: center;
cursor: pointer;
transition: all .3s ease;
width: 75%;
margin: 0 auto;
border-bottom: 1px solid $c-main;
transform: translateX($media550);
@for $i from 1 through 6 {
&:nth-child(#{$i}) {
transition: transform .15s ease #{-($i - 3 - 1) * .1}s;
}
}
&.active {
color: $c-malabars;
border-bottom-color: $c-malabars;
}
&:active a {
transition: all .3s ease;
transform: scale(.95);
}
}
}
}
&.is-open {
box-shadow: unset;
.menu {
span {
&:nth-of-type(1) {
top: 2%;
left: 7%;
width: 50%;
transform: rotate(45deg);
transition: width .15s, top .15s .15s, left .15s .15s, transform .15s .15s;
}
&:nth-of-type(2) {
transform: rotate(-45deg);
transition: transform .15s .15s;
}
&:nth-of-type(3) {
width: 50%;
right: 7%;
top: 47%;
transform: rotate(45deg);
transition: width .15s, top .15s .15s, right .15s .15s, transform .15s .15s;
}
}
}
.navbar__mobile-menu__nav {
left: 0;
z-index: -10;
transition: all .3s ease;
.navbar__mobile-menu__item {
transform: translateX(0);
@for $i from 1 through 6 {
&:nth-child(#{$i}) {
transition: transform .15s ease #{$i * .1}s;
}
}
}
.language {
position: relative;
margin-top: 2rem;
a {
width: 100%;
justify-content: center;
}
.arrow-icon {
position: absolute;
transform: rotate(90deg);
right: 1rem;
}
.language__list {
width: 100%;
max-width: 75%;
height: 0;
align-items: center;
justify-content: space-between;
font-size: 1rem;
visibility: hidden;
opacity: 0;
transition: all .3s ease;
.language__item {
a {
align-items: center;
}
&.is-selected span {
color: $c-malabars;
}
}
}
&.is-open {
.arrow-icon {
transform: rotate(-90deg);
}
.language__list {
display: flex;
height: 30px;
visibility: visible;
opacity: 1;
padding-top: 1rem;
}
}
}
}
}
@media screen and (max-width: $media550) {
display: flex;
}
}
// SVG stroke animation
@keyframes dash {
from {
stroke-dashoffset: 1000;
}
to {
stroke-dashoffset: 0;
}
}
// Logo spin animation
@keyframes spin {
from {
transform: translateX(-50%) translateY(-50%) rotate(0deg);
}
to {
transform: translateX(-50%) translateY(-50%) rotate(360deg);
}
}$(document).ready(function () {
// DOM variables
let languageDesktopButton = $('.extra-content__language'),
hamburguerMenu = $('.menu'),
languageMobileButton = $('.language'),
languageSelector = '.extra-content__language-selector';
languageDesktopButton.on('click', function () {
$(this).toggleClass('is-open');
toggleARIA($(this).find(languageSelector), 'aria-expanded');
toggleARIA($(this).find(languageSelector), 'aria-hidden');
});
hamburguerMenu.on("click", function () {
$(this).parent().parent().toggleClass('is-open');
toggleARIA($(this).parent().parent(), 'aria-hidden');
});
languageMobileButton.on('click', function () {
$(this).toggleClass('is-open');
toggleARIA($(this), 'aria-expanded');
});
});
// Toggle ARIA attributes
function toggleARIA(selector, ARIA) {
selector.attr(ARIA, function (i, attr) {
return attr == 'true' ? 'false' : 'true';
});
}
External CSS
This Pen doesn't use any external CSS resources.