refactor: creates modifiers for intro block

[MarPostovik]

Description

In our project, we have three pages, all of which have an intro block. But they have some differences such as padding and max-width. I created modifiers for block intro and for its element intro__title to list those changes in separate files.

Task Link

Link to Figma

Changes Made

• Created modifiers for intro and intro__title (Listed below in usage)
• Placed in the files for those modifiers styles that are specific for every page
• Removed styles that are only needed for page index.html, from the intro.css. (These styles now are in intro_page_index.css).
• Removed styles that are only needed for form.html from intro__title.css. (Now these styles are in intro__title_page_form.css)
• Added classes with new modifiers on pages index.html and form.html.
• Updated index.css and form.css with imports for new modifiers.

Usage

Here is a quick instruction on how to use the modifiers.

Modifiers for block intro:

• intro_page_index
• intro_page_form
• intro_page_catalog

They should be used along with the class intro where common styles for all intro blocks are placed.

Modifiers for element intro__title:

• intro__title_page_form
• intro__title_page_catalog

They should be used along with the class intro__title.

Example:

<div class="intro intro_page_form">
        <h1 class="intro__title intro__title_page_form">Your title</h1>
 </div>

I've already added those modifiers on pages index.html and form.html but you may need this information for page catalog.html

Checklist

• [X] I've validated my HTML with Nu Html Checker, and it outputs no errors
• [X] I've checked my HTML with HTML Tree Generator, and it outputs no errors
• I've ensured that the layout matches the mockup for the following control points:
  • [X] 1200px
  • [X] 660px
  • [X] 320px