Skip to content

solution: layout catalog #6300

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
AlexanderOkhotnichenko wants to merge 3 commits into
base: master
Choose a base branch
from
Open

solution: layout catalog #6300

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
0847a19
solution: layout catalog
AlexanderOkhotnichenko Jul 5, 2026
77540a0
fix problems
AlexanderOkhotnichenko Jul 5, 2026
b1bc791
fix problems
AlexanderOkhotnichenko Jul 5, 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
376 changes: 374 additions & 2 deletions src/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,11 +17,383 @@
/>
<link
rel="stylesheet"
href="styles/index.scss"
href="styles/main.scss"
/>
</head>

<body>
<h1>Catalog</h1>
<header class="header">
<div class="header__container">
<a
href="#"
class="logo"
>
<img
src="./images/logo.png"
alt="Moyo"
class="logo__image"
/>
</a>

<nav class="nav">
<ul class="nav__list">
<li class="nav__item">
<a
href="#"
class="nav__link is-active"
>
Apple
</a>
</li>

<li class="nav__item">
<a
href="#"
class="nav__link"
>
Samsung
</a>
</li>

<li class="nav__item">
<a
href="#"
class="nav__link"
>
Smartphones
</a>
</li>

<li class="nav__item">
<a
href="#"
class="nav__link"
data-qa="nav-hover"
>
Laptops & Computers
</a>
</li>

<li class="nav__item">
<a
href="#"
Comment on lines +69 to +79

@mateacademy-ai-mentor mateacademy-ai-mentor Jul 5, 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.

To fully satisfy checklist item #5 (“All changes on :hover are smooth”), consider adding a transition for the active underline (e.g., on opacity or transform) so the &.is-active::after visual change appears/disappears smoothly rather than instantly.

class="nav__link"
>
Gadgets
</a>
Comment on lines +69 to +83

@mateacademy-ai-mentor mateacademy-ai-mentor Jul 5, 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.

Here, only color is transitioned, but the hover state also changes the background-color. To satisfy checklist item #5: “All changes on :hover are smooth” and the requirement that the button background change be smooth, include background-color in the transition (or transition all) so the button’s background change is animated as well.

</li>

<li class="nav__item">
<a
href="#"
class="nav__link"
>
Tablets
</a>
</li>

<li class="nav__item">
<a
href="#"
class="nav__link"
>
Photo
</a>
</li>

<li class="nav__item">
<a
href="#"
class="nav__link"
>
Video
</a>
</li>
</ul>
</nav>
</div>
</header>
<main class="cards-container">
<div
class="card"
data-qa="card"
>
<img
src="./images/imac.jpeg"
alt="imac"
class="card__image"
/>
<h2 class="card__title">
APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A)
</h2>
<p class="card__product-code">Product code: 195434</p>
<div class="card__rating">
<div class="stars stars--active-4">
<span class="stars__star"></span>
<span class="stars__star"></span>
<span class="stars__star"></span>
<span class="stars__star"></span>
<span class="stars__star"></span>
</div>
<span class="card__reviews-count">Reviews: 5</span>
</div>
<div class="card__price-container">
<span class="card__price-label">Price:</span>
<span class="card__price-value">$2,199</span>
</div>
<a
href="#"
class="card__link"
data-qa="card-hover"
>
Buy
</a>
</div>
<div
class="card"
data-qa="card"
Comment on lines +152 to +154

@mateacademy-ai-mentor mateacademy-ai-mentor Jul 5, 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.

According to the description, data-qa="card" should be added to the first card only, but here every card has data-qa="card". This violates that requirement and can break tests that rely on the first card’s unique selector.

@mateacademy-ai-mentor mateacademy-ai-mentor Jul 5, 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.

data-qa="card" is supposed to be applied only to the first card, but here it is also set on this second card; this violates the description and the previous HIGH-level note to limit data-qa="card" to the first card only.

Comment on lines +152 to +154

@mateacademy-ai-mentor mateacademy-ai-mentor Jul 5, 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 the description requirement: data-qa="card" must be applied only to the first card. Here it’s used on a non-first card, so you need to remove data-qa="card" from all cards except the first one.

>
<img
src="./images/imac.jpeg"
alt="imac"
class="card__image"
/>
<h2 class="card__title">
APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A)
</h2>
<p class="card__product-code">Product code: 195434</p>
<div class="card__rating">
<div class="stars stars--active-4">
<span class="stars__star"></span>
<span class="stars__star"></span>
<span class="stars__star"></span>
<span class="stars__star"></span>
<span class="stars__star"></span>
</div>
<span class="card__reviews-count">Reviews: 5</span>
</div>
<div class="card__price-container">
<span class="card__price-label">Price:</span>
<span class="card__price-value">$2,199</span>
</div>
<a
href="#"
class="card__link"
data-qa="card-hover"
Comment on lines +179 to +182

@mateacademy-ai-mentor mateacademy-ai-mentor Jul 5, 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.

Similarly, data-qa="card-hover" is supposed to be on the link Buy inside the first card only, but all card__link elements have this attribute. This does not match the description requirement and may cause test issues.

@mateacademy-ai-mentor mateacademy-ai-mentor Jul 5, 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.

data-qa="card-hover" should be on the Buy link only in the first card, but this second card’s link also has it; this still violates the requirement to scope this data attribute to just the first card’s Buy link.

Comment on lines +179 to +182

@mateacademy-ai-mentor mateacademy-ai-mentor Jul 5, 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 the description requirement: data-qa="card-hover" must be applied only to the Buy link inside the first card. Here it’s used on a non-first card’s link; remove data-qa="card-hover" from all Buy links except the first card’s.

>
Buy
</a>
</div>
<div
class="card"
data-qa="card"

@mateacademy-ai-mentor mateacademy-ai-mentor Jul 5, 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.

Same as above: this third card also has data-qa="card", but the description requires that attribute only on the first card.

Comment on lines +187 to +189

@mateacademy-ai-mentor mateacademy-ai-mentor Jul 5, 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.

Same issue as above: data-qa="card" must be present only on the first card; this non-first card should not have it.

>
<img
src="./images/imac.jpeg"
alt="imac"
class="card__image"
/>
<h2 class="card__title">
APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A)
</h2>
<p class="card__product-code">Product code: 195434</p>
<div class="card__rating">
<div class="stars stars--active-4">
<span class="stars__star"></span>
<span class="stars__star"></span>
<span class="stars__star"></span>
<span class="stars__star"></span>
<span class="stars__star"></span>
</div>
<span class="card__reviews-count">Reviews: 5</span>
</div>
<div class="card__price-container">
<span class="card__price-label">Price:</span>
<span class="card__price-value">$2,199</span>
</div>
<a
href="#"
class="card__link"
data-qa="card-hover"

@mateacademy-ai-mentor mateacademy-ai-mentor Jul 5, 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.

Same issue: this Buy link in the third card again uses data-qa="card-hover", which should be restricted to the first card only.

Comment on lines +214 to +217

@mateacademy-ai-mentor mateacademy-ai-mentor Jul 5, 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.

Same issue as above: data-qa="card-hover" should only be on the first card’s Buy link, not on later ones.

>
Buy
</a>
</div>
<div
class="card"
data-qa="card"

@mateacademy-ai-mentor mateacademy-ai-mentor Jul 5, 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 fourth card again includes data-qa="card"; adjust so only the very first .card keeps this attribute.

Comment on lines +222 to +224

@mateacademy-ai-mentor mateacademy-ai-mentor Jul 5, 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.

Same issue: data-qa="card" must be restricted to the first card only; remove it from this card.

>
<img
src="./images/imac.jpeg"
alt="imac"
class="card__image"
/>
<h2 class="card__title">
APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A)
</h2>
<p class="card__product-code">Product code: 195434</p>
<div class="card__rating">
<div class="stars stars--active-4">
<span class="stars__star"></span>
<span class="stars__star"></span>
<span class="stars__star"></span>
<span class="stars__star"></span>
<span class="stars__star"></span>
</div>
<span class="card__reviews-count">Reviews: 5</span>
</div>
<div class="card__price-container">
<span class="card__price-label">Price:</span>
<span class="card__price-value">$2,199</span>
</div>
<a
href="#"
class="card__link"
data-qa="card-hover"

@mateacademy-ai-mentor mateacademy-ai-mentor Jul 5, 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 Buy link also repeats data-qa="card-hover"; keep this attribute only on the first card’s Buy link.

Comment on lines +249 to +252

@mateacademy-ai-mentor mateacademy-ai-mentor Jul 5, 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.

Same issue: data-qa="card-hover" must be only on the first card’s Buy link; remove it here.

>
Buy
</a>
</div>
<div
class="card"
data-qa="card"

@mateacademy-ai-mentor mateacademy-ai-mentor Jul 5, 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 fifth card should not have data-qa="card"; only the first card needs that data attribute according to the task.

Comment on lines +257 to +259

@mateacademy-ai-mentor mateacademy-ai-mentor Jul 5, 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.

Same issue: data-qa="card" should not be on this later card; keep it only on the first card.

>
<img
src="./images/imac.jpeg"
alt="imac"
class="card__image"
/>
<h2 class="card__title">
APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A)
</h2>
<p class="card__product-code">Product code: 195434</p>
<div class="card__rating">
<div class="stars stars--active-4">
<span class="stars__star"></span>
<span class="stars__star"></span>
<span class="stars__star"></span>
<span class="stars__star"></span>
<span class="stars__star"></span>
</div>
<span class="card__reviews-count">Reviews: 5</span>
</div>
<div class="card__price-container">
<span class="card__price-label">Price:</span>
<span class="card__price-value">$2,199</span>
</div>
<a
href="#"
class="card__link"
data-qa="card-hover"

@mateacademy-ai-mentor mateacademy-ai-mentor Jul 5, 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.

Again, data-qa="card-hover" here should be removed so only the first card’s button remains tagged.

Comment on lines +284 to +287

@mateacademy-ai-mentor mateacademy-ai-mentor Jul 5, 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.

Same issue: data-qa="card-hover" must not be on this Buy link; only the first card’s Buy link should have it.

>
Buy
</a>
</div>
<div
class="card"
data-qa="card"

@mateacademy-ai-mentor mateacademy-ai-mentor Jul 5, 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 sixth card repeats data-qa="card"; remove from all but the first card to match the requirement.

Comment on lines +292 to +294

@mateacademy-ai-mentor mateacademy-ai-mentor Jul 5, 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.

Same issue: data-qa="card" must be applied only to the first card; remove it from this card.

>
<img
src="./images/imac.jpeg"
alt="imac"
class="card__image"
/>
<h2 class="card__title">
APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A)
</h2>
<p class="card__product-code">Product code: 195434</p>
<div class="card__rating">
<div class="stars stars--active-4">
<span class="stars__star"></span>
<span class="stars__star"></span>
<span class="stars__star"></span>
<span class="stars__star"></span>
<span class="stars__star"></span>
</div>
<span class="card__reviews-count">Reviews: 5</span>
</div>
<div class="card__price-container">
<span class="card__price-label">Price:</span>
<span class="card__price-value">$2,199</span>
</div>
<a
href="#"
class="card__link"
data-qa="card-hover"
Comment on lines +319 to +322

@mateacademy-ai-mentor mateacademy-ai-mentor Jul 5, 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.

Same issue: data-qa="card-hover" must be applied only to the first card’s Buy link; remove it here.

>
Buy
</a>
</div>
<div
class="card"
data-qa="card"
Comment on lines +327 to +329

@mateacademy-ai-mentor mateacademy-ai-mentor Jul 5, 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.

Same issue: data-qa="card" should not be on this card; only the first card should carry that attribute.

>
<img
src="./images/imac.jpeg"
alt="imac"
class="card__image"
/>
<h2 class="card__title">
APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A)
</h2>
<p class="card__product-code">Product code: 195434</p>
<div class="card__rating">
<div class="stars stars--active-4">
<span class="stars__star"></span>
<span class="stars__star"></span>
<span class="stars__star"></span>
<span class="stars__star"></span>
<span class="stars__star"></span>
</div>
<span class="card__reviews-count">Reviews: 5</span>
</div>
<div class="card__price-container">
<span class="card__price-label">Price:</span>
<span class="card__price-value">$2,199</span>
</div>
<a
href="#"
class="card__link"
data-qa="card-hover"

@mateacademy-ai-mentor mateacademy-ai-mentor Jul 5, 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 Buy link in the sixth card repeats data-qa="card-hover"; keep it only on the first card’s Buy link as specified.

Comment on lines +354 to +357

@mateacademy-ai-mentor mateacademy-ai-mentor Jul 5, 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.

Same issue: data-qa="card-hover" must be only on the first Buy link; remove it here.

>
Buy
</a>
</div>
<div
class="card"
data-qa="card"

@mateacademy-ai-mentor mateacademy-ai-mentor Jul 5, 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.

The seventh card also has data-qa="card"; per description it should be unique to the first card.

Comment on lines +362 to +364

@mateacademy-ai-mentor mateacademy-ai-mentor Jul 5, 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.

Same issue: data-qa="card" must be only on the first card; this later card should not have it.

>
<img
src="./images/imac.jpeg"
alt="imac"
class="card__image"
/>
<h2 class="card__title">
APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A)
</h2>
<p class="card__product-code">Product code: 195434</p>
<div class="card__rating">
<div class="stars stars--active-4">
<span class="stars__star"></span>
<span class="stars__star"></span>
<span class="stars__star"></span>
<span class="stars__star"></span>
<span class="stars__star"></span>
</div>
<span class="card__reviews-count">Reviews: 5</span>
</div>
<div class="card__price-container">
<span class="card__price-label">Price:</span>
<span class="card__price-value">$2,199</span>
</div>
<a
href="#"
class="card__link"
data-qa="card-hover"

@mateacademy-ai-mentor mateacademy-ai-mentor Jul 5, 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.

Same issue for data-qa="card-hover" on this Buy link; it must be limited to the first card only.

Comment on lines +389 to +392

@mateacademy-ai-mentor mateacademy-ai-mentor Jul 5, 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.

Same issue: data-qa="card-hover" must be only on the first card’s Buy link; remove it from this link as well.

>
Buy
</a>
</div>
</main>
</body>
</html>
Loading
Loading