From 140e7a94c614637115dacd3a0ab6bac8232e3a41 Mon Sep 17 00:00:00 2001 From: "david.shamiiev" Date: Mon, 24 Apr 2023 12:30:34 +0300 Subject: [PATCH 1/3] add task solution --- src/index.html | 33 +++++++++++------- src/style.css | 93 ++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 114 insertions(+), 12 deletions(-) diff --git a/src/index.html b/src/index.html index b20c6e96c..7ff8f4544 100644 --- a/src/index.html +++ b/src/index.html @@ -1,14 +1,23 @@ - + - - - - - Snake - - - -

Snake

- + + + + + Snake + + + +
+
1
+
2
+
3
+
4
+
5
+
6
+
+ diff --git a/src/style.css b/src/style.css index e69de29bb..dc3778118 100644 --- a/src/style.css +++ b/src/style.css @@ -0,0 +1,93 @@ +* { + box-sizing: border-box; +} + +body { + margin: 0; +} + +html { + font-family: Arial, Helvetica, sans-serif; +} + +.container { + --min-height: 300px; + display: flex; + justify-content: center; + align-items: center; + flex-wrap: wrap; +} + +.box { + height: var(--min-height); + flex-basis: var(--min-height); + display: flex; + justify-content: center; + align-items: center; + flex-grow: 1; + font-size: 100px; + color: #fff; +} + +.box--1 { + background-color: rgb(100%, 0%, 0%); + order: 1; +} + +.box--2 { + background-color: rgb(80%, 0%, 0%); + order: 2; +} + +.box--3 { + background-color: rgb(60%, 0%, 0%); + order: 3; +} + +.box--4 { + background-color: rgb(40%, 0%, 0%); + order: 4; +} + +.box--5 { + background-color: rgb(20%, 0%, 0%); + order: 5; + +} + +.box--6 { + background-color: rgb(0%, 0%, 0%); + order: 6; +} + +@media (min-width: 600px) { + .box--3 { + order: 4; + } + + .box--4 { + order: 3; + } +} + +@media (min-width: 900px) { + .container { + flex-direction: row; + } + + .box { + flex-basis: 33.33%; + } + + .box--4 { + order: 6; + } + + .box--5 { + order: 5; + } + + .box--6 { + order: 4; + } +} From c5a32d47000fe9a6a481f91f1597bfba018adb2c Mon Sep 17 00:00:00 2001 From: "david.shamiiev" Date: Mon, 24 Apr 2023 12:31:18 +0300 Subject: [PATCH 2/3] add task solution --- readme.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/readme.md b/readme.md index 09d94e0d2..cb13a8fcb 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://ShamievDavid.github.io/layout_snake/) +- [TEST REPORT LINK](https://ShamievDavid.github.io/layout_snake/report/html_report/) > Follow [this instructions](https://mate-academy.github.io/layout_task-guideline) From 5222108f2c593dd4ce203fb39dbe750169397ff4 Mon Sep 17 00:00:00 2001 From: "david.shamiiev" Date: Mon, 24 Apr 2023 12:33:46 +0300 Subject: [PATCH 3/3] add task solution --- readme.md | 4 +-- src/index.html | 33 +++++++++++------- src/style.css | 93 ++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 116 insertions(+), 14 deletions(-) diff --git a/readme.md b/readme.md index 09d94e0d2..cb13a8fcb 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://ShamievDavid.github.io/layout_snake/) +- [TEST REPORT LINK](https://ShamievDavid.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..7ff8f4544 100644 --- a/src/index.html +++ b/src/index.html @@ -1,14 +1,23 @@ - + - - - - - Snake - - - -

Snake

- + + + + + Snake + + + +
+
1
+
2
+
3
+
4
+
5
+
6
+
+ diff --git a/src/style.css b/src/style.css index e69de29bb..dc3778118 100644 --- a/src/style.css +++ b/src/style.css @@ -0,0 +1,93 @@ +* { + box-sizing: border-box; +} + +body { + margin: 0; +} + +html { + font-family: Arial, Helvetica, sans-serif; +} + +.container { + --min-height: 300px; + display: flex; + justify-content: center; + align-items: center; + flex-wrap: wrap; +} + +.box { + height: var(--min-height); + flex-basis: var(--min-height); + display: flex; + justify-content: center; + align-items: center; + flex-grow: 1; + font-size: 100px; + color: #fff; +} + +.box--1 { + background-color: rgb(100%, 0%, 0%); + order: 1; +} + +.box--2 { + background-color: rgb(80%, 0%, 0%); + order: 2; +} + +.box--3 { + background-color: rgb(60%, 0%, 0%); + order: 3; +} + +.box--4 { + background-color: rgb(40%, 0%, 0%); + order: 4; +} + +.box--5 { + background-color: rgb(20%, 0%, 0%); + order: 5; + +} + +.box--6 { + background-color: rgb(0%, 0%, 0%); + order: 6; +} + +@media (min-width: 600px) { + .box--3 { + order: 4; + } + + .box--4 { + order: 3; + } +} + +@media (min-width: 900px) { + .container { + flex-direction: row; + } + + .box { + flex-basis: 33.33%; + } + + .box--4 { + order: 6; + } + + .box--5 { + order: 5; + } + + .box--6 { + order: 4; + } +}