Integrate Donation gif component into Join Us donate include

[roslynwythe]

Dependency

• Create Donation gif Component and Integrate into Donate Page Include #4439

Overview

We need to integrate the new donation gif component into the Join Us donate include, so that there is a consistent appearance for the animated donation gif and associated text throughout the site.

Action Items

• Open the Join Us donate include file at _includes/join-donate-card.html. This will be the only HTML file modified in this issue. View the new Donation gif include at _includes/donation/donate-gif-text.html.
• The <h3> heading with text "Make a Donation to Hack for LA" is not part of the component and so it will be retained in the Join Us donate include file, however it must be moved from its current location. One approach would be to move the <h3> into a new div that also contains <div class="join-us-donation">
• In pages/join-donate-card.html remove all elements contained in the new component, replacing them with the liquid tag {% include <filename> %}, where <filename> references the new component and is relative to the _includes folder.
• The SCSS for styling the new component is located at _sass/components/_donate-components.scss. Update scss classes as needed so that the component styles are unique and independent of the target pages, and the appearance of the Join Us page is unchanged from the current page for both mobile and desktop screen sizes. Note that in mobile view, the sentence "100% of donation proceeds.." is positioned differently, beneath the animated gif.
• In _sass/components/_join-us.scss delete any styles that are no longer used.

Merge Team

• In Epic Epic: Create reusable donation components and integrate with Donate, Join Us and About pages #4492, check off the dependency under "Creating/Integrating New Issues". If all of the dependencies under that heading have been merged, then release dependencies on all the issues listed under "Clean Up".

Resources/Instructions

• Join Us Donate Card Include
• Donation Gif Include
• Join Us SCSS
• This issue was created as a part of the Epic Epic: Create reusable donation components and integrate with Donate, Join Us and About pages #4492

[github-actions]

Hi @roslynwythe.

Please don't forget to add the proper labels to this issue. Currently, the labels for the following are missing:
Complexity, Role, Feature

NOTE: Please ignore the adding proper labels comment if you do not have 'write' access to this directory.

To add a label, take a look at Github's documentation here.

Also, don't forget to remove the "missing labels" afterwards.
To remove a label, the process is similar to adding a label, but you select a currently added label to remove it.

After the proper labels are added, the merge team will review the issue and add a "Ready for Prioritization" label once it is ready for prioritization.

Additional Resources:

• Wiki: How to create issues
• Wiki: How to read and interpret labels