For this assignment you will be building a series of custom form elements, some of which will require the use of a provided sprite-sheet.

This is an independent project, but your are free to collaborate with your classmates.

Limit yourself to three hours for this assignment.

GitHub Repository & Project Setup

• Create a repository called ui-challenge-2 for your work.
• Submit a link to this repository in the corresponding Canvas assignment when you are finished.
• Be sure to do your work in a non-master branch, and merge your work into master when finished.

PLAN YOUR WORK AND WORK YOUR PLAN

Assignment Overview

Sprites are used in web development to load multiple image resources while only needing a single HTTP request to retrieve a single resource. Take a look at this article for an overview:

CSS Sprites: What They Are, Why They're Cool, and How To Use Them

This exercise is to give you some hands-on experience working with sprites in a very common use-case: custom styling of form elements.

The instructions on the comp page say to do the styling with JavaScript; it is recommended that you work out the basics of the styling in CSS, ACP it, then refactor to having JS do the styling. Why do the styling with JS? Well, that's the challenge!

Requirements

• Use good HTML structure to scaffold this site, of course, using semantic elements where possible.
• If you want, use SMACSS-style modularity to organize your CSS; there are no specific requirements. Feel free to try an alternate system for organizing your CSS.
• Style the page to reflect the comp image provided as closely as possible; but, feel free to leave out the paragraph of instructions.
• You need not be concerned with responsiveness or mobile layout on this assignment.
• There are no absolute right or wrong answers... just do your best.

https://www.w3schools.com/css/css_image_sprites.asp https://stackoverflow.com/questions/37582952/using-a-background-image-for-checkbox https://stackoverflow.com/questions/20340138/remove-blue-border-from-css-custom-styled-button-in-chrome