ltw-webdev-3 / frozen-not-in-time

Create an animated introduction banner about ice cream.

summary	time	deliverables	download
Create an animated introduction banner about ice cream.	2 hours	1 HTML file, 4 CSS files, images	https://assets.learntheweb.courses/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 for grades using Markbot.