CSS Grid Art
For this exercise, you will be creating an abstract work of art using CSS Grid! More specifically, you will be attempting to recreate a piece called Composition with Red Blue and Yellow by Piet Mondrian.
Steps to clone down and open
- Open up Terminal
- Change into your
git clone email@example.com:dc-wdi-fundamentals/css-grid-art.git
cd css_grid_artto change into the cloned down directory
code .to open the directory you are currently located in VS Code
open index.htmlto open your index file in your browser.
At first glance you should see something that kind of resembles the shape of the original painting but is a bit off. Use the numbers to help you with the order and update your
style.css file to resize and recolor your
divs. The first one has been done for you.
You will only need to edit
style.css to complete the exercise. You don't need to recreate the image exactly - there's a lot of subtlety here! (You can also get rid of the numbers in the
index.html file if you'd like, they are there to help you)
Create your own Mondrian-inspired works of art using CSS Grid from scratch! You can create a new git branch with
git checkout -b branch-name, delete the
divs and styling and start from scratch!
painting image from wikipedia.