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 84059ef87..930aedce1 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",
"colors": "^1.3.3",
diff --git a/readme.md b/readme.md
index d68d05d4a..5b9272b6c 100644
--- a/readme.md
+++ b/readme.md
@@ -1,7 +1,7 @@
# Antisnake
Replace `` with your Github username and copy the links to Pull Request description:
-- [DEMO LINK](https://.github.io/layout_antisnake/)
-- [TEST REPORT LINK](https://.github.io/layout_antisnake/report/html_report/)
+- [DEMO LINK](https://maksym-mishchanchuk.github.io/layout_antisnake/)
+- [TEST REPORT LINK](https://maksym-mishchanchuk.github.io/layout_antisnake/report/html_report/)
> Follow [this instructions](https://github.com/mate-academy/layout_task-guideline#how-to-solve-the-layout-tasks-on-github)
___
diff --git a/src/index.html b/src/index.html
index e8ae736a0..2f6d2ccdb 100644
--- a/src/index.html
+++ b/src/index.html
@@ -1,13 +1,18 @@
-
-
-
-
- Antisnake
-
-
-
- Antisnake
-
+
+
+
+
+ Antisnake
+
+
+
+
+
+
+
+
+
+
diff --git a/src/styles/main.scss b/src/styles/main.scss
index 293d3b1f1..c33a2d60a 100644
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -1,3 +1,40 @@
+$gradient-color-black-red:
+ 100% 0 1, 80% 20% 2, 60% 40% 3,
+ 40% 60% 4, 20% 80% 5, 0 100% 6;
+
body {
margin: 0;
+ font-family: Arial, sans-serif;
+}
+
+.page {
+ display: grid;
+
+ @media (min-width: 600px) {
+ grid-template-columns: 1fr 1fr;
+ grid-template-rows: repeat(2, 1fr);
+ grid-auto-rows: 300px;
+ }
+
+ @media (min-width: 900px) {
+ grid-template-columns: repeat(3, 1fr);
+ }
+
+ &__block {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ font-size: 100px;
+ color: #fff;
+ height: 300px;
+
+ @each $red, $black, $num in $gradient-color-black-red {
+ &:nth-child(#{$num}) {
+ background-color: rgba($red, 0, 0, 100%);
+ &::before {
+ content: "#{$num}";
+ }
+ }
+ }
+ }
}