From 107259f462d91bce0a2b6d6198135995ba438ab0 Mon Sep 17 00:00:00 2001 From: Matejek Date: Tue, 10 Oct 2023 22:16:24 +0200 Subject: [PATCH] add task solution --- readme.md | 4 +- src/index.html | 29 +++++++----- src/style.css | 119 +++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 139 insertions(+), 13 deletions(-) diff --git a/readme.md b/readme.md index 4b7905be2..263c7f712 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://MatejekPiotr.github.io/layout_snake/) +- [TEST REPORT LINK](https://MatejekPiotr.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..c7cc5b864 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..0028cddf2 100644 --- a/src/style.css +++ b/src/style.css @@ -0,0 +1,119 @@ +body { + margin: 0; + --height-item: 300px; +} + +.container { + display: flex; + flex-direction: column; +} + +.snake_item { + font-family: Arial, Helvetica, sans-serif; + font-size: 100px; + color: white; + text-align: center; + line-height: 300px; + height: var(--height-item); + min-width: 300px; +} + +.item-1 { + background-color: rgb(100%, 0%, 0%); +} + +.item-2 { + background-color: rgb(80%, 0%, 0%); +} + +.item-3 { + background-color: rgb(60%, 0%, 0%); +} + +.item-4 { + background-color: rgb(40%, 0%, 0%); +} + +.item-5 { + background-color: rgb(20%, 0%, 0%); +} + +.item-6 { + background-color: rgb(0%, 0%, 0%); +} + +@media (min-width: 600px) { + .container { + flex-direction: row; + flex-wrap: wrap; + } + .snake_item { + min-width: 50%; + } + + .item-1 { + order: -6; + } + + .item-2 { + order: -5; + } + + .item-3 { + order: -3; + } + + .item-4 { + order: -4; + } + + .item-5 { + order: -2; + } + + .item-6 { + order: -1; + } +} + +@media (min-width: 900px) { + .container { + flex-direction: row; + flex-wrap: wrap; + } + .snake_item { + min-width: 33.32%; + } + + .item-1 { + order: -6; + } + + .item-2 { + order: -5; + } + + .item-3 { + order: -4; + } + + .item-4 { + order: -1; + } + + .item-5 { + order: -2; + } + + .item-6 { + order: -3; + } + +} + +@media (min-width: 4096px) { + .container { + flex-direction: row; + flex-wrap: wrap; + } +}