Create HTML page with catalog. Develop semantic page structure as shown on the mockup.
- use
Header,StarsandCardblocks from previous tasks but rewrite them using BEM and SCSS - remove old
data-qaattributes - 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 linkBuyinside the first card - nav links color is not
blackany more (nav links should have#060b35color) - add class
is-activeto the first link (Apple) in navigation - use
<main>tag for cards container - use grid for cards with different number of columns:
- 1 for the smaller screens
- 2 starting at
488px - 3 starting from
768px - 4 starting from
1024px
- cards have fixed width -
200px - gap between cards should be -
46pxhoryzontally and48pxvertically - cards container(catalog) have fixed paddings (
50pxvertically and40pxhoryzontally)
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
#34568bwhen the card is hovered (.card:hover .card__title) - change navigation link text color to
#00acdc - change the button background to
#fffand text color to#00acdcon hover
Here are the Layout Tasks Instructions
In this task, you can directly link *.scss files to HTML. This is possible because we use the Parcel library to bundle the source code.
❗️ 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
:hoverare smooth - Code follows all the Code Style Rules ❗️