<ul class="social-links">
<li class="social-links__item">
<a href="https://facebook.com" class="social-links__item-link">
<span class="social-links__item-text">
facebook account for COTA
</span>
<svg class="facebook" title="facebook" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="facebook__logo" fill-rule="evenodd" d="M22.8371 2.13109V22.0503C22.616 22.4091 22.2796 22.6823 21.883 22.8251H16.1703C16.1703 20.1311 16.1703 17.4251 16.1703 14.7311C16.1703 14.4688 16.2777 14.4331 16.5043 14.4331C17.2079 14.4331 17.9235 14.4331 18.6271 14.4331C18.9133 14.4331 18.9968 14.3377 19.0326 14.0755C19.128 13.2291 19.2234 12.3827 19.3546 11.5483C19.3546 11.2264 19.3546 11.143 19.0207 11.1549C18.1859 11.1549 17.3391 11.1549 16.5043 11.1549C16.2419 11.1549 16.1584 11.0834 16.1703 10.8092C16.1703 10.2132 16.1703 9.61718 16.1703 8.99731C16.1703 7.93639 16.5997 7.50724 17.673 7.4834C18.166 7.4834 18.6549 7.4834 19.1399 7.4834C19.3904 7.4834 19.5096 7.48341 19.4977 7.16155C19.4977 6.36685 19.4977 5.60394 19.4977 4.87282C19.4977 4.59864 19.4023 4.53904 19.1519 4.5152C18.3586 4.44969 17.5624 4.42582 16.7666 4.44368C16.2556 4.42289 15.7455 4.50499 15.2668 4.68512C14.7881 4.86525 14.3506 5.13972 13.9801 5.49222C13.6096 5.84473 13.3138 6.26806 13.1103 6.73709C12.9067 7.20611 12.7996 7.71125 12.7952 8.22248C12.7952 9.04499 12.7952 9.86751 12.7952 10.69C12.7952 11.0238 12.7952 11.1788 12.3539 11.1549C11.6622 11.1549 10.9705 11.1549 10.2788 11.1549C10.0283 11.1549 9.94485 11.2265 9.95678 11.4768C9.95678 12.347 9.95678 13.2291 9.95678 14.1112C9.95678 14.3615 10.0283 14.4331 10.2669 14.4331C11.0301 14.4331 11.7934 14.4331 12.5686 14.4331C12.7356 14.5284 12.7356 14.6834 12.7356 14.8503C12.7356 17.3456 12.7356 19.837 12.7356 22.3245C12.7356 22.6582 12.6163 22.7536 12.3062 22.7536H2.00202C1.74012 22.6623 1.51825 22.4826 1.37459 22.2455C1.23092 22.0083 1.17446 21.7285 1.21489 21.4542C1.21489 15.2317 1.21489 9.00923 1.21489 2.78672C1.1727 2.4522 1.24525 2.11325 1.42072 1.82528C1.59618 1.5373 1.86418 1.31733 2.18091 1.20129H21.9307C22.1439 1.27469 22.337 1.39704 22.4944 1.55851C22.6518 1.71999 22.7692 1.91609 22.8371 2.13109Z" />
</svg>
</a>
</li>
<li class="social-links__item">
<a href="https://twitter.com" class="social-links__item-link">
<span class="social-links__item-text">
twitter account for COTA
</span>
<svg class="twitter" title="x" width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="twitter__bird" d="M8.90701 12.6893L0.717018 22H2.65778L9.76916 13.9156L15.449 22H22L13.411 9.77501L22 0.0112972H20.0591L12.5493 8.54866L6.55101 0.0112972H0L8.90749 12.6893H8.90701ZM11.5653 9.66731L12.4356 10.8846L19.3598 20.5711H16.3787L10.7908 12.7538L9.92053 11.5365L2.65687 1.37522H5.63794L11.5653 9.66684V9.66731Z" fill="white" />
</svg>
</a>
</li>
<li class="social-links__item">
<a href="https://instagram.com" class="social-links__item-link">
<span class="social-links__item-text">
instagram account for COTA
</span>
<svg class="instagram" title="instagram" width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="instagram__camera" d="M11.0046 0.2279C12.5162 0.2279 14.0392 0.2279 15.5507 0.2279C16.7477 0.245807 17.9207 0.566416 18.9603 1.15985C19.6341 1.57849 20.2127 2.13353 20.659 2.78927C21.1053 3.445 21.4093 4.1869 21.5516 4.96723C21.7241 5.95004 21.8002 6.94734 21.7789 7.94495C21.7789 10.0816 21.7789 12.2069 21.7789 14.3436C21.8272 15.4963 21.6812 16.6489 21.3471 17.7532C21.0369 18.7226 20.4654 19.5877 19.6954 20.2534C18.9254 20.9191 17.9868 21.3596 16.9828 21.5265C16.0014 21.7102 15.0029 21.7864 14.0051 21.7538C11.8684 21.7538 9.73171 21.7538 7.6064 21.7538C6.45369 21.8021 5.30107 21.6561 4.1968 21.3219C3.23488 21.0147 2.37558 20.4496 1.71232 19.6882C1.04907 18.9268 0.607242 17.9981 0.434871 17.0031C0.251545 16.014 0.17534 15.0081 0.207569 14.0026C0.207569 11.866 0.207569 9.74066 0.207569 7.60398C0.163182 6.45064 0.313018 5.29805 0.650815 4.19439C0.959369 3.23522 1.52339 2.37822 2.28229 1.71543C3.04119 1.05265 3.9663 0.609121 4.95828 0.432476C5.94425 0.254778 6.94583 0.178606 7.94734 0.205164C8.98159 0.216529 9.9931 0.2279 11.0046 0.2279ZM2.17378 10.8204C2.17378 11.0704 2.17378 11.3204 2.17378 11.5705C2.13972 13.1061 2.18524 14.6425 2.31016 16.1734C2.3678 17.0009 2.69976 17.7855 3.2535 18.403C3.80724 19.0206 4.55113 19.4358 5.36743 19.583C6.32622 19.763 7.30209 19.8354 8.27695 19.799C10.0954 19.799 11.9138 19.799 13.7323 19.799C14.5392 19.799 15.3575 19.799 16.1758 19.6739C16.9982 19.6118 17.7774 19.2812 18.3934 18.7329C19.0095 18.1846 19.4283 17.449 19.5854 16.6394C19.759 15.6645 19.8313 14.6742 19.8014 13.6844C19.8014 11.8773 19.8014 10.0703 19.8014 8.27453C19.8265 7.34652 19.7656 6.41819 19.6195 5.5014C19.5252 4.76163 19.205 4.06894 18.7027 3.51776C18.2003 2.96659 17.5402 2.58374 16.8123 2.4214C15.9713 2.24919 15.113 2.1767 14.2551 2.20546C12.7321 2.20546 11.2092 2.20546 9.70897 2.20546C8.41905 2.1691 7.12815 2.21845 5.84477 2.35321C5.33341 2.3938 4.83515 2.53522 4.3787 2.7693C3.92226 3.00337 3.51666 3.32548 3.18529 3.71705C2.6286 4.46464 2.31515 5.36529 2.28742 6.29697C2.15104 7.78583 2.17378 9.29742 2.17378 10.8204Z" fill="white" />
<path class="instagram__camera" d="M11.0045 16.5371C9.90648 16.537 8.83327 16.2103 7.92142 15.5985C7.00956 14.9867 6.30028 14.1175 5.88379 13.1015C5.46731 12.0855 5.36245 10.9686 5.58254 9.89279C5.80263 8.81701 6.33773 7.831 7.11978 7.06019C7.90183 6.28939 8.89548 5.76862 9.97434 5.56412C11.0532 5.35962 12.1685 5.48064 13.1784 5.91179C14.1883 6.34294 15.0471 7.06474 15.6456 7.98535C16.2441 8.90597 16.5552 9.9838 16.5395 11.0817C16.5245 12.5377 15.934 13.9287 14.897 14.9508C13.8599 15.9729 12.4606 16.5432 11.0045 16.5371ZM14.596 10.9908C14.5937 10.281 14.3812 9.58775 13.9852 8.99864C13.5892 8.40953 13.0275 7.95097 12.3711 7.68089C11.7146 7.4108 10.9929 7.3413 10.297 7.48116C9.60103 7.62101 8.96217 7.96396 8.46103 8.46668C7.9599 8.9694 7.61897 9.60935 7.48131 10.3057C7.34365 11.0021 7.41544 11.7236 7.68759 12.3792C7.95975 13.0348 8.42009 13.595 9.01045 13.9891C9.60081 14.3833 10.2947 14.5936 11.0045 14.5936C11.9572 14.5876 12.8689 14.2058 13.5415 13.5311C14.214 12.8564 14.593 11.9435 14.596 10.9908Z" fill="white" />
<path class="instagram__camera" d="M16.7668 3.9557C16.9378 3.95411 17.1074 3.98701 17.2654 4.05242C17.4234 4.11783 17.5667 4.21441 17.6865 4.33641C17.8064 4.4584 17.9005 4.6033 17.9631 4.76245C18.0257 4.9216 18.0556 5.09175 18.051 5.26272C18.051 5.52218 17.9737 5.77575 17.8291 5.99115C17.6844 6.20655 17.479 6.37404 17.2388 6.47226C16.9987 6.57048 16.7347 6.595 16.4806 6.5427C16.2264 6.4904 15.9936 6.36364 15.8118 6.17857C15.6299 5.9935 15.5073 5.75849 15.4594 5.50348C15.4116 5.24846 15.4407 4.98498 15.5431 4.74659C15.6456 4.5082 15.8166 4.30569 16.0345 4.16484C16.2524 4.02399 16.5073 3.95119 16.7668 3.9557Z" fill="white" />
</svg>
</a>
</li>
<li class="social-links__item">
<a href="https://vimeo.com" class="social-links__item-link">
<span class="social-links__item-text">
vimeo account for COTA
</span>
<svg class="vimeo" title="vimeo" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="vimeo__play-button" d="M17.5066 1C18.2601 1 18.9697 1.14456 19.6356 1.43369C20.3015 1.72282 20.8841 2.11708 21.3835 2.61649C21.8829 3.11589 22.2772 3.69853 22.5663 4.3644C22.8554 5.03027 23 5.73994 23 6.49343V17.4803C23 18.2338 22.8554 18.9478 22.5663 19.6225C22.2772 20.2971 21.8829 20.8841 21.3835 21.3835C20.8841 21.8829 20.3015 22.2772 19.6356 22.5663C18.9697 22.8554 18.2601 23 17.5066 23H6.49343C5.73994 23 5.03027 22.8554 4.3644 22.5663C3.69853 22.2772 3.11589 21.8829 2.61649 21.3835C2.11708 20.8841 1.72282 20.2971 1.43369 19.6225C1.14456 18.9478 1 18.2338 1 17.4803V6.49343C1 5.73994 1.14456 5.03027 1.43369 4.3644C1.72282 3.69853 2.11708 3.11589 2.61649 2.61649C3.11589 2.11708 3.69853 1.72282 4.3644 1.43369C5.03027 1.14456 5.73994 1 6.49343 1H17.5066ZM18.1111 9.64755C18.2338 9.03425 18.2031 8.53923 18.0191 8.16249C17.8351 7.78574 17.5635 7.51852 17.2043 7.36081C16.8451 7.20311 16.4377 7.15054 15.9821 7.20311C15.5265 7.25567 15.0884 7.39586 14.6679 7.62366C14.2473 7.85145 13.8706 8.16249 13.5376 8.55675C13.2047 8.95102 12.9944 9.41975 12.9068 9.96296C13.2573 9.75269 13.5639 9.66069 13.8268 9.68698C14.0896 9.71326 14.2911 9.80964 14.4313 9.9761C14.5715 10.1426 14.6372 10.3704 14.6284 10.6595C14.6197 10.9486 14.5277 11.2509 14.3524 11.5663C14.002 12.2147 13.6734 12.7316 13.3668 13.1171C13.0601 13.5026 12.8104 13.6953 12.6177 13.6953C12.4425 13.6953 12.2804 13.4938 12.1314 13.0908C11.9825 12.6878 11.8116 12.1008 11.6189 11.3297C11.5137 10.9442 11.4261 10.5018 11.356 10.0024C11.2859 9.50299 11.1852 9.03863 11.0538 8.60932C10.9223 8.18001 10.7384 7.83393 10.5018 7.57109C10.2652 7.30824 9.93668 7.21187 9.51613 7.28196C9.1131 7.36957 8.69693 7.55794 8.26762 7.84707C7.83831 8.1362 7.43967 8.43847 7.07168 8.75388C6.63361 9.12186 6.21306 9.53365 5.81004 9.98925L6.30944 10.6201C6.50219 10.4799 6.69494 10.366 6.88769 10.2784C7.0454 10.1908 7.19873 10.1382 7.34767 10.1207C7.49661 10.1031 7.61489 10.1382 7.70251 10.2258C7.75508 10.2959 7.83393 10.4711 7.93907 10.7515C8.04421 11.0319 8.16249 11.3692 8.29391 11.7634C8.42533 12.1577 8.56551 12.5826 8.71446 13.0382C8.8634 13.4938 9.00358 13.9319 9.13501 14.3524C9.26643 14.773 9.39347 15.1497 9.51613 15.4827C9.63879 15.8156 9.73516 16.0522 9.80526 16.1924C9.91039 16.3851 10.0506 16.5822 10.2258 16.7838C10.401 16.9853 10.6025 17.1474 10.8303 17.27C11.0581 17.3927 11.3035 17.4628 11.5663 17.4803C11.8292 17.4978 12.1095 17.419 12.4074 17.2437C12.6878 17.0685 13.1127 16.7487 13.6822 16.2843C14.2517 15.82 14.8343 15.2505 15.4301 14.5759C16.0259 13.9012 16.5779 13.1434 17.086 12.3023C17.5942 11.4612 17.9359 10.5763 18.1111 9.64755Z" />
</svg>
</a>
</li>
<li class="social-links__item">
<a href="https://youtube.com" class="social-links__item-link">
<span class="social-links__item-text">
youtube account for COTA
</span>
<svg class="youtube" title="youtube" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="youtube__play-button" d="M23.8869 15.6687C23.8286 16.3177 23.7292 16.9622 23.5892 17.5986C23.4486 18.2354 23.1094 18.8112 22.6205 19.2429C22.1316 19.6745 21.5183 19.9399 20.869 20.0006C19.052 20.1957 17.2146 20.2675 15.3874 20.288C11.31 20.4285 7.22783 20.3326 3.16153 20.0006C2.56474 19.9688 1.99199 19.7551 1.52034 19.388C1.0487 19.021 0.700772 18.5183 0.523375 17.9476C0.311463 17.2323 0.180619 16.4954 0.133301 15.7508C0.133301 15.5661 0.133301 9.22218 0.133301 8.32911C0.16044 7.66663 0.260262 7.00914 0.430984 6.36846C0.572188 5.73007 0.912917 5.15318 1.40382 4.72133C1.89473 4.28948 2.51034 4.02508 3.16153 3.9664C4.97846 3.77137 6.81593 3.69952 8.64313 3.66872C12.72 3.52314 16.8018 3.60882 20.869 3.92535C21.4666 3.95422 22.0407 4.16692 22.5129 4.53438C22.9851 4.90185 23.3323 5.40616 23.5071 5.97839C23.7086 6.67782 23.8325 7.39728 23.8767 8.12381C23.9485 8.34964 23.9485 15.525 23.8869 15.6687ZM16.5371 11.7269L8.91003 7.75426V15.6892L16.5371 11.7269Z" fill="white" />
</svg>
</a>
</li>
</ul>
<ul class="social-links">
{% for key, value in socialMedia %}
{% if value %}
<li class="social-links__item">
<a href="{{ value }}" class="social-links__item-link">
<span class="social-links__item-text">
{{ key }} account for COTA
</span>
{% include 'bits/icons/' ~ key ~ '.twig' %}
</a>
</li>
{% endif %}
{% endfor %}
</ul>
{
"socialMedia": {
"facebook": "https://facebook.com",
"twitter": "https://twitter.com",
"instagram": "https://instagram.com",
"vimeo": "https://vimeo.com",
"youtube": "https://youtube.com"
}
}
.social-links
--backgroundColor transparent
--backgroundColorActive transparent
--border none
--iconFillColor white
--iconFillColorActive blue100
display flex
flex-wrap wrap
margin-top 24px
&__item
margin-bottom 16px
margin-right 16px
&__item-link
background-color var(--backgroundColor)
border var(--border)
border-radius 50px
display flex
justify-content center
align-items center
transition all 0.3s
&:focus
&:hover
&:active
background-color var(--backgroundColorActive)
transform scale(1.2)
& .facebook__logo
& .flickr__logo
& .linkedin__logo
& .twitter__bird
& .instagram__camera
& .vimeo__play-button
& .youtube__play-button
fill var(--iconFillColor)
&:focus .facebook__logo
&:focus .flickr__logo
&:focus .linkedin__logo
&:focus .twitter__bird
&:focus .instagram__camera
&:focus .youtube__play-button
&:hover .facebook__logo
&:hover .flickr__logo
&:hover .linkedin__logo
&:hover .twitter__bird
&:hover .instagram__camera
&:hover .vimeo__play-button
&:hover .youtube__play-button
&:active .facebook__logo
&:active .flickr__logo
&:active .linkedin__logo
&:active .twitter__bird
&:active .instagram__camera
&:active .youtube__play-button
&:active .vimeo__play-button
fill var(--iconFillColorActive)
&__item-text
zoom 1
@extends $visually-hidden
No notes defined.