From 36b945f2319b9cb3cee4ab33f8b31712d25db49f Mon Sep 17 00:00:00 2001 From: Natalia Onufrienko Date: Fri, 29 May 2026 10:48:08 +0300 Subject: [PATCH 1/7] add task solution --- readme.md | 6 +- src/index.html | 408 +++++++++++++++++++++++++++++++++- src/styles/blocks/card.scss | 105 +++++++++ src/styles/blocks/header.scss | 75 +++++++ src/styles/blocks/page.scss | 8 + src/styles/blocks/stars.scss | 20 ++ src/styles/index.scss | 9 +- src/styles/layout.scss | 21 ++ src/styles/variables.scss | 41 ++++ 9 files changed, 686 insertions(+), 7 deletions(-) create mode 100644 src/styles/blocks/card.scss create mode 100644 src/styles/blocks/header.scss create mode 100644 src/styles/blocks/page.scss create mode 100644 src/styles/blocks/stars.scss create mode 100644 src/styles/layout.scss create mode 100644 src/styles/variables.scss diff --git a/readme.md b/readme.md index acd5174814..7a2bf4cd9e 100644 --- a/readme.md +++ b/readme.md @@ -9,7 +9,7 @@ Create an HTML page with a catalog. Develop semantic page structure as shown on - add `data-qa="card-hover"` (not just `hover`) to the link `Buy` inside the first card - nav links color is not `black` anymore (nav links should have `#060b35` color) - add the class `is-active` to the first link (`Apple`) in the navigation -- use `
` tag for cards container +- use `
` tag for cards container - use the grid for cards with different numbers of columns: - 1 for the smaller screens - 2 starting at `488px` @@ -33,8 +33,8 @@ This is possible because [we use the Parcel library](https://en.parceljs.org/scs ## Checklist ❗️ Replace `` with your GitHub username and copy the links to the `Pull Request` description: -- [DEMO LINK](https://.github.io/layout_catalog/) -- [TEST REPORT LINK](https://.github.io/layout_catalog/report/html_report/) +- [DEMO LINK](https://Natalia-Onufrienko.github.io/layout_catalog/) +- [TEST REPORT LINK](https://Natalia-Onufrienko.github.io/layout_catalog/report/html_report/) ❗️ Copy this `Checklist` to the `Pull Request` description after links, and put `- [x]` before each point after you checked it. diff --git a/src/index.html b/src/index.html index 9cff78eeb7..9c52f61a4a 100644 --- a/src/index.html +++ b/src/index.html @@ -22,6 +22,412 @@ -

Catalog

+
+ + + +
+ +
+
+
+ card__image +
+ +

+ APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A) +

+ +
Product code: 195434
+ +
+
+
+
+
+
+
+
+ +
Reviews: 5
+
+ +
+
Price:
+
$2,199
+
+ + + BUY + +
+ +
+
+ card__image +
+ +

+ APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A) +

+ +
Product code: 195434
+ +
+
+
+
+
+
+
+
+ +
Reviews: 5
+
+ +
+
Price:
+
$2,199
+
+ + + BUY + +
+ +
+
+ card__image +
+ +

+ APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A) +

+ +
Product code: 195434
+ +
+
+
+
+
+
+
+
+ +
Reviews: 5
+
+ +
+
Price:
+
$2,199
+
+ + + BUY + +
+ +
+
+ card__image +
+ +

+ APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A) +

+ +
Product code: 195434
+ +
+
+
+
+
+
+
+
+ +
Reviews: 5
+
+ +
+
Price:
+
$2,199
+
+ + + BUY + +
+ +
+
+ card__image +
+ +

+ APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A) +

+ +
Product code: 195434
+ +
+
+
+
+
+
+
+
+ +
Reviews: 5
+
+ +
+
Price:
+
$2,199
+
+ + + BUY + +
+ +
+
+ card__image +
+ +

+ APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A) +

+ +
Product code: 195434
+ +
+
+
+
+
+
+
+
+ +
Reviews: 5
+
+ +
+
Price:
+
$2,199
+
+ + + BUY + +
+ +
+
+ card__image +
+ +

+ APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A) +

+ +
Product code: 195434
+ +
+
+
+
+
+
+
+
+ +
Reviews: 5
+
+ +
+
Price:
+
$2,199
+
+ + + BUY + +
+ +
+
+ card__image +
+ +

+ APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A) +

+ +
Product code: 195434
+ +
+
+
+
+
+
+
+
+ +
Reviews: 5
+
+ +
+
Price:
+
$2,199
+
+ + + BUY + +
+
diff --git a/src/styles/blocks/card.scss b/src/styles/blocks/card.scss new file mode 100644 index 0000000000..9a8ba1e51d --- /dev/null +++ b/src/styles/blocks/card.scss @@ -0,0 +1,105 @@ +@import '../variables'; + +.card { + width: $card-width; + padding: $card-padding; + border: 1px solid $color-border; + border-radius: $radius-small; + box-sizing: border-box; + transition: transform $transition-duration $transition-ease; + + &__title { + font-size: $font-size-base; + font-weight: $fw-medium; + line-height: $line-height-base; + margin: 0 0 $gap-xs; + transition: color $transition-duration $transition-ease; + } + + &:hover { + transform: scale($hover-scale); + + .card__title { + color: $color-hover-title; + } + } + + &__rating { + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: $space-lg; + } + + &__reviews { + display: flex; + align-items: center; + font-weight: $fw-regular; + font-size: $font-size-small; + line-height: $line-height-sm; + } + + &__image { + width: 100%; + display: block; + justify-content: center; + margin: 0 auto 40px; + + img { + max-width: 100%; + display: block; + } + } + + &__code { + font-size: $font-size-small; + font-weight: $fw-regular; + line-height: $line-height-sm; + color: $color-text-gray; + margin-bottom: $space-md; + } + + &__money { + display: flex; + align-items: center; + justify-content: space-between; + margin-bottom: $space-md; + } + + &__price { + font-weight: $fw-regular; + font-size: 12px; + line-height: $line-height-base; + color: $color-text-gray; + } + + &__currency { + font-weight: $fw-bold; + font-size: 16px; + line-height: $line-height-base; + color: $color-text-dark; + } + + &__buy { + display: inline-block; + width: 166px; + height: $btn-height; + line-height: $btn-height; + text-align: center; + background-color: $color-primary; + border-radius: $radius-small; + text-decoration: none; + color: $color-white; + font-size: $font-size-medium; + font-weight: $fw-bold; + font-family: $font-family; + transition: all $transition-duration $transition-ease; + border: 1px solid transparent; + + &:hover { + background-color: $color-white; + color: $color-primary; + border-color: $color-primary; + } + } +} diff --git a/src/styles/blocks/header.scss b/src/styles/blocks/header.scss new file mode 100644 index 0000000000..74da109575 --- /dev/null +++ b/src/styles/blocks/header.scss @@ -0,0 +1,75 @@ +@import '../variables'; + +* { + box-sizing: border-box; +} + +body { + box-sizing: border-box; + margin: 0; + font-family: $font-family; + color: $color; +} + +.header { + background-color: $color-bg-header; + display: flex; + align-items: center; + justify-content: space-between; + padding: $nav-padding; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); + font-size: 12px; + font-weight: $fw-medium; + + .logo { + &__img { + height: 40px; + width: 40px; + display: block; + } + } + + .nav { + &__list { + display: flex; + list-style: none; + margin: 0; + padding: 0; + } + + &__item { + &:not(:last-child) { + margin-right: $nav-gap; + } + } + + &__link { + text-transform: uppercase; + height: $nav-height; + position: relative; + color: $color-link; + text-decoration: none; + display: flex; + align-items: center; + justify-content: center; + transition: color $transition-duration $transition-ease; + + &:hover, + &.is-active { + color: var(--blue); + } + + &.is-active::after { + background-color: var(--blue); + content: ''; + position: absolute; + left: 0; + right: 0; + bottom: 0; + height: 4px; + border-radius: 4px; + width: 100%; + } + } + } +} diff --git a/src/styles/blocks/page.scss b/src/styles/blocks/page.scss new file mode 100644 index 0000000000..caf1b038f5 --- /dev/null +++ b/src/styles/blocks/page.scss @@ -0,0 +1,8 @@ +:root { + --blue: #00acdc; +} + +html { + box-sizing: border-box; + padding: 0; +} diff --git a/src/styles/blocks/stars.scss b/src/styles/blocks/stars.scss new file mode 100644 index 0000000000..534a967924 --- /dev/null +++ b/src/styles/blocks/stars.scss @@ -0,0 +1,20 @@ +@import '../variables'; + +.stars { + display: flex; + align-items: center; + gap: $gap-xs; + + &__item { + background-image: url('../images/star-active.svg'); + width: $star-size; + height: $star-size; + background-position: 50%; + background-repeat: no-repeat; + display: block; + + &--empty { + background-image: url('../images/star.svg'); + } + } +} diff --git a/src/styles/index.scss b/src/styles/index.scss index 293d3b1f13..3c4a04cacf 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -1,3 +1,6 @@ -body { - margin: 0; -} +@import './variables'; +@import './layout'; +@import '../styles/blocks/page'; +@import '../styles/blocks/header'; +@import '../styles/blocks/card'; +@import '../styles/blocks/stars'; diff --git a/src/styles/layout.scss b/src/styles/layout.scss new file mode 100644 index 0000000000..eb941f3a94 --- /dev/null +++ b/src/styles/layout.scss @@ -0,0 +1,21 @@ +.main { + display: grid; + gap: 46px 48px; + padding: $padding; + justify-content: center; + grid-template-columns: repeat(1, $card-width); + + @media (min-width: 488px) { + grid-template-columns: repeat(2, $card-width); + } + + @media (min-width: 768px) { + grid-template-columns: repeat(3, $card-width); + } + + @media (min-width: 1024px) { + grid-template-columns: repeat(4, $card-width); + max-width: 1024px; + margin: 0 auto; + } +} diff --git a/src/styles/variables.scss b/src/styles/variables.scss new file mode 100644 index 0000000000..78ac362dcb --- /dev/null +++ b/src/styles/variables.scss @@ -0,0 +1,41 @@ +$font-family: 'Roboto', sans-serif; +$fw-regular: 400; // для всього тексту +$fw-medium: 500; // заголовки, назви головні +$fw-bold: 700; // для кнопок + +$line-height-base: 18px; // проміжок між картками +$line-height-sm: 14px; // проміжок для відступів + +$color: rgba(6, 11, 53, 1); // хедер +$color-primary: rgba(0, 172, 220, 1); // колір кнопок +$color-primary-hover: rgba(0, 150, 200, 1); // колір активних карток +$color-border: rgba(243, 243, 243, 1); // колір меж карток +$color-text-gray: rgba(97, 96, 112, 1); // колір коду +$color-text-dark: rgba(6, 11, 53, 1); // колір для цін +$color-white: rgba(255, 255, 255, 1); // колір для фона кнопок + +$radius-small: 5px; // маленикий радіус округлення для кнопок +$space-md: 16px; // для марджин боттом між елементами +$space-lg: 24px; // великий відступ між блоками +$gap-xs: 4px; // маленький проміжок між елементами +$gap-lay: 48px 46px; +$padding: 50px 40px; +$star-size: 16px; // розмір однієї зірки +$btn-height: 40px; // висота кнопки +$card-width: 200px; +$card-height: 408px; +$card-padding: 32px 16px 16px; +$transition-duration: 300ms; +$transition-ease: ease; +$hover-scale: 1.2; +$color-hover-title: #34568b; +$hover-scale: 1.2; +$color-hover-title: #34568b; +$font-size-base: 12px; +$font-size-small: 10px; +$font-size-medium: 14px; +$color-bg-header: #fff; +$color-link: #060b35; +$nav-height: 60px; +$nav-padding: 0 50px; +$nav-gap: 20px; From dd5dacbe39f44a5da91b610047ee6481f6bb77cf Mon Sep 17 00:00:00 2001 From: Natalia Onufrienko Date: Fri, 29 May 2026 11:12:18 +0300 Subject: [PATCH 2/7] add task solution --- src/styles/blocks/header.scss | 84 +++++++++++++++++------------------ src/styles/variables.scss | 2 - 2 files changed, 42 insertions(+), 44 deletions(-) diff --git a/src/styles/blocks/header.scss b/src/styles/blocks/header.scss index 74da109575..a081137b56 100644 --- a/src/styles/blocks/header.scss +++ b/src/styles/blocks/header.scss @@ -20,56 +20,56 @@ body { box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); font-size: 12px; font-weight: $fw-medium; +} - .logo { - &__img { - height: 40px; - width: 40px; - display: block; - } +.logo { + &__img { + height: 40px; + width: 40px; + display: block; } +} - .nav { - &__list { - display: flex; - list-style: none; - margin: 0; - padding: 0; - } +.nav { + &__list { + display: flex; + list-style: none; + margin: 0; + padding: 0; + } - &__item { - &:not(:last-child) { - margin-right: $nav-gap; - } + &__item { + &:not(:last-child) { + margin-right: $nav-gap; } + } - &__link { - text-transform: uppercase; - height: $nav-height; - position: relative; - color: $color-link; - text-decoration: none; - display: flex; - align-items: center; - justify-content: center; - transition: color $transition-duration $transition-ease; + &__link { + text-transform: uppercase; + height: $nav-height; + position: relative; + color: $color-link; + text-decoration: none; + display: flex; + align-items: center; + justify-content: center; + transition: color $transition-duration $transition-ease; - &:hover, - &.is-active { - color: var(--blue); - } + &:hover, + &.is-active { + color: var(--blue); + } - &.is-active::after { - background-color: var(--blue); - content: ''; - position: absolute; - left: 0; - right: 0; - bottom: 0; - height: 4px; - border-radius: 4px; - width: 100%; - } + &.is-active::after { + background-color: var(--blue); + content: ''; + position: absolute; + left: 0; + right: 0; + bottom: 0; + height: 4px; + border-radius: 4px; + width: 100%; } } } diff --git a/src/styles/variables.scss b/src/styles/variables.scss index 78ac362dcb..7e41c97565 100644 --- a/src/styles/variables.scss +++ b/src/styles/variables.scss @@ -29,8 +29,6 @@ $transition-duration: 300ms; $transition-ease: ease; $hover-scale: 1.2; $color-hover-title: #34568b; -$hover-scale: 1.2; -$color-hover-title: #34568b; $font-size-base: 12px; $font-size-small: 10px; $font-size-medium: 14px; From 42b41f04d1eb75569c9b7397efbdc735698117c0 Mon Sep 17 00:00:00 2001 From: Natalia Onufrienko Date: Fri, 29 May 2026 11:38:32 +0300 Subject: [PATCH 3/7] add task solution --- src/styles/blocks/header.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/src/styles/blocks/header.scss b/src/styles/blocks/header.scss index a081137b56..2b3750db99 100644 --- a/src/styles/blocks/header.scss +++ b/src/styles/blocks/header.scss @@ -73,3 +73,4 @@ body { } } } + From 7304b4ead11fe98e7c3a78fabf2ef928737d3413 Mon Sep 17 00:00:00 2001 From: Natalia Onufrienko Date: Fri, 29 May 2026 11:50:06 +0300 Subject: [PATCH 4/7] add task solution --- src/styles/blocks/header.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/styles/blocks/header.scss b/src/styles/blocks/header.scss index 2b3750db99..4bd7834cda 100644 --- a/src/styles/blocks/header.scss +++ b/src/styles/blocks/header.scss @@ -57,11 +57,11 @@ body { &:hover, &.is-active { - color: var(--blue); + color: $color-primary; } &.is-active::after { - background-color: var(--blue); + background-color: $color-primary; content: ''; position: absolute; left: 0; From e7d94dfeb4491e0030a4ab1906ba8225c9c1489b Mon Sep 17 00:00:00 2001 From: Natalia Onufrienko Date: Fri, 29 May 2026 15:41:11 +0300 Subject: [PATCH 5/7] add task solution --- src/index.html | 2 +- src/styles/blocks/card.scss | 20 +++++++++++++------- src/styles/blocks/header.scss | 1 - src/styles/blocks/page.scss | 16 ++++++++++++---- src/styles/blocks/stars.scss | 12 ++++++++---- src/styles/index.scss | 2 +- src/styles/layout.scss | 5 ++--- src/styles/variables.scss | 20 ++++++++++---------- 8 files changed, 47 insertions(+), 31 deletions(-) diff --git a/src/index.html b/src/index.html index 9c52f61a4a..a8166b6b81 100644 --- a/src/index.html +++ b/src/index.html @@ -136,7 +136,7 @@

-
+
Reviews: 5
diff --git a/src/styles/blocks/card.scss b/src/styles/blocks/card.scss index 9a8ba1e51d..eaf8a72811 100644 --- a/src/styles/blocks/card.scss +++ b/src/styles/blocks/card.scss @@ -6,18 +6,21 @@ border: 1px solid $color-border; border-radius: $radius-small; box-sizing: border-box; - transition: transform $transition-duration $transition-ease; + display: flex; + flex-direction: column; + transition: transform 300ms; &__title { font-size: $font-size-base; font-weight: $fw-medium; - line-height: $line-height-base; + line-height: 1.4; margin: 0 0 $gap-xs; transition: color $transition-duration $transition-ease; } &:hover { transform: scale($hover-scale); + z-index: 1; .card__title { color: $color-hover-title; @@ -40,14 +43,17 @@ } &__image { - width: 100%; - display: block; - justify-content: center; + width: 160px; + height: 134px; margin: 0 auto 40px; + display: flex; + justify-content: center; + align-items: center; img { - max-width: 100%; - display: block; + width: 100%; + height: 100%; + object-fit: contain; } } diff --git a/src/styles/blocks/header.scss b/src/styles/blocks/header.scss index 4bd7834cda..74425924b8 100644 --- a/src/styles/blocks/header.scss +++ b/src/styles/blocks/header.scss @@ -73,4 +73,3 @@ body { } } } - diff --git a/src/styles/blocks/page.scss b/src/styles/blocks/page.scss index caf1b038f5..2f8a71437d 100644 --- a/src/styles/blocks/page.scss +++ b/src/styles/blocks/page.scss @@ -1,8 +1,16 @@ -:root { - --blue: #00acdc; -} - html { box-sizing: border-box; +} + +*, +*::before, +*::after { + box-sizing: inherit; +} + +body { + margin: 0; padding: 0; + font-family: $font-family; + color: $color; } diff --git a/src/styles/blocks/stars.scss b/src/styles/blocks/stars.scss index 534a967924..07bd26e215 100644 --- a/src/styles/blocks/stars.scss +++ b/src/styles/blocks/stars.scss @@ -6,15 +6,19 @@ gap: $gap-xs; &__item { - background-image: url('../images/star-active.svg'); + background-image: url('../images/star.svg'); width: $star-size; height: $star-size; background-position: 50%; background-repeat: no-repeat; display: block; + } - &--empty { - background-image: url('../images/star.svg'); - } + &--1 &__item:nth-child(-n + 1), + &--2 &__item:nth-child(-n + 2), + &--3 &__item:nth-child(-n + 3), + &--4 &__item:nth-child(-n + 4), + &--5 &__item:nth-child(-n + 5) { + background-image: url('../images/star-active.svg'); } } diff --git a/src/styles/index.scss b/src/styles/index.scss index 3c4a04cacf..64d05ea91e 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -1,6 +1,6 @@ @import './variables'; -@import './layout'; @import '../styles/blocks/page'; @import '../styles/blocks/header'; @import '../styles/blocks/card'; @import '../styles/blocks/stars'; +@import './layout'; diff --git a/src/styles/layout.scss b/src/styles/layout.scss index eb941f3a94..aa34472107 100644 --- a/src/styles/layout.scss +++ b/src/styles/layout.scss @@ -1,7 +1,8 @@ .main { + width: 100%; display: grid; gap: 46px 48px; - padding: $padding; + padding: 50px 40px; justify-content: center; grid-template-columns: repeat(1, $card-width); @@ -15,7 +16,5 @@ @media (min-width: 1024px) { grid-template-columns: repeat(4, $card-width); - max-width: 1024px; - margin: 0 auto; } } diff --git a/src/styles/variables.scss b/src/styles/variables.scss index 7e41c97565..be1375d98f 100644 --- a/src/styles/variables.scss +++ b/src/styles/variables.scss @@ -3,22 +3,22 @@ $fw-regular: 400; // для всього тексту $fw-medium: 500; // заголовки, назви головні $fw-bold: 700; // для кнопок -$line-height-base: 18px; // проміжок між картками -$line-height-sm: 14px; // проміжок для відступів +$line-height-base: 1.4; // проміжок між картками +$line-height-sm: 1.2; // проміжок для відступів -$color: rgba(6, 11, 53, 1); // хедер -$color-primary: rgba(0, 172, 220, 1); // колір кнопок -$color-primary-hover: rgba(0, 150, 200, 1); // колір активних карток -$color-border: rgba(243, 243, 243, 1); // колір меж карток -$color-text-gray: rgba(97, 96, 112, 1); // колір коду -$color-text-dark: rgba(6, 11, 53, 1); // колір для цін -$color-white: rgba(255, 255, 255, 1); // колір для фона кнопок +$color: #060b35; // хедер +$color-primary: #00acdc; // колір кнопок +$color-primary-hover: #00a3d1; // колір активних карток +$color-border: #f3f3f3; // колір меж карток +$color-text-gray: #616070; // колір коду +$color-text-dark: #060d35; // колір для цін +$color-white: #fff; // колір для фона кнопок $radius-small: 5px; // маленикий радіус округлення для кнопок $space-md: 16px; // для марджин боттом між елементами $space-lg: 24px; // великий відступ між блоками $gap-xs: 4px; // маленький проміжок між елементами -$gap-lay: 48px 46px; +// $gap-lay: 48px 46px; $padding: 50px 40px; $star-size: 16px; // розмір однієї зірки $btn-height: 40px; // висота кнопки From c216e45c661c432028165ef1b3c7ea69651498f6 Mon Sep 17 00:00:00 2001 From: Natalia Onufrienko Date: Fri, 29 May 2026 17:10:38 +0300 Subject: [PATCH 6/7] add task solution --- src/styles/blocks/header.scss | 11 ----------- src/styles/blocks/page.scss | 4 ++++ src/styles/variables.scss | 4 ++-- 3 files changed, 6 insertions(+), 13 deletions(-) diff --git a/src/styles/blocks/header.scss b/src/styles/blocks/header.scss index 74425924b8..7d8d7bc6a8 100644 --- a/src/styles/blocks/header.scss +++ b/src/styles/blocks/header.scss @@ -1,16 +1,5 @@ @import '../variables'; -* { - box-sizing: border-box; -} - -body { - box-sizing: border-box; - margin: 0; - font-family: $font-family; - color: $color; -} - .header { background-color: $color-bg-header; display: flex; diff --git a/src/styles/blocks/page.scss b/src/styles/blocks/page.scss index 2f8a71437d..4fdf30fb6b 100644 --- a/src/styles/blocks/page.scss +++ b/src/styles/blocks/page.scss @@ -2,6 +2,10 @@ html { box-sizing: border-box; } +* { + box-sizing: border-box; +} + *, *::before, *::after { diff --git a/src/styles/variables.scss b/src/styles/variables.scss index be1375d98f..e4dfbf0b10 100644 --- a/src/styles/variables.scss +++ b/src/styles/variables.scss @@ -3,8 +3,8 @@ $fw-regular: 400; // для всього тексту $fw-medium: 500; // заголовки, назви головні $fw-bold: 700; // для кнопок -$line-height-base: 1.4; // проміжок між картками -$line-height-sm: 1.2; // проміжок для відступів +$line-height-base: 18px; // проміжок між картками +$line-height-sm: 14px; // проміжок для відступів $color: #060b35; // хедер $color-primary: #00acdc; // колір кнопок From 8b789c0039ef585006ccf6a136adc82c39a33c89 Mon Sep 17 00:00:00 2001 From: Natalia Onufrienko Date: Fri, 29 May 2026 17:46:22 +0300 Subject: [PATCH 7/7] add task solution --- src/styles/blocks/card.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/styles/blocks/card.scss b/src/styles/blocks/card.scss index eaf8a72811..3b08980f7f 100644 --- a/src/styles/blocks/card.scss +++ b/src/styles/blocks/card.scss @@ -13,7 +13,7 @@ &__title { font-size: $font-size-base; font-weight: $fw-medium; - line-height: 1.4; + line-height: 18px; margin: 0 0 $gap-xs; transition: color $transition-duration $transition-ease; }