added homework getting files after checklist accomplishing and errors… #7275
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,29 @@ | ||
| name: Test | ||
|
|
||
| on: | ||
| pull_request: | ||
| branches: [ master ] | ||
|
|
||
| jobs: | ||
| build: | ||
|
|
||
| runs-on: ubuntu-latest | ||
|
|
||
| strategy: | ||
| matrix: | ||
| node-version: [20.x] | ||
|
|
||
| steps: | ||
| - uses: actions/checkout@v2 | ||
| - name: Use Node.js ${{ matrix.node-version }} | ||
| uses: actions/setup-node@v1 | ||
| with: | ||
| node-version: ${{ matrix.node-version }} | ||
| - run: npm install | ||
| - run: npm test | ||
| - name: Upload HTML report(backstop data) | ||
| if: ${{ always() }} | ||
| uses: actions/upload-artifact@v2 | ||
| with: | ||
| name: report | ||
| path: backstop_data |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,63 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
|
|
||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <title>My First Page</title> | ||
| <link rel="stylesheet" href="style_moyo_header_error.css"> | ||
| <link rel="icon" href="ma.png"> | ||
| <link rel="stylesheet" href="normalize.css"> | ||
| <link rel="preconnect" href="https://fonts.googleapis.com"> | ||
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | ||
| <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@0500&display=swap" rel="stylesheet"> | ||
|
|
||
| </head> | ||
|
|
||
| <body> | ||
| <header class="header"> | ||
| <a class="logo__img" href="logo.html"> | ||
| <img src="moyo_1.png" alt="logotype" /> | ||
|
There was a problem hiding this comment. The |
||
| </a> | ||
| <nav class="nav"> | ||
| <ul class="nav__list"> | ||
| <li class="nav__item"> | ||
| <a class="nav__link blue is-active" href="#">Apple</a> | ||
|
There was a problem hiding this comment. The |
||
| </li> | ||
|
|
||
| <li class="nav__item"> | ||
| <a class="nav__link" href="#">Samsung</a> | ||
| </li> | ||
|
|
||
| <li class="nav__item"> | ||
| <a class="nav__link" href="#">Smartphones</a> | ||
| </li> | ||
|
|
||
| <li class="nav__item"> | ||
| <a class="nav__link" data-qa="hover" href="#">Laptops & Computers</a> | ||
Andrij1 marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| </li> | ||
|
|
||
| <li class="nav__item"> | ||
| <a class="nav__link" href="#">Gadgets</a> | ||
| </li> | ||
|
|
||
| <li class="nav__item"> | ||
| <a class="nav__link" href="#">Tablets</a> | ||
| </li> | ||
|
|
||
| <li class="nav__item"> | ||
| <a class="nav__link" href="#">Photo</a> | ||
| </li> | ||
|
|
||
| <li class="nav__item"> | ||
| <a class="nav__link" href="#">Video</a> | ||
| </li> | ||
| </ul> | ||
| </nav> | ||
| </header> | ||
|
|
||
| <div class="pad"> </div> | ||
|
|
||
| </body> | ||
|
|
||
| </html> | ||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,8 @@ | ||
| html { | ||
| font-family: Arial, Helvetica, sans-serif; | ||
| } | ||
|
|
||
| body { | ||
| margin: 0; | ||
| padding: 0; | ||
| } |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,94 @@ | ||
| :root { | ||
| --secondary-color: #00ACDC; | ||
| } | ||
|
|
||
| body { | ||
| margin: 0; | ||
| padding: 0; | ||
| font-family: "Roboto", sans-serif; | ||
| font-weight: 500; | ||
| } | ||
|
|
||
| .header { | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: space-between; | ||
| width: 100%; | ||
| padding: 0 20px; | ||
| text-wrap: nowrap; | ||
| box-sizing: border-box; | ||
| } | ||
|
|
||
|
|
||
| .logo__img { | ||
| display: flex; | ||
| align-items: center; | ||
| } | ||
|
|
||
| .nav { | ||
| display: flex; | ||
| } | ||
|
|
||
| @media (min-width: 1024px) { | ||
| .nav { | ||
| padding-left: 333px; | ||
| padding-right: 20px; | ||
| } | ||
| } | ||
|
|
||
| @media (min-width: 1200px) { | ||
| .nav { | ||
| padding-left: 505px; | ||
| padding-right: 20px; | ||
| } | ||
|
Comment on lines
+32
to
+43
There was a problem hiding this comment. Using hardcoded |
||
| } | ||
|
|
||
| .nav__list { | ||
| display: flex; | ||
| align-items: center; | ||
| margin: 0; | ||
| padding: 0; | ||
| list-style: none; | ||
| } | ||
|
|
||
| .nav__item + .nav__item { | ||
| margin-left: 20px; | ||
| } | ||
|
|
||
| .nav__link { | ||
| text-decoration: none; | ||
| color: #000; | ||
| font-size: 12px; | ||
| text-transform: uppercase; | ||
| display: flex; | ||
| align-items: center; | ||
| height: 60px; | ||
| position: relative; | ||
| } | ||
|
Comment on lines
+58
to
+67
There was a problem hiding this comment. The requirement states that 'Nav Links should have their text centered'. While |
||
|
|
||
| .nav__link:hover { | ||
| color: var(--secondary-color); | ||
| text-decoration: underline; | ||
|
There was a problem hiding this comment. The task requires the implementation to be 'Pixel Perfect' according to the Figma mockup. The design shows that the link's color changes on hover, but it does not become underlined. Please remove this |
||
| } | ||
|
|
||
| .nav__link.is-active { | ||
| color: var(--secondary-color); | ||
| } | ||
|
|
||
| .blue { | ||
| color: var(--secondary-color); | ||
| } | ||
|
Comment on lines
+78
to
+80
There was a problem hiding this comment. This |
||
|
|
||
| .nav__link.is-active::after { | ||
| content: ""; | ||
| position: absolute; | ||
| width: 100%; | ||
| height: 4px; | ||
| background-color: var(--secondary-color); | ||
| bottom: 0; | ||
| border-radius: 8px; | ||
| } | ||
|
|
||
| [data-qa="hover"]:hover { | ||
| background-color: yellow; | ||
| } | ||
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.
This line has a few issues. First, the font weight in the URL,
wght@0500, is incorrect. It should bewght@500to match the requirement for 'medium (500) weight'. This violates checklist item #8. Second, according to the code style guide, when a tag has more than two attributes, each attribute should be on a new line. This also helps with the line length, which currently exceeds 80 characters.