From b7b606185033b1668b0d4c4bc0afc1230cb0b9f1 Mon Sep 17 00:00:00 2001 From: SuprunArtem Date: Sat, 24 Jun 2023 02:37:21 +0300 Subject: [PATCH] add task solution --- readme.md | 4 ++-- src/index.html | 27 +++++++++++++++++---------- src/styles/blocks/container.scss | 22 ++++++++++++++++++++++ src/styles/main.scss | 6 +++--- src/styles/utils/reset.scss | 5 +++++ src/styles/utils/variables.scss | 1 + 6 files changed, 50 insertions(+), 15 deletions(-) create mode 100644 src/styles/blocks/container.scss create mode 100644 src/styles/utils/reset.scss create mode 100644 src/styles/utils/variables.scss diff --git a/readme.md b/readme.md index d68d05d4a..738b914bd 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://SuprunArtem.github.io/layout_antisnake/) +- [TEST REPORT LINK](https://SuprunArtem.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..c47dede1f 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/container.scss b/src/styles/blocks/container.scss new file mode 100644 index 000000000..9f9a70b4d --- /dev/null +++ b/src/styles/blocks/container.scss @@ -0,0 +1,22 @@ +.container { + display: grid; + grid: auto-flow / repeat(auto-fit, minmax(300px, 1fr)); + + @media (min-width: 1200px) { + grid-template-columns: repeat(3, 1fr); + } + + &__box { + height: $box-height; + color: #fff; + line-height: 300px; + text-align: center; + min-width: $box-height; + + @for $index from 1 through 6 { + &:nth-child(#{$index}) { + background-color: rgb(calc(255 - (51 * (#{$index} - 1))), 0, 0); + } + } + } +} diff --git a/src/styles/main.scss b/src/styles/main.scss index 293d3b1f1..16e8556a7 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,3 +1,3 @@ -body { - margin: 0; -} +@import "./utils/variables"; +@import "./utils/reset"; +@import "./blocks/container"; diff --git a/src/styles/utils/reset.scss b/src/styles/utils/reset.scss new file mode 100644 index 000000000..b6f72d1b7 --- /dev/null +++ b/src/styles/utils/reset.scss @@ -0,0 +1,5 @@ +body { + margin: 0; + font-size: 100px; + font-family: "Arial", sans-serif; +} diff --git a/src/styles/utils/variables.scss b/src/styles/utils/variables.scss new file mode 100644 index 000000000..91ccc0a2c --- /dev/null +++ b/src/styles/utils/variables.scss @@ -0,0 +1 @@ +$box-height: 300px;