From 192d3297fc8ae63db136d18f4397608950edc7f7 Mon Sep 17 00:00:00 2001 From: Yaroslav Yuriyiv Date: Mon, 24 Apr 2023 00:48:53 +0300 Subject: [PATCH] add task solution --- readme.md | 4 +-- src/index.html | 42 ++++++++++++++++------ src/style.css | 96 ++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 129 insertions(+), 13 deletions(-) diff --git a/readme.md b/readme.md index 09d94e0d2..09538c3ea 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://Huracann.github.io/layout_snake/) +- [TEST REPORT LINK](https://Huracann.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..67ff955ca 100644 --- a/src/index.html +++ b/src/index.html @@ -1,14 +1,34 @@ - - - - - Snake - - - -

Snake

- + + + + + Snake + + + + +
+
+
1
+
+
+
2
+
+
+
3
+
+
+
4
+
+
+
5
+
+
+
6
+
+
+ diff --git a/src/style.css b/src/style.css index e69de29bb..3e8418125 100644 --- a/src/style.css +++ b/src/style.css @@ -0,0 +1,96 @@ +body { + margin: 0; + padding: 0; +} + +.all__boxes { + display: flex; + flex-wrap: wrap; + flex-direction: column; +} + +.box { + --max-height: 300px; + + height: var(--max-height); + flex-basis: var(--max-height); + display: flex; + align-items: center; + justify-content: center; +} + +.text { + font-family: Arial, sans-serif; + font-size: 100px; + color: rgb(255, 255, 255); +} + +.box1 { + order: 1; + background-color: rgb(255, 0, 0); +} + +.box2 { + order: 2; + background-color: rgb(calc(255 * 0.8), 0, 0); +} + +.box3 { + order: 3; + background-color: rgb(calc(255 * 0.6), 0, 0); +} + +.box4 { + order: 4; + background-color: rgb(calc(255 * 0.4), 0, 0); +} + +.box5 { + order: 5; + background-color: rgb(calc(255 * 0.2), 0, 0); +} + +.box6 { + order: 6; + background-color: rgb(0, 0, 0); +} + +@media (min-width: 600px) { + .all__boxes { + flex-direction: row; + } + + .box { + flex-basis: 50%; + } + + .box3 { + order: 4; + } + + .box4 { + order: 3; + } +} + +@media (min-width: 900px) { + .all__box { + flex-direction: row; + } + + .box { + flex-basis: calc(100% / 3); + } + + .box4 { + order: 6; + } + + .box5 { + order: 5; + } + + .box6 { + order: 4; + } +}