Skip to content

Commit

Permalink
add task solution
Browse files Browse the repository at this point in the history
  • Loading branch information
@alla-vedmid
alla-vedmid committed Jan 22, 2025
1 parent 56dc17c commit 112635f
Show file tree
Hide file tree
Showing 8 changed files with 566 additions and 9 deletions.
16 changes: 8 additions & 8 deletions readme.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,14 +33,14 @@ 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://alla-vedmid.github.io/layout_catalog/)
- [TEST REPORT LINK](https://alla-vedmid.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.

- [ ] All components follow BEM and use SCSS
- [ ] Repeated sizes and special colors are put to variables
- [ ] Grid is used for the columns
- [ ] Cards are shown in 1, 2, 3, or 4 columns based on screen resolution
- [ ] All changes on `:hover` are smooth
- [ ] Code follows all the [Code Style Rules ❗️](https://mate-academy.github.io/layout_task-guideline/html-css-code-style-rules)
- [x] All components follow BEM and use SCSS
- [x] Repeated sizes and special colors are put to variables
- [x] Grid is used for the columns
- [x] Cards are shown in 1, 2, 3, or 4 columns based on screen resolution
- [x] All changes on `:hover` are smooth
- [x] Code follows all the [Code Style Rules ❗️](https://mate-academy.github.io/layout_task-guideline/html-css-code-style-rules)
346 changes: 345 additions & 1 deletion src/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,350 @@
</head>

<body>
<h1>Catalog</h1>
<header class="header">
<div class="header__logo">
<a href="/">
<img
src="images/logo.png"
alt="Moyo logo"
/>
</a>
</div>
<nav class="navigation">
<ul class="navigation__list">
<li class="navigation__item">
<a
class="is-active"
href="/"
>
Apple
</a>
</li>
<li class="navigation__item">
<a href="/">Samsung</a>
</li>
<li class="navigation__item">
<a href="/">Smartphones</a>
</li>
<li class="navigation__item">
<a
href="/"
data-qa="nav-hover"
>
Laptops & Computers
</a>
</li>
<li class="navigation__item">
<a href="/">Gadgets</a>
</li>
<li class="navigation__item">
<a href="/">Tablets</a>
</li>
<li class="navigation__item">
<a href="/">Photo</a>
</li>
<li class="navigation__item">
<a href="/">Video</a>
</li>
</ul>
</nav>
</header>
<main class="main">
<div
class="card"
data-qa="card"
>
<div class="card__image"></div>

<div class="card__description">
<span class="card__title">
APPLE A1419 iMac 27" Retina 5K&nbsp;Monoblock (MNED2UA/A)
</span>
<span class="card__prod-code">Product code: 195434</span>
</div>

<div class="card__reviews">
<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>
<div class="card__reviews-text">Reviews: 5</div>
</div>

<div class="card__price">
<div class="card__label">Price:</div>
<div class="card__value">$2,199</div>
</div>

<button
class="card__btn"
data-qa="card-hover"
>
Buy
</button>
</div>

<div
class="card"
data-qa="card"
>
<div class="card__image"></div>

<div class="card__description">
<span class="card__title">
APPLE A1419 iMac 27" Retina 5K&nbsp;Monoblock (MNED2UA/A)
</span>
<span class="card__prod-code">Product code: 195434</span>
</div>

<div class="card__reviews">
<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>
<div class="card__reviews-text">Reviews: 5</div>
</div>

<div class="card__price">
<div class="card__label">Price:</div>
<div class="card__value">$2,199</div>
</div>

<button
class="card__btn"
data-qa="hover"
>
Buy
</button>
</div>

<div
class="card"
data-qa="card"
>
<div class="card__image"></div>

<div class="card__description">
<span class="card__title">
APPLE A1419 iMac 27" Retina 5K&nbsp;Monoblock (MNED2UA/A)
</span>
<span class="card__prod-code">Product code: 195434</span>
</div>

<div class="card__reviews">
<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>
<div class="card__reviews-text">Reviews: 5</div>
</div>

<div class="card__price">
<div class="card__label">Price:</div>
<div class="card__value">$2,199</div>
</div>

<button
class="card__btn"
data-qa="hover"
>
Buy
</button>
</div>

<div
class="card"
data-qa="card"
>
<div class="card__image"></div>

<div class="card__description">
<span class="card__title">
APPLE A1419 iMac 27" Retina 5K&nbsp;Monoblock (MNED2UA/A)
</span>
<span class="card__prod-code">Product code: 195434</span>
</div>

<div class="card__reviews">
<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>
<div class="card__reviews-text">Reviews: 5</div>
</div>

<div class="card__price">
<div class="card__label">Price:</div>
<div class="card__value">$2,199</div>
</div>

<button
class="card__btn"
data-qa="hover"
>
Buy
</button>
</div>

<div
class="card"
data-qa="card"
>
<div class="card__image"></div>

<div class="card__description">
<span class="card__title">
APPLE A1419 iMac 27" Retina 5K&nbsp;Monoblock (MNED2UA/A)
</span>
<span class="card__prod-code">Product code: 195434</span>
</div>

<div class="card__reviews">
<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>
<div class="card__reviews-text">Reviews: 5</div>
</div>

<div class="card__price">
<div class="card__label">Price:</div>
<div class="card__value">$2,199</div>
</div>

<button
class="card__btn"
data-qa="hover"
>
Buy
</button>
</div>

<div
class="card"
data-qa="card"
>
<div class="card__image"></div>

<div class="card__description">
<span class="card__title">
APPLE A1419 iMac 27" Retina 5K&nbsp;Monoblock (MNED2UA/A)
</span>
<span class="card__prod-code">Product code: 195434</span>
</div>

<div class="card__reviews">
<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>
<div class="card__reviews-text">Reviews: 5</div>
</div>

<div class="card__price">
<div class="card__label">Price:</div>
<div class="card__value">$2,199</div>
</div>

<button
class="card__btn"
data-qa="hover"
>
Buy
</button>
</div>

<div
class="card"
data-qa="card"
>
<div class="card__image"></div>

<div class="card__description">
<span class="card__title">
APPLE A1419 iMac 27" Retina 5K&nbsp;Monoblock (MNED2UA/A)
</span>
<span class="card__prod-code">Product code: 195434</span>
</div>

<div class="card__reviews">
<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>
<div class="card__reviews-text">Reviews: 5</div>
</div>

<div class="card__price">
<div class="card__label">Price:</div>
<div class="card__value">$2,199</div>
</div>

<button
class="card__btn"
data-qa="hover"
>
Buy
</button>
</div>

<div
class="card"
data-qa="card"
>
<div class="card__image"></div>

<div class="card__description">
<span class="card__title">
APPLE A1419 iMac 27" Retina 5K&nbsp;Monoblock (MNED2UA/A)
</span>
<span class="card__prod-code">Product code: 195434</span>
</div>

<div class="card__reviews">
<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>
<div class="card__reviews-text">Reviews: 5</div>
</div>

<div class="card__price">
<div class="card__label">Price:</div>
<div class="card__value">$2,199</div>
</div>

<button
class="card__btn"
data-qa="hover"
>
Buy
</button>
</div>
</main>
</body>
</html>
Loading

0 comments on commit 112635f

Please sign in to comment.