/Animal-Trading-Card

This is my animal trading card for Udacity Front End Nanodegree.

Primary LanguageHTML

Animal Trading Card

This is my animal trading card for the Udacity Front End Nanodegree.

Udacity Project Requirements

Design

Page resembles card from design prototype.

  • The text is italicized for the animal’s interesting fact.
  • The labels are bolded for the animal’s list items.
  • The dots are removed from the animal's list items.
  • Uses border around animal’s name, image, and information (interesting fact, list items, and description).
  • Uses border around animal’s information.
  • Uses spacing between animal’s name, image, and information.
  • Card width should be fixed and include the spacing around the image (Since image is 300px wide, card should be 300px + spacing on either side. Card should not expand with the browser window).
  • Feel free to customize your information and styles so long as you follow the above rules. For inspiration, you can try playing around with background colors or border radius!

Custom Image and Text

  • The placeholder image and information is replaced with favorite animal image and information.
  • The image is 300px wide or the image's width is set to 300px.
  • The image’s alt is relevant to the animal used.

CSS Classes

  • The HTML includes classes that are used for styling.
  • Classes are given meaningful names.

Separation of Concerns

  • Student separates HTML from CSS by linking to stylesheet.
  • HTML code does not include <style> elements or style attributes in the body.

Code Quality

  • Code is ready for review, meaning new lines and indentation are used for easy readability.