From 5e756ee3b7b7d3cb23701e3c81c05610d50808eb Mon Sep 17 00:00:00 2001
From: Artem Velychko <avelychko@icloud.com>
Date: Mon, 5 Jun 2023 11:12:34 -0400
Subject: [PATCH] Solution

---
 readme.md                        | 2 +-
 src/styles/blocks/catalog.scss   | 7 +++++++
 src/styles/blocks/header.scss    | 6 ++++++
 src/styles/main.scss             | 1 +
 src/styles/utils/_variables.scss | 1 +
 5 files changed, 16 insertions(+), 1 deletion(-)
 create mode 100644 src/styles/utils/_variables.scss

diff --git a/readme.md b/readme.md
index d2eb319ba..24467771f 100644
--- a/readme.md
+++ b/readme.md
@@ -1,6 +1,6 @@
 # Frontend practice with catalog page and hovers
 Replace `<your_account>` with your Github username and copy the links to Pull Request description:
-- [DEMO LINK](https://<your_account>.github.io/layout_catalog_hovers/)
+- [DEMO LINK](https://ArtemVelychko.github.io/layout_catalog_hovers/)
 
 > Follow [this instructions](https://github.com/mate-academy/layout_task-guideline#how-to-solve-the-layout-tasks-on-github)
 
diff --git a/src/styles/blocks/catalog.scss b/src/styles/blocks/catalog.scss
index ffb6b2ccc..9adfedf66 100644
--- a/src/styles/blocks/catalog.scss
+++ b/src/styles/blocks/catalog.scss
@@ -12,6 +12,8 @@
     align-items: center;
     box-sizing: border-box;
 
+    transition: color $duration, transform $duration;
+
     width: 200px;
     height: 300px;
     border: 1px solid #ccc;
@@ -21,5 +23,10 @@
     &:not(:nth-child(4n)) {
       margin-right: 48px;
     }
+
+    &:hover {
+      transform: scale(1.2);
+      color: #34568b;
+    }
   }
 }
diff --git a/src/styles/blocks/header.scss b/src/styles/blocks/header.scss
index 638a10fef..d1de7b868 100644
--- a/src/styles/blocks/header.scss
+++ b/src/styles/blocks/header.scss
@@ -38,5 +38,11 @@
     text-transform: uppercase;
     font-size: 12px;
     font-weight: 500;
+
+    transition: color $duration;
+
+    &:hover {
+      color: #00acdc;
+    }
   }
 }
diff --git a/src/styles/main.scss b/src/styles/main.scss
index 465a8cb4a..9deb0f019 100644
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -1,3 +1,4 @@
+@import "utils/variables";
 @import "blocks/page";
 @import "blocks/header";
 @import "blocks/catalog";
diff --git a/src/styles/utils/_variables.scss b/src/styles/utils/_variables.scss
new file mode 100644
index 000000000..96f0d21b9
--- /dev/null
+++ b/src/styles/utils/_variables.scss
@@ -0,0 +1 @@
+$duration: 300ms;