catalog hovers solution

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://LabPetro.github.io/layout_catalog_hovers/)
 
 > Follow [this instructions](https://github.com/mate-academy/layout_task-guideline#how-to-solve-the-layout-tasks-on-github)
 

src/styles/blocks/catalog.scss

@@ -1,25 +1,31 @@
+@mixin card-box {
+  width: 200px;
+  height: 300px;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+}
+
 .catalog {
   display: flex;
   flex-wrap: wrap;
-
+  @extend %position-center;
   max-width: 944px;
-  margin: 0 auto;
   padding: 50px 0;
 
   &__card {
-    display: flex;
+    @extend %flex-box;
     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 0.3s ease, color 0.3s ease;
+    @include card-box;
+    margin-bottom: $margin-space;
 
     &:not(:nth-child(4n)) {
-      margin-right: 48px;
+      margin-right: $margin-space;
+    }
+
+    &:hover {
+      transform: scale(1.2);
+      color: #34568b;
     }
   }
 }

src/styles/blocks/header.scss

@@ -1,12 +1,13 @@
-.header {
+%flex-box {
   display: flex;
   align-items: center;
-  justify-content: space-between;
-  box-sizing: border-box;
+}
 
-  height: 60px;
+.header {
+  @extend %flex-box;
+  justify-content: space-between;
+  height: $header-heights;
   padding: 0 50px;
-
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
 
   &__logo {
@@ -25,7 +26,7 @@
     position: relative;
     color: #060b35;
     list-style: none;
-    line-height: 60px;
+    line-height: $header-heights;
 
     &:not(:last-child) {
       margin-right: 20px;
@@ -38,5 +39,10 @@
     text-transform: uppercase;
     font-size: 12px;
     font-weight: 500;
+    transition: color 0.3s ease;
+
+    &:hover {
+      color: #00acdc;
+    }
   }
 }

src/styles/blocks/page.scss

@@ -1,7 +1,15 @@
+* {
+  box-sizing: border-box;
+}
+
+%position-center {
+  margin: 0 auto;
+}
+
 .page {
   font-family: Roboto, sans-serif;
 
   &__body {
-    margin: 0;
+    @extend %position-center;
   }
 }

src/styles/main.scss

@@ -1,3 +1,4 @@
-@import "blocks/page";
-@import "blocks/header";
-@import "blocks/catalog";
+@import "./utils/variables";
+@import "blocks/page.scss";
+@import "blocks/header.scss";
+@import "blocks/catalog.scss";

src/styles/utils/_variables.scss

@@ -0,0 +1,2 @@
+$margin-space: 48px;
+$header-heights: 60px;