Skip to content

kripikripi/layout_stars

This branch is 2 commits ahead of mate-academy/layout_stars:master.

Folders and files

NameName
Last commit message
Last commit date

Latest commit

c76e96f · Oct 19, 2024

History

84 Commits
Oct 12, 2024
Nov 6, 2019
Oct 19, 2024
Nov 11, 2023
May 24, 2020
May 24, 2020
Nov 5, 2019
Nov 11, 2023
Feb 22, 2024
Feb 22, 2024
Feb 22, 2024
May 24, 2020
Nov 11, 2023
Nov 5, 2019
May 24, 2020
Oct 12, 2023
Oct 12, 2024
Oct 12, 2024
Oct 6, 2024

Repository files navigation

Stars block

Implement the Stars Block used in a card and catalog.

Hold Alt key (Option on MacOS) to measure distances in Figma.

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

  • HTML 46.1%
  • JavaScript 34.2%
  • CSS 19.7%