Footer {% include 'components/mean-bean/footer' %}
HTML
<div class="mean-bean">
<div class="mean-bean-sign-section">
<div class="inner clearfix">
<div class="mobile-only">
<h2>Eat Beans <span class="big">Fight</span> <span class="small">Hunger.</span></h2>
</div>
<picture>
<source media="(min-width: 650px)" srcset="/images/mainsite5/mean-bean/2019/Main_Footer_Desktop.png, /images/mainsite5/mean-bean/2019/Main_Footer_Desktop_@2x.png 2x">
<source media="(min-width: 100px)" srcset="/images/mainsite5/mean-bean/2019/gifs/MeanBean_Main_Footer_Mobile.gif, /images/mainsite5/mean-bean/2019/gifs/MeanBean_Main_Footer_Mobile@2x.gif 2x">
<img src="/images/mainsite5/mean-bean/2019/MeanBean_Main_Footer_Mobile@2x.gif" alt="Mean Bean Challenge">
</picture>
<div class="desktop-only">
<h2>Eat Beans <span class="big">Fight</span> <span class="small">Hunger.</span></h2>
</div>
<div class="large-col-6">
<div>
<a href="https://www.tearfund.org/en/about_you/fundraise/sign_up/?Fund={032ED83E-482D-4AFD-9A39-FA8CC8DCFA95}&Activity={43F848A0-C674-479D-AE58-92F27BF88C9D}" class="button button--mean-bean">
<div class="button-bottom"></div>
<div class="button-top">Sign Up Today</div>
</a>
</div>
</div>
<div class="large-col-6">
<div>
<a href="javascript:void(0);" data-lightbox="1" class="show-lightbox button button--mean-bean button--mean-bean-red">
<div class="button-bottom"></div>
<div class="button-top">Invite a friend</div>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="lightbox lightbox--large mean-bean" data-lightbox="1">
<picture class="desktop-only">
<source media="(min-width: 650px)" srcset="/images/mainsite5/mean-bean/2019/MeanBean_Guide_TeamUp_Mobile.png, /images/mainsite5/mean-bean/2019/MeanBean_Guide_TeamUp_Mobile_@2x.png 2x">
<img src="/images/mainsite5/mean-bean/2019/MeanBean_Guide_TeamUp_Mobile.png" class="lightbox-image" alt="Mean Bean Challenge">
</picture>
<h1>
Invite a friend
</h1>
<p>Invite a friend to attempt the Mean Bean Challenge via…</p>
<div class="share-container">
<a href="mailto:?&subject=Mean Bean&body=Copy" class="share-button share-button--email">
<div class="share-button__content">
<img src="/images/mainsite5/svg/social/email.svg" />
<div class="share-button__text"> Email</div>
</div>
</a>
<a href="https://www.facebook.com/sharer/sharer.php?u=https%3A//tearfund.org/meanbean" class="share-button share-button--facebook">
<div class="share-button__content">
<img src="/images/mainsite5/svg/social/facebook.svg" />
<div class="share-button__text"> Facebook</div>
</div>
</a>
<a href="http://twitter.com/share?text=text goes here&url=http://url goes here&hashtags=hashtag1,hashtag2,hashtag3
" class="share-button share-button--twitter">
<div class="share-button__content">
<img src="/images/mainsite5/svg/social/twitter.svg" />
<div class="share-button__text"> Twitter</div>
</div>
</a>
<a href="whatsapp://send" data-text="Take a look at this awesome website:" data-href="" class="share-button share-button--whatsapp mobile-only">
<div class="share-button__content">
<img src="/images/mainsite5/svg/social/whatsapp.svg" />
<div class="share-button__text"> Whatsapp</div>
</div>
</a>
</div>
<div class="lightbox__close-circle"><a href="#" class="lightbox__close lightbox__close--icon"></a></div>
</div>
Twig
<div class="mean-bean">
<div class="mean-bean-sign-section">
<div class="inner clearfix">
<div class="mobile-only">
<h2>Eat Beans <span class="big">Fight</span> <span class="small">Hunger.</span></h2>
</div>
<picture>
<source media="(min-width: 650px)" srcset="/images/mainsite5/mean-bean/2019/Main_Footer_Desktop.png, /images/mainsite5/mean-bean/2019/Main_Footer_Desktop_@2x.png 2x">
<source media="(min-width: 100px)" srcset="/images/mainsite5/mean-bean/2019/gifs/MeanBean_Main_Footer_Mobile.gif, /images/mainsite5/mean-bean/2019/gifs/MeanBean_Main_Footer_Mobile@2x.gif 2x">
<img src="/images/mainsite5/mean-bean/2019/MeanBean_Main_Footer_Mobile@2x.gif" alt="Mean Bean Challenge">
</picture>
<div class="desktop-only">
<h2>Eat Beans <span class="big">Fight</span> <span class="small">Hunger.</span></h2>
</div>
<div class="large-col-6">
<div>
<a href="https://www.tearfund.org/en/about_you/fundraise/sign_up/?Fund={032ED83E-482D-4AFD-9A39-FA8CC8DCFA95}&Activity={43F848A0-C674-479D-AE58-92F27BF88C9D}" class="button button--mean-bean">
<div class="button-bottom"></div>
<div class="button-top">Sign Up Today</div>
</a>
</div>
</div>
<div class="large-col-6">
<div>
<a href="javascript:void(0);" data-lightbox="1" class="show-lightbox button button--mean-bean button--mean-bean-red">
<div class="button-bottom"></div>
<div class="button-top">Invite a friend</div>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="lightbox lightbox--large mean-bean" data-lightbox="1">
<picture class="desktop-only">
<source media="(min-width: 650px)" srcset="/images/mainsite5/mean-bean/2019/MeanBean_Guide_TeamUp_Mobile.png, /images/mainsite5/mean-bean/2019/MeanBean_Guide_TeamUp_Mobile_@2x.png 2x">
<img src="/images/mainsite5/mean-bean/2019/MeanBean_Guide_TeamUp_Mobile.png" class="lightbox-image" alt="Mean Bean Challenge">
</picture>
<h1>
Invite a friend
</h1>
<p>Invite a friend to attempt the Mean Bean Challenge via…</p>
<div class="share-container">
<a href="mailto:?&subject=Mean Bean&body=Copy" class="share-button share-button--email">
<div class="share-button__content">
<img src="/images/mainsite5/svg/social/email.svg" />
<div class="share-button__text"> Email</div>
</div>
</a>
<a href="https://www.facebook.com/sharer/sharer.php?u=https%3A//tearfund.org/meanbean" class="share-button share-button--facebook">
<div class="share-button__content">
<img src="/images/mainsite5/svg/social/facebook.svg" />
<div class="share-button__text"> Facebook</div>
</div>
</a>
<a href="http://twitter.com/share?text=text goes here&url=http://url goes here&hashtags=hashtag1,hashtag2,hashtag3
" class="share-button share-button--twitter">
<div class="share-button__content">
<img src="/images/mainsite5/svg/social/twitter.svg" />
<div class="share-button__text"> Twitter</div>
</div>
</a>
<a href="whatsapp://send" data-text="Take a look at this awesome website:" data-href="" class="share-button share-button--whatsapp mobile-only">
<div class="share-button__content">
<img src="/images/mainsite5/svg/social/whatsapp.svg" />
<div class="share-button__text"> Whatsapp</div>
</div>
</a>
</div>
<div class="lightbox__close-circle"><a href="#" class="lightbox__close lightbox__close--icon"></a></div>
</div>{}
