Lettering.js and Kinetic Type demo

The pen demonstrating how to use the Lettering.js library and CSS animation to create kinetic typography:

See the Pen Kinetic Type with CSS by Patricia Kruep (@littleberry) on CodePen.9324

Bouncing Ball Demo (Pen)

Bouncing ball demo on using CSS animation, timing, and easing.

See the Pen Bouncing Ball Demo by Patricia Kruep (@littleberry) on CodePen.9324

Stone Soup Images

We’re using the three images below to complete the Stone Soup web page. Create a folder called ‘images’ in the same directory as your stone-soup-recipe.html file. Save each of these images to the ‘images’ folder you just created.

Stone Soup Recipe Comp

Design comp for Stone Soup Recipe page: Stone Soup Recipe Comp

Download and save. We’ll look at this file in Photoshop and Illustrator.

JQuery demo code (Codepen)

Download or copy and paste the following code:

See the Pen Sort/filter by tags (jquery) by Patricia Kruep (@littleberry) on CodePen.5657

Make sure to save the CSS and HTML as separate files.