Skip to content

Commit

Permalink
add task solution
Browse files Browse the repository at this point in the history
  • Loading branch information
kondratiukD committed Jan 12, 2025
1 parent b2e1549 commit af4d52f
Show file tree
Hide file tree
Showing 2 changed files with 10 additions and 12 deletions.
18 changes: 9 additions & 9 deletions readme.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ Create an HTML page with a catalog. Develop semantic page structure as shown on
- add `data-qa="card-hover"` (not just `hover`) to the link `Buy` inside the first card
- nav links color is not `black` anymore (nav links should have `#060b35` color)
- add the class `is-active` to the first link (`Apple`) in the navigation
- use `<main>` tag for cards container
- use `<main>` tag for cards container
- use the grid for cards with different numbers of columns:
- 1 for the smaller screens
- 2 starting at `488px`
Expand All @@ -33,14 +33,14 @@ This is possible because [we use the Parcel library](https://en.parceljs.org/scs
## Checklist

❗️ Replace `<your_account>` with your GitHub username and copy the links to the `Pull Request` description:
- [DEMO LINK](https://<your_account>.github.io/layout_catalog/)
- [TEST REPORT LINK](https://<your_account>.github.io/layout_catalog/report/html_report/)
- [DEMO LINK](https://kondratiukD.github.io/layout_catalog/)
- [TEST REPORT LINK](https://kondratiukD.github.io/layout_catalog/report/html_report/)

❗️ Copy this `Checklist` to the `Pull Request` description after links, and put `- [x]` before each point after you checked it.

- [ ] All components follow BEM and use SCSS
- [ ] Repeated sizes and special colors are put to variables
- [ ] Grid is used for the columns
- [ ] Cards are shown in 1, 2, 3, or 4 columns based on screen resolution
- [ ] All changes on `:hover` are smooth
- [ ] Code follows all the [Code Style Rules ❗️](https://mate-academy.github.io/layout_task-guideline/html-css-code-style-rules)
- [x] All components follow BEM and use SCSS
- [x] Repeated sizes and special colors are put to variables
- [x] Grid is used for the columns
- [x] Cards are shown in 1, 2, 3, or 4 columns based on screen resolution
- [x] All changes on `:hover` are smooth
- [x] Code follows all the [Code Style Rules ❗️](https://mate-academy.github.io/layout_task-guideline/html-css-code-style-rules)
4 changes: 1 addition & 3 deletions src/styles/blocks/catalog.scss
Original file line number Diff line number Diff line change
@@ -1,9 +1,7 @@
.catalog {
display: grid;
box-sizing: border-box;
box-sizing: inherit;
height: 862px;
gap: 49px 47px;
gap: 46px 48px;
padding: 50px 40px;
justify-content: center;
grid-template-columns: repeat(1, 200px);
Expand Down

0 comments on commit af4d52f

Please sign in to comment.