From b7d1b08350a0a6583828b5ab0edc2a6c8253fcad Mon Sep 17 00:00:00 2001 From: Roman Bilichenko Date: Mon, 24 Apr 2023 18:41:50 +0300 Subject: [PATCH 1/2] layout snake --- readme.md | 4 +-- src/index.html | 29 ++++++++++++-------- src/style.css | 74 ++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 94 insertions(+), 13 deletions(-) diff --git a/readme.md b/readme.md index 09d94e0d2..4db3b1371 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://Roman-Bilichenko.github.io/layout_snake/) +- [TEST REPORT LINK](https://Roman-Bilichenko.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..a03bdf242 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..81e6ccb8f 100644 --- a/src/style.css +++ b/src/style.css @@ -0,0 +1,74 @@ +body { + font-family: Arial, Helvetica, sans-serif; + font-size: 100px; + color: white; + margin: 0; + --height: 300px; +} + +.container { + display: flex; + background-color: rgb(0, 0, 0); + flex-wrap: wrap; +} + +.block { + flex-grow: 1; + text-align: center; + line-height: var(--height); + height: var(--height); + min-width: var(--height); +} + +.block-1 { + background-color: rgba(100%, 0%, 0%); +} + +.block-2 { + background-color: rgba(80%, 0%, 0%); +} + +.block-3 { + background-color: rgba(60%, 0%, 0%); +} + +.block-4 { + background-color: rgba(40%, 0%, 0%); +} + +.block-5 { + background-color: rgba(20%, 0%, 0%); +} + +@media (min-width: 600px) and (max-width: 899px) { + .block-3 { + order: 2; + } + + .block-4 { + order: 1; + } + + .block-5, + .block-6 { + order: 3; + } +} + +@media (min-width: 900px) { + .block { + flex: 33.33%; + } + + .block-4 { + order: 3; + } + + .block-5 { + order: 2; + } + + .block-6 { + order: 1; + } +} From 1af3b83466f57ba056db85a27d88b49e66ec22a0 Mon Sep 17 00:00:00 2001 From: Roman Bilichenko Date: Mon, 24 Apr 2023 18:46:19 +0300 Subject: [PATCH 2/2] layout_snake --- readme.md | 2 +- src/index.html | 2 +- src/style.css | 8 ++++---- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/readme.md b/readme.md index 4db3b1371..ad421021a 100644 --- a/readme.md +++ b/readme.md @@ -9,7 +9,7 @@ Replace `` with your Github username and copy the links to Pull Re ## The task Display six colored blocks on the screen without any extra margins: - + - Use `flexbox` - Each block should be `300px` high. - Each block should have its number (1 to 6) placed in its center in white Arial 100px font. diff --git a/src/index.html b/src/index.html index a03bdf242..4e9ada8e4 100644 --- a/src/index.html +++ b/src/index.html @@ -3,7 +3,7 @@ + content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> Snake diff --git a/src/style.css b/src/style.css index 81e6ccb8f..75154cde1 100644 --- a/src/style.css +++ b/src/style.css @@ -56,10 +56,6 @@ body { } @media (min-width: 900px) { - .block { - flex: 33.33%; - } - .block-4 { order: 3; } @@ -71,4 +67,8 @@ body { .block-6 { order: 1; } + + .block { + flex: 33.33%; + } }