Skip to content

cementix/layout_moyo-header

This branch is 1 commit ahead of mate-academy/layout_moyo-header:master.

Folders and files

NameName
Last commit message
Last commit date

Latest commit

17968c3 · Dec 18, 2024
Sep 10, 2024
Mar 11, 2024
Aug 1, 2022
Dec 18, 2024
Jun 22, 2021
May 24, 2020
May 24, 2020
Apr 24, 2019
Nov 20, 2023
Feb 22, 2024
Feb 21, 2024
Feb 21, 2024
May 24, 2020
Nov 20, 2023
Apr 24, 2019
May 24, 2020
Jun 10, 2024
Jul 21, 2024
Jul 21, 2024
Dec 18, 2024

Repository files navigation

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

About

No description, website, or topics provided.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 88.6%
  • HTML 10.9%
  • CSS 0.5%