| summary | time | deliverables | download |
|---|---|---|---|
Use background images to create design elements on a masthead & banner. |
1 hour |
1 HTML file, 4 CSS files, images |
- 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-gradientin 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:
backgroundor if you prefer:background-image,background-position,background-size,background-repeat,background-colorborderand the individual sides:border-top, etc.border-radiuscolorpadding-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.
- Final screenshots in the “screenshots” folder.
- Watch this video to see how it interacts.
Drop this folder into your Markbot application. Make sure to fix all the errors. And submit for grades using Markbot.