From ae6e394f7c5d84ee78c190fa75f4f8971fe308bf Mon Sep 17 00:00:00 2001
From: Shadi Nasser <shadiknasser@gmail.com>
Date: Thu, 1 Jun 2023 15:27:03 +0300
Subject: [PATCH] add task solution

---
 readme.md                      |  2 +-
 src/styles/blocks/catalog.scss | 13 ++++++++++++-
 src/styles/blocks/header.scss  |  6 ++++++
 src/styles/variables.scss      |  1 +
 4 files changed, 20 insertions(+), 2 deletions(-)
 create mode 100644 src/styles/variables.scss

diff --git a/readme.md b/readme.md
index d2eb319ba..38246ef56 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://Shadi7733.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..833020c6a 100644
--- a/src/styles/blocks/catalog.scss
+++ b/src/styles/blocks/catalog.scss
@@ -1,8 +1,10 @@
+@import "../variables.scss";
+
 .catalog {
   display: flex;
   flex-wrap: wrap;
 
-  max-width: 944px;
+  max-width: 984px;
   margin: 0 auto;
   padding: 50px 0;
 
@@ -17,9 +19,18 @@
     border: 1px solid #ccc;
     border-radius: 5px;
     margin-bottom: 48px;
+    transition: height $transition_duration,
+      color $transition_duration,
+      width $transition_duration;
 
     &:not(:nth-child(4n)) {
       margin-right: 48px;
     }
   }
+
+  &__card:hover {
+    height: 360px;
+    width: 240px;
+    color: #34568b;
+  }
 }
diff --git a/src/styles/blocks/header.scss b/src/styles/blocks/header.scss
index 638a10fef..79a443b59 100644
--- a/src/styles/blocks/header.scss
+++ b/src/styles/blocks/header.scss
@@ -1,3 +1,5 @@
+@import "../variables.scss";
+
 .header {
   display: flex;
   align-items: center;
@@ -38,5 +40,9 @@
     text-transform: uppercase;
     font-size: 12px;
     font-weight: 500;
+    transition: color $transition_duration;
+  }
+  &__link:hover {
+    color: #00acdc;
   }
 }
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
new file mode 100644
index 000000000..a04e1ec24
--- /dev/null
+++ b/src/styles/variables.scss
@@ -0,0 +1 @@
+$transition_duration: 300ms;