diff --git a/readme.md b/readme.md index 4b7905be2..519709b61 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://hanianassalska.github.io/layout_snake/) +- [TEST REPORT LINK](https://hanianassalska.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..4b556ee68 100644 --- a/src/index.html +++ b/src/index.html @@ -1,14 +1,21 @@ - - - - - Snake - - - -

Snake

- + + + + + Snake + + + +
+
1
+
2
+
3
+
4
+
5
+
6
+
+ diff --git a/src/style.css b/src/style.css index e69de29bb..8cb2b444e 100644 --- a/src/style.css +++ b/src/style.css @@ -0,0 +1,131 @@ +html { + box-sizing: border-box; +} + +*, +::after, +::before { + box-sizing: inherit; +} + +body { + margin: 0; +} + +.container { + width: 100vw; + display: flex; + flex-wrap: wrap; +} + +.box { + height: 300px; + font-family: Arial, sans-serif; + font-size: 100px; + color: white; + display: flex; + justify-content: center; + align-items: center; + text-align: center; + flex-basis: 33.3%; +} + +.box__1 { + background-color: red; + order: 1; +} + +.box__2 { + background-color: rgb(204, 0, 0); + order: 2; +} + +.box__3 { + background-color: rgb(153, 0, 0); + order: 3; +} + +.box__4 { + background-color: rgb(102, 0, 0); + order: 6; +} + +.box__5 { + background-color: rgb(51, 0, 0); + order: 5; +} + +.box__6 { + background-color: black; + order: 4; +} + +@media (max-width: 899px) { + .box { + flex-basis: 50%; + } + .box__1 { + background-color: red; + order: 1; + } + + .box__2 { + background-color: rgb(204, 0, 0); + order: 2; + } + + .box__3 { + background-color: rgb(153, 0, 0); + order: 4; + } + + .box__4 { + background-color: rgb(102, 0, 0); + order: 3; + } + + .box__5 { + background-color: rgb(51, 0, 0); + order: 5; + } + + .box__6 { + background-color: black; + order: 6; + } +} + +@media (max-width: 599px) { + .box { + flex-basis: 100%; + } + .box__1 { + background-color: red; + order: 1; + } + + .box__2 { + background-color: rgb(204, 0, 0); + order: 2; + } + + .box__3 { + background-color: rgb(153, 0, 0); + order: 3; + } + + .box__4 { + background-color: rgb(102, 0, 0); + order: 4; + } + + .box__5 { + background-color: rgb(51, 0, 0); + order: 5; + } + + .box__6 { + background-color: black; + order: 6; + } +}