From 3f3f9827190714273692a102dfd8ac002c5b308b Mon Sep 17 00:00:00 2001 From: anton_chornobai Date: Wed, 12 Jul 2023 13:04:31 +0200 Subject: [PATCH 1/3] task done --- src/index.html | 29 +++++++++++++--------- src/styles/main.scss | 57 +++++++++++++++++++++++++++++++++++++++++++- 2 files changed, 74 insertions(+), 12 deletions(-) diff --git a/src/index.html b/src/index.html index e8ae736a0..b30a8426e 100644 --- a/src/index.html +++ b/src/index.html @@ -1,13 +1,20 @@ - - - - - Antisnake - - - -

Antisnake

- - + + + + + Antisnake + + + +
+
1
+
2
+
3
+
4
+
5
+
6
+
+ + \ No newline at end of file diff --git a/src/styles/main.scss b/src/styles/main.scss index 293d3b1f1..c9191e497 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,3 +1,58 @@ body { - margin: 0; + margin: 0; margin: 0; } + +.snake { + display: flex; + align-items: center; + justify-content: center; + flex-grow: 1; + height: 300px; + min-width: 300px; + color: #fff; + font-family: Arial, Helvetica, sans-serif; + font-size: 100px; +} + +.snake--1 { + background-color: rgb(100%, 0%, 0%); +} + +.snake--2 { + background-color: rgb(80%, 0%, 0%); +} + +.snake--3 { + background-color: rgb(60%, 0%, 0%); +} + +.snake--4 { + background-color: rgb(40%, 0%, 0%); +} + +.snake--5 { + background-color: rgb(20%, 0%, 0%); +} + +.snake--6 { + background-color: rgb(0%, 0%, 0%); +} + +.container { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(300px 1fr)); +} + +@media (min-width: 900px) { + .container { + grid-template-columns: repeat(3, minmax(300px, 1fr)); + justify-content: center; + } +} + +@media (min-width: 600px) and (max-width: 899px) { + .container { + grid-template-columns: repeat(2, minmax(300px, 1fr)); + justify-content: center; + } +} \ No newline at end of file From 5855a0feb4b9eceb83dadfadaf60b872943626cf Mon Sep 17 00:00:00 2001 From: anton_chornobai Date: Wed, 12 Jul 2023 13:07:43 +0200 Subject: [PATCH 2/3] done --- readme.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/readme.md b/readme.md index 8c0c5a5fd..3647260e9 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://anton-chornobai.github.io/layout_antisnake/) +- [TEST REPORT LINK](https://anton-chornobai.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) ___ From 67d7a0c167577f5a1bb2c0ab630330e99800f7bb Mon Sep 17 00:00:00 2001 From: anton_chornobai Date: Wed, 12 Jul 2023 13:10:19 +0200 Subject: [PATCH 3/3] done --- src/styles/main.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/styles/main.scss b/src/styles/main.scss index c9191e497..b78167979 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,5 +1,5 @@ body { - margin: 0; margin: 0; + margin: 0; } .snake { @@ -55,4 +55,4 @@ body { grid-template-columns: repeat(2, minmax(300px, 1fr)); justify-content: center; } -} \ No newline at end of file +}