summary: 'Use background images to create design elements on a masthead & banner.' time: '1 hour' deliverables: '1 HTML file, 4 CSS files, images' download: 'https://assets.learn-the-web.algonquindesign.ca/web-dev-3/leafy-decorations-download.zip'

Leafy decorations

Fork this repository.
Export the required graphics from the downloaded assets, compress & smush them. The artboards in Illustrator are already the correct dimensions—don’t change their width or height.
Use background images, borders, colours & linear-gradients to create the design.
There is a linear-gradient in the design, you’ll have to figure out where it is and how it works.
Some of the CSS is already done for you.
DO NOT change the HTML file.
Run it through Markbot and make sure it passes all the checks.

These are the only CSS properties you’ll need to add to accomplish the layout:

background or if you prefer: background-image, background-position, background-size, background-repeat, background-color
border and the individual sides: border-top, etc.
border-radius
color
padding-top — in only one place

Colours: #588477, #fff, #467366, #2d5a4d, #145b1d, rgba(16, 52, 41, .8), rgba(16, 52, 41, 0)
Border thickness: 3px
Corner radii: 8px
Size of the leafy pattern: 64px
Hovered leaf background distance from the side: .75em
Expected file names: banner.jpg, leaf-bg.svg, leaf-icon.svg, two-leaves.svg

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

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