From 15d0dd5093e40798be07291ba45446e16bcd30be Mon Sep 17 00:00:00 2001 From: Sergii Nosachenko <54940595+sergii-nosachenko@users.noreply.github.com> Date: Tue, 5 Nov 2024 13:14:12 +0200 Subject: [PATCH] Update readme.md --- readme.md | 23 ++++++++++++----------- 1 file changed, 12 insertions(+), 11 deletions(-) diff --git a/readme.md b/readme.md index cf0977c416..874ca70d97 100644 --- a/readme.md +++ b/readme.md @@ -1,23 +1,23 @@ # Frontend practice with catalog page -Create HTML page with catalog. Develop semantic page structure as shown on [the mockup](https://www.figma.com/file/ojkArVazq7vsX0nbpn9CxZ/Moyo-%2F-Catalog-(ENG)?node-id=32249%3A354). +Create an HTML page with a catalog. Develop semantic page structure as shown on [the mockup](https://www.figma.com/file/ojkArVazq7vsX0nbpn9CxZ/Moyo-%2F-Catalog-(ENG)?node-id=32249%3A354). - use `Header`, `Stars` and `Card` blocks from previous tasks but rewrite them using BEM and SCSS - remove old `data-qa` attributes - add `data-qa="nav-hover"` (not just `hover`) to the 4th nav link for testing (`Laptops & computers`) - add `data-qa="card"` to the first card - add `data-qa="card-hover"` (not just `hover`) to the link `Buy` inside the first card -- nav links color is not `black` any more (nav links should have `#060b35` color) -- add class `is-active` to the first link (`Apple`) in navigation +- 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 `
` tag for cards container -- use grid for cards with different number of columns: +- use the grid for cards with different numbers of columns: - 1 for the smaller screens - 2 starting at `488px` - 3 starting from `768px` - 4 starting from `1024px` - cards have fixed width - `200px` -- gap between cards should be - `46px` horyzontally and `48px` vertically -- cards container(catalog) have fixed paddings (`50px` vertically and `40px` horyzontally) +- the gap between cards should be - `46px` horizontally and `48px` vertically +- cards container(catalog) have fixed paddings (`50px` vertically and `40px` horizontally) Make all the changes smooth on hover (during 300ms): - increase the card by 20 percent (neighboring cards **should not be** affected) @@ -27,19 +27,20 @@ Make all the changes smooth on hover (during 300ms): > Here are the [Layout Tasks Instructions](https://mate-academy.github.io/layout_task-guideline) -*Note*: In this task, you can directly link `*.scss` files in HTML `` tags. This is possible because [we use the Parcel library](https://en.parceljs.org/scss.html) to bundle the source code. +*Important note*: In this task, you are allowed to link `*.scss` files directly in HTML `` tags using `href` attribute. +This is possible because [we use the Parcel library](https://en.parceljs.org/scss.html) to bundle your solution's source code. ## Checklist -❗️ Replace `` with your Github username and copy the links to `Pull Request` description: +❗️ Replace `` with your GitHub username and copy the links to the `Pull Request` description: - [DEMO LINK](https://.github.io/layout_catalog/) - [TEST REPORT LINK](https://.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 component follow BEM and use SCSS -- [ ] repaeted sizes and special colors are put to variables +- [ ] 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 +- [ ] 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)