/Mondrian_project

https://avviktoria.github.io/Mondrian_project/

Primary LanguageCSS

✨ Mondrian Challenge

Header

Recreate this image using HTML+CSS, adhering to the following rules:

  1. No use of HTML tables
  2. No in-line styles (e.g. no style tag, only CSS files)
  3. No external libraries or snippets except: a. reset.css - eliminates browser inconsistencies with margin, padding, borders, and more.

Special requirements:

  1. Don’t include the outside frame (the tan border)
  2. Should be able to resize the window and have the mondrian shrink/grow
  3. Does not have to be EXACTLY proportional to the image (don’t bother counting/measuring pixels)
  4. Utilize the same colors: a. Black: rgb(255,255,255) b. Red: rgb(255,56,1) c. Blue(ish): rgb(70,55,184) d. Yellow: rgb(255,202,0)
  5. Google/MDN is allowed.
  6. Create a checkbox that when selected makes 3 of the white blocks any shade of green.
  7. Use mobile responsiveness to re-arrange the Mondrian appropriately.