Skip to content

add solution #4291

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
ratseburzhynskyi wants to merge 1 commit into
base: master
Choose a base branch
from
Open

add solution #4291

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
87 changes: 0 additions & 87 deletions src/App.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,90 +17,3 @@ 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;
}
}
83 changes: 7 additions & 76 deletions src/App.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,86 +1,17 @@
/* eslint-disable import/no-named-as-default */
import React from 'react';
import './App.css';
import { Article } from './components/Article/Article';
import { Header } from './components/Header/Header';
import { Welcome } from './components/Welcome/Welcome';
Comment on lines +4 to +6
Copy link

@mateacademy-ai-mentor mateacademy-ai-mentor Feb 28, 2026

Choose a reason for hiding this comment

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

The task requires components to use export default. While your components do have a default export, you are importing them here using named imports ({ Article }, { Header }, etc.). To be consistent with the requirement and best practices, you should use default imports instead.

For example:
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">
<h1 className="article__title">Headline</h1>
<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
31 changes: 30 additions & 1 deletion src/components/Article/Article.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,30 @@
/* Put article styles here */
.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) {
.article {
margin: 3.5em auto 0;
padding: 2em;
}
}

@media (min-width: 800px) {
.article {
margin: 3.5em auto;
}
}
63 changes: 60 additions & 3 deletions src/components/Article/Article.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,62 @@
// import a css file containig article styles
import './Article.css';

// Create an Article function returning the HTML of article block
export const Article = () => (
<article className="article">
<h1 className="article__title">Headline</h1>
<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>
);

// Add a default export statement for Article component to use it in the other files
export default Article;
28 changes: 27 additions & 1 deletion src/components/Header/Header.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,27 @@
/* Put header styles here */
.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;
}

@media (min-width: 500px) {
.header {
text-align: left;
display: flex;
justify-content: space-between;
}
}
12 changes: 9 additions & 3 deletions src/components/Header/Header.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,11 @@
// import a css file containig header styles
import './Header.css';
import { Navigation } from './Navigation/Navigation';
Copy link

@mateacademy-ai-mentor mateacademy-ai-mentor Feb 28, 2026

Choose a reason for hiding this comment

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

The task emphasizes using export default for all components. While your Navigation component does have a default export, you are importing it here as a named import. For consistency, you should use the default import instead:

import Navigation from './Navigation/Navigation';


// Create a Header function returning the HTML of header block
export const Header = () => (
<header className="header">
<h1 className="header__title">Site Name</h1>
<Navigation />
</header>
);

// Add a default export statement for Header component to use it in the other files
export default Header;
19 changes: 19 additions & 0 deletions src/components/Header/Navigation/Navigation.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
.navigation__link {
display: inline-block;

padding: 0 0.5em;

color: black;
text-decoration: none;


opacity: 0.7;
outline: none;

transition: opacity 0.2s ease-in-out;
}

.navigation__link:hover,
.navigation__link:focus {
opacity: 1;
}
17 changes: 17 additions & 0 deletions src/components/Header/Navigation/Navigation.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
import './Navigation.css';

export const Navigation = () => (
<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>
);

export default Navigation;
17 changes: 16 additions & 1 deletion src/components/Welcome/Welcome.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,16 @@
/* Put welcome styles here */
.welcome {
height: 100vh;
background: coral;
}

.welcome__text {
display: block;

margin: 0;
padding-top: calc(50vh - 20pt);

font-size: 400%;
font-weight: 700;
line-height: 1;
text-align: center;
}
10 changes: 7 additions & 3 deletions src/components/Welcome/Welcome.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,9 @@
// import a css file containig welcome styles
import './Welcome.css';

// Create a Welcome function returning the HTML of welcome block
export const Welcome = () => (
<section className="welcome">
<span className="welcome__text">Sticky Header!</span>
</section>
);

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