<ul class="soc">
<li>
<a class="icon-1 8tracks" href="#" title="8tracks">
<div class="ir">
<svg viewbox="0 0 512 512" preserveAspectRatio="xMidYMid meet" width="512" height="512">
<path d="M185.304 240.455c-47.581 0-86.09 38.586-86.104 86.165 0.012 47.596 38.522 86.182 86.104 86.182 47.54 0 85.997-38.588 86.019-86.182 0-24.309-0.005-30.236-0.005-30.236h-30.743c0 0 0 5.947 0 30.236 -0.028 15.331-6.179 29.058-16.201 39.12 -10.049 10.043-23.753 16.218-39.07 16.218 -15.333 0-29.021-6.179-39.097-16.218 -10.025-10.063-16.175-23.79-16.197-39.12 0.021-15.316 6.172-29.041 16.197-39.104 10.077-10.043 23.764-16.202 39.097-16.221 28.282 0 111.983 0 141.405 0 47.563 0 86.076-38.319 86.092-85.914 -0.016-47.613-38.527-86.164-86.092-86.18 -47.551 0.017-86.074 38.567-86.092 86.18 0 24.181-0.021 29.986-0.021 29.986h30.726c0 0 0-5.805 0-29.986 0.027-15.314 6.267-29.043 16.315-39.121 10.04-10.024 23.744-16.203 39.069-16.203 15.314 0 29.049 6.177 39.098 16.22 10.014 10.062 16.17 23.789 16.17 39.103 0 15.349-6.156 29.06-16.18 39.102 -10.039 10.043-23.773 15.955-39.088 15.971H185.304L185.304 240.455z"></path>
</svg>
</div>
</a>
</li>
<li>
<a class="icon-2 500px" href="#" title="500px">
<div class="ir">
<svg viewbox="0 0 512 512" preserveAspectRatio="xMidYMid meet" width="512" height="512">
<path d="M256.3 293c26.9 31.2 58.3 58.5 99.9 58.5 56.1 0 89.5-42.6 89.5-96.8 0-54-34.1-94.2-89-94.2 -43.9 0-72.7 28.5-100.4 62.1 -28.5-34.1-56.7-62.1-101.4-62.1 -53.5 0-88.5 40.2-88.5 95.2 0 54.6 35.8 95.7 90.8 95.7C204.1 351.5 228.7 321.9 256.3 293zM115.5 256.8c0-21.3 13.9-44.5 39.3-44.5 26 0 52.7 25.9 70.4 45 -17.2 20.1-42.5 41.9-68.8 41.9C130.3 299.2 115.5 281.1 115.5 256.8zM287.3 257.3c18.4-19.9 41.2-45 68.3-45 26.4 0 41.4 20.8 41.4 44 0 23.4-13.7 43-39.8 43C329.2 299.2 305.7 278.5 287.3 257.3z"></path>
</svg>
</div>
</a>
</li>
<li>
<a class="icon-3 behance" href="#" title="Behance">
<div class="ir">
<svg viewbox="0 0 512 512" preserveAspectRatio="xMidYMid meet" width="512" height="512">
<path d="M254.8 171.8c6.4 8.9 9.6 19.6 9.6 32 0 12.8-3.2 23.1-9.7 30.9 -3.6 4.4-9 8.4-16 12 10.7 3.9 18.8 10.1 24.2 18.5 5.5 8.4 8.2 18.7 8.2 30.7 0 12.4-3.1 23.6-9.3 33.5 -4 6.6-8.9 12.1-14.9 16.5 -6.7 5.1-14.6 8.6-23.7 10.5 -9.1 1.9-19 2.8-29.6 2.8H99.1V149.5h101.4C226.1 149.8 244.2 157.3 254.8 171.8zM140.9 185.9v46.3h51c9.1 0 16.5-1.7 22.2-5.2 5.7-3.5 8.5-9.6 8.5-18.4 0-9.8-3.8-16.2-11.3-19.4 -6.5-2.2-14.7-3.3-24.8-3.3H140.9zM140.9 266.9v55.9h50.9c9.1 0 16.2-1.2 21.2-3.7 9.2-4.6 13.8-13.3 13.8-26.2 0-10.9-4.5-18.4-13.4-22.5 -5-2.3-12-3.5-21-3.6H140.9L140.9 266.9zM396.4 207.3c10.8 4.8 19.8 12.5 26.8 23 6.4 9.2 10.5 19.9 12.4 32.1 1.1 7.1 1.5 17.4 1.3 30.8H323.9c0.6 15.6 6 26.5 16.2 32.7 6.2 3.9 13.6 5.8 22.4 5.8 9.2 0 16.8-2.4 22.5-7.1 3.2-2.6 5.9-6.1 8.4-10.7h41.4c-1.1 9.2-6.1 18.5-15 28 -13.9 15.1-33.4 22.6-58.4 22.6 -20.6 0-38.9-6.4-54.6-19.1 -15.8-12.7-23.7-33.4-23.7-62.1 0-26.9 7.1-47.5 21.4-61.8 14.2-14.3 32.7-21.5 55.5-21.5C373.4 200 385.6 202.4 396.4 207.3zM335.7 242.3c-5.7 5.9-9.3 13.9-10.8 24h69.9c-0.7-10.8-4.3-18.9-10.8-24.5 -6.5-5.6-14.5-8.4-24.1-8.4C349.5 233.4 341.4 236.4 335.7 242.3zM402.8 161.5h-91.2V182.7h91.2V161.5z"></path>
</svg>
</div>
</a>
</li>
<li>
<a class="icon-4 codepen" href="#" title="CodePen">
<div class="ir">
<svg viewbox="0 0 512 512" preserveAspectRatio="xMidYMid meet" width="512" height="512">
<path d="M427 201.9c-0.6-4.2-2.9-8-6.4-10.3L264.2 87.3c-4.9-3.3-11.4-3.3-16.3 0L91.4 191.6c-4 2.7-6.5 7.4-6.5 12.2v104.3c0 4.8 2.5 9.6 6.5 12.2l156.4 104.3c4.9 3.3 11.4 3.3 16.3 0L420.6 320.4c4-2.6 6.6-7.4 6.6-12.2V203.9C427.1 203.2 427.1 202.6 427 201.9 427 201.7 427.1 202.6 427 201.9zM270.7 127.1l115.2 76.8 -51.5 34.4 -63.8-42.7V127.1zM241.3 127.1v68.6l-63.8 42.7 -51.5-34.4L241.3 127.1zM114.3 231.4l36.8 24.6 -36.8 24.6V231.4zM241.3 384.9L126.1 308.1l51.5-34.4 63.8 42.6V384.9zM256 290.8l-52-34.8 52-34.8 52 34.8L256 290.8zM270.7 384.9V316.3l63.8-42.6 51.5 34.4L270.7 384.9zM397.7 280.6l-36.8-24.6 36.8-24.6V280.6z"></path>
</svg>
</div>
</a>
</li>
<li>
<a class="icon-5 delicious" href="#" title="Delicious">
<div class="ir">
<svg viewbox="0 0 512 512" preserveAspectRatio="xMidYMid meet" width="512" height="512">
<path d="M120 120v271.9h271.9V120H120zM365.6 365.6H256V256H146.4V146.4H256V256h109.6V365.6z"></path>
</svg>
</div>
</a>
</li>
<li>
<a class="icon-6 deviantart" href="#" title="DeviantART">
<div class="ir">
<svg viewbox="0 0 512 512" preserveAspectRatio="xMidYMid meet" width="512" height="512">
<path d="M251 214.4c66.8-1.2 102.7 20.7 111.4 63.3h-54.6v-45.8c-14.4-5-29.6-7.1-45.4-6.9v86.6h178.2c-8.6-69.1-88-123.3-184.6-123.3 -1.7 0-3.3 0-5 0.1v-31.7c-15.2-1-30.1 1.4-44.7 7.8v28.8c-73 14.8-127.8 61.5-134.9 118.4h179.6L251 214.4 251 214.4zM206.3 277.7H150.2c6-29.2 24.7-48.6 56.1-56.9V277.7z"></path>
</svg>
</div>
</a>
</li>
<li>
<a class="icon-7 dribbble" href="#" title="Dribbble">
<div class="ir">
<svg viewbox="0 0 512 512" preserveAspectRatio="xMidYMid meet" width="512" height="512">
<path d="M256 68.4C152.4 68.4 68.4 152.4 68.4 256c0 103.6 84 187.6 187.6 187.6S443.6 359.6 443.6 256C443.6 152.4 359.6 68.4 256 68.4zM410.6 247.3c-40.3-6.6-77.3-7-111-1.1 -3.8-8.8-7.8-17.6-12-26.3 36.1-15.6 65.1-36.9 86.7-63.8C395.4 181 408.6 212.6 410.6 247.3zM350.5 133.4c-18.8 24.3-44.8 43.5-78 57.5 -15.9-29.1-34-57.5-54.5-85 12.2-3.1 24.9-4.9 38-4.9C291.6 101 324.3 113.2 350.5 133.4zM186.1 117.9c20.8 27.2 39.3 55.3 55.3 84.1 -38 11.2-83.4 16.9-135.8 17.3C116.4 175 146.3 138.1 186.1 117.9zM101 256c0-1.3 0.2-2.7 0.2-4 60.2-0.1 112.1-7 155.6-20.7 3.6 7.4 7.1 14.9 10.5 22.4 -52.8 16.5-96.4 50.4-130.3 101.3C114.5 328.2 101 293.6 101 256zM160.9 378.1c30.8-48.3 70.1-79.7 118.8-94.2 14.5 37.8 25.2 76.8 31.9 116.6 -17.3 6.7-36 10.5-55.6 10.5C220.1 411 187.2 398.6 160.9 378.1zM342 384.8c-6.9-36.8-16.9-72.8-30-107.8 29.3-4.1 61.6-3.1 96.9 3.1C402.1 323.6 377.2 361.3 342 384.8z"></path>
</svg>
</div>
</a>
</li>
<li>
<a class="icon-8 email" href="#" title="Email">
<div class="ir">
<svg viewbox="0 0 512 512" preserveAspectRatio="xMidYMid meet" width="512" height="512">
<path d="M101.3 141.6v228.9h0.3 308.4 0.8V141.6H101.3zM375.7 167.8l-119.7 91.5 -119.6-91.5H375.7zM127.6 194.1l64.1 49.1 -64.1 64.1V194.1zM127.8 344.2l84.9-84.9 43.2 33.1 43-32.9 84.7 84.7L127.8 344.2 127.8 344.2zM384.4 307.8l-64.4-64.4 64.4-49.3V307.8z"></path>
</svg>
</div>
</a>
</li>
<li>
<a class="icon-9 etsy" href="#" title="Etsy">
<div class="ir">
<svg viewbox="0 0 512 512" preserveAspectRatio="xMidYMid meet" width="512" height="512">
<path d="M215.8 143.2c0-3.9 0.4-6.2 6.9-6.2h88.2c15.4 0 23.9 13.1 30 37.7l5 19.6h15c2.7-55.8 5-80.1 5-80.1s-37.7 4.2-60.1 4.2H193.1l-60.4-1.9v16.2l20.4 3.9c14.2 2.7 17.7 5.8 18.9 18.9 0 0 1.2 38.5 1.2 102s-1.2 101.6-1.2 101.6c0 11.6-4.6 15.8-18.9 18.5l-20.4 3.9v16.2l60.4-1.9h100.9c22.7 0 75.5 1.9 75.5 1.9 1.2-13.9 8.9-76.6 10-83.5h-14.2L350.1 348.4c-11.9 26.9-29.3 28.9-48.5 28.9h-57.4c-19.2 0-28.5-7.7-28.5-24.3v-87.8c0 0 42.7 0 56.6 1.2 10.8 0.8 17.3 3.9 20.8 18.9l4.6 20h16.6l-1.2-50.4 2.3-50.8h-16.6l-5.4 22.3c-3.5 14.6-5.8 17.3-20.8 18.9 -19.6 1.9-57 1.5-57 1.5V143.2z"></path>
</svg>
</div>
</a>
</li>
<li>
<a class="icon-10 facebook" href="#" title="Facebook">
<div class="ir">
<svg viewbox="0 0 512 512" preserveAspectRatio="xMidYMid meet" width="512" height="512">
<path d="M211.9 197.4h-36.7v59.9h36.7V433.1h70.5V256.5h49.2l5.2-59.1h-54.4c0 0 0-22.1 0-33.7 0-13.9 2.8-19.5 16.3-19.5 10.9 0 38.2 0 38.2 0V82.9c0 0-40.2 0-48.8 0 -52.5 0-76.1 23.1-76.1 67.3C211.9 188.8 211.9 197.4 211.9 197.4z"></path>
</svg>
</div>
</a>
</li>
<li>
<a class="icon-11 flickr" href="#" title="Flickr">
<div class="ir">
<svg viewbox="0 0 512 512" preserveAspectRatio="xMidYMid meet" width="512" height="512">
<path d="M344.5 156.9c-38.7 0-72.1 22.1-88.5 54.4 -16.4-32.3-49.8-54.4-88.5-54.4 -54.8 0-99.1 44.4-99.1 99.1 0 54.8 44.4 99.1 99.1 99.1 38.6 0 72.1-22.1 88.5-54.4 16.4 32.3 49.8 54.4 88.5 54.4 54.8 0 99.1-44.4 99.1-99.1C443.6 201.2 399.2 156.9 344.5 156.9zM344.5 328.7c-40.1 0-72.7-32.6-72.7-72.7s32.6-72.7 72.7-72.7 72.7 32.6 72.7 72.7C417.2 296.1 384.6 328.7 344.5 328.7z"></path>
</svg>
</div>
</a>
</li>
<li>
<a class="icon-12 forrst" href="#" title="Forrst">
<div class="ir">
<svg viewbox="0 0 512 512" preserveAspectRatio="xMidYMid meet" width="512" height="512">
<polygon points="241.582,329.145 206.922,303.748 214.591,293.279 241.582,313.057 241.582,258.318 272.223,258.318 272.223,293.564 299.038,278.939 305.252,290.332 272.223,308.35 272.223,329.049 322.979,303.016 328.902,314.563 272.223,343.635 272.223,395.852 392.273,395.852 256,68.147 119.727,395.852 241.582,395.852"></polygon>
</svg>
</div>
</a>
</li>
<li>
<a class="icon-13 github" href="#" title="GitHub">
<div class="ir">
<svg viewbox="0 0 512 512" preserveAspectRatio="xMidYMid meet" width="512" height="512">
<path d="M256 70.7c-102.6 0-185.9 83.2-185.9 185.9 0 82.1 53.3 151.8 127.1 176.4 9.3 1.7 12.3-4 12.3-8.9V389.4c-51.7 11.3-62.5-21.9-62.5-21.9 -8.4-21.5-20.6-27.2-20.6-27.2 -16.9-11.5 1.3-11.3 1.3-11.3 18.7 1.3 28.5 19.2 28.5 19.2 16.6 28.4 43.5 20.2 54.1 15.4 1.7-12 6.5-20.2 11.8-24.9 -41.3-4.7-84.7-20.6-84.7-91.9 0-20.3 7.3-36.9 19.2-49.9 -1.9-4.7-8.3-23.6 1.8-49.2 0 0 15.6-5 51.1 19.1 14.8-4.1 30.7-6.2 46.5-6.3 15.8 0.1 31.7 2.1 46.6 6.3 35.5-24 51.1-19.1 51.1-19.1 10.1 25.6 3.8 44.5 1.8 49.2 11.9 13 19.1 29.6 19.1 49.9 0 71.4-43.5 87.1-84.9 91.7 6.7 5.8 12.8 17.1 12.8 34.4 0 24.9 0 44.9 0 51 0 4.9 3 10.7 12.4 8.9 73.8-24.6 127-94.3 127-176.4C441.9 153.9 358.6 70.7 256 70.7z"></path>
</svg>
</div>
</a>
</li>
<li>
<a class="icon-14 keybase" href="#" title="Keybase">
<div class="ir">
<svg viewBox="0 0 512 512" preserveAspectRatio="xMidYMid meet" width="512" height="512">
<path fill-rule="evenodd" clip-rule="evenodd" d="M205.845 152.37C207.859 136.116 215.234 120.75 225.736 104.218C226.142 105.022 226.592 105.794 227.085 106.539C231.353 113 238.593 116.667 246.436 116.359C249.93 116.226 256.234 116.761 266.36 120.135C277.899 123.978 287.118 132.174 292.322 143.213C297.52 154.241 297.976 166.613 293.605 178.051C290.841 185.28 286.289 191.409 280.627 196.096L274.009 187.917L273.964 187.862C269.455 182.332 262.788 179.162 255.676 179.162C250.257 179.162 244.956 181.057 240.749 184.495C235.374 188.904 232.431 195.199 232.091 201.652C212.746 192.873 203.041 175.004 205.845 152.37ZM242.2 228.43C239.604 228.027 237.01 227.465 234.431 226.735C224.057 223.803 214.907 219.189 207.29 213.11C153.936 234.927 115.916 286.942 114.405 347.893L199.854 256.912L173.465 339.963C223.057 313.933 279.76 310.083 342.468 328.567C362.423 334.449 380.509 329.991 389.673 316.935C399.086 303.52 396.653 284.397 383.163 265.779C367.043 243.531 344.885 225.358 320.771 214.601C316.893 212.872 312.988 211.297 309.063 209.878C306.597 209.022 304.111 208.236 301.607 207.52C299.526 209.766 297.299 211.86 294.948 213.79L321.789 246.956C330.023 257.085 328.517 272.054 318.431 280.328C315.64 282.617 312.31 284.256 308.8 285.068C307.059 285.472 305.27 285.677 303.483 285.677C300.278 285.677 297.163 285.033 294.295 283.822L289.709 287.58C285.701 290.866 280.644 292.673 275.469 292.673C268.675 292.673 262.316 289.645 258.024 284.365L250.369 274.95C245.11 268.486 244.025 259.946 246.78 252.651L245.608 251.209C240.233 244.601 239.216 235.829 242.2 228.43ZM189.378 190.763C184.023 179.689 181.798 166.991 182.865 153.446L166.748 152.445C150.165 151.426 137.457 137.048 138.422 120.391L138.424 120.351L138.427 120.309L139.829 97.6031C140.815 81.6411 154.067 69.1387 169.998 69.1387C170.592 69.1387 171.193 69.1574 171.787 69.192L171.822 69.1946H171.854L194.433 70.5997C202.137 71.07 209.222 74.3926 214.492 79.9718C219.3 72.9659 224.434 65.8407 229.736 58.4822L229.738 58.4803L229.738 58.4791L229.742 58.4747L230.19 57.8521C231.581 55.9214 232.985 53.9726 234.402 52L253.93 63.5364C244.292 84.1368 245.397 91.7638 245.904 93.5043C253.657 93.2674 262.951 94.9253 273.528 98.4488C291.026 104.28 305.006 116.705 312.892 133.441C320.776 150.164 321.47 168.915 314.851 186.237C314.686 186.667 314.518 187.095 314.345 187.52C314.8 187.678 315.254 187.837 315.708 187.998C341.219 196.696 364.838 211.741 384.823 232.374C416.712 265.299 435 308.778 435 351.666C435 385.381 428.474 415.668 415.938 441H389.963C408.076 411.41 412.243 376.993 412.243 351.666C412.243 343.597 411.484 335.495 410.01 327.461C409.46 328.351 408.883 329.229 408.276 330.092C393.551 351.076 365.209 359.078 336.055 350.488C268.82 330.667 209.564 338.999 159.941 375.253L131.843 395.779L147.761 345.682L116.79 378.659C120.993 401.707 130.478 422.926 143.934 441H116.506C108.568 427.904 102.319 413.666 98.0662 398.595L77 421.026V392.258C77 344.577 77 285.238 130.403 231.077C147.696 213.541 167.707 199.908 189.378 190.763ZM187.418 130.838C190.444 121.353 194.743 112.151 199.938 102.962L200.037 101.347C200.164 99.3488 199.504 97.4194 198.179 95.9158C196.861 94.4176 195.035 93.5261 193.055 93.4063L170.449 91.9985C170.298 91.9906 170.146 91.9852 169.998 91.9852C166.062 91.9852 162.788 95.0536 162.544 99.0162L161.142 121.719C160.903 125.836 164.042 129.389 168.14 129.641L187.418 130.838ZM187.737 105.188L186.905 118.693L173.447 117.86L174.282 104.352L187.737 105.188ZM215.54 413.839C224.041 413.839 230.931 406.922 230.931 398.388C230.931 389.853 224.041 382.937 215.54 382.937C207.039 382.937 200.15 389.853 200.15 398.388C200.15 406.922 207.039 413.839 215.54 413.839ZM311.059 413.839C319.56 413.839 326.449 406.922 326.449 398.388C326.449 389.853 319.56 382.937 311.059 382.937C302.558 382.937 295.668 389.853 295.668 398.388C295.668 406.922 302.558 413.839 311.059 413.839ZM259.556 199.707C258.565 198.488 257.126 197.854 255.676 197.854C254.562 197.854 253.441 198.227 252.505 198.991C250.363 200.747 250.043 203.914 251.792 206.064L268.882 227.122L260.577 233.93C258.926 235.284 258.682 237.727 260.031 239.385L261.781 241.538C262.512 242.435 263.575 242.901 264.646 242.901C265.468 242.901 266.295 242.627 266.984 242.065L275.387 235.173L282.327 243.763L265.341 257.684C263.692 259.036 263.445 261.473 264.792 263.129L272.447 272.541C273.219 273.489 274.34 273.981 275.469 273.981C276.339 273.981 277.211 273.694 277.935 273.098L294.839 259.246L299.6 265.135C300.591 266.354 302.03 266.985 303.483 266.985C303.862 266.985 304.241 266.942 304.612 266.854C305.336 266.687 306.033 266.357 306.651 265.851C308.793 264.095 309.113 260.928 307.364 258.775L259.556 199.707Z"></path>
</svg>
</div>
</a>
</li>
<li>
<a class="icon-15 instagram" href="#" title="Instagram">
<div class="ir">
<svg viewbox="0 0 512 512" preserveAspectRatio="xMidYMid meet" width="512" height="512">
<path d="M256 109.3c47.8 0 53.4 0.2 72.3 1 17.4 0.8 26.9 3.7 33.2 6.2 8.4 3.2 14.3 7.1 20.6 13.4 6.3 6.3 10.1 12.2 13.4 20.6 2.5 6.3 5.4 15.8 6.2 33.2 0.9 18.9 1 24.5 1 72.3s-0.2 53.4-1 72.3c-0.8 17.4-3.7 26.9-6.2 33.2 -3.2 8.4-7.1 14.3-13.4 20.6 -6.3 6.3-12.2 10.1-20.6 13.4 -6.3 2.5-15.8 5.4-33.2 6.2 -18.9 0.9-24.5 1-72.3 1s-53.4-0.2-72.3-1c-17.4-0.8-26.9-3.7-33.2-6.2 -8.4-3.2-14.3-7.1-20.6-13.4 -6.3-6.3-10.1-12.2-13.4-20.6 -2.5-6.3-5.4-15.8-6.2-33.2 -0.9-18.9-1-24.5-1-72.3s0.2-53.4 1-72.3c0.8-17.4 3.7-26.9 6.2-33.2 3.2-8.4 7.1-14.3 13.4-20.6 6.3-6.3 12.2-10.1 20.6-13.4 6.3-2.5 15.8-5.4 33.2-6.2C202.6 109.5 208.2 109.3 256 109.3M256 77.1c-48.6 0-54.7 0.2-73.8 1.1 -19 0.9-32.1 3.9-43.4 8.3 -11.8 4.6-21.7 10.7-31.7 20.6 -9.9 9.9-16.1 19.9-20.6 31.7 -4.4 11.4-7.4 24.4-8.3 43.4 -0.9 19.1-1.1 25.2-1.1 73.8 0 48.6 0.2 54.7 1.1 73.8 0.9 19 3.9 32.1 8.3 43.4 4.6 11.8 10.7 21.7 20.6 31.7 9.9 9.9 19.9 16.1 31.7 20.6 11.4 4.4 24.4 7.4 43.4 8.3 19.1 0.9 25.2 1.1 73.8 1.1s54.7-0.2 73.8-1.1c19-0.9 32.1-3.9 43.4-8.3 11.8-4.6 21.7-10.7 31.7-20.6 9.9-9.9 16.1-19.9 20.6-31.7 4.4-11.4 7.4-24.4 8.3-43.4 0.9-19.1 1.1-25.2 1.1-73.8s-0.2-54.7-1.1-73.8c-0.9-19-3.9-32.1-8.3-43.4 -4.6-11.8-10.7-21.7-20.6-31.7 -9.9-9.9-19.9-16.1-31.7-20.6 -11.4-4.4-24.4-7.4-43.4-8.3C310.7 77.3 304.6 77.1 256 77.1L256 77.1z"></path>
<path d="M256 164.1c-50.7 0-91.9 41.1-91.9 91.9s41.1 91.9 91.9 91.9 91.9-41.1 91.9-91.9S306.7 164.1 256 164.1zM256 315.6c-32.9 0-59.6-26.7-59.6-59.6s26.7-59.6 59.6-59.6 59.6 26.7 59.6 59.6S288.9 315.6 256 315.6z"></path>
<circle cx="351.5" cy="160.5" r="21.5"></circle>
</svg>
</div>
</a>
</li>
<li>
<a class="icon-16 lastfm" href="#" title="Last.fm">
<div class="ir">
<svg viewbox="0 0 512 512" preserveAspectRatio="xMidYMid meet" width="512" height="512">
<path d="M230.104 336.568l-13.607-36.988c0 0-22.11 24.66-55.268 24.66 -29.341 0-50.172-25.512-50.172-66.328 0-52.293 26.359-71.001 52.297-71.001 37.412 0 49.316 24.234 59.522 55.273l13.607 42.518c13.603 41.236 39.113 74.402 112.666 74.402 52.727 0 88.437-16.155 88.437-58.672 0-34.438-19.56-52.297-56.125-60.802l-27.209-5.951c-18.707-4.252-24.233-11.906-24.233-24.659 0-14.456 11.478-22.96 30.189-22.96 20.406 0 31.458 7.653 33.162 25.935l42.516-5.103c-3.402-38.263-29.761-53.996-73.127-53.996 -38.266 0-75.68 14.456-75.68 60.799 0 28.912 14.029 47.197 49.315 55.697l28.916 6.801c21.683 5.104 28.908 14.031 28.908 26.363 0 15.73-15.305 22.107-44.218 22.107 -42.941 0-60.794-22.534-70.999-53.574l-14.032-42.513c-17.854-55.271-46.342-75.68-102.892-75.68 -62.499-0.001-95.663 39.538-95.663 106.715 0 64.628 33.164 99.489 92.689 99.489C207.141 359.1 230.104 336.568 230.104 336.568L230.104 336.568z"></path>
</svg>
</div>
</a>
</li>
<li>
<a class="icon-17 linkedin" href="#" title="LinkedIn">
<div class="ir">
<svg viewbox="0 0 512 512" preserveAspectRatio="xMidYMid meet" width="512" height="512">
<path d="M186.4 142.4c0 19-15.3 34.5-34.2 34.5 -18.9 0-34.2-15.4-34.2-34.5 0-19 15.3-34.5 34.2-34.5C171.1 107.9 186.4 123.4 186.4 142.4zM181.4 201.3h-57.8V388.1h57.8V201.3zM273.8 201.3h-55.4V388.1h55.4c0 0 0-69.3 0-98 0-26.3 12.1-41.9 35.2-41.9 21.3 0 31.5 15 31.5 41.9 0 26.9 0 98 0 98h57.5c0 0 0-68.2 0-118.3 0-50-28.3-74.2-68-74.2 -39.6 0-56.3 30.9-56.3 30.9v-25.2H273.8z"></path>
</svg>
</div>
</a>
</li>
<li>
<a class="icon-18 reddit" href="#" title="reddit">
<div class="ir">
<svg viewBox="0 0 512 512" preserveAspectRatio="xMidYMid meet" width="512" height="512">
<path d="M454 251.848C454 227.864 434.382 208.321 410.254 208.321C398.47 208.321 387.837 213.026 379.97 220.593C350.181 201.018 309.858 188.516 265.256 186.936L289.68 110.148L355.777 125.644L355.678 126.598C355.678 146.206 371.708 162.196 391.458 162.196C411.175 162.196 427.206 146.239 427.206 126.598C427.206 106.956 411.143 91 391.425 91C376.284 91 363.38 100.442 358.18 113.701L286.948 97.0207C283.854 96.264 280.661 98.0735 279.706 101.1L252.484 186.739C205.775 187.298 163.445 199.866 132.338 220.034C124.537 212.829 114.168 208.321 102.713 208.321C78.6183 208.354 59 227.864 59 251.848C59 267.805 67.7887 281.623 80.6921 289.222C79.8362 293.861 79.2767 298.533 79.2767 303.337C79.2437 367.656 158.408 420 255.677 420C352.979 420 432.11 367.656 432.11 303.337C432.11 298.829 431.617 294.388 430.86 290.012C444.553 282.643 454 268.397 454 251.848ZM170.522 281.721C170.522 267.443 182.207 255.796 196.559 255.796C210.91 255.796 222.563 267.41 222.563 281.721C222.563 296 210.877 307.614 196.559 307.614C182.207 307.646 170.522 296.033 170.522 281.721ZM319.634 358.543C306.533 371.571 285.927 377.921 256.697 377.921L256.467 377.888L256.237 377.921C227.007 377.921 206.401 371.571 193.3 358.543C190.897 356.174 190.897 352.292 193.3 349.923C195.67 347.554 199.587 347.554 201.957 349.923C212.655 360.55 230.397 365.748 256.237 365.748L256.467 365.781L256.697 365.748C282.504 365.748 300.279 360.583 310.977 349.923C313.38 347.554 317.231 347.554 319.634 349.923C322.037 352.292 322.037 356.174 319.634 358.543ZM316.54 307.646C302.188 307.646 290.536 296.033 290.536 281.754C290.536 267.476 302.221 255.829 316.54 255.829C330.892 255.829 342.544 267.443 342.544 281.754C342.544 296.033 330.892 307.646 316.54 307.646Z"></path>
</svg>
</div>
</a>
</li>
<li>
<a class="icon-19 paypal" href="#" title="PayPal">
<div class="ir">
<svg viewbox="0 0 512 512" preserveAspectRatio="xMidYMid meet" width="512" height="512">
<path d="M374.6 173.4c0 61.3-54 109.9-145.6 109.9h-26.7l-20.5 89.6h-64.3l62.8-283h106.6C343.5 89.8 374.6 125.5 374.6 173.4zM307.1 175.2c0-25.7-21.2-32.5-45.8-32.5h-28.4l-18.8 84.8h25.3C276.1 227.5 307.1 213 307.1 175.2zM393.1 161.4c12.2 95.9-78.6 145.2-173.4 143.8l-20.7 88.1h-44.6l-5 22.8h68.8l19.9-87.9C376.8 324 430.1 222.9 393.1 161.4z"></path>
</svg>
</div>
</a>
</li>
<li>
<a class="icon-20 pinterest" href="#" title="Pinterest">
<div class="ir">
<svg viewbox="0 0 512 512" preserveAspectRatio="xMidYMid meet" width="512" height="512">
<path d="M266.6 76.5c-100.2 0-150.7 71.8-150.7 131.7 0 36.3 13.7 68.5 43.2 80.6 4.8 2 9.2 0.1 10.6-5.3 1-3.7 3.3-13 4.3-16.9 1.4-5.3 0.9-7.1-3-11.8 -8.5-10-13.9-23-13.9-41.3 0-53.3 39.9-101 103.8-101 56.6 0 87.7 34.6 87.7 80.8 0 60.8-26.9 112.1-66.8 112.1 -22.1 0-38.6-18.2-33.3-40.6 6.3-26.7 18.6-55.5 18.6-74.8 0-17.3-9.3-31.7-28.4-31.7 -22.5 0-40.7 23.3-40.7 54.6 0 19.9 6.7 33.4 6.7 33.4s-23.1 97.8-27.1 114.9c-8.1 34.1-1.2 75.9-0.6 80.1 0.3 2.5 3.6 3.1 5 1.2 2.1-2.7 28.9-35.9 38.1-69 2.6-9.4 14.8-58 14.8-58 7.3 14 28.7 26.3 51.5 26.3 67.8 0 113.8-61.8 113.8-144.5C400.1 134.7 347.1 76.5 266.6 76.5z"></path>
</svg>
</div>
</a>
</li>
<li>
<a class="icon-21 rss" href="#" title="RSS">
<div class="ir">
<svg viewbox="0 0 512 512" preserveAspectRatio="xMidYMid meet" width="512" height="512">
<path d="M201.8 347.2c0 20.3-16.5 36.8-36.8 36.8 -20.3 0-36.8-16.5-36.8-36.8s16.5-36.8 36.8-36.8C185.3 310.4 201.8 326.8 201.8 347.2zM128.2 204.7v54.5c68.5 0.7 124 56.3 124.7 124.7h54.5C306.7 285.3 226.9 205.4 128.2 204.7zM128.2 166.6c57.9 0.3 112.3 22.9 153.2 63.9 41 41 63.7 95.5 63.9 153.5h54.5c-0.3-149.9-121.7-271.4-271.6-271.9V166.6L128.2 166.6z"></path>
</svg>
</div>
</a>
</li>
<li>
<a class="icon-22 soundcloud" href="#" title="SoundCloud">
<div class="ir">
<svg viewbox="0 0 512 512" preserveAspectRatio="xMidYMid meet" width="512" height="512">
<path d="M443.5 273.1c0 25.1-20.4 45.5-45.5 45.5H271.5V162.3c4.8-1.8 9.9-3.1 15.1-3.9 4.1-0.6 8.3-1 12.5-1 42.3 0 77 32.7 80.3 74.1 5.7-2.5 11.9-4 18.6-4C423.1 227.6 443.5 248 443.5 273.1zM224.2 193.2v125.4h15.1v-134.5c-3.4 3.7-6.4 7.8-9 12.1C228.4 195 226.3 194.1 224.2 193.2zM247.6 318.6h15.1v-152.4c-5.4 2.7-10.5 6.1-15.1 9.9V318.6zM151.8 208.9v109.7h15.1V196.9C161.3 200.2 156.2 204.2 151.8 208.9zM106.5 231.6v86.5c1.9 0.2 3.7 0.4 5.7 0.4h7.9v-86.6c-2.6-0.5-5.2-0.7-7.9-0.7C110.3 231.3 108.4 231.4 106.5 231.6zM86.5 310.2c3.4 2.5 7.2 4.5 11.3 5.9v-82.4c-4.1 1.4-7.9 3.4-11.3 5.9V310.2zM128.4 234.4v84.2h15.1v-98.7c-3.4 5.6-6 11.8-7.5 18.4C133.6 236.8 131.1 235.5 128.4 234.4zM175.9 318.6h15.1V188.8c-5.3 0.7-10.3 2-15.1 3.8V318.6zM200.1 318.6h15.1v-128.3c-4.8-1.2-9.9-1.9-15.1-1.9V318.6L200.1 318.6zM79.1 303.4v-56.9c-6.6 7.6-10.6 17.6-10.6 28.5C68.5 285.8 72.5 295.7 79.1 303.4z"></path>
</svg>
</div>
</a>
</li>
<li>
<a class="icon-23 stackoverflow" href="#" title="StackOverflow">
<div class="ir">
<svg viewbox="0 0 512 512" preserveAspectRatio="xMidYMid meet" width="512" height="512">
<path d="M294.8 361.2l-122 0.1 0-26 122-0.1L294.8 361.2zM377.2 213.7L356.4 93.5l-25.7 4.5 20.9 120.2L377.2 213.7zM297.8 301.8l-121.4-11.2 -2.4 25.9 121.4 11.2L297.8 301.8zM305.8 267.8l-117.8-31.7 -6.8 25.2 117.8 31.7L305.8 267.8zM321.2 238l-105-62 -13.2 22.4 105 62L321.2 238zM346.9 219.7l-68.7-100.8 -21.5 14.7 68.7 100.8L346.9 219.7zM315.5 275.5v106.5H155.6V275.5h-20.8v126.9h201.5V275.5H315.5z"></path>
</svg>
</div>
</a>
</li>
<li>
<a class="icon-24 stumbleupon" href="#" title="StumbleUpon">
<div class="ir">
<svg viewbox="0 0 512 512" preserveAspectRatio="xMidYMid meet" width="512" height="512">
<path d="M274.5 216.4l23.1 12.8 36.5-12.3v-24.7c0-42.7-35.7-75.9-78.1-75.9 -42.3 0-78.1 31.1-78.1 75.4 0 44.4 0 113.1 0 113.1 0 10.2-8.3 18.5-18.5 18.5 -10.2 0-18.5-8.3-18.5-18.5v-47.9H80.9c0 0 0 48 0 48.6 0 43.2 35 78.3 78.3 78.3 42.9 0 77.7-34.4 78.3-77.2v-111.7c0-10.2 8.3-18.5 18.5-18.5 10.2 0 18.5 8.3 18.5 18.5L274.5 216.4 274.5 216.4zM371.2 256.9v50.2c0 10.2-8.3 18.5-18.5 18.5 -10.2 0-18.5-8.3-18.5-18.5v-49.2l-36.5 12.4 -23.1-12.8v48.8c0.4 42.9 35.3 77.6 78.3 77.6 43.2 0 78.3-35 78.3-78.3 0-0.6 0-48.6 0-48.6L371.2 256.9 371.2 256.9z"></path>
</svg>
</div>
</a>
</li>
<li>
<a class="icon-25 tumblr" href="#" title="Tumblr">
<div class="ir">
<svg viewbox="0 0 512 512" preserveAspectRatio="xMidYMid meet" width="512" height="512">
<path d="M210.8 80.3c-2.3 18.3-6.4 33.4-12.4 45.2 -6 11.9-13.9 22-23.9 30.5 -9.9 8.5-21.8 14.9-35.7 19.5v50.6h38.9v124.5c0 16.2 1.7 28.6 5.1 37.1 3.4 8.5 9.5 16.6 18.3 24.2 8.8 7.6 19.4 13.4 31.9 17.5 12.5 4.1 26.8 6.1 43 6.1 14.3 0 27.6-1.4 39.9-4.3 12.3-2.9 26-7.9 41.2-15v-55.9c-17.8 11.7-35.7 17.5-53.7 17.5 -10.1 0-19.1-2.4-27-7.1 -5.9-3.5-10-8.2-12.2-14 -2.2-5.8-3.3-19.1-3.3-39.7v-91.1H345.5v-55.8h-84.4v-90H210.8z"></path>
</svg>
</div>
</a>
</li>
<li>
<a class="icon-26 twitter" href="#" title="Twitter">
<div class="ir">
<svg viewbox="0 0 512 512" preserveAspectRatio="xMidYMid meet" width="512" height="512">
<path d="M419.6 168.6c-11.7 5.2-24.2 8.7-37.4 10.2 13.4-8.1 23.8-20.8 28.6-36 -12.6 7.5-26.5 12.9-41.3 15.8 -11.9-12.6-28.8-20.6-47.5-20.6 -42 0-72.9 39.2-63.4 79.9 -54.1-2.7-102.1-28.6-134.2-68 -17 29.2-8.8 67.5 20.1 86.9 -10.7-0.3-20.7-3.3-29.5-8.1 -0.7 30.2 20.9 58.4 52.2 64.6 -9.2 2.5-19.2 3.1-29.4 1.1 8.3 25.9 32.3 44.7 60.8 45.2 -27.4 21.4-61.8 31-96.4 27 28.8 18.5 63 29.2 99.8 29.2 120.8 0 189.1-102.1 185-193.6C399.9 193.1 410.9 181.7 419.6 168.6z"></path>
</svg>
</div>
</a>
</li>
<li>
<a class="icon-27 vimeo" href="#" title="Vimeo">
<div class="ir">
<svg viewbox="0 0 512 512" preserveAspectRatio="xMidYMid meet" width="512" height="512">
<path d="M420.1 197.9c-1.5 33.6-25 79.5-70.3 137.8 -46.9 60.9-86.5 91.4-118.9 91.4 -20.1 0-37.1-18.5-51-55.6 -9.3-34-18.5-68-27.8-102 -10.3-37.1-21.4-55.7-33.2-55.7 -2.6 0-11.6 5.4-27 16.2L75.7 209.1c17-14.9 33.8-29.9 50.3-44.9 22.7-19.6 39.7-29.9 51.1-31 26.8-2.6 43.3 15.8 49.5 55 6.7 42.4 11.3 68.7 13.9 79 7.7 35.1 16.2 52.7 25.5 52.7 7.2 0 18-11.4 32.5-34.2 14.4-22.8 22.2-40.1 23.2-52.1 2.1-19.7-5.7-29.5-23.2-29.5 -8.3 0-16.8 1.9-25.5 5.7 16.9-55.5 49.3-82.4 97.1-80.9C405.5 130 422.2 153 420.1 197.9z"></path>
</svg>
</div>
</a>
</li>
<li>
<a class="icon-28 youtube" href="#" title="YouTube">
<div class="ir">
<svg viewbox="0 0 512 512" preserveAspectRatio="xMidYMid meet" width="512" height="512">
<path d="M422.6 193.6c-5.3-45.3-23.3-51.6-59-54 -50.8-3.5-164.3-3.5-215.1 0 -35.7 2.4-53.7 8.7-59 54 -4 33.6-4 91.1 0 124.8 5.3 45.3 23.3 51.6 59 54 50.9 3.5 164.3 3.5 215.1 0 35.7-2.4 53.7-8.7 59-54C426.6 284.8 426.6 227.3 422.6 193.6zM222.2 303.4v-94.6l90.7 47.3L222.2 303.4z"></path>
</svg>
</div>
</a>
</li>
<li>
<a class="icon-29 yelp" href="#" title="Yelp">
<div class="ir">
<svg viewbox="0 0 512 512" preserveAspectRatio="xMidYMid meet" width="512" height="512">
<path d="M284.1 298.4c-6.1 6.1-0.9 17.3-0.9 17.3l45.8 76.4c0 0 7.5 10.1 14 10.1 6.5 0 13-5.4 13-5.4l36.2-51.7c0 0 3.6-6.5 3.7-12.2 0.1-8.1-12.1-10.4-12.1-10.4l-85.7-27.5C298.1 294.9 289.7 292.7 284.1 298.4L284.1 298.4zM279.7 259.8c4.4 7.4 16.5 5.3 16.5 5.3l85.5-25c0 0 11.6-4.7 13.3-11.1 1.6-6.3-1.9-13.9-1.9-13.9L352.2 167c0 0-3.5-6.1-10.9-6.7 -8.1-0.7-13.1 9.1-13.1 9.1l-48.3 76C280 245.4 275.7 253 279.7 259.8L279.7 259.8zM239.4 230.2c10.1-2.5 11.7-17.1 11.7-17.1l-0.7-121.7c0 0-1.5-15-8.3-19.1 -10.6-6.4-13.7-3.1-16.7-2.6l-71 26.4c0 0-6.9 2.3-10.6 8.1 -5.2 8.2 5.3 20.2 5.3 20.2L222.8 225C222.8 225 230.1 232.5 239.4 230.2L239.4 230.2zM221.8 279.5c0.3-9.4-11.3-15-11.3-15l-76.3-38.5c0 0-11.3-4.7-16.8-1.4 -4.2 2.5-7.9 7-8.3 11l-5 61.2c0 0-0.7 10.6 2 15.4 3.9 6.8 16.7 2.1 16.7 2.1l89.1-19.7C215.4 292.1 221.5 291.9 221.8 279.5L221.8 279.5zM244 312.5c-7.6-3.9-16.8 4.2-16.8 4.2l-59.6 65.6c0 0-7.4 10-5.5 16.2 1.8 5.8 4.7 8.6 8.9 10.7l59.9 18.9c0 0 7.3 1.5 12.8-0.1 7.8-2.3 6.4-14.5 6.4-14.5l1.4-88.9C251.3 324.6 251 316.1 244 312.5L244 312.5zM244 312.5"></path>
</svg>
</div>
</a>
</li>
<li>
<a class="icon-30 foursquare" href="#" title="Foursquare">
<div class="ir">
<svg viewbox="0 0 512 512" preserveAspectRatio="xMidYMid meet" width="512" height="512">
<path d="M347.7,83.6c0,0-158.1,0-183.4,0c-25.3,0-32.8,19-32.8,31c0,12,0,291.4,0,291.4c0,13.5,7.3,18.5,11.3,20.2 c4.1,1.7,15.3,3,22.1-4.7c0,0,86.6-100.5,88.1-102c2.2-2.2,2.2-2.2,4.5-2.2c4.5,0,37.9,0,56,0c23.5,0,27.3-16.8,29.8-26.7 c2-8.3,25-125.9,32.7-163.2C381.9,99,374.7,83.6,347.7,83.6z M343.4,290.6c2-8.3,25-125.9,32.7-163.2 M336.9,133.3l-7.7,40.1 c-0.9,4.3-6.4,8.9-11.4,8.9c-5.1,0-71.4,0-71.4,0c-8,0-13.8,5.5-13.8,13.5v8.7c0,8,5.8,13.7,13.8,13.7c0,0,54.9,0,60.6,0 c5.7,0,11.2,6.2,10,12.3c-1.2,6.1-7,36.1-7.7,39.5c-0.7,3.3-4.5,9-11.2,9c-5.7,0-49.5,0-49.5,0c-9,0-11.7,1.2-17.8,8.7 c-6,7.5-60.2,72.6-60.2,72.6c-0.5,0.6-1.1,0.4-1.1-0.2V132.7c0-5.1,4.5-11.1,11.1-11.1c0,0,141.4,0,147.2,0 C333.2,121.5,338.3,126.6,336.9,133.3z"></path>
</svg>
</div>
</a>
</li>
<li>
<a class="icon-31 blogger" href="#" title="Blogger">
<div class="ir">
<svg viewbox="0 0 512 512" preserveAspectRatio="xMidYMid meet" width="512" height="512">
<path d="M 315.969 135.186C 314.722 129.512 311.186 124.243 307.152 122.046C 305.91 121.37 297.956 120.508 289.475 120.131C 275.264 119.499 273.674 119.222 269.189 116.588C 262.074 112.411 260.114 107.901 260.095 95.6545C 260.058 72.2565 250.338 50.5345 231.132 30.9295C 217.45 16.9625 202.187 7.50851 184.768 2.21051C 180.598 0.942512 171.26 0.510512 139.984 0.140512C 90.909 -0.440488 80.015 0.567514 63.308 7.23351C 32.507 19.5235 10.375 45.4255 2.30198 78.6315C 0.785982 84.8685 0.490984 94.8635 0.132984 152.283C -0.316016 224.217 0.178981 234.78 4.66598 249.036C 8.37298 260.813 12.113 268.031 19.819 278.274C 34.498 297.789 56.497 311.883 78.491 315.864C 88.958 317.758 218.093 318.232 231.319 316.425C 254.32 313.282 272.344 304.047 289.253 286.741C 301.486 274.222 309.143 260.671 314.147 242.687C 316.226 235.216 316.4 231.579 316.781 187.713C 317.071 154.606 316.831 139.1 315.969 135.186ZM 88.09 90.0635C 93.614 84.4765 95.141 84.2645 129.716 84.2645C 160.756 84.2645 161.799 84.3325 166.359 86.6395C 172.948 89.9735 175.811 94.6755 175.811 102.161C 175.811 108.921 173.122 113.659 167.125 117.466C 163.905 119.51 161.98 119.638 131.568 119.817C 112.789 119.927 97.829 119.568 95.6 118.953C 83.841 115.705 79.448 98.8045 88.09 90.0635ZM 223.735 231.746L 213.221 233.459L 158.424 234.101C 110.273 234.666 96.632 233.783 94.126 232.689C 89.079 230.486 84.378 224.366 83.566 218.939C 82.792 213.77 85.386 206.663 89.361 203.059C 94.372 198.516 96.571 198.365 158.195 198.316C 221.586 198.266 221.256 198.24 227.267 203.862C 235.757 211.803 233.966 225.941 223.735 231.746Z" transform="translate(98 97)"></path>
</svg>
</div>
</a>
</li>
<li>
<a class="icon-32 spotify" href="#" title="Spotify">
<div class="ir">
<svg viewbox="0 0 512 512" preserveAspectRatio="xMidYMid meet" width="512" height="512">
<path d="M256 78c-98.3 0-178 79.7-178 178 0 98.31 79.7 178 178 178 98.31 0 178-79.69 178-178 0-98.3-79.69-178-178-178zm81.63 256.73a11.09 11.09 0 0 1-15.26 3.68c-41.8-25.53-94.4-31.31-156.37-17.16a11.1 11.1 0 0 1-4.93-21.64c67.8-15.49 125.96-8.82 172.88 19.86a11.1 11.1 0 0 1 3.68 15.26zm21.79-48.47a13.88 13.88 0 0 1-19.1 4.57c-47.84-29.4-120.77-37.92-177.36-20.74a13.9 13.9 0 0 1-17.32-9.25 13.9 13.9 0 0 1 9.25-17.3c64.65-19.62 145.01-10.12 199.96 23.64a13.87 13.87 0 0 1 4.56 19.08zm1.87-50.47c-57.37-34.07-152.02-37.2-206.8-20.58a16.65 16.65 0 1 1-9.66-31.87c62.88-19.08 167.4-15.4 233.45 23.81a16.63 16.63 0 0 1 5.82 22.82 16.63 16.63 0 0 1-22.8 5.82h-.01z"></path>
</svg>
</div>
</a>
</li>
</ul>$background: hsl(210, 45, 10)
html
box-sizing: border-box
*, *:before, *:after
box-sizing: inherit
.ir
display: block
overflow: visible
padding: 0 0 100%
position: relative
height: 0
width: 100%
.ir > *
position: absolute
height: 100%
width: 100%
top: 0
left: 0
html, body
background: $background
html
font-size: .625em // 10px for rems
.soc
display: block
font-size: 0
list-style: none
margin: 0 auto
padding: 4.8rem
text-align: center
width: 110rem
max-width: 100%
li
display: inline-block
margin: 1.2rem
a, svg
display: block
a
height: 9.6rem
width: 9.6rem
%social-icon-hover
border-radius: 100%
fill: $background
transform: scale(1.25)
transition: background-color .5s, transform .5s ease-out
@for $i from 1 through 32
.icon-#{$i}
fill: hsl($i * 12, 70, 50)
&:hover
background: hsl($i * 12, 70, 50)
@extend %social-icon-hover
/*
This isn't maintained,
I suggest looking at:
https://simpleicons.org/
Thanks for all the
comments, suggestions
and contributions ❤️
*/
document
.querySelectorAll("a")
.forEach((el) => el.addEventListener("click", (ev) => ev.preventDefault()));
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.