Skip to content

add solution #6291

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Kiofd wants to merge 3 commits into
base: master
Choose a base branch
from
Open

add solution #6291

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
840abd9
add solution
Kiofd Jun 28, 2026
b3ba564
fix problems
Kiofd Jun 28, 2026
89d844d
fix problems
Kiofd Jun 28, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
396 changes: 395 additions & 1 deletion src/index.html
View file
Open in desktop

Large diffs are not rendered by default.

101 changes: 101 additions & 0 deletions src/styles/card.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,101 @@
.card {
box-sizing: border-box;
width: $card-width;
display: flex;
flex-direction: column;
align-items: center;

border: 1px solid #f3f3f3;
border-radius: 5px;

padding: 32px 16px 16px;

@include smooth-hover;

&__image {
height: 134px;
width: 160px;

margin: 0 auto;
}

&__title {
margin-top: 40px;

font-weight: 500;
font-size: 12px;
line-height: 18px;

color: $text-main-color;
}

&__product-code {
margin-top: 4px;

@include width-with-spacing;

@mateacademy-ai-mentor mateacademy-ai-mentor Jun 28, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This still indirectly violates [CHECKLIST ITEM #5] "All changes on :hover are smooth" because the nav link’s hover transition relies on @include smooth-hover at the .nav level instead of being explicitly applied to .nav__link. Consider moving or adding @include smooth-hover (or a property-specific transition: color 300ms;) to .nav__link so that the color change on hover is clearly and directly animated on the element whose style changes.

font-size: 10px;
color: $text-secondary-color;
}

&__rate {
margin-top: 16px;

@include width-with-spacing;

align-items: flex-end;
font-size: 10px;
}

&__price {
margin-top: 24px;
font-size: 16px;
line-height: 18px;

@include width-with-spacing;

&-title {
color: $text-secondary-color;
font-size: 12px;
}

&-amount {
font-weight: 700;
font-size: 16px;
}
}

&__button_buy {

@mateacademy-ai-mentor mateacademy-ai-mentor Jun 28, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This violates checklist item #5: All changes on :hover are smooth. The button hover currently changes background, border, and text color instantly because only .card has transition: 300ms;. Consider adding a transition on .card__button_buy for color, background-color, and border-color (or border) so the hover effect animates smoothly.

margin-top: 16px;

@include smooth-hover;
@include width-with-spacing;

justify-content: center;
box-sizing: border-box;
background-color: $accent-color;
border: none;
border-radius: 5px;
height: 40px;
font-size: 14px;
text-transform: uppercase;
color: #fff;
font-weight: 700;
text-decoration: none;

&:hover {
background-color: #fff;
border: 1px solid $accent-color;
color: $accent-color;
font-weight: 700;
}
}

&:hover {
transform: scale(1.2);

.card__title {
color: #34568b;
}
}
}
20 changes: 20 additions & 0 deletions src/styles/content.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
.content {
box-sizing: border-box;
padding: $container-vertical-padding $container-horizontal-padding;
display: grid;
grid-template-columns: repeat(1, $card-width);
justify-content: center;
gap: $container-vertical-gap $container-horizontal-gap;

@include on-small-screen {
grid-template-columns: repeat(2, $card-width);
}

@include on-medium-screen {
grid-template-columns: repeat(3, $card-width);
}

@include on-large-screen {
grid-template-columns: repeat(4, $card-width);
}
}

@mateacademy-ai-mentor mateacademy-ai-mentor Jun 28, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This violates checklist item #5: All changes on :hover are smooth. The hover color change is defined on .nav__link:hover, but the transition (@include smooth-hover) is applied only to .nav, not .nav__link, so the link text color change is still instantaneous. Add a transition (e.g. via @include smooth-hover) directly to .nav__link so its hover color animates over 300ms.

14 changes: 14 additions & 0 deletions src/styles/header.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
.header {
display: flex;
align-items: center;
justify-content: space-between;
background-color: #fff;
padding: 0 50px;
box-shadow: 0 2px 4px 0 #0000000d;

&__logo {
display: flex;
height: 40px;
width: 40px;
}
}
17 changes: 17 additions & 0 deletions src/styles/index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,20 @@
@import '../styles/utilites/variables';
@import '../styles/utilites/mixins';
@import './content';
@import './card';
@import './stars';
@import './header';
@import './nav';

html {
font-family: Roboto, sans-serif;
font-style: normal;
font-weight: 400;
line-height: 14px;

color: $text-main-color;
}

body {
margin: 0;
}
57 changes: 57 additions & 0 deletions src/styles/nav.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
.nav {
&__list {
display: flex;
align-items: center;
margin: 0;
padding: 0;
list-style: none;
}

&__item {
margin-left: 20px;
}

&__list :first-child {
margin-left: 0;
}

&__link {
@include smooth-hover;

position: relative;

display: flex;
align-items: center;

padding: 0;
height: 60px;
color: $text-main-color;

font-family: Roboto, sans-serif;
font-size: 12px;
font-weight: 500;
white-space: nowrap;
text-decoration: none;
text-transform: uppercase;
}
Comment on lines +18 to +36

@mateacademy-ai-mentor mateacademy-ai-mentor Jun 28, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This setup relies on @include smooth-hover at the .nav level while the hover color change is defined on .nav__link:hover. For [CHECKLIST ITEM #5] All changes on :hover are smooth, it’s safer to add the transition directly on .nav__link (for example by using @include smooth-hover inside &__link) so the color change is explicitly animated on the link element itself.


&__link:hover {
Comment on lines +18 to +38

@mateacademy-ai-mentor mateacademy-ai-mentor Jun 28, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This violates checklist item #5: "All changes on :hover are smooth". .nav__link:hover changes the text color, but .nav__link does not define any transition, so the color change is immediate instead of smoothly animated over 300ms. Consider adding a transition on .nav__link for color (and any other hover-affected properties).

color: $accent-color;
}

&__link.is-active {
color: $accent-color;
}

&__link.is-active::after {
content: '';
position: absolute;
bottom: 0;
right: 0;
left: 0;

height: 4px;
background-color: $accent-color;
border-radius: 8px;
}
}
28 changes: 28 additions & 0 deletions src/styles/stars.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
.stars {
display: flex;

&__star {
box-sizing: border-box;
display: flex;
background-image: url('../images/star.svg');

background-repeat: no-repeat;
background-position: center;

width: 16px;
height: 16px;
margin-right: 4px;
}

&__star:last-child {
margin-right: 0;
}
}

.stars--1 .stars__star:nth-of-type(-n + 1),
.stars--2 .stars__star:nth-of-type(-n + 2),
.stars--3 .stars__star:nth-of-type(-n + 3),
.stars--4 .stars__star:nth-of-type(-n + 4),
.stars--5 .stars__star:nth-of-type(-n + 5) {
background-image: url('../images/star-active.svg');
}
29 changes: 29 additions & 0 deletions src/styles/utilites/mixins.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
@mixin width-with-spacing() {
width: 100%;

display: flex;
align-items: center;
justify-content: space-between;
}

@mixin on-small-screen() {
@media (min-width: $width-small) {
@content;
}
}

@mixin on-medium-screen() {
@media (min-width: $width-medium) {
@content;
}
}

@mateacademy-ai-mentor mateacademy-ai-mentor Jun 28, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This still violates [CHECKLIST ITEM #5] “All changes on :hover are smooth”. The hover color change is on .nav__link:hover, but the transition (@include smooth-hover) is applied only to .nav, not .nav__link, so the link text color change can be instant instead of smooth. Consider adding @include smooth-hover; or a specific transition: color 300ms; inside &__link so the hover color animation on nav links is clearly smooth.

@mixin on-large-screen() {
@media (min-width: $width-large) {
@content;
}
}

@mixin smooth-hover {
transition: 300ms;
}
11 changes: 11 additions & 0 deletions src/styles/utilites/variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
$text-main-color: #060b35;
$text-secondary-color: #616070;
$accent-color: #00acdc;
$card-width: 200px;
$container-vertical-padding: 50px;
$container-horizontal-padding: 40px;
$container-vertical-gap: 46px;
$container-horizontal-gap: 48px;
$width-small: 488px;
$width-medium: 768px;
$width-large: 1024px;
Loading