summary: 'Create an animated introduction banner about ice cream.' time: '2 hours' deliverables: '1 HTML file, 4 CSS files, images' download: "https://assets.learn-the-web.algonquindesign.ca/web-dev-3/frozen-not-in-time-download.zip"

Frozen—not in time

Overview

• Fork this repository.
• Export the graphics as SVGs from Adobe Illustrator.
• Create the introductory banner graphic (where the pieces animate in 1-by-1) using animation, @keyframes, transform, filter & opacity
• Each ice cream cone piece should be a separate <img> tag.
• Before adding any animations position the ice cream cone pieces into the right locations so you know their final coordinates.
• Use a grid to get the text and the ice cream cone beside each other.
• Use a repeating-linear-gradient() to create the stripy background pattern.
• Text can be found inside the content.txt file.
• Run it through Markbot and make sure it passes all the checks.

Details

• Typefaces: Fredoka One
• Colours: #b3fbff, #c9fcff, #d4fdff, #990073, #c09
• Expected class names: .btn, .btn-ghost
• Gridifier settings: defaults
• Typografier settings: defaults
• Modulifier settings: select all
• Max-width for intro paragraph: 19em
• Transform origin for the two pieces of text: left center

Goal

Visually match the images in the “screenshots” folder and create the interaction shown in the linked video.

• Final screenshots in the “screenshots” folder.
• Watch this video to see how it interacts. This video shows the browser being refreshed a few times—the components only need to animate in once.

Hand in

Drop this folder into your Markbot application. Make sure to fix all the errors. And submit to Canvas using Markbot.