From ca638097b70dffc70b9c456ff43fb624e6e4b859 Mon Sep 17 00:00:00 2001 From: Lukasz Warda Date: Thu, 15 Jun 2023 11:23:11 +0200 Subject: [PATCH] add task solution --- readme.md | 4 ++-- src/index.html | 25 ++++++++++++++---------- src/styles/blocks/block.scss | 33 ++++++++++++++++++++++++++++++++ src/styles/blocks/container.scss | 8 ++++++++ src/styles/main.scss | 3 +++ 5 files changed, 61 insertions(+), 12 deletions(-) create mode 100644 src/styles/blocks/block.scss create mode 100644 src/styles/blocks/container.scss diff --git a/readme.md b/readme.md index d68d05d4a..694473496 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://Luk2asz.github.io/layout_antisnake/) +- [TEST REPORT LINK](https://Luk2asz.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..804dd343a 100644 --- a/src/index.html +++ b/src/index.html @@ -1,13 +1,18 @@ - - - - - Antisnake - - - -

Antisnake

- + + + + + Antisnake + + + +
1
+
2
+
3
+
4
+
5
+
6
+ diff --git a/src/styles/blocks/block.scss b/src/styles/blocks/block.scss new file mode 100644 index 000000000..9d9119d7a --- /dev/null +++ b/src/styles/blocks/block.scss @@ -0,0 +1,33 @@ +.block { + font-family: Arial, Helvetica, sans-serif; + height: 300px; + color: white; + font-size: 100px; + display: flex; + align-items: center; + justify-content: center; + + &--one { + background-color: rgb(255, 0, 0); + } + + &--two { + background-color: rgb(204, 0, 0); + } + + &--three { + background-color: rgb(153, 0, 0); + } + + &--four { + background-color: rgb(102, 0, 0); + } + + &--five { + background-color: rgb(51, 0, 0); + } + + &--six { + background-color: rgb(0, 0, 0); + } +} diff --git a/src/styles/blocks/container.scss b/src/styles/blocks/container.scss new file mode 100644 index 000000000..91d4056dd --- /dev/null +++ b/src/styles/blocks/container.scss @@ -0,0 +1,8 @@ +.container { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); + + @media (min-width: 1200px) { + grid-template-columns: repeat(3, minmax(300px, 1fr)); + } +} diff --git a/src/styles/main.scss b/src/styles/main.scss index 293d3b1f1..7527ce730 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -1,3 +1,6 @@ +@import "blocks/block.scss"; +@import "blocks/container.scss"; + body { margin: 0; }