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..3a55d95c1 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://vitalii-fediaiev.github.io/layout_antisnake/)
+- [TEST REPORT LINK](https://vitalii-fediaiev.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..577fc6b85 100644
--- a/src/index.html
+++ b/src/index.html
@@ -1,13 +1,20 @@
-
-
-
-
- Antisnake
-
-
-
- Antisnake
-
+
+
+
+
+ Antisnake
+
+
+
+
+
diff --git a/src/styles/main.scss b/src/styles/main.scss
index 293d3b1f1..252c170ac 100644
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -1,3 +1,58 @@
body {
margin: 0;
}
+
+.box {
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+ justify-content: center;
+ text-align: center;
+ box-sizing: border-box;
+
+ &__card {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ height: 300px;
+ font-family: Arial, sans-serif;
+ font-size: 100px;
+ color: white;
+
+ &--color-1 {
+ background-color: rgb(100%, 0%, 0%);
+ }
+
+ &--color-2 {
+ background-color: rgb(80%, 0%, 0%);
+ }
+
+ &--color-3 {
+ background-color: rgb(60%, 0%, 0%);
+ }
+
+ &--color-4 {
+ background-color: rgb(40%, 0%, 0%);
+ }
+
+ &--color-5 {
+ background-color: rgb(20%, 0%, 0%);
+ }
+
+ &--color-6 {
+ background-color: black;
+ }
+ }
+
+ @for $index from 1 through 6 {
+ &__card:nth-child(#{$index})::before {
+ content: "#{$index}";
+ }
+ }
+
+ @media (min-width: 900px) {
+ & {
+ grid-template-columns: repeat(3, 1fr);
+ flex-wrap: nowrap;
+ }
+ }
+}