1. Nov. 28 Topics

2. Wireframe Plan for Page

3. We will create the form on the right side, focusing on section 9
We will create the form on the right side, focusing on section 9.6 Accessibility and forms
body {background-color: #333333; }
form {
background-color: ghostwhite;
width: 500px;
margin: 25px;
fieldset {
border: 3px ridge #cc0080;
padding: 10px;
margin-bottom: 5px;
label {
float: left;
width: 100px;
clear: left;
text-align: right;
padding-right: 10px;
margin-top: 10px;
#ptype {
width: 150px;
fieldset input, textarea, select {
display: block;
width: 300px;
<form method="post">
<fieldset>
<legend>Pet Questions</legend>
<label for="fullname"> Full Name </label>
<input type ="text" name="fullname" id="fullname">
<label for =" "> Address</label>
<input type =" " name = " " id=" ">
<label for="ptype">Type of Pet</label>
<select name="ptype" id="ptype" size="4">
<option>Snake </option>
<option>Dog </option>
<option>Cat </option>
<option>Bird </option>
<option>Turtle </option>
</select>
<label for="message">Request or Message</label>
<textarea name="message" id="message" cols="40" rows="5">
</textarea>
</fieldset>
<input type="submit" value="Send Message" name="submit" id="submit">
</form>
It would be better for us to create this from scratch, but if time does not allow, we’ll copy and examine.

4. Basics of Animation (Also, keep in mind that transitions and transformations often used with animation.)
A CSS animation is an instruction to progressively update one or more CSS properties over a period of time.
Building Blocks 
Keyframes -- for stages and styles 
Name 
Stages, as a percentage  
CSS Properties, defined for each stage. e.g. opacity, or transform.  
Properties -- to elements  
Assign
Define how  animated  

5. Animation involves 2 basic parts
The animation code
Applying the animation to an element
More Information at:

6. Animation: Purpose is to constantly change background color
Double click on animateONE.txt.
Copy to your style sheet.
I’ll give more instructions on applying it .

7. Animation: Purpose is to move object in rectangular motion
Double click on animateTWO.txt.
Copy to your style sheet.
I’ll give more instructions on applying it.

8. Transformation: When user hover over div, it spins
Double click on animateTHREE.txt.
Copy to your style sheet.
I’ll give more instructions on applying it to the HTML parts.