Create HTML page with catalog. Develop semantic page structure.
Use this mockup for development.
If you don't want to see other users cursors you can disable Multiplayer Cursors
in figma. Learn how
- Do not use tabs. Use 2 spaces for indentation.
- Don't use repeated styles.
- Check font styles. Use google fonts
- Pay attention to
:hover
state
- pay attention the mock is responsive. Develop the layout to fit on 1024px and 1200px the same as on the mock.
- reset browser's default margins
- use images from src/images
- use semantic tags.
<header>
,<nav>
,main
- pay attention to the shadow below header
- reuse :hover styles for nav and link inside card from previous tasks
(
header
,product-cards
) - reuse styles for nav-item with
.is-active
class applied from previous taskheader
- follow styles from the mock
- card's width is 200px without borders
- add attribute
data-qa="nav-hover"
to the 4th nav link for testing (Ноутбуки и компьютеры
) - add attribute
data-qa="card"
to the first card - add attribute
data-qa="card-hover"
to the linkКупить
inside first card
Screenshot of the catalog page:
Read the guideline before start
Result