From e8124f39d2409d62cdaa99e7685ae287c6abd5c0 Mon Sep 17 00:00:00 2001 From: Kacper Date: Thu, 25 May 2023 12:59:13 +0200 Subject: [PATCH 1/2] ./readme.md --- readme.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/readme.md b/readme.md index 09d94e0d2..eec6cdfea 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://Kacper-Leman.github.io/layout_snake/) +- [TEST REPORT LINK](https://Kacper-Leman.github.io/layout_snake/report/html_report/) > Follow [this instructions](https://mate-academy.github.io/layout_task-guideline) From f5ee9b36e551d3779ff1b915ce852b5df843a266 Mon Sep 17 00:00:00 2001 From: Kacper Date: Thu, 25 May 2023 17:35:58 +0200 Subject: [PATCH 2/2] Soultion --- src/index.html | 27 ++++++++++------- src/style.css | 80 ++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 97 insertions(+), 10 deletions(-) diff --git a/src/index.html b/src/index.html index b20c6e96c..4829c382a 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..e433ee6d7 100644 --- a/src/style.css +++ b/src/style.css @@ -0,0 +1,80 @@ +body { + margin: 0; +} + +.container { + display: flex; + flex-wrap: wrap; + flex-direction: row; +} + +.block { + display: flex; + justify-content: center; + align-items: center; + height: 300px; + width: 100%; + color: white; + font-family: Arial, sans-serif; + font-size: 100px; +} + +.block--1 { + background-color: red; +} + +.block--2 { + background-color: rgb(204, 0, 0); +} + +.block--3 { + background-color: rgb(153,0 ,0); +} + +.block--4 { + background-color: rgb(102,0 ,0); +} + +.block--5 { + background-color: rgb(51, 0, 0); +} + +.block--6 { + background-color: black; +} + +@media (min-width:600px) { + .block { + flex-basis: 50%; + } + + .block--3 { + order: 1; + } + + .block--5 { + order: 2; + } + + .block--6 { + order: 3; + } +} + +@media (min-width:900px) { + .block { + flex-basis: 33.33%; + } + + .block--4 { + order: 6; + } + + .block--5 { + order: 5; + } + + .block--6 { + order: 4; + } +}