add style.css file

[quinta-blip]

No description provided.

[zzoysanna]

You made a solid attempt: the project uses semantic HTML elements (header, nav, main, section, article, footer) and includes many of the required CSS text styles. However, there are several syntax errors and missing criteria in the CSS, and some structural/semantic issues in the HTML that need to be corrected.

Positive Aspects

• Good use of semantic elements: header, nav, main, section, article, aside, figure, figcaption, blockquote, footer (especially in blog.html).
• CSS includes key text properties such as font-size, font-weight, line-height, letter-spacing, and list-style.
• Buttons are styled with background color, text color, and display: inline-block.

Mandatory Fixes

• Styles and fonts are applied only to index.html but should be applied across all pages.
• Broken markup in index.html header: < class="page-header__logo"img src="logo.png" alt="binaboxLogo"> → Should be a valid tag with class.
• Missing = in class attributes, for example: <ul class"header-navigation__list">, <li class"navigation__item">, <a href="#" class__"button--action">Read more</a>
• Invalid CSS properties: h1 { font color: white; } , h2 { font color: white; }
• Missing color value in CSS: h1 { color: ; }
• Missing required criteria: opacity, border/border-radius, text-align.
• Font-family requirement not met: Poppins, Arial, sans-serif should be used, but only "Bakbak One", sans-serif is applied.
• List hierarchy issues in index.html About Us section: headings (h3) are inside <li>, but the related <p> text is outside. All related content should be wrapped inside the same <li>.
• Colors should be defined with hex, rgb, or rgba, not text names like white or blue, for consistency and precision.
• Ensure consistent class naming (card__title, card-catalog__title, card__label) and avoid typos like lable.
• Wrap all blog cards inside semantic <article> elements instead of generic <div>.

You have 3 attempts left

[zzoysanna]

Mandatory Fixes

• Styles and fonts are applied only to index.html but should be applied across all pages.
• Broken markup in index.html header: < class="page-header__logo"img src="logo.png" alt="binaboxLogo"> → Should be a valid tag with class.
• Missing = in class attributes, for example: <ul class"header-navigation__list">, <li class"navigation__item">, <a href="#" class__"button--action">Read more</a>
• List hierarchy issues in index.html About Us section: headings (h3) are inside <li>, but the related <p> text is outside. All related content should be wrapped inside the same <li>.
• Colors should be defined with hex, rgb, or rgba, not text names like white or blue, for consistency and precision.
• Ensure consistent class naming (card__title, card-catalog__title, card__label) and avoid typos like lable.
• Wrap all blog cards inside semantic <article> elements instead of generic <div>.

CSS

• Invalid font-family declarations with missed commas and quotes: font-family: Arial Bakbak one, sans-serif; should be font-family: "Bakbak One", Arial, sans-serif;. Keep font-family stacks consistent: always list custom font → safe fallback → generic (Poppins, Arial, sans-serif).
• Invalid font-weight values: font-weight must be a number (400, 500, 700) or keyword (bold), not px.
• Invalid/incorrect color values: color: #ddd OD 7FB (typo, invalid hex), border: 1px solid #ddd OD 7FB (invalid hex), color: f8f7ff (missing #).
• Letter-spacing issue: letter-spacing: opx (typo, should be 0px)
• body is defined three times, repeating the same properties. This should be consolidated into one rule.
• Missing required criteria: opacity is not used anywhere.

You have 2 attempts left

[zzoysanna]

Great progress — most of the big problems (broken markup, missing =, list hierarchy, missing <article> wrappers, inconsistent class names) are already resolved. The code is much cleaner and closer to production-ready. However, a few mandatory fixes still remain before the work can be considered complete:

• Invalid/mis-nested tags — there are leftover closing tags in blog.html (extra </section> in footer) and structural issues in index.html (duplicate <section class="catalog">, blog grid incorrectly wrapped in <article>). These break semantic flow and need correction.
• Header/footer consistency — the markup for header and footer differs between index.html and blog.html. Both pages should share the same semantic structure to ensure maintainability.
• Incorrect semantic wrappers — blog__grid should not be an <article> since it contains multiple articles.
• Build artifacts in branch — extra files related to the build have been committed, but they belong in the next task. They should be removed from this branch to keep the repository clean.

You have 1 attempt left

[zzoysanna]

Mandatory Fixes

• Styles and fonts are applied only to index.html but should be applied across all pages.

• Broken markup in index.html header: < class="page-header__logo"img src="logo.png" alt="binaboxLogo"> → Should be a valid tag with class.

• Missing = in class attributes, for example: <ul class"header-navigation__list">, <li class"navigation__item">, <a href="#" class__"button--action">Read more</a>

• List hierarchy issues in index.html About Us section: headings (h3) are inside <li>, but the related <p> text is outside. All related content should be wrapped inside the same <li>.

• Colors should be defined with hex, rgb, or rgba, not text names like white or blue, for consistency and precision.

• Ensure consistent class naming (card__title, card-catalog__title, card__label) and avoid typos like lable.

• Wrap all blog cards inside semantic <article> elements instead of generic <div>.

• Invalid/typo values:

• border: solsolid rgba(255, 255, 255, 0.2); (typo in .page-header__btn--login)
• border: 1px solid #ddd OD 7FB; → invalid hex
• letter-spacing: opx; → typo, should be 0px.
• color: f8f7ff; missing #

• Inconsistency in font stacks: some declarations like font-family: "Poppins" Aril, sans sans-serif; are invalid (typos: “Aril”, “sans sans-serif”).
• Redundancy / duplication: Body styles are still redefined (e.g. at the bottom for blog page). This should be merged into one consistent block.

You have 0 attempts left