diff --git a/readme.md b/readme.md index d68d05d4a..a7e616e14 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://aRabiej.github.io/layout_antisnake/) +- [TEST REPORT LINK](https://aRabiej.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..17a4ba5e1 100644 --- a/src/index.html +++ b/src/index.html @@ -1,13 +1,20 @@ - - - - - Antisnake - - - -

Antisnake

- + + + + + Antisnake + + + +
+
1
+
2
+
3
+
4
+
5
+
6
+
+ diff --git a/src/styles/blocks/antisnake.scss b/src/styles/blocks/antisnake.scss new file mode 100644 index 000000000..72d0f6d14 --- /dev/null +++ b/src/styles/blocks/antisnake.scss @@ -0,0 +1,27 @@ +.antisnake { + display: grid; + grid-template-columns: repeat(1, 1fr); + + &__cell { + text-align: center; + justify-content: center; + + font-size: 100px; + line-height: 300px; + color: #fff; + + @each $number, $color in $cell-colors { + &--#{$number} { + background-color: $color; + } + } + } + + @media (min-width: 600px) { + grid-template-columns: repeat(2, 1fr); + } + + @media (min-width: 900px) { + grid-template-columns: repeat(3, 1fr); + } +} diff --git a/src/styles/main.scss b/src/styles/main.scss index 293d3b1f1..795a1b06d 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,3 +1,3 @@ -body { - margin: 0; -} +@import "./utils/normalize"; +@import "./utils/variables"; +@import "./blocks/antisnake.scss"; diff --git a/src/styles/utils/_normalize.scss b/src/styles/utils/_normalize.scss new file mode 100644 index 000000000..f8e8282e2 --- /dev/null +++ b/src/styles/utils/_normalize.scss @@ -0,0 +1,12 @@ +* { + box-sizing: border-box; +} + +html { + font-family: Arial, Helvetica, sans-serif; +} + +body { + margin: 0; + padding: 0; +} diff --git a/src/styles/utils/_variables.scss b/src/styles/utils/_variables.scss new file mode 100644 index 000000000..5766fe634 --- /dev/null +++ b/src/styles/utils/_variables.scss @@ -0,0 +1,7 @@ +$cell-colors: + 1 rgb(255, 0, 0), + 2 rgb(204, 0, 0), + 3 rgb(153, 0, 0), + 4 rgb(102, 0, 0), + 5 rgb(51, 0, 0), + 6 rgb(0, 0, 0);