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
Open

Develop #4964

Show file tree
Hide file tree
Changes from 4 commits
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
6 changes: 3 additions & 3 deletions readme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 `<main>` tag for cards container
- use `<main>` tag for cards container
- use the grid for cards with different numbers of columns:
- 1 for the smaller screens
- 2 starting at `488px`
Expand All @@ -33,8 +33,8 @@ This is possible because [we use the Parcel library](https://en.parceljs.org/scs
## Checklist

❗️ Replace `<your_account>` with your GitHub username and copy the links to the `Pull Request` description:
- [DEMO LINK](https://<your_account>.github.io/layout_catalog/)
- [TEST REPORT LINK](https://<your_account>.github.io/layout_catalog/report/html_report/)
- [DEMO LINK](https://IvanIlnytskyy.github.io/layout_catalog/)
- [TEST REPORT LINK](IvanIlnytskyy.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.

Expand Down
373 changes: 372 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,377 @@
</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>
<main class="catalog">
Comment on lines +112 to +113
Copy link

Choose a reason for hiding this comment

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

Suggested change
</header>
<main class="catalog">
</header>
<main class="catalog">

<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"
alt="imac"
class="product-card__image"
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__image"
class="card__image"

/>
<h2 class="product-card__title">
Copy link

Choose a reason for hiding this comment

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

Suggested change
<h2 class="product-card__title">
<h2 class="card__title">

APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A)
</h2>
<p class="product-card__description">Product code: 195434</p>
Copy link

Choose a reason for hiding this comment

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

Suggested change
<p class="product-card__description">Product code: 195434</p>
<p class="card__description">Product code: 195434</p>

<div class="mark">
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="mark">
<div class="card__review">

<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>
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">
<p class="price__word">Price:</p>
<p class="price__numeric">$2,199</p>
</div>
<div class="card__price">
<p class="card__price-label">Price:</p>
<p class="card__price-value">$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
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
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
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 all cards

Suggested change
</div>
<div
</div>
<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
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
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
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
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>
</main>
<!--#endregion product-cards-->
</body>
</html>
Loading
Loading