Create HTML page with catalog. Develop semantic page structure as shown on the mockup.
- use
Header
,Stars
andCard
blocks from previous tasks but rewrite them using BEM and SCSS - remove old
data-qa
attributes - add
data-qa="nav-hover"
(not justhover
) to the 4th nav link for testing (Laptops & computers
) - add
data-qa="card"
to the first card - add
data-qa="card-hover"
(not justhover
) to the linkBuy
inside the first card - Nav links color is not
black
any more - add class
is-active
to the first link (Apple
) in navigation - use
<main>
for cards container - Use grid for cards with different number of columns:
- 4 starting from
1024px
- 3 starting from
768px
- 2 starting at
488px
- 1 for the smaller screens
- 4 starting from
- cards have fixed width and gap between them (
46px
vertically and48px
horyzontally) - cards container have fixed paddings (
50px
vertically and40px
horyzontally) - By default nav links should be
#060b35
Make all the changes smooth on hover (during 300ms):
- increase the card by 20 percent (neighboring cards should not be affected)
- change the card title text color to
#34568b
when the card is hovered (.card:hover .card__title
) - change navigation link text color to
#00acdc
- change the button background to
#fff
and text color to#00acdc
on hover
Here are the Layout Tasks Instructions
❗️ Replace <your_account>
with your Github username and copy the links to Pull Request
description:
❗️ Copy this Checklist
to the Pull Request
description after links, and put - [x]
before each point after you checked it.
- All component follow BEM and use SCSS
- repaeted 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 ❗️