Skip to content

Commit

Permalink
catalog solution
Browse files Browse the repository at this point in the history
  • Loading branch information
Liudmyla Trambai committed Dec 24, 2024
1 parent 56dc17c commit 44d84ff
Show file tree
Hide file tree
Showing 10 changed files with 598 additions and 7 deletions.
6 changes: 3 additions & 3 deletions readme.md
View file
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://Liudmila333.github.io/layout_catalog/)
- [TEST REPORT LINK](https://Liudmila333.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
362 changes: 361 additions & 1 deletion src/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,366 @@
</head>

<body>
<h1>Catalog</h1>
<header class="header">
<a
href="#"
class="header__img"
>
<img
src="./images/logo.png"
alt="moyo-logo"
/>
</a>

<nav class="header__nav">
<ul class="header__list">
<li class="header__item">
<a
href="#"
class="header__link is-active"
>
Apple
</a>
</li>

<li class="header__item">
<a
href="#"
class="header__link"
>
Samsung
</a>
</li>

<li class="header__item">
<a
href="#"
class="header__link"
>
Smartphones
</a>
</li>

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

<li class="header__item">
<a
href="#"
class="header__link"
>
Gadgets
</a>
</li>

<li class="header__item">
<a
href="#"
class="header__link"
>
Tablets
</a>
</li>

<li class="header__item">
<a
href="#"
class="header__link"
>
Photo
</a>
</li>

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

<main class="catalog">
<article
class="product-card"
data-qa="card"
>
<img
src="./images/imac.jpeg"
class="product-card__image"
alt="APPLE A1419 iMac 27"
/>

<h3 class="product-card__name">
APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A)
</h3>

<p class="product-card__code">Product code: 195434</p>
<div class="product-card__info">
<div class="stars stars--4">
<div class="stars__star"></div>
<div class="stars__star"></div>
<div class="stars__star"></div>
<div class="stars__star"></div>
<div class="stars__star"></div>
</div>
<p class="product-card__review">Reviews: 5</p>
</div>
<div class="product-card__price">
<p class="product-card__price-title">Price:</p>
<p class="product-card__price-value">$2,199</p>
</div>
<a
href="#buy"
class="product-card__buy"
data-qa="card-hover"
>
Buy
</a>
</article>

<article class="product-card">
<img
src="./images/imac.jpeg"
class="product-card__image"
alt="APPLE A1419 iMac 27"
/>

<h3 class="product-card__name">
APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A)
</h3>

<p class="product-card__code">Product code: 195434</p>
<div class="product-card__info">
<div class="stars stars--4">
<div class="stars__star"></div>
<div class="stars__star"></div>
<div class="stars__star"></div>
<div class="stars__star"></div>
<div class="stars__star"></div>
</div>
<p class="product-card__review">Reviews: 5</p>
</div>
<div class="product-card__price">
<p class="product-card__price-title">Price:</p>
<p class="product-card__price-value">$2,199</p>
</div>
<a
href="#buy"
class="product-card__buy"
>
Buy
</a>
</article>

<article class="product-card">
<img
src="./images/imac.jpeg"
class="product-card__image"
alt="APPLE A1419 iMac 27"
/>

<h3 class="product-card__name">
APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A)
</h3>

<p class="product-card__code">Product code: 195434</p>
<div class="product-card__info">
<div class="stars stars--4">
<div class="stars__star"></div>
<div class="stars__star"></div>
<div class="stars__star"></div>
<div class="stars__star"></div>
<div class="stars__star"></div>
</div>
<p class="product-card__review">Reviews: 5</p>
</div>
<div class="product-card__price">
<p class="product-card__price-title">Price:</p>
<p class="product-card__price-value">$2,199</p>
</div>
<a
href="#buy"
class="product-card__buy"
>
Buy
</a>
</article>

<article class="product-card">
<img
src="./images/imac.jpeg"
class="product-card__image"
alt="APPLE A1419 iMac 27"
/>

<h3 class="product-card__name">
APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A)
</h3>

<p class="product-card__code">Product code: 195434</p>
<div class="product-card__info">
<div class="stars stars--4">
<div class="stars__star"></div>
<div class="stars__star"></div>
<div class="stars__star"></div>
<div class="stars__star"></div>
<div class="stars__star"></div>
</div>
<p class="product-card__review">Reviews: 5</p>
</div>
<div class="product-card__price">
<p class="product-card__price-title">Price:</p>
<p class="product-card__price-value">$2,199</p>
</div>
<a
href="#buy"
class="product-card__buy"
>
Buy
</a>
</article>

<article class="product-card">
<img
src="./images/imac.jpeg"
class="product-card__image"
alt="APPLE A1419 iMac 27"
/>

<h3 class="product-card__name">
APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A)
</h3>
<p class="product-card__code">Product code: 195434</p>
<div class="product-card__info">
<div class="stars stars--4">
<div class="stars__star"></div>
<div class="stars__star"></div>
<div class="stars__star"></div>
<div class="stars__star"></div>
<div class="stars__star"></div>
</div>
<p class="product-card__review">Reviews: 5</p>
</div>
<div class="product-card__price">
<p class="product-card__price-title">Price:</p>
<p class="product-card__price-value">$2,199</p>
</div>
<a
href="#buy"
class="product-card__buy"
>
Buy
</a>
</article>
<article class="product-card">
<img
src="./images/imac.jpeg"
class="product-card__image"
alt="APPLE A1419 iMac 27"
/>

<h3 class="product-card__name">
APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A)
</h3>
<p class="product-card__code">Product code: 195434</p>
<div class="product-card__info">
<div class="stars stars--4">
<div class="stars__star"></div>
<div class="stars__star"></div>
<div class="stars__star"></div>
<div class="stars__star"></div>
<div class="stars__star"></div>
</div>
<p class="product-card__review">Reviews: 5</p>
</div>
<div class="product-card__price">
<p class="product-card__price-title">Price:</p>
<p class="product-card__price-value">$2,199</p>
</div>
<a
href="#buy"
class="product-card__buy"
>
Buy
</a>
</article>

<article class="product-card">
<img
src="./images/imac.jpeg"
class="product-card__image"
alt="APPLE A1419 iMac 27"
/>

<h3 class="product-card__name">
APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A)
</h3>
<p class="product-card__code">Product code: 195434</p>
<div class="product-card__info">
<div class="stars stars--4">
<div class="stars__star"></div>
<div class="stars__star"></div>
<div class="stars__star"></div>
<div class="stars__star"></div>
<div class="stars__star"></div>
</div>
<p class="product-card__review">Reviews: 5</p>
</div>
<div class="product-card__price">
<p class="product-card__price-title">Price:</p>
<p class="product-card__price-value">$2,199</p>
</div>
<a
href="#buy"
class="product-card__buy"
>
Buy
</a>
</article>

<article class="product-card">
<img
src="./images/imac.jpeg"
class="product-card__image"
alt="APPLE A1419 iMac 27"
/>

<h3 class="product-card__name">
APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A)
</h3>
<p class="product-card__code">Product code: 195434</p>
<div class="product-card__info">
<div class="stars stars--4">
<div class="stars__star"></div>
<div class="stars__star"></div>
<div class="stars__star"></div>
<div class="stars__star"></div>
<div class="stars__star"></div>
</div>
<p class="product-card__review">Reviews: 5</p>
</div>
<div class="product-card__price">
<p class="product-card__price-title">Price:</p>
<p class="product-card__price-value">$2,199</p>
</div>
<a
href="#buy"
class="product-card__buy"
>
Buy
</a>
</article>
</main>
</body>
</html>
Loading

0 comments on commit 44d84ff

Please sign in to comment.