Skip to content

Maksym-Atanasov/layout_stars

This branch is 12 commits behind mate-academy/layout_stars:master.

Folders and files

NameName
Last commit message
Last commit date

Latest commit

d5f61aa · Nov 29, 2023

History

70 Commits
Nov 20, 2023
Nov 6, 2019
Nov 20, 2023
Nov 11, 2023
May 24, 2020
May 24, 2020
Nov 5, 2019
Nov 11, 2023
Jun 8, 2023
May 24, 2020
Nov 11, 2023
Nov 5, 2019
May 24, 2020
Oct 12, 2023
Nov 20, 2023
Nov 29, 2023
Oct 31, 2023

Repository files navigation

Stars block

Implement the Stars Block used in a card and catalog. Follow

Here are the Layout Tasks Instructions

Requirements:

  • Reset browser's default margin
  • Add 6 stars blocks with 5 stars__star elements each.
  • Add stars--0, stars--1, stars--2 ... stars--5 modifiers to the blocks one per each
  • Don't add any other classes to the elements.
  • The block with stars--N modifier should have exactly N first stars active.
  • use background-image for stars (see images folder). Don't use <img> or <svg> tags.
  • The star size and the distance should be taken from Figma
  • Use display: flex for the stars block to avoid an issue with extra spaces between individual stars
  • Don't add vertical margins between blocks.
  • DON'T use gap property for flex container because it does not work in tests

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.

  • Yellow stars are added with container modifier + pseudo-selector (NO extra classes)
  • Each BEM block has its own separate file
  • All Typical Mistakes from BEM lesson theory are checked.
  • 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 78.5%
  • HTML 20.2%
  • CSS 1.3%