add task solution #4482
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -17,90 +17,3 @@ body { | |
| margin: 0; | ||
| background: #eee; | ||
| } | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,88 +1,19 @@ | ||
| import React from 'react'; | ||
| import './App.css'; | ||
| import Header from './components/Header/Header'; | ||
| import Welcome from './components/Welcome/Welcome'; | ||
| import Article from './components/Article/Article'; | ||
|
|
||
| function App() { | ||
| return ( | ||
| <main className="app"> | ||
| <Welcome /> | ||
| <Header /> | ||
| <Article /> | ||
| </main> | ||
| ); | ||
| } | ||
|
|
||
| // Move each BEM block to a separate component (file) and import them here | ||
|
|
||
| export default App; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1 +1,32 @@ | ||
| /* 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 { | ||
|
There was a problem hiding this comment.
|
||
| margin: 3.5em auto 0; | ||
| padding: 2em; | ||
| } | ||
| } | ||
|
|
||
| @media (min-width: 800px) { | ||
| .article { | ||
| margin: 3.5em auto; | ||
| } | ||
| } | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,5 +1,67 @@ | ||
| // import a css file containig article styles | ||
| import './Article.css'; | ||
| // 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 | ||
| export default 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 | ||
|
Comment on lines
+14
to
+19
There was a problem hiding this comment. Navigation is required to be a separate component, but |
||
| 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 | ||
|
Comment on lines
+22
to
+35
There was a problem hiding this comment.
|
||
| 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> | ||
| ); | ||
| } | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1 +1,28 @@ | ||
| /* 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; | ||
|
Comment on lines
+14
to
+26
There was a problem hiding this comment. The task description explicitly requires navigation to be moved into a separate |
||
| } | ||
| } | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,5 +1,13 @@ | ||
| // import a css file containig header styles | ||
| import './Header.css'; | ||
| // Create a Header function returning the HTML of header block | ||
| import Navigation from '../Navigation/Navigation'; | ||
| // Add a default export statement for Header component to use it in the other files | ||
| export default function Header() { | ||
| return ( | ||
| <header className="header"> | ||
| <h1 className="header__title">Site Name</h1> | ||
| <Navigation /> | ||
| </header> | ||
| ); | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,15 @@ | ||
|
|
||
| .navigation__link { | ||
|
There was a problem hiding this comment. The |
||
| 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; | ||
| } | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,17 @@ | ||
| import './Navigation.css'; | ||
|
|
||
| export default function Navigation() { | ||
| return ( | ||
| <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> | ||
| ); | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1 +1,15 @@ | ||
| /* Put welcome styles here */ | ||
| .welcome { | ||
| height: 100vh; | ||
| background: coral; | ||
|
Comment on lines
1
to
+4
There was a problem hiding this comment.
|
||
| } | ||
|
|
||
| .welcome__text { | ||
| margin: 0; | ||
| font-size: 400%; | ||
| text-align: center; | ||
| line-height: 1; | ||
| padding-top: calc(50vh - 20pt); | ||
| display: block; | ||
| font-weight: 700; | ||
| } | ||
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The navigation has been extracted into a
Navigationcomponent, but the file still imports and (per the separateHeader.jsxfile) renders a<nav>in the header; ensure all navigation markup is consistently handled inNavigationas required by the description and thatHeaderonly handles header-specific content.