About Page: Artist Cards

[CharityBunyon]

Story

As a user, I want to see a description of all three artists, their photo, and a link to their social sites.

Acceptance Criteria

WHEN the page loads THEN there should be a paragraph about the band and a picture AND when you scroll there should be a div of cards (three artists) AND on the front of the card, it should be the artist picture AND on the back should be a quick description of them and their social sites AND names will be in a div below

Development Notes

• Font: Quicksand, backup Open Sans
• Font color: #000;
• Maybe use bootstrap: https://getbootstrap.com/docs/4.3/components/card/#using-grid-markup
• Use css transform property to create a 3D flip with the cards
• Maybe Read More link that will create a popup with more info about each band member
• Create and array of artists with objects(name, img, description, social sites) - printToDom

[CharityBunyon]

[CharityBunyon]

const printToDom = (divID, textToPrint) => { document.getElementById(divID).innerHTML = textToPrint; }

[CharityBunyon]

Bootstrap Essentials:

• class="card-img-overlay"
• https://getbootstrap.com/docs/4.3/utilities/colors/#background-color
• https://getbootstrap.com/docs/4.3/utilities/colors/#background-gradient
• https://getbootstrap.com/docs/4.3/components/card/#card-groups

[djunaim]

• in the Music section, the albums have shrunk. Another specific class might need to be created in your html