From 4de5d9de723e4135cfee1a22e5688c336b8df26a Mon Sep 17 00:00:00 2001
From: Agnieszka Rabiej <arabiej94@gmail.com>
Date: Fri, 14 Jul 2023 15:53:51 +0200
Subject: [PATCH 1/2] add task solution

---
 readme.md                      |  2 +-
 src/styles/blocks/catalog.scss |  9 ++++--
 src/styles/blocks/header.scss  | 53 +++++++++++++---------------------
 src/styles/main.scss           |  1 +
 src/styles/variables.scss      |  3 ++
 5 files changed, 31 insertions(+), 37 deletions(-)
 create mode 100644 src/styles/variables.scss

diff --git a/readme.md b/readme.md
index d2eb319ba..c87fa8ad9 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://aRabiej.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..a2ee26530 100644
--- a/src/styles/blocks/catalog.scss
+++ b/src/styles/blocks/catalog.scss
@@ -1,22 +1,25 @@
 .catalog {
   display: flex;
   flex-wrap: wrap;
-
   max-width: 944px;
   margin: 0 auto;
   padding: 50px 0;
-
   &__card {
     display: flex;
     justify-content: center;
     align-items: center;
     box-sizing: border-box;
-
     width: 200px;
     height: 300px;
     border: 1px solid #ccc;
     border-radius: 5px;
     margin-bottom: 48px;
+    transition: transform $transitionDuration, color $transitionDuration;
+
+    &:hover {
+      transform: scale(1.2);
+      color: $cardHeadercolor;
+    }
 
     &:not(:nth-child(4n)) {
       margin-right: 48px;
diff --git a/src/styles/blocks/header.scss b/src/styles/blocks/header.scss
index 638a10fef..699a8a2a0 100644
--- a/src/styles/blocks/header.scss
+++ b/src/styles/blocks/header.scss
@@ -1,42 +1,29 @@
-.header {
+&__list {
   display: flex;
-  align-items: center;
-  justify-content: space-between;
-  box-sizing: border-box;
-
-  height: 60px;
-  padding: 0 50px;
-
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
-
-  &__logo {
-    height: 40px;
-  }
+  margin: 0;
+  padding: 0;
 }
 
-.nav {
-  &__list {
-    display: flex;
-    margin: 0;
-    padding: 0;
+&__item {
+  position: relative;
+  color: #060b35;
+  list-style: none;
+  line-height: 60px;
+  &:not(:last-child) {
+    margin-right: 20px;
   }
+}
 
-  &__item {
-    position: relative;
-    color: #060b35;
-    list-style: none;
-    line-height: 60px;
+&__link {
+  color: inherit;
+  text-decoration: none;
+  text-transform: uppercase;
+  font-size: 12px;
+  font-weight: 500;
 
-    &:not(:last-child) {
-      margin-right: 20px;
-    }
-  }
+  transition: color, $transitionDuration;
 
-  &__link {
-    color: inherit;
-    text-decoration: none;
-    text-transform: uppercase;
-    font-size: 12px;
-    font-weight: 500;
+  &:hover {
+    color: $color-link-hover;
   }
 }
diff --git a/src/styles/main.scss b/src/styles/main.scss
index 465a8cb4a..0fe9804cc 100644
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -1,3 +1,4 @@
+@import "variables";
 @import "blocks/page";
 @import "blocks/header";
 @import "blocks/catalog";
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
new file mode 100644
index 000000000..c3e0f0266
--- /dev/null
+++ b/src/styles/variables.scss
@@ -0,0 +1,3 @@
+$cardHeadercolor: #34568b;
+$color-link-hover: #00acdc;
+$transitionDuration: 0.3s;

From d8ea5303b51a3118e98186eb12ce096c850db66e Mon Sep 17 00:00:00 2001
From: Agnieszka Rabiej <arabiej94@gmail.com>
Date: Tue, 18 Jul 2023 14:50:15 +0200
Subject: [PATCH 2/2] review changes

---
 src/styles/blocks/catalog.scss | 2 +-
 src/styles/blocks/header.scss  | 2 +-
 src/styles/variables.scss      | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/styles/blocks/catalog.scss b/src/styles/blocks/catalog.scss
index a2ee26530..0900a9a65 100644
--- a/src/styles/blocks/catalog.scss
+++ b/src/styles/blocks/catalog.scss
@@ -18,7 +18,7 @@
 
     &:hover {
       transform: scale(1.2);
-      color: $cardHeadercolor;
+      color: $color-header;
     }
 
     &:not(:nth-child(4n)) {
diff --git a/src/styles/blocks/header.scss b/src/styles/blocks/header.scss
index 699a8a2a0..b8bbf8b5c 100644
--- a/src/styles/blocks/header.scss
+++ b/src/styles/blocks/header.scss
@@ -21,7 +21,7 @@
   font-size: 12px;
   font-weight: 500;
 
-  transition: color, $transitionDuration;
+  transition: color $transitionDuration;
 
   &:hover {
     color: $color-link-hover;
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index c3e0f0266..d6364d3c5 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -1,3 +1,3 @@
-$cardHeadercolor: #34568b;
+$color-header: #34568b;
 $color-link-hover: #00acdc;
 $transitionDuration: 0.3s;