CSCI 446 Unit #2

Specific Requirements

Be sure to test your program in both Chrome and Firefox (IE and others not required). For the most part, features we're studying should be supported in all browsers. But some differences remain (see, e.g., this issue with select boxes in FF).

This assignment is worth 62 points. Your HTML must include:

• (3) Navigation bar with at least 2 buttons and a motto or logo area
• Main area with 3 different sections.
• The middle section must be a form, requirements below
• (4) You may choose different content for the two sides, but the content should be realistic (no lorem ipsum).
• (2) Bottom area must have images. Mine is intended as badges or award, your content may be different.
• Form must include:
• (4) First and last name, specify default value and size
• (4) At least two HTML5 input types. My form has telephone and a range, but you could use color, date, whatever you choose (more than one is ok if you want to experiment).
• (3) Radio buttons with clickable labels (e.g., I can click on "Tea" label and the tea radio button is selected). Choose one button as the default.
• (3) At least 2 check boxes, default one to checked, also with clickable labels
• (2) Use a fieldset with legend to group items
• (2) A dropdown (select) box, with one item selected
• (1) A dropbox that allows multiple items to be selected
• (2) A textarea with default text
• (1) A submit button (no action required)
• (1) A reset button

CSS requirements:

• (3) Layout must use flex for at least 3 divs (could be more, depending on your content and design)
• (4) Use at least four options for justify-content and/or align-items (e.g., 2 of each, 3 justify 1 align, 1 justify 3 align, etc.)
• (2) Use flex for both row and column layouts
• (2) Use flex-wrap along with an overflow option
• Navigation across top:
  • (3) buttons are hoverable with a transition
  • (1) buttons use pointer style of cursor
  • (1) other styling as you see fit
  • (2) "Motto" area right-justified
  • (1) Motto styled in some way
• (2) Style your images with a border. Use object-fit to ensure aspect ratio is correct (i.e., no squished pictures)
• (5) Use at least 5 other basic CSS styles (e.g., modify fonts, colors, margins, padding, etc.)

Ease of grading criteria.

• (1) Name your file XZdashboard.html, where XZ are your initials. For example, my file is named CRdashboard.html.
• (1) Create a zip file with your html, css and image files.
• (2) Include an html comment which documents briefly how you have met the criteria. See example below.

HTML comment example

As in unit 1, the grader must be able to easily determine whether you've met all requirements by running your html file in a browser and reviewing the HTML comment (i.e., the grader should not have to read your entire file to search for a criteria). The comment should list all criteria with a brief description of how you met each one.

<!--
HTML
(3) Nav bar: Play Game, Meet Players buttons, Hooligan's motto

Sections
(4) Two sides: High scores table, Welcome message
(2) Bottom area: 5 images representing awards

Form requirements (middle section)
(4) First/Last name: Mickey Mouse default, size 10
(4) Two new input types: Cell (phone) and Longevity (input range)
(3) Radio buttons for drink preference: have labels, coffee is selected
(3) Checkboxes for transportation: have bike is checked
(2) Fieldsets used for Personal and Character info
(2) Dropdown for Character type, Sage is selected
(1) Multiple item dropbox for Character attributes
(2) Text area for character description, default is "Put your character description here."
(1) Submit with no action 
(1) Reset buttons - does reset

CSS
(3) Flex for at least 3 divs (actually 8 areas: nav, main, scores, drinks, 
transportation, character fields, submit/reset button div and awards). 

(4) justify-content options: 
- space-around for submit/reset buttons and awards
- flex-start for nav
- space-between for character fields.
- align-items with flex-start for awards

(2) Flex Column-reverse layout used for scores, row used for 
all others. 

(2) Flex-wrap with overflow hidden used for awards

(3) Nav buttons transition from white to green
(1) Nav buttons have cursor pointer
(1) Buttons are white with green outline
(2) Motto is right justified
(1) Motto has padding and bold green letters

(2) Images are styled with rounded borders and red background
Used object-fit: contain to maintain aspect ratio

(5) Basic CSS used (at least 5):
background-color
color
border
border-radius
padding
margin
text-align
text-decoration
font-weight
font-family
font-size
height
width
line-height

-->