Create character cards with Image CSS and DOM Manipulation

Create some character cards on a web page. These character cards can be similar to a baseball card, Magic The Gathering Card, or a Pokemon card. It is your choice and anything is fair game.

• Use an external CSS & JS file, no internal or inline styles & scripts
  • Please comment your JS to break down your understanding of what is happening. Please put your name in your code.
• Create at least 3 character card elements (div's would work fine)
  • Each card needs to have an image, a description paragraph, and 3 other text elements in a list (examples: Age, Height, Element, Weakness, Level etc.)
  • Cards and their images must be the same size and dimensions.
  • Cards should have an appropriate style for their content and easy to read.
• CSS Background Images and Border Images need to be use somewhere on the page. A good idea might be to use them on a page H1 title.
• Use JS to find each card element, then apply a class to each card element. They can all get the same class, the goal here is to make sure you understand how to find elements and add CSS classes dynamically
  • HINT: Use the classList (Links to an external site.) or setAttribute (Links to an external site.) properties and methods.
• Use JS to add a link element to the web page after the cards.
  • Set the href attribute to a link appropriate to your card content. For instance, if you made cards about Pokemon create a link to the Pokemon website.
  • SUPER HINT: createElement (Links to an external site.) and appendChild (Links to an external site.) should be very helpful
• Style your page
  • Font, color, spacing and layout should be intentional and not default for all other elements on the page
  • Use classes for styling
  • As always no CSS frameworks all custom creations from your original self
• Confirm that the code is properly indented & formatted.
• Validate your code, there should be no errors

Niv-Mizzet, Parun Desolation Twin Giant Growth Mana Cost Mana Cost Color Blue Red Mana Cost 6 Type Legendary Creature Color Colorless Type Creature Color Green Type Instant 10 Why When you cast Desolation Twin, put a 10/10 colorless Eldrazi creature token onto the battlefield. Target creature gets +3/+3 until end of turn. This spell can't be countered. Flying Whenever you draw a card, Niv-Mizzet, Parun deals 1 damage to any target. Whenever a player casts an instant or sorcery spell, you draw a card. Images are property of Wizards of the Coast, click here for a link to their website. Niv-Mizzet, Parun Desolation Twin Giant Growth Mana Cost Mana Cost Color Blue Red Mana Cost 6 Type Legendary Creature Color Colorless Type Creature Color Green Type Instant 10 Why When you cast Desolation Twin, put a 10/10 colorless Eldrazi creature token onto the battlefield. Target creature gets +3/+3 until end of turn. This spell can't be countered. Flying Whenever you draw a card, Niv-Mizzet, Parun deals 1 damage to any target. Whenever a player casts an instant or sorcery spell, you draw a card. Images are property of Wizards of the Coast, click here for a link to their website