Recreate your favorite example of Swiss Design

Fork this repository and clone it to the critical-web-design folder on your machine.

1. Select an example of Swiss Design from Swissted or search for one that speaks to you
2. Recreate the design for desktop, tablet, and mobile.
   1. Use type, shape, pen, etc. tools in Figma to recreate art in the design.
   2. Use a layout grid for each device size in Figma.
   3. The parts of your layout that use columns should fit within the Bootstrap grid layout.
   4. Refer to the Web Typography & Swiss Design slides as needed.

1. Use HTML, CSS, SVG, and JS to code your design inside index.html
2. For the column areas in the design
   1. Retype all text from the example you chose.
   2. Use the Bootstrap documentation as well as custom CSS for the columns in your design
   3. Make the band name a link to the page of the original design (ensure the style still matches the poster)
3. For the art in the design
   1. You may use SVGs to render the art in the poster but do not add raster image files.
   2. Use CSS position, border, and translate() properties to create and rotate lines
4. Use JS console.log() to show credits: the original author of the design, and yourself

Check your project on your phone, as well as the responsive devices inside Chrome DevTools. For each breakpoint:

1. Does the design either exactly match the original, or somehow improve it (alterations to make it work at smaller sizes)
2. Can you read all the text at all breakpoints?
3. Are any text or graphic elements overlapping or awkward?

1. Save and refresh your work in the browser often to see your changes.
2. Commit changes regularly.
3. Confirm valid HTML and CSS ^(?)
4. When finished, push, publish, and post your project. Make sure to include a link to your Figma designs in the Moodle post.

• Course references HTML, CSS, and JS
• Bootstrap documentation
• W3Schools CSS 2D Transforms