From f993ee323b82a7338e9a88fb6a5d228e798366bd Mon Sep 17 00:00:00 2001 From: Kacper Date: Wed, 7 Jun 2023 14:22:29 +0200 Subject: [PATCH 1/2] readme.md --- readme.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/readme.md b/readme.md index d68d05d4a..4ce7b32f7 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://Kacper-Leman.github.io/layout_antisnake/) +- [TEST REPORT LINK](https://Kacper-Leman.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 287dc95b343f0dbc26bc5e27dbc8750339aa8fe7 Mon Sep 17 00:00:00 2001 From: Kacper Date: Wed, 7 Jun 2023 15:05:36 +0200 Subject: [PATCH 2/2] Make soultion to task --- src/index.html | 27 +++++++++++------ src/styles/blocks/container.scss | 52 ++++++++++++++++++++++++++++++++ src/styles/main.scss | 5 ++- src/styles/utils/_reset.scss | 3 ++ 4 files changed, 74 insertions(+), 13 deletions(-) create mode 100644 src/styles/blocks/container.scss create mode 100644 src/styles/utils/_reset.scss diff --git a/src/index.html b/src/index.html index e8ae736a0..f010e677c 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..9c25ece05 --- /dev/null +++ b/src/styles/blocks/container.scss @@ -0,0 +1,52 @@ +.container { + display: grid; + + @media (min-width: 300px) { + grid-template-columns: 1fr; + grid-template-rows: repeat(6, 1fr); + } + + @media (min-width: 600px) { + grid-template-columns: repeat(2, 1fr); + grid-template-rows: repeat(3, 1fr); + } + + @media (min-width: 900px) { + grid-template-columns: repeat(3, 1fr); + grid-template-rows: repeat(2, 1fr); + } + + &__box { + display: grid; + place-items: center; + height: 300px; + width: 100%; + color: white; + font-family: Arial, sans-serif; + font-size: 100px; + } + + &__box--1 { + background-color: red; + } + + &__box--2 { + background-color: rgb(204, 0, 0); + } + + &__box--3 { + background-color: rgb(153,0 ,0); + } + + &__box--4 { + background-color: rgb(102,0 ,0); + } + + &__box--5 { + background-color: rgb(51, 0, 0); + } + + &__box--6 { + background-color: black; + } +} diff --git a/src/styles/main.scss b/src/styles/main.scss index 293d3b1f1..4d2a446b6 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,3 +1,2 @@ -body { - margin: 0; -} +@import "./blocks/container.scss"; +@import "./utils/reset"; diff --git a/src/styles/utils/_reset.scss b/src/styles/utils/_reset.scss new file mode 100644 index 000000000..293d3b1f1 --- /dev/null +++ b/src/styles/utils/_reset.scss @@ -0,0 +1,3 @@ +body { + margin: 0; +}