Skip to content

Develop #4431

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
MishaKudria wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Develop #4431

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
fb3e43a
first version Import tasks
ezeww May 19, 2026
7478b20
update version First
ezeww May 19, 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
620 changes: 616 additions & 4 deletions package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
},
"devDependencies": {
"@cypress/react18": "^2.0.1",
"@mate-academy/scripts": "^1.8.5",
"@mate-academy/scripts": "^2.1.3",
"@mate-academy/stylelint-config": "*",
"@vitejs/plugin-react": "^4.3.1",
"cypress": "^13.13.0",
Expand Down
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 @@
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
23 changes: 23 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,24 @@
/* Put article styles here */
.article {
margin: 3.5em auto 0;
padding: 2em;
font-size: 140%;
max-width: 800px;
background: white;
box-shadow: rgba(0, 0, 0, 0.05) 0 3px 15px;
}

.article__paragraph {
margin: 0;

@mateacademy-ai-mentor mateacademy-ai-mentor May 19, 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 .navigation__link CSS class represents a separate BEM block from the header. According to the task requirement to 'Split the App.js into components based on CSS blocks', this should be extracted into a separate Navigation component with its own folder.

color: #333;
}

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

@media (min-width: 800px) {
.article {
margin: 3.5em auto;
}
}
66 changes: 66 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,69 @@
// 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.
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>
);
}

export default Article;
42 changes: 42 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,43 @@
/* Put header styles here */
.header {
width: 100%;
padding: 1em;
font-size: 140%;
Comment on lines 1 to +5

@mateacademy-ai-mentor mateacademy-ai-mentor May 19, 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.

These are placeholder comments from the original template - they should be removed now that the component is implemented. Replace with meaningful documentation or remove entirely.

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;
}

@media (min-width: 768px) {
.header {
text-align: left;
display: flex;
justify-content: space-between;
}
}
23 changes: 23 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,26 @@
// 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 React from 'react';
import './Header.css';

function Header() {
return (
<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>

@mateacademy-ai-mentor mateacademy-ai-mentor May 19, 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 .navigation__link CSS class represents a separate BEM block from the header. According to the task requirement to 'Split the App.js into components based on CSS blocks', navigation styles should be extracted into a separate Navigation component with its own folder.

</nav>
</header>
);
}

export default Header;
14 changes: 14 additions & 0 deletions src/components/Welcome/Welcome.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,15 @@
/* Put welcome styles here */
.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;
}
11 changes: 11 additions & 0 deletions src/components/Welcome/Welcome.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,3 +3,14 @@
// Create a Welcome function returning the HTML of welcome block

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

function Welcome() {
return (
<section className="welcome">
<span className="welcome__text">Sticky Header!</span>
</section>
);
}

export default Welcome;
Loading