Skip to content
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

Develop #4964

Open
wants to merge 7 commits into
base: master
Choose a base branch
from
+718 −4
Open

Develop #4964

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
8e8723c
add task solution
IvanIlnytskyy Dec 30, 2024
da0147a
add task solution
IvanIlnytskyy Dec 31, 2024
427b71b
add task solution
IvanIlnytskyy Dec 31, 2024
986b178
add task solution
IvanIlnytskyy Dec 31, 2024
0b6c87e
make build
IvanIlnytskyy Dec 31, 2024
2fb7984
add task solution
IvanIlnytskyy Jan 2, 2025
ff4f745
add task solution
IvanIlnytskyy Jan 2, 2025
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
391 changes: 390 additions & 1 deletion src/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,395 @@
</head>

<body>
<h1>Catalog</h1>
<header class="header">
<a
href="#"
class="logo"
>
<img
src="./images/logo.png"
alt="MOYO Logo"
/>
</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="#"
class="nav__link"
>
Gadgets
</a>
</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>
Copy link

Choose a reason for hiding this comment

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

The last list item in the navigation does not have a class attribute like the others. Consider adding a class for consistency and easier styling.

<a
href="#"
class="nav__link"
>
Video
</a>
</li>
</ul>
</nav>
</header>

<!--#region product-cards-->

<main class="catalog">
<div class="product-cards">
Copy link

Choose a reason for hiding this comment

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

This wrapper is redundant

Suggested change
<div class="product-cards">

<div
class="product-card"
Copy link

Choose a reason for hiding this comment

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

Suggested change
class="product-card"
class="card"

data-qa="card"
>
<img
src="./images/imac.jpeg"
Copy link

Choose a reason for hiding this comment

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

The image source for the product card is repeated multiple times. If these are meant to be different products, ensure each has a unique image and description.

alt="imac"
class="product-card__image"
/>
<h2 class="product-card__title">
APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A)
</h2>
<p class="product-card__description">Product code: 195434</p>
<div class="mark">
<div class="stars stars--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>
<p class="mark__reviews">Reviews: 5</p>
</div>
<div class="price">
Copy link

Choose a reason for hiding this comment

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

Suggested change
<div class="price">
<div class="card__price">

<p class="price__word">Price:</p>
<p class="price__numeric">$2,199</p>
</div>
<a
href="#"
data-qa="card-hover"
class="bottom"
Copy link

Choose a reason for hiding this comment

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

Suggested change
class="bottom"
class="card__button"

>
BUY
</a>
</div>
</div>
<div class="product-cards">
Copy link

Choose a reason for hiding this comment

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

Redundant wrapper, remove it everywhere

Suggested change
<div class="product-cards">

<div
class="product-card"
data-qa="card"
>
<img
src="./images/imac.jpeg"
alt="imac"
class="product-card__image"
/>
<h2 class="product-card__title">
APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A)
</h2>
<p class="product-card__description">Product code: 195434</p>
<div class="mark">
<div class="stars stars--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>
<p class="mark__reviews">Reviews: 5</p>
</div>
<div class="price">
<p class="price__word">Price:</p>
<p class="price__numeric">$2,199</p>
</div>
<a
href="#"
data-qa="hover"
class="bottom"
>
BUY
</a>
</div>
</div>
<div class="product-cards">
<div
class="product-card"
data-qa="card"
>
<img
src="./images/imac.jpeg"
alt="imac"
class="product-card__image"
/>
<h2 class="product-card__title">
APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A)
</h2>
<p class="product-card__description">Product code: 195434</p>
<div class="mark">
<div class="stars stars--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>
<p class="mark__reviews">Reviews: 5</p>
</div>
<div class="price">
<p class="price__word">Price:</p>
<p class="price__numeric">$2,199</p>
</div>
<a
href="#"
data-qa="hover"
class="bottom"
>
BUY
</a>
</div>
</div>
<div class="product-cards">
<div
class="product-card"
data-qa="card"
>
<img
src="./images/imac.jpeg"
alt="imac"
class="product-card__image"
/>
<h2 class="product-card__title">
APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A)
</h2>
<p class="product-card__description">Product code: 195434</p>
<div class="mark">
<div class="stars stars--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>
<p class="mark__reviews">Reviews: 5</p>
</div>
<div class="price">
<p class="price__word">Price:</p>
<p class="price__numeric">$2,199</p>
</div>
<a
href="#"
data-qa="hover"
class="bottom"
>
BUY
</a>
</div>
</div>
<div class="product-cards">
<div
class="product-card"
data-qa="card"
>
<img
src="./images/imac.jpeg"
alt="imac"
class="product-card__image"
/>
<h2 class="product-card__title">
APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A)
</h2>
<p class="product-card__description">Product code: 195434</p>
<div class="mark">
<div class="stars stars--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>
<p class="mark__reviews">Reviews: 5</p>
</div>
<div class="price">
<p class="price__word">Price:</p>
<p class="price__numeric">$2,199</p>
</div>
<a
href="#"
data-qa="hover"
class="bottom"
>
BUY
</a>
</div>
</div>
<div class="product-cards">
<div
class="product-card"
data-qa="card"
>
<img
src="./images/imac.jpeg"
alt="imac"
class="product-card__image"
/>
<h2 class="product-card__title">
APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A)
</h2>
<p class="product-card__description">Product code: 195434</p>
<div class="mark">
<div class="stars stars--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>
<p class="mark__reviews">Reviews: 5</p>
</div>
<div class="price">
<p class="price__word">Price:</p>
<p class="price__numeric">$2,199</p>
</div>
<a
href="#"
data-qa="hover"
class="bottom"
>
BUY
</a>
</div>
</div>
<div class="product-cards">
Copy link

Choose a reason for hiding this comment

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

Add the blank line between the cards

Suggested change
</div>
<div class="product-cards">
</div>
<div class="product-cards">

<div
class="product-card"
data-qa="card"
>
<img
src="./images/imac.jpeg"
alt="imac"
class="product-card__image"
/>
<h2 class="product-card__title">
APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A)
</h2>
<p class="product-card__description">Product code: 195434</p>
<div class="mark">
<div class="stars stars--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>
<p class="mark__reviews">Reviews: 5</p>
</div>
<div class="price">
<p class="price__word">Price:</p>
<p class="price__numeric">$2,199</p>
</div>
<a
href="#"
data-qa="hover"
class="bottom"
>
BUY
</a>
</div>
</div>
<div class="product-cards">
<div
class="product-card"
data-qa="card"
>
<img
src="./images/imac.jpeg"
alt="imac"
class="product-card__image"
/>
<h2 class="product-card__title">
APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A)
</h2>
<p class="product-card__description">Product code: 195434</p>
<div class="mark">
<div class="stars stars--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>
<p class="mark__reviews">Reviews: 5</p>
</div>
<div class="price">
<p class="price__word">Price:</p>
<p class="price__numeric">$2,199</p>
</div>
<a
href="#"
data-qa="hover"
class="bottom"
>
BUY
</a>
</div>
</div>
</main>
<!--#endregion product-cards-->
</body>
</html>
Loading
Loading