diff --git a/readme.md b/readme.md index 4b7905be2..a9db9c12f 100644 --- a/readme.md +++ b/readme.md @@ -1,7 +1,7 @@ # Boilerplate for layout tasks Replace `` with your Github username and copy the links to Pull Request description: -- [DEMO LINK](https://.github.io/layout_snake/) -- [TEST REPORT LINK](https://.github.io/layout_snake/report/html_report/) +- [DEMO LINK](https://Luk2asz.github.io/layout_snake/) +- [TEST REPORT LINK](https://Luk2asz.github.io/layout_snake/report/html_report/) > Follow [this instructions](https://mate-academy.github.io/layout_task-guideline) diff --git a/src/index.html b/src/index.html index b20c6e96c..e337b95ed 100644 --- a/src/index.html +++ b/src/index.html @@ -1,14 +1,19 @@ - - - - - Snake - - - -

Snake

- + + + + + Snake + + + +
1
+
2
+
3
+
4
+
5
+
6
+ diff --git a/src/style.css b/src/style.css index e69de29bb..9fdff974a 100644 --- a/src/style.css +++ b/src/style.css @@ -0,0 +1,82 @@ +.container { + display: flex; + flex-direction: column; + margin: 0; +} + +.block { + height: 300px; + text-align: center; + font-family: Arial, Helvetica, sans-serif; + color: white; + font-size: 100px; + line-height: 300px; + flex-basis: 300px; + flex-shrink: 0; + flex-grow: 1; +} + +.block--1 { + background-color: red; +} + +.block--2 { + background-color: rgb(204,0,0); +} + +.block--3 { + background-color: rgb(153,0,0); +} + +.block--4 { + background-color: rgb(102,0,0); +} + +.block--5 { + background-color: rgb(51,0,0); +} + +.block--6 { + background-color: rgb(0,0,0); +} + +@media (min-width: 600px) { + .container { + flex-direction: row; + max-width: 900px; + flex-wrap: wrap; + } + .block--3 { + order: 1; + } + .block--5 { + order: 1; + } + .block--6 { + order: 1; + } +} + +@media (min-width: 900px) { + .container { + max-width: none; + /* height: 600px; */ + /* flex-direction: row; */ + /* flex-wrap: nowrap; */ + } + .block { + flex-basis: 33%; + } + .block--3 { + order: 0; + } + .block--4 { + order: 4; + } + .block--5 { + order: 3; + } + .block--6 { + order: 2; + } +}