Skip to content

Latest commit

 

History

History
41 lines (32 loc) · 2.42 KB

readme.md

File metadata and controls

41 lines (32 loc) · 2.42 KB

Moyo header

Create HTML page with the header using flexbox based on the Figma Mockup.

The page should match the design Pixel Perfect: all the sizes, colors and distanced MUST be the same as on the design.

Here are the Layout Tasks Instructions

Requirements:

  • reset browser default margins.
  • use Roboto font.
  • use semantic tags: <header>, <img>, <nav>, <ul>, <li> and <a>.
  • the header should stretch the full page width (don't use horizontal margin).
  • the height should be set for nav links (not the header), take it from the design.
  • header content should be vertically centered.
  • Logo should also be a link with an image inside (from src/images). But it should not be a part of the <nav>.
  • ❗️ the blue link with a line below should have a class is-active in addition to any other classes you add.
  • ❗️ add data-qa="hover" attribute to the 4th link for testing (Laptops & computers)
  • link color should be changed on :hover
  • Use the ::after and position it relative to a link with is-active class
  • Don't use flex gap property for indents. It's not supported in tests, use margin instead.
  • There should not be margins before the first and after the last list items
  • Don't just copy all styles from Figma. Think, which of them are relevant. Uneven sizes (e.g. line-height: 14.6px) are definitely useless.
  • Nav Links should not have any padding, but have text centered

Checklist

❗️ 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.

  • Header height is set in 1 place (for the links)
  • Content is vertically centered (for any header height)
  • CSS is used to show all letters in Uppercase (don't type them in HTML)
  • Logo is an image wrapped with a link
  • CSS Variable is used for a blue color
  • Pseudo-element is used for a blue line below the active link
  • Code follows all the Code Style Rules ❗️