Topics

• The value of animation in UI design;
• Review of pseudo classes: :hover, :focus, :active;
• The transform property and the translate() function;
• Additional functions scale(), rotate();
• The transition property and values for duration, type, timing function.

Tutorials

• ADV Section 02, videos 004-023
• The following HTML / CSS pairs will need to be completed and uploaded to your server:
  • pseudo-class-code-a-long.html / pseudo.css
  • pseudo-exercise.html / pseudo-exercise.css (HTML file instructions)
  • button.html / button.css
  • transform-code-a-long.html / transform.css
  • transition-code-a-long.html / transition.css
  • gallery code-a-long (sample code, compressed)
    • gallery/index.html
    • gallery/css/style.css
    • gallery/img/three-images-included

Problem Set

You will be presenting your work on the final version of the recipe. I’ve created a sample presentation that you can consider for a model. Please use Google slides and make sure that the shared link is viewable by everyone.

When making your presentation, use from your website the Google fonts from your heading and body text font to style your presentation text. Also use your site’s color palette for heading and body text.

Below is an enumerated list of slides you should include:

1. Title slide with your Recipe name and your name/username (your choice)
2. Screenshots of the following from your site, one per slide:
   1. Recipe title and figure image with serving size and description.
   2. Ingredients
   3. Instructions
   4. Calorie Table
   5. Youtube video / footer
3. Palette and typography slide
   1. Heading font
   2. Body text font
   3. Black and White
   4. Two grays
   5. Primary color
4. HTML/CSS Code Sample – pick a particular part of the code to illustrate how it works – main layout, list layout, table layout, media layout, etc…
   1. Screenshot of webpage section
   2. Relavent HTML screenshot
   3. Relavent CSS screenshot

For the Blog

An image of an up arrow uses a transform: rotate(90deg) to point to the right. I want to slightly increase the arrow size using scale(1.2) when hovered on, but something is wrong with my code. When I hover the arrow, it gets bigger, but now points upward no longer to the right. What’s wrong with my code? How do I fix it?

img.arrow {
    transform: rotate(90deg);
}

img.arrow:hover {
    transform: scale(1.2);
}

Describe what the problem is and use a code block to provide a solution.