Skip to content

Commit

Permalink
add task solution
Browse files Browse the repository at this point in the history
  • Loading branch information
@IvanIlnytskyy
IvanIlnytskyy committed Dec 30, 2024
1 parent 56dc17c commit 8e8723c
Show file tree
Hide file tree
Showing 6 changed files with 618 additions and 1 deletion.
391 changes: 390 additions & 1 deletion src/index.html
View file
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>
<a
href="#"
class="nav__link"
>
Video
</a>
</li>
</ul>
</nav>
</header>

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

<main class="catalog">
<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="card-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">
<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>
</main>
<!--#endregion product-cards-->
</body>
</html>
Loading

0 comments on commit 8e8723c

Please sign in to comment.