Skip to content

Develop #4475

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
krlosa wants to merge 4 commits into
base: master
Choose a base branch
from
Open

Develop #4475

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
9aefd2e
add task solution
Jun 24, 2026
bdffe17
add task solution
Jun 24, 2026
7a012ff
add task solution
Jun 25, 2026
38d3d3b
add task solution
Jun 25, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
89 changes: 2 additions & 87 deletions src/App.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,98 +9,13 @@ iframe {
html {
font-size: 10pt;
line-height: 1.4;
/* stylelint-disable-next-line order/properties-order */
font-weight: 400;
/* stylelint-disable-next-line order/properties-order */
font-family: "Source Sans Pro", "Open Sans", Roboto, Arial, sans-serif;
}

body {
margin: 0;
background: #eee;
}

.welcome {
height: 100vh;
background: coral;
}

.welcome__text {
margin: 0;
font-size: 400%;
text-align: center;
line-height: 1;
padding-top: calc(50vh - 20pt);
display: block;
font-weight: 700;
}

.header {
width: 100%;
padding: 1em;
font-size: 140%;
position: sticky;
top: 0;
left: 0;
right: 0;
transition: opacity 0.2s ease-in-out;
text-align: center;
}

.header__title {
font-weight: 600;
display: inline;
margin: 0;
padding: 0;
font-size: inherit;
}

.navigation__link {
display: inline-block;
outline: none;
text-decoration: none;
opacity: 0.7;
padding: 0 0.5em;
color: black;
transition: opacity 0.2s ease-in-out;
}

.navigation__link:hover,
.navigation__link:focus {
opacity: 1;
}

.article {
margin: 5em auto 0;
padding: 1em;
font-size: 140%;
max-width: 800px;
background: white;
box-shadow: rgba(0, 0, 0, 0.05) 0 3px 15px;
}

.article__paragraph {
margin: 0;
color: #333;
}

.article__paragraph:not(:first-child) {
margin-top: 0.7em;
}

@media (min-width: 500px) {
.header {
text-align: left;
display: flex;
justify-content: space-between;
}

.article {
margin: 3.5em auto 0;
padding: 2em;
}
}

@media (min-width: 800px) {
.article {
margin: 3.5em auto;
}
}
82 changes: 6 additions & 76 deletions src/App.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,86 +1,16 @@
import React from 'react';
import './App.css';
import Welcome from './components/Welcome/Welcome';
import Header from './components/Header/Header';
import Article from './components/Article/Article';
// Move each BEM block to a separate component (file) and import them here

function App() {
return (
<main className="app">
<section className="welcome">
<span className="welcome__text">Sticky Header!</span>
</section>
<header className="header">
<h1 className="header__title">Site Name</h1>
<nav className="navigation">
<a className="navigation__link" href="#about">
About
</a>
<a className="navigation__link" href="#services">
Services
</a>
<a className="navigation__link" href="#contact">
Contact
</a>
</nav>
</header>
<article className="article">
<h2 className="article__title">Headline</h2>
<p className="article__paragraph">
In elementum lorem eget est euismod ornare. Phasellus sit amet
pellentesque mauris. Aliquam quis malesuada ex. Nullam eu aliquam
nibh. Mauris molestie, urna accumsan ornare semper, augue nibh posuere
lorem, vitae feugiat sem magna eget massa. Vivamus quis tincidunt
dolor. Fusce efficitur, orci non vestibulum consequat, lectus turpis
bibendum odio, in efficitur leo felis sed justo. Fusce commodo iaculis
orci, quis imperdiet urna. Sed mollis facilisis lacus non condimentum.
Nunc efficitur massa non neque elementum semper. Vestibulum lorem
arcu, tincidunt in quam et, feugiat venenatis augue. Donec sed
tincidunt tellus, a facilisis magna. Proin sit amet viverra nibh,
bibendum gravida felis. Vivamus ut nunc id mauris posuere
pellentesque. Praesent tincidunt id odio id feugiat.
</p>
<p className="article__paragraph">
In ac nisi lacus. Fusce est dolor, tincidunt ut bibendum vitae,
fermentum ac quam. Aliquam pretium tristique nibh quis iaculis. In et
cursus ex, eu aliquet ex. Proin facilisis lacus sit amet sapien
ultrices, ut vehicula arcu lobortis. Vivamus mollis ipsum ut hendrerit
molestie. Morbi lacinia, sapien eu dictum dignissim, tellus tortor
congue magna, sit amet bibendum libero nisi id massa.
</p>
<p className="article__paragraph">
Donec arcu elit, euismod vel lobortis eu, fringilla sit amet dolor.
Cras congue, massa nec sagittis mollis, dui felis ultrices magna,
tincidunt finibus lorem quam in sem. Morbi odio turpis, pulvinar sit
amet vulputate quis, ultricies eu libero. Donec ac maximus neque, nec
maximus nibh. Morbi rhoncus convallis urna, accumsan porta lorem
hendrerit in. Cras eget nisl dui. Morbi faucibus nisi eget ipsum
semper vulputate. Mauris nec tincidunt lectus. Aenean ac mi consequat
velit dignissim consectetur. Fusce placerat ac ipsum ac eleifend.
Aenean quis faucibus ex.
</p>
<p className="article__paragraph">
Cras egestas tempor nibh, a fermentum lorem sollicitudin non. Nulla
facilisi. In at elit id leo tristique condimentum. Donec at est nulla.
Mauris egestas magna ut laoreet pretium. Sed ultrices suscipit
vestibulum. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Fusce id sapien eros. Vivamus viverra ultricies gravida. Nam urna
nibh, blandit a vulputate at, vehicula non nulla. Aenean ut nulla leo.
Praesent in ullamcorper est.
</p>
<p className="article__paragraph">
Pellentesque habitant morbi tristique senectus et netus et malesuada
fames ac turpis egestas. Phasellus bibendum nec arcu eu lobortis. Nam
convallis faucibus ante sed porta. Nullam ut convallis elit, quis
venenatis nunc. Curabitur sed sem eget velit condimentum rutrum in et
orci. Nunc non suscipit eros. Suspendisse porta sem vel justo commodo
dictum. Aliquam erat ligula, fringilla nec suscipit sed, porta vitae
turpis. Vestibulum rhoncus placerat nulla vitae suscipit. Curabitur
consectetur ex ut odio tristique vehicula. Ut ligula tortor, tincidunt
quis sodales vitae, ornare a turpis. Proin sit amet finibus enim.
Fusce tempus a neque vitae tempor. Aenean rutrum, libero iaculis
interdum vulputate, dui eros vehicula nisi, at interdum enim lacus eu
diam.
</p>
</article>
<Welcome />
<Header />
<Article />
</main>
);
}
Expand Down
39 changes: 39 additions & 0 deletions src/components/Article/Article.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,40 @@
/* Put article styles here */
.article {
margin: 5em auto 0;
padding: 1em;
/* stylelint-disable-next-line order/properties-order */
font-size: 140%;
/* stylelint-disable-next-line order/properties-order */
max-width: 800px;
/* stylelint-disable-next-line order/properties-order */
background: white;
box-shadow: rgba(0, 0, 0, 0.05) 0 3px 15px;
}

.article__title {
margin: 0;
font-size: 1.5em;
color: #333;
}

.article__paragraph {
margin: 0;
color: #333;
}

.article__paragraph:not(:first-child) {
margin-top: 0.7em;
}

@media (min-width: 500px) {
.article {
margin: 3.5em auto 0;
padding: 2em;
}
}

@media (min-width: 800px) {
.article {
margin: 3.5em auto;
}
}

@mateacademy-ai-mentor mateacademy-ai-mentor Jun 25, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This file is missing a .article__title rule, even though Article.jsx uses className="article__title"; this violates the requirement to "Complete styles for existing class names" by adding .article__title with appropriate typography.

67 changes: 67 additions & 0 deletions src/components/Article/Article.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,3 +3,70 @@
// Create an Article function returning the HTML of article block

// Add a default export statement for Article component to use it in the other files
import './Article.css';

function Article() {
return (
<article className="article">
<h2 className="article__title">Headline</h2>
<p className="article__paragraph">
In elementum lorem eget est euismod ornare. Phasellus sit amet
pellentesque mauris. Aliquam quis malesuada ex. Nullam eu aliquam nibh.
nibh. Mauris molestie, urna accumsan ornare semper, augue nibh posuere
lorem, vitae feugiat sem magna eget massa. Vivamus quis tincidunt
efficitur, orci non vestibulum consequat, lectus turpis bibendum odio,
odio, in efficitur leo felis sed justo. Fusce commodo iaculis orci, quis
imperdiet urna. Sed mollis facilisis lacus non condimentum. Nunc
efficitur massa non neque elementum semper. Vestibulum lorem arcu,
tincidunt in quam et, feugiat venenatis augue. Donec sed tincidunt
tellus, a facilisis magna. Proin sit amet viverra nibh, bibendum gravida
felis. Vivamus ut nunc id mauris posuere pellentesque. Praesent
tincidunt id odio id feugiat.
</p>
<p className="article__paragraph">
In ac nisi lacus. Fusce est dolor, tincidunt ut bibendum vitae,
fermentum ac quam. Aliquam pretium tristique nibh quis iaculis. In et
cursus ex, eu aliquet ex. Proin facilisis lacus sit amet sapien
ultrices, ut vehicula arcu lobortis. Vivamus mollis ipsum ut hendrerit
molestie. Morbi lacinia, sapien eu dictum dignissim, tellus tortor
congue magna, sit amet bibendum libero nisi id massa.
</p>
<p className="article__paragraph">

@mateacademy-ai-mentor mateacademy-ai-mentor Jun 24, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The media query block ends with }; which is invalid in plain CSS. According to the task, styles should be correctly split per component, so you should close this block with just } (without the semicolon) to avoid CSS parse errors.

Donec arcu elit, euismod vel lobortis eu, fringilla sit amet dolor. Cras
Cras congue, massa nec sagittis mollis, dui felis ultrices magna,
tincidunt finibus lorem quam in sem. Morbi odio turpis, pulvinar sit
amet vulputate quis, ultricies eu libero. Donec ac maximus neque, nec
maximus nibh. Morbi rhoncus convallis urna, accumsan porta lorem
hendrerit in. Cras eget nisl dui. Morbi faucibus nisi eget ipsum
vulputate. Mauris nec tincidunt lectus. Aenean ac mi consequat velit
velit dignissim consectetur. Fusce placerat ac ipsum ac eleifend.
faucibus ex.
</p>
<p className="article__paragraph">
Cras egestas tempor nibh, a fermentum lorem sollicitudin non. Nulla
facilisi. In at elit id leo tristique condimentum. Donec at est nulla.
Mauris egestas magna ut laoreet pretium. Sed ultrices suscipit
vestibulum. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Fusce id sapien eros. Vivamus viverra ultricies gravida. Nam urna nibh,
nibh, blandit a vulputate at, vehicula non nulla. Aenean ut nulla leo.
Praesent in ullamcorper est.
</p>
<p className="article__paragraph">
Pellentesque habitant morbi tristique senectus et netus et malesuada
fames ac turpis egestas. Phasellus bibendum nec arcu eu lobortis. Nam
convallis faucibus ante sed porta. Nullam ut convallis elit, quis
venenatis nunc. Curabitur sed sem eget velit condimentum rutrum in et
orci. Nunc non suscipit eros. Suspendisse porta sem vel justo commodo
dictum. Aliquam erat ligula, fringilla nec suscipit sed, porta vitae
turpis. Vestibulum rhoncus placerat nulla vitae suscipit. Curabitur
consectetur ex ut odio tristique vehicula. Ut ligula tortor, tincidunt
quis sodales vitae, ornare a turpis. Proin sit amet finibus enim. Fusce
Fusce tempus a neque vitae tempor. Aenean rutrum, libero iaculis
interdum vulputate, dui eros vehicula nisi, at interdum enim lacus eu
diam.
</p>
</article>
);
}

export default Article;
38 changes: 38 additions & 0 deletions src/components/Header/Header.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,39 @@
/* Put header styles here */
.header {
width: 100%;
padding: 1em;
/* stylelint-disable-next-line order/properties-order */
font-size: 140%;
/* stylelint-disable-next-line order/properties-order */
position: sticky;
top: 0;
left: 0;
/* stylelint-disable-next-line order/properties-order */
right: 0;
/* stylelint-disable-next-line order/properties-order */
transition: opacity 0.2s ease-in-out;
/* stylelint-disable-next-line order/properties-order */
text-align: center;
}

.header__title {
font-weight: 600;

@mateacademy-ai-mentor mateacademy-ai-mentor Jun 25, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Navigation.jsx uses className="navigation" on the <nav>, but Navigation.css only defines .navigation__link; to match the requirement of splitting styles per component/BEM block and completing styles for existing class names, add a .navigation selector here with appropriate layout styles.

/* stylelint-disable-next-line order/properties-order */
display: inline;
/* stylelint-disable-next-line order/properties-order */
Comment on lines +13 to +23

@mateacademy-ai-mentor mateacademy-ai-mentor Jun 24, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Navigation markup (<nav className="navigation">...) is still embedded directly in Header. The task requires moving navigation into a separate Navigation component, so you should extract this block into its own component and import it here.

margin: 0;
padding: 0;
/* stylelint-disable-next-line order/properties-order */
font-size: inherit;
}



@media (min-width: 500px) {
.header {
text-align: left;
/* stylelint-disable-next-line order/properties-order */
display: flex;
justify-content: space-between;
}
}
14 changes: 14 additions & 0 deletions src/components/Header/Header.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,3 +3,17 @@
// Create a Header function returning the HTML of header block

// Add a default export statement for Header component to use it in the other files

import './Header.css';
import Navigation from '../Navigation/Navigation';

function Header() {
return (
<header className="header">
<h1 className="header__title">Site Name</h1>
<Navigation />
</header>
);
}

export default Header;
33 changes: 33 additions & 0 deletions src/components/Navigation/Navigation.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
.navigation {
display: flex;
justify-content: center;
/* stylelint-disable-next-line order/properties-order */
align-items: center;
/* stylelint-disable-next-line order/properties-order */
padding: 1em;
/* stylelint-disable-next-line order/properties-order */
background-color: #f8f8f8;
/* stylelint-disable-next-line order/properties-order */
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.navigation__link {
display: inline-block;
/* stylelint-disable-next-line order/properties-order */
outline: none;
/* stylelint-disable-next-line order/properties-order */
text-decoration: none;
/* stylelint-disable-next-line order/properties-order */
opacity: 0.7;
/* stylelint-disable-next-line order/properties-order */
padding: 0 0.5em;
/* stylelint-disable-next-line order/properties-order */
color: black;
/* stylelint-disable-next-line order/properties-order */
transition: opacity 0.2s ease-in-out;
}

.navigation__link:hover,
.navigation__link:focus {
opacity: 1;
}
Loading
Loading