From 2167cb818a2ae3c761d652c5a5515caa92d6ab39 Mon Sep 17 00:00:00 2001 From: nenatre Date: Thu, 15 Jun 2023 02:38:13 +0200 Subject: [PATCH] Snake solution --- .linthtmlrc.json | 48 +++++++++++++++++++++++- package.json | 2 +- readme.md | 4 +- src/index.html | 46 +++++++++++++++++------ src/style.css | 96 ++++++++++++++++++++++++++++++++++++++++++++++++ 5 files changed, 181 insertions(+), 15 deletions(-) diff --git a/.linthtmlrc.json b/.linthtmlrc.json index 0f2047a73..774726ebe 100644 --- a/.linthtmlrc.json +++ b/.linthtmlrc.json @@ -1,3 +1,49 @@ { - "extends": "@mate-academy/linthtml-config" + "attr-bans": [ + "align", + "background", + "bgcolor", + "border", + "frameborder", + "style" + ], + "attr-name-ignore-regex": "viewBox", + "attr-no-dup": true, + "attr-quote-style": "double", + "attr-req-value": true, + "class-no-dup": true, + "doctype-first": true, + "doctype-html5": true, + "fig-req-figcaption": true, + "head-req-title": true, + "html-req-lang": true, + "id-class-style": false, + "id-no-dup": true, + "img-req-src": true, + "img-req-alt": "allownull", + "indent-width": 2, + "indent-style": "spaces", + "indent-width-cont": true, + "input-radio-req-name": true, + "spec-char-escape": true, + "tag-bans": [ + "b", + "i", + "u", + "center", + "style", + "marquee", + "font", + "s" + ], + "tag-name-lowercase": true, + "tag-name-match": true, + "tag-self-close": "never", + "tag-close": true, + "text-ignore-regex": "&", + "title-no-dup": true, + "line-end-style": "lf", + "attr-new-line": 2, + "attr-name-style": "dash", + "attr-no-unsafe-char": true } diff --git a/package.json b/package.json index 0e21c59e8..7aea2241e 100644 --- a/package.json +++ b/package.json @@ -23,7 +23,7 @@ "@mate-academy/bemlint": "^0.1.1", "@mate-academy/eslint-config": "*", "@mate-academy/linthtml-config": "0.0.2", - "@mate-academy/scripts": "^0.9.1", + "@mate-academy/scripts": "^1.2.8", "@mate-academy/stylelint-config": "*", "backstopjs": "^5.0.1", "eslint": "^5.16.0", diff --git a/readme.md b/readme.md index 4b7905be2..8982cc409 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://nenatre.github.io/layout_snake/) +- [TEST REPORT LINK](https://nenatre.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..fe8e9a5b4 100644 --- a/src/index.html +++ b/src/index.html @@ -1,14 +1,38 @@ - - - - - Snake - - - -

Snake

- + + + + + Snake + + + +
+
+ 1 +
+ +
+ 2 +
+ +
+ 3 +
+ +
+ 4 +
+ +
+ 5 +
+ +
+ 6 +
+
+ diff --git a/src/style.css b/src/style.css index e69de29bb..2962bf6ba 100644 --- a/src/style.css +++ b/src/style.css @@ -0,0 +1,96 @@ +* { + box-sizing: border-box; +} + +body { + margin: 0; + padding: 0; + font-family: Arial, sans-serif; +} + +.section { + display: flex; + flex-wrap: wrap; + flex-direction: row; +} + +.blocks { + display: flex; + justify-content: center; + align-items: center; + font-size: 100px; + color: white; + height: 300px; +} + +.block_1 { + background-color: rgb(255, 0, 0) ; +} + +.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: rgb(0, 0, 0); +} + +@media (min-width: 752px) { + .blocks { + flex-basis: 33.3%; + } + + .block_4 { + order: 3; + } + + .block_5 { + order: 2; + } + + .block_6 { + order: 1; + } +} + +@media screen and (max-width: 751px) { + .blocks { + flex-basis: 50%; + } + .block_3 { + order: 3; + } + + .block_4 { + order: 2; + } + + .block_5 { + order: 4; + } + + .block_6 { + order: 5; + } +} + +@media screen and (max-width:451px) { + .blocks { + flex-basis: 100% ; + } + .block_3 { + order: 2; + } +}