From 8846ba7946fbb4069b7bca1ceb3907d2149fe728 Mon Sep 17 00:00:00 2001 From: Krzysztof Janiewicz Date: Sun, 14 May 2023 22:47:23 +0200 Subject: [PATCH] task solution --- readme.md | 4 +-- src/index.html | 31 ++++++++++------- src/style.css | 92 ++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 113 insertions(+), 14 deletions(-) diff --git a/readme.md b/readme.md index 09d94e0d2..ef0f1dea2 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://spojrzenie.github.io/layout_snake/) +- [TEST REPORT LINK](https://spojrzenie.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..adaec6dd4 100644 --- a/src/index.html +++ b/src/index.html @@ -1,14 +1,21 @@ - - - - - Snake - - - -

Snake

- - + + + + + Snake + + + +
+
1
+
2
+
3
+
4
+
5
+
6
+
+ + \ No newline at end of file diff --git a/src/style.css b/src/style.css index e69de29bb..7b63192b2 100644 --- a/src/style.css +++ b/src/style.css @@ -0,0 +1,92 @@ +body { + margin: 0; +} + +.container { + display: flex; + flex-wrap: wrap; + flex-direction: row; +} + +.blocks { + display: flex; + justify-content: center; + align-items: center; + font-size: 100px; + font-family: Arial, Helvetica, sans-serif; + color: white; + width: 100%; + height: 300px; +} + +@media (min-width: 600px) { + .blocks { + flex-basis: 50%; + } + + .block-1, + .block-2 { + order: -1; + } + + .block-4 { + order: 0; + } + + .block-3 { + order: 1; + } + + .block-5, + .block-6 { + order: 2; + } +} + +@media (min-width: 900px) { + .blocks { + flex-basis: 33.33%; + } + + .block-1, + .block-2, + .block-3 { + order: -1; + } + + .block-4 { + order: 2; + } + + .block-5 { + order: 1; + } + + .block-6 { + order: 0; + } +} + +.block-1 { + background-color: rgba(100%, 0%, 0%, 1); +} + +.block-2 { + background-color: rgba(80%, 0%, 0%, 1); +} + +.block-3 { + background-color: rgba(60%, 0%, 0%, 1); +} + +.block-4 { + background-color: rgba(40%, 0%, 0%, 1); +} + +.block-5 { + background-color: rgba(20%, 0%, 0%, 1); +} + +.block-6 { + background-color: rgba(0%, 0%, 0%, 1); +}