krajnova/layout_snake

Boilerplate for layout tasks

1. Replace <your_account> with your Github username in the links
   • DEMO LINK
   • TEST REPORT LINK
2. Follow this instructions

---

The task

Display six colored blocks on the screen without any extra margins:

• Use flexbox
• Each block should be 300px high.
• Each block should have its number (1 to 6) placed in its center in white Arial 100px font.
  • Block 1 must be red
  • Block 2 must be 4/5 red and 1/5 black
  • Block 3 must be 3/5 red and 2/5 black
  • Block 4 must be 2/5 red and 3/5 black
  • Block 5 must be 1/5 red and 4/5 black
  • Block 6 must be black.
• The width of each block should be not less than its height (300px)
• Blocks must be put in 2 to 6 rows and stretched: each row must fit either 1, 2, or 3 blocks. See the screenshots here.
• The first row is to be read from left ro right, the second row from right to left, the third row again from left to right (this way we have a zigzag, or a snake).

--> CHECKLIST