| summary | time | deliverables | download |
|---|---|---|---|
Create an animated introduction banner about ice cream. |
2 hours |
1 HTML file, 4 CSS files, images |
- 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.txtfile. - Run it through Markbot and make sure it passes all the checks.
- 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
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.
Drop this folder into your Markbot application. Make sure to fix all the errors. And submit for grades using Markbot.