<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 page for E3 Alliance
</span>
<svg class="facebook" aria-label="Facebook" width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="facebook__logo" d="M18.4152 0.375C19.6122 0.375 20.625 1.38783 20.625 2.58482V18.7902C20.625 20.0332 19.6122 21 18.4152 21H12.0619V14.0022H14.7321L15.2386 10.6875H12.0619V8.56975C12.0619 7.649 12.5223 6.77427 13.9495 6.77427H15.3767V3.96596C15.3767 3.96596 14.0876 3.73577 12.7985 3.73577C10.2204 3.73577 8.51702 5.3471 8.51702 8.20145V10.6875H5.61663V14.0022H8.51702V21H2.20982C0.966797 21 0 20.0332 0 18.7902V2.58482C0 1.38783 0.966797 0.375 2.20982 0.375H18.4152Z" 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 E3 Alliance
</span>
<svg class="instagram" width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="instagram__camera" d="M10.5781 8.32143C11.8728 8.32143 12.9442 9.39286 12.9442 10.6875C12.9442 11.1339 12.8103 11.5357 12.6317 11.8929C11.6942 13.5 9.41741 13.5 8.47991 11.8929C7.58705 10.3304 8.70312 8.32143 10.5781 8.32143ZM16.1138 6.49107C16.5156 7.42857 16.4263 9.66072 16.4263 10.6875C16.4263 11.7589 16.5156 13.9911 16.1138 14.9286C15.8906 15.5536 15.3996 16.0446 14.7746 16.2679C13.8371 16.6696 11.6049 16.5804 10.5781 16.5804C9.5067 16.5804 7.27455 16.6696 6.33705 16.2679C5.71205 16.0446 5.22098 15.5536 4.99777 14.9286C4.64062 13.9911 4.68527 11.7589 4.68527 10.6875C4.68527 9.66072 4.64062 7.42857 4.99777 6.49107C5.22098 5.86607 5.71205 5.375 6.33705 5.15179C7.27455 4.75 9.5067 4.83929 10.5781 4.83929C11.6049 4.83929 13.8371 4.75 14.7746 5.15179C15.3996 5.375 15.8906 5.86607 16.1138 6.49107ZM10.5781 14.3482C12.5871 14.3929 14.2388 12.7411 14.2388 10.6875C14.2388 10.0625 14.0603 9.4375 13.7478 8.85714C12.3192 6.44643 8.79241 6.44643 7.36384 8.85714C5.97991 11.3125 7.72098 14.3482 10.5781 14.3482ZM14.3728 7.74107C14.8192 7.74107 15.221 7.38393 15.221 6.89286C15.221 6.75893 15.1763 6.58036 15.0871 6.44643C14.7746 5.91071 13.971 5.91071 13.6138 6.44643C13.3013 7.02679 13.7031 7.74107 14.3728 7.74107ZM18.4353 0.6875C19.596 0.6875 20.5781 1.66964 20.5781 2.83036V18.5446C20.5781 19.75 19.596 20.6875 18.4353 20.6875H2.72098C1.51563 20.6875 0.578125 19.75 0.578125 18.5446V2.83036C0.578125 1.66964 1.51563 0.6875 2.72098 0.6875H18.4353ZM17.6317 13.6339C17.721 12.4732 17.721 8.94643 17.6317 7.78571C17.5871 6.625 17.3192 5.59821 16.5156 4.79464C15.6674 3.94643 14.6406 3.67857 13.5246 3.63393C12.3192 3.54464 8.79241 3.54464 7.6317 3.63393C6.47098 3.67857 5.4442 3.94643 4.64062 4.75C3.79241 5.59821 3.52455 6.625 3.47991 7.74107C3.39063 8.94643 3.39063 12.4732 3.47991 13.6339C3.52455 14.7946 3.79241 15.8214 4.64062 16.625C5.4442 17.4732 6.47098 17.7411 7.6317 17.7857C8.79241 17.875 12.3192 17.875 13.5246 17.7857C14.6406 17.7411 15.6674 17.4732 16.5156 16.625C17.3192 15.8214 17.5871 14.7946 17.6317 13.6339Z" fill="white" />
</svg>
</a>
</li>
<li class="social-links__item">
<a href="https://linkedin.com" class="social-links__item-link">
<span class="social-links__item-text">
Linked in profile for E3 Alliance
</span>
<svg class="linkedin" width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="linkedin__logo" d="M19.1007 0.6875C19.8597 0.6875 20.5293 1.35714 20.5293 2.16071V19.2589C20.5293 20.0625 19.8597 20.6875 19.1007 20.6875H1.91323C1.1543 20.6875 0.529297 20.0625 0.529297 19.2589V2.16071C0.529297 1.35714 1.1543 0.6875 1.91323 0.6875H19.1007ZM6.55608 17.8304V8.32143H3.60965V17.8304H6.55608ZM5.08287 6.98214C6.02037 6.98214 6.7793 6.22321 6.7793 5.28571C6.7793 4.34821 6.02037 3.54464 5.08287 3.54464C4.10073 3.54464 3.3418 4.34821 3.3418 5.28571C3.3418 6.22321 4.10073 6.98214 5.08287 6.98214ZM17.6722 17.8304V12.6071C17.6722 10.0625 17.0918 8.05357 14.1007 8.05357C12.6722 8.05357 11.69 8.85714 11.2882 9.61607H11.2436V8.32143H8.43108V17.8304H11.3775V13.1429C11.3775 11.8929 11.6007 10.6875 13.1632 10.6875C14.6811 10.6875 14.6811 12.1161 14.6811 13.1875V17.8304H17.6722Z" fill="white" />
</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 E3 Alliance
</span>
<svg class="twitter" width="23" height="21" viewBox="0 0 23 21" fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="twitter__bird" d="M17.8567 0.6875H21.2509L13.8374 9.15865L22.5586 20.6875H15.7317L10.3807 13.6971L4.26532 20.6875H0.866286L8.79417 11.625L0.433594 0.6875H7.43359L12.2653 7.07692L17.8567 0.6875ZM16.6644 18.6587H18.5442L6.40955 2.61058H4.39032L16.6644 18.6587Z" fill="white" />
</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 E3 Alliance
</span>
<svg class="youtube" width="29" height="21" viewBox="0 0 29 21" fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="youtube__play-button" d="M28.3763 3.86458C29.0013 6.05208 29.0013 10.7396 29.0013 10.7396C29.0013 10.7396 29.0013 15.375 28.3763 17.6146C28.0638 18.8646 27.0742 19.8021 25.8763 20.1146C23.6367 20.6875 14.7826 20.6875 14.7826 20.6875C14.7826 20.6875 5.8763 20.6875 3.63672 20.1146C2.4388 19.8021 1.44922 18.8646 1.13672 17.6146C0.511719 15.375 0.511719 10.7396 0.511719 10.7396C0.511719 10.7396 0.511719 6.05208 1.13672 3.86458C1.44922 2.61458 2.4388 1.625 3.63672 1.3125C5.8763 0.6875 14.7826 0.6875 14.7826 0.6875C14.7826 0.6875 23.6367 0.6875 25.8763 1.3125C27.0742 1.625 28.0638 2.61458 28.3763 3.86458ZM11.8659 14.9583L19.2617 10.7396L11.8659 6.52083V14.9583Z" fill="white" />
</svg>
</a>
</li>
</ul>
<ul class="social-links">
{% if contactInfo.facebookLink %}
<li class="social-links__item">
<a href="{{ contactInfo.facebookLink }}" class="social-links__item-link">
<span class="social-links__item-text">
Facebook page for {{ site.name }}
</span>
{% include 'bits/icons/facebook.twig' %}
</a>
</li>
{% endif %}
{% if contactInfo.instagramLink %}
<li class="social-links__item">
<a href="{{ contactInfo.instagramLink }}" class="social-links__item-link">
<span class="social-links__item-text">
Instagram account for {{ site.name }}
</span>
{% include 'bits/icons/instagram.twig' %}
</a>
</li>
{% endif %}
{% if contactInfo.linkedInLink %}
<li class="social-links__item">
<a href="{{ contactInfo.linkedInLink }}" class="social-links__item-link">
<span class="social-links__item-text">
Linked in profile for {{ site.name }}
</span>
{% include 'bits/icons/linkedin.twig' %}
</a>
</li>
{% endif %}
{% if contactInfo.pinterestLink %}
<li class="social-links__item">
<a href="{{ contactInfo.pinterestLink }}" class="social-links__item-link">
<span class="social-links__item-text">
Flickr profile for {{ site.name }}
</span>
{% include 'bits/icons/pinterest.twig' %}
</a>
</li>
{% endif %}
{% if contactInfo.twitterLink %}
<li class="social-links__item">
<a href="{{ contactInfo.twitterLink }}" class="social-links__item-link">
<span class="social-links__item-text">
Twitter account for {{ site.name }}
</span>
{% include 'bits/icons/twitter.twig' %}
</a>
</li>
{% endif %}
{% if contactInfo.youtubeLink %}
<li class="social-links__item">
<a href="{{ contactInfo.youtubeLink }}" class="social-links__item-link">
<span class="social-links__item-text">
Youtube account for {{ site.name }}
</span>
{% include 'bits/icons/youtube.twig' %}
</a>
</li>
{% endif %}
</ul>
{
"site": {
"name": "E3 Alliance"
},
"contactInfo": {
"facebookLink": "https://facebook.com",
"pinterest": "https://pinterest.com",
"linkedInLink": "https://linkedin.com",
"twitterLink": "https://twitter.com",
"instagramLink": "https://instagram.com",
"youtubeLink": "https://youtube.com"
}
}
.social-links
--iconFillColor white
--iconFillColorActive greenApple
display flex
flex-wrap wrap
margin-top 8px
+above(856px)
margin-top 24px
&__item
margin-bottom 16px
margin-right 16px
&__item-link
display flex
justify-content center
align-items center
transition all 0.3s
& .facebook__logo
& .pinterest__logo
& .linkedin__logo
& .twitter__bird
& .instagram__camera
& .youtube__play-button
fill var(--iconFillColor)
&:focus .facebook__logo
&:focus .pinterest__logo
&:focus .linkedin__logo
&:focus .twitter__bird
&:focus .instagram__camera
&:focus .youtube__play-button
&:hover .facebook__logo
&:hover .pinterest__logo
&:hover .linkedin__logo
&:hover .twitter__bird
&:hover .instagram__camera
&:hover .youtube__play-button
&:active .facebook__logo
&:active .pinterest__logo
&:active .linkedin__logo
&:active .twitter__bird
&:active .instagram__camera
&:active .youtube__play-button
fill var(--iconFillColorActive)
&__item-text
zoom 1
@extends $visually-hidden
No notes defined.