Skip to content

Commit

Permalink
add task solution
Browse files Browse the repository at this point in the history
  • Loading branch information
@rberkunova
rberkunova committed Apr 9, 2024
1 parent 014d3b3 commit eca1232
Show file tree
Hide file tree
Showing 9 changed files with 580 additions and 8 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 @@ -30,8 +30,8 @@ Make all the changes smooth on hover (during 300ms):
## 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://rberkunova.github.io/layout_catalog/)
- [TEST REPORT LINK](https://rberkunova.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
341 changes: 339 additions & 2 deletions src/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,344 @@
/>
</head>

<body>
<h1>Catalog</h1>
<body class="page">
<header class="header">
<a class="header__logo_link">
<img
src="/src/images/logo.png"
alt="logo"
class="logo"
/>
</a>
<nav class="header__nav">
<ul class="header__nav_list">
<li class="header__nav_item">
<a class="header__nav_link is-active">Apple</a>
</li>

<li class="header__nav_item">
<a class="header__nav_link">Samsung</a>
</li>

<li class="header__nav_item">
<a class="header__nav_link">Smartphones</a>
</li>

<li class="header__nav_item">
<a
class="header__nav_link"
data-qa="nav-hover"
>
Laptops & Computers
</a>
</li>

<li class="header__nav_item">
<a class="header__nav_link">Gadgets</a>
</li>

<li class="header__nav_item">
<a class="header__nav_link">Tablets</a>
</li>

<li class="header__nav_item">
<a class="header__nav_link">Photo</a>
</li>

<li class="header__nav_item">
<a class="header__nav_link">Video</a>
</li>
</ul>
</nav>
</header>
<main class="container">
<div
class="card"
data-qa="card"
>
<img
src="images/imac.jpeg"
alt="iMac A1419"
class="card__image"
/>

<h1 class="card__title">
APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A)
</h1>
<h3 class="card__code">Product code: 195434</h3>
<div class="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>
<h3 class="reviews__count">Reviews: 5</h3>
</div>
<div class="price">
<h3 class="price__text">Price:</h3>
<h1 class="price__price">$2,199</h1>
</div>
<a
class="card__to-buy"
data-qa="card-hover"
>
Buy
</a>
</div>

<div
class="card"
data-qa="card"
>
<img
src="images/imac.jpeg"
alt="iMac A1419"
class="card__image"
/>

<h1 class="card__title">
APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A)
</h1>
<h3 class="card__code">Product code: 195434</h3>
<div class="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>
<h3 class="reviews__count">Reviews: 5</h3>
</div>
<div class="price">
<h3 class="price__text">Price:</h3>
<h1 class="price__price">$2,199</h1>
</div>
<a
class="card__to-buy"
data-qa="hover"
>
Buy
</a>
</div>

<div
class="card"
data-qa="card"
>
<img
src="images/imac.jpeg"
alt="iMac A1419"
class="card__image"
/>

<h1 class="card__title">
APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A)
</h1>
<h3 class="card__code">Product code: 195434</h3>
<div class="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>
<h3 class="reviews__count">Reviews: 5</h3>
</div>
<div class="price">
<h3 class="price__text">Price:</h3>
<h1 class="price__price">$2,199</h1>
</div>
<a
class="card__to-buy"
data-qa="hover"
>
Buy
</a>
</div>

<div
class="card"
data-qa="card"
>
<img
src="images/imac.jpeg"
alt="iMac A1419"
class="card__image"
/>

<h1 class="card__title">
APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A)
</h1>
<h3 class="card__code">Product code: 195434</h3>
<div class="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>
<h3 class="reviews__count">Reviews: 5</h3>
</div>
<div class="price">
<h3 class="price__text">Price:</h3>
<h1 class="price__price">$2,199</h1>
</div>
<a
class="card__to-buy"
data-qa="hover"
>
Buy
</a>
</div>

<div
class="card"
data-qa="card"
>
<img
src="images/imac.jpeg"
alt="iMac A1419"
class="card__image"
/>

<h1 class="card__title">
APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A)
</h1>
<h3 class="card__code">Product code: 195434</h3>
<div class="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>
<h3 class="reviews__count">Reviews: 5</h3>
</div>
<div class="price">
<h3 class="price__text">Price:</h3>
<h1 class="price__price">$2,199</h1>
</div>
<a
class="card__to-buy"
data-qa="hover"
>
Buy
</a>
</div>

<div
class="card"
data-qa="card"
>
<img
src="images/imac.jpeg"
alt="iMac A1419"
class="card__image"
/>

<h1 class="card__title">
APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A)
</h1>
<h3 class="card__code">Product code: 195434</h3>
<div class="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>
<h3 class="reviews__count">Reviews: 5</h3>
</div>
<div class="price">
<h3 class="price__text">Price:</h3>
<h1 class="price__price">$2,199</h1>
</div>
<a
class="card__to-buy"
data-qa="hover"
>
Buy
</a>
</div>

<div
class="card"
data-qa="card"
>
<img
src="images/imac.jpeg"
alt="iMac A1419"
class="card__image"
/>

<h1 class="card__title">
APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A)
</h1>
<h3 class="card__code">Product code: 195434</h3>
<div class="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>
<h3 class="reviews__count">Reviews: 5</h3>
</div>
<div class="price">
<h3 class="price__text">Price:</h3>
<h1 class="price__price">$2,199</h1>
</div>
<a
class="card__to-buy"
data-qa="hover"
>
Buy
</a>
</div>

<div
class="card"
data-qa="card"
>
<img
src="images/imac.jpeg"
alt="iMac A1419"
class="card__image"
/>

<h1 class="card__title">
APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A)
</h1>
<h3 class="card__code">Product code: 195434</h3>
<div class="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>
<h3 class="reviews__count">Reviews: 5</h3>
</div>
<div class="price">
<h3 class="price__text">Price:</h3>
<h1 class="price__price">$2,199</h1>
</div>
<a
class="card__to-buy"
data-qa="hover"
>
Buy
</a>
</div>
</main>
</body>
</html>
Loading

0 comments on commit eca1232

Please sign in to comment.