/svg-icon-sets

Use SVG icons sets to create a small layout with different icon.

Primary LanguageCSS

summary time deliverables download
Use SVG icons sets to create a small layout with different icon.
2 hours
1 HTML file, 4 CSS files, images

SVG icon sets

Overview

  • Fork this repository.
  • Format the Illustrator file properly, export the 3 icons & generate a sprite sheet.
  • Create the layout that matches the screenshots using SVG icons for each of the hexagonal graphics.
  • Text can be found inside the content.txt file.
  • Run it through Markbot and make sure it passes all the checks.

Details

  • Typefaces: Overpass
  • Colours: #fff, #ff9500, #ff5e3a, rgba(255, 255, 255, 1) (with the alpha adjusted)
  • Icon size CSS class: .i-192
  • Gridifier settings: defaults
  • Typografier settings: defaults
  • Modulifier settings: select all

Goal

Visually match the images in the “screenshots” folder.

  • Final screenshots in the “screenshots” folder.

Hand in

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