Skip to content

Commit

Permalink
added solution
Browse files Browse the repository at this point in the history
  • Loading branch information
@alechsva
alechsva committed Oct 22, 2024
1 parent 3d711fd commit 4bc7ea1
Show file tree
Hide file tree
Showing 3 changed files with 564 additions and 4 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 HTML page with catalog. Develop semantic page structure as shown on [the
- add `data-qa="card-hover"` (not just `hover`) to the link `Buy` inside the first card
- nav links color is not `black` any more (nav links should have `#060b35` color)
- add class `is-active` to the first link (`Apple`) in navigation
- use `<main>` tag for cards container
- use `<main>` tag for cards container
- use grid for cards with different number of columns:
- 1 for the smaller screens
- 2 starting at `488px`
Expand All @@ -32,8 +32,8 @@ In this task, you can directly link *.scss files to HTML. This is possible becau
## Checklist

❗️ Replace `<your_account>` with your Github username and copy the links to `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://alechsva.github.io/layout_catalog/)
- [TEST REPORT LINK](https://alechsva.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
345 changes: 344 additions & 1 deletion src/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,349 @@
</head>

<body>
<h1>Catalog</h1>
<header>
<img
class="imgblock"
src="https://s3-alpha-sig.figma.com/img/833f/9aab/47d660efd384318772b6b8040db831aa?Expires=1730073600&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=GFjFD6-6KNqFBkswmu-BuTPJnotQ8-MD~XFWAHKRTFzBEQqKLe-4Cca9JX55r9scHqqYuwSS3TsIyJCh2iERYUgPUe5fszbMK7Tg0AgZZdstjYggVmO~lCJAm5RABG4y~Pd9KlhMIhkeNGbSjrNGNjL~pLc8xnAb1HFOb19z7kl6MngmQbQxT-1vuKf03PUIUzsEhIR8aicMa2KjYgomPp2TDMN9G7n8WqTgmW1h5Qu-jctRoMRYuvHf4xX9pw5TT2~LSzqKDtR0mjg38R~TXmLshaA9MgAoE7RyK873WOssIDG5MfRQ236zHRF9tZrkvuRgIxDAGL6O9x7hCoKsAg__"
alt="blue_logo_40x40"
/>
<nav>
<ul class="navItems">
<li class="navItems__block">
<a
href="#"
class="is-active"
>
APPLE
</a>
</li>
<li class="navItems__block">
<a href="#">SAMSUNG</a>
</li>
<li class="navItems__block">
<a href="#">SMARTPHONES</a>
</li>
<li class="navItems__block">
<a
href="#"
data-qa="nav-hover"
>
LAPTOPS & COMPUTERS
</a>
</li>
<li class="navItems__block">
<a href="#">GADGETS</a>
</li>
<li class="navItems__block">
<a href="#">TABLETS</a>
</li>
<li class="navItems__block">
<a href="#">PHOTO</a>
</li>
<li class="navItems__block">
<a href="#">VIDEO</a>
</li>
</ul>
</nav>
</header>

<main>
<div
class="card"
data-qa="card"
>
<div class="card__imgBlock">
<img
src="./images/imac.jpeg"
alt="iMac"
/>
</div>
<div class="card__title">
<span>APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A)</span>
</div>
<div class="card__productCode">
<span>Product code: 195434</span>
</div>
<div class="card__rate">
<div class="stars-4">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div>Reviews: 5</div>
</div>
<div class="priceBlock">
<span class="priceBlock__label">Price:</span>
<span class="priceBlock__price">$2,199</span>
</div>
<a
class="card__button"
data-qa="card-hover"
>
BUY
</a>
</div>
<div
class="card"
data-qa="card"
>
<div class="card__imgBlock">
<img
src="./images/imac.jpeg"
alt="iMac"
/>
</div>
<div class="card__title">
<span>APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A)</span>
</div>
<div class="card__productCode">
<span>Product code: 195434</span>
</div>
<div class="card__rate">
<div class="stars-4">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div>Reviews: 5</div>
</div>
<div class="priceBlock">
<span class="priceBlock__label">Price:</span>
<span class="priceBlock__price">$2,199</span>
</div>
<a
class="card__button"
data-qa="card-hover"
>
BUY
</a>
</div>
<div
class="card"
data-qa="card"
>
<div class="card__imgBlock">
<img
src="./images/imac.jpeg"
alt="iMac"
/>
</div>
<div class="card__title">
<span>APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A)</span>
</div>
<div class="card__productCode">
<span>Product code: 195434</span>
</div>
<div class="card__rate">
<div class="stars-4">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div>Reviews: 5</div>
</div>
<div class="priceBlock">
<span class="priceBlock__label">Price:</span>
<span class="priceBlock__price">$2,199</span>
</div>
<a
class="card__button"
data-qa="card-hover"
>
BUY
</a>
</div>
<div
class="card"
data-qa="card"
>
<div class="card__imgBlock">
<img
src="./images/imac.jpeg"
alt="iMac"
/>
</div>
<div class="card__title">
<span>APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A)</span>
</div>
<div class="card__productCode">
<span>Product code: 195434</span>
</div>
<div class="card__rate">
<div class="stars-4">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div>Reviews: 5</div>
</div>
<div class="priceBlock">
<span class="priceBlock__label">Price:</span>
<span class="priceBlock__price">$2,199</span>
</div>
<a
class="card__button"
data-qa="card-hover"
>
BUY
</a>
</div>
<div
class="card"
data-qa="card"
>
<div class="card__imgBlock">
<img
src="./images/imac.jpeg"
alt="iMac"
/>
</div>
<div class="card__title">
<span>APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A)</span>
</div>
<div class="card__productCode">
<span>Product code: 195434</span>
</div>
<div class="card__rate">
<div class="stars-4">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div>Reviews: 5</div>
</div>
<div class="priceBlock">
<span class="priceBlock__label">Price:</span>
<span class="priceBlock__price">$2,199</span>
</div>
<a
class="card__button"
data-qa="card-hover"
>
BUY
</a>
</div>
<div
class="card"
data-qa="card"
>
<div class="card__imgBlock">
<img
src="./images/imac.jpeg"
alt="iMac"
/>
</div>
<div class="card__title">
<span>APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A)</span>
</div>
<div class="card__productCode">
<span>Product code: 195434</span>
</div>
<div class="card__rate">
<div class="stars-4">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div>Reviews: 5</div>
</div>
<div class="priceBlock">
<span class="priceBlock__label">Price:</span>
<span class="priceBlock__price">$2,199</span>
</div>
<a
class="card__button"
data-qa="card-hover"
>
BUY
</a>
</div>
<div
class="card"
data-qa="card"
>
<div class="card__imgBlock">
<img
src="./images/imac.jpeg"
alt="iMac"
/>
</div>
<div class="card__title">
<span>APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A)</span>
</div>
<div class="card__productCode">
<span>Product code: 195434</span>
</div>
<div class="card__rate">
<div class="stars-4">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div>Reviews: 5</div>
</div>
<div class="priceBlock">
<span class="priceBlock__label">Price:</span>
<span class="priceBlock__price">$2,199</span>
</div>
<a
class="card__button"
data-qa="card-hover"
>
BUY
</a>
</div>
<div
class="card"
data-qa="card"
>
<div class="card__imgBlock">
<img
src="./images/imac.jpeg"
alt="iMac"
/>
</div>
<div class="card__title">
<span>APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A)</span>
</div>
<div class="card__productCode">
<span>Product code: 195434</span>
</div>
<div class="card__rate">
<div class="stars-4">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div>Reviews: 5</div>
</div>
<div class="priceBlock">
<span class="priceBlock__label">Price:</span>
<span class="priceBlock__price">$2,199</span>
</div>
<a
class="card__button"
data-qa="card-hover"
>
BUY
</a>
</div>
</main>
</body>
</html>
Loading

0 comments on commit 4bc7ea1

Please sign in to comment.