Skip to content

OleksiiBlezniuk/layout_snake

 
 

Repository files navigation

Boilerplate for layout tasks

Replace <your_account> with your Github username and copy the links to Pull Request description:

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

Screenshots

3 columns 2columns 1 column
1050px image 750px image 450px image

About

No description, website, or topics provided.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 77.3%
  • HTML 22.7%