From e55b0c51b507caa199ebf530ed1cfe6974f18a9a Mon Sep 17 00:00:00 2001 From: Stephen Forde Date: Wed, 2 Aug 2023 05:28:58 +0100 Subject: [PATCH] antisnake 1 --- readme.md | 4 ++-- src/index.html | 27 +++++++++++++++--------- src/styles/main.scss | 50 ++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 69 insertions(+), 12 deletions(-) diff --git a/readme.md b/readme.md index d68d05d4a..e348fc70c 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://steveforde.github.io/layout_antisnake/) +- [TEST REPORT LINK](https://steveforde.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..64b044bf7 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/main.scss b/src/styles/main.scss index 293d3b1f1..9d24228db 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,3 +1,53 @@ body { margin: 0; } + +.container { + display: grid; + grid: auto-flow / repeat(auto-fit, minmax(300px, 1fr)); +} + +@media (min-width: 1200px) { + .container { + grid-template-columns: repeat(3, 1fr); + } +} + +.container > div { + height: 300px; + color: white; + font-family: Arial, serif; + font-size: 100px; + text-align: center; + line-height: 300px; +} + +.container > div:nth-child(1) { + background: rgb(255, 0, 0); + order: 1; +} + +.container > div:nth-child(2) { + background: rgb(204, 0, 0); + order: 2; +} + +.container > div:nth-child(3) { + background: rgb(153, 0, 0); + order: 3; +} + +.container > div:nth-child(4) { + background: rgb(102, 0, 0); + order: 4; +} + +.container > div:nth-child(5) { + background: rgb(51, 0, 0); + order: 5; +} + +.container > div:nth-child(6) { + background: rgb(0, 0, 0); + order: 6; +}