From ede5f056a80fad923497fbd15ee2757d4d07f564 Mon Sep 17 00:00:00 2001
From: Gennadiy Boreyko <gennadiyboreyko0@gmail.com>
Date: Sat, 10 Jun 2023 08:47:46 +0300
Subject: [PATCH] add hovers

---
 readme.md                        |  2 +-
 src/styles/blocks/catalog.scss   | 12 ++++++++++--
 src/styles/blocks/header.scss    | 10 ++++++++--
 src/styles/blocks/page.scss      |  1 +
 src/styles/main.scss             |  3 +++
 src/styles/utils/_variables.scss |  4 ++++
 6 files changed, 27 insertions(+), 5 deletions(-)
 create mode 100644 src/styles/utils/_variables.scss

diff --git a/readme.md b/readme.md
index d2eb319ba..1fc80615b 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://gboreyko.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..863bd19f9 100644
--- a/src/styles/blocks/catalog.scss
+++ b/src/styles/blocks/catalog.scss
@@ -1,3 +1,4 @@
+
 .catalog {
   display: flex;
   flex-wrap: wrap;
@@ -16,10 +17,17 @@
     height: 300px;
     border: 1px solid #ccc;
     border-radius: 5px;
-    margin-bottom: 48px;
+    margin-bottom: $margin-card;
+    cursor: pointer;
+    transition: color $duration-time, transform $duration-time;
 
     &:not(:nth-child(4n)) {
-      margin-right: 48px;
+      margin-right: $margin-card;
+    }
+
+    &:hover {
+      color: #34568b;
+      transform: scale(1.2);
     }
   }
 }
diff --git a/src/styles/blocks/header.scss b/src/styles/blocks/header.scss
index 638a10fef..b9b59e8be 100644
--- a/src/styles/blocks/header.scss
+++ b/src/styles/blocks/header.scss
@@ -1,10 +1,11 @@
+
 .header {
   display: flex;
   align-items: center;
   justify-content: space-between;
   box-sizing: border-box;
 
-  height: 60px;
+  height: $header-height;
   padding: 0 50px;
 
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
@@ -25,7 +26,7 @@
     position: relative;
     color: #060b35;
     list-style: none;
-    line-height: 60px;
+    line-height: $header-height;
 
     &:not(:last-child) {
       margin-right: 20px;
@@ -38,5 +39,10 @@
     text-transform: uppercase;
     font-size: 12px;
     font-weight: 500;
+    transition: color $duration-time;
+
+    &:hover {
+      color: #00acdc;
+    }
   }
 }
diff --git a/src/styles/blocks/page.scss b/src/styles/blocks/page.scss
index 0f72996db..9ef030152 100644
--- a/src/styles/blocks/page.scss
+++ b/src/styles/blocks/page.scss
@@ -1,3 +1,4 @@
+
 .page {
   font-family: Roboto, sans-serif;
 
diff --git a/src/styles/main.scss b/src/styles/main.scss
index 465a8cb4a..e6efdade4 100644
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -1,3 +1,6 @@
+
+@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..7191ad918
--- /dev/null
+++ b/src/styles/utils/_variables.scss
@@ -0,0 +1,4 @@
+
+$header-height: 60px;
+$margin-card: 48px;
+$duration-time: 0.3s;