add task solution #5805

katerinaasss · 2024-12-11T19:49:48Z

mateacademy-ai-mentor

Thank you for your hard work on this project! 😊 While your code meets many of the task requirements, there are a few critical issues that need to be addressed before we can approve the pull request:

Font Specification: The CSS specifies 'Roboto font', sans-serif;, which is incorrect. It should be 'Roboto', sans-serif;. Please ensure the font is correctly loaded in your HTML or via a CSS import.
CSS Variable for Blue Color: The task requires using a CSS variable for the blue color, but the code directly uses the color #00acdc. Please define this color as a CSS variable.
Header Height Alignment: The nav__link class has a height of 60px, but the line-height is set to 70px. This discrepancy may not align with the design specifications. Please ensure the header height is consistent with the design.
Responsiveness: The use of fixed width, height, and left properties for .nav__link can lead to layout issues on different screen sizes. Consider using relative units or flexbox properties to ensure better responsiveness.
Positioning Context: The use of left in the context of .logo might not have the intended effect since .logo is not positioned absolutely or relatively. Consider removing it or ensuring the positioning context is set.

Once these issues are resolved, your code will be in great shape! Keep up the great work and don't hesitate to reach out if you need any help. 🚀

✨ Please rate this review in the Platform's notification center. I will be grateful for your feedback! ✨

🔄 Fix the issues, commit the changes, and then re-request my review using the Re-request review button in the Reviewers tab.

mateacademy-ai-mentor · 2024-12-11T19:50:50Z

src/style.css

  margin: 0;
+  padding: 0;
+  font-family: 'Roboto font', sans-serif;


The font-family 'Roboto font' seems incorrect. It should be 'Roboto', sans-serif. Ensure that the font is correctly loaded in your HTML or via a CSS import.

mateacademy-ai-mentor · 2024-12-11T19:50:50Z

src/style.css

+  margin: 0 40px;
+  width: 40px;
+  height: 40px;
+  left: 50px;


Using 'left' in this context might not have the intended effect since '.logo' is not positioned absolutely or relatively. Consider removing it or ensuring the positioning context is set.

mateacademy-ai-mentor · 2024-12-11T19:50:50Z

src/style.css

+  width: 1200px;
+  height: 60px;
+  left: -600px;


The use of fixed width, height, and left properties for '.nav__link' can lead to layout issues on different screen sizes. Consider using relative units or flexbox properties to ensure better responsiveness.

volodymyr-soltys97

Good job!
Let's improve your page

The height for the links must be 60px

The blue color for all these links should only be on hover.

volodymyr-soltys97 · 2024-12-12T08:40:38Z

src/index.html

@@ -17,6 +17,84 @@
    />
  </head>
  <body>
-    <h1>Moyo header</h1>
+    <h1 class="heading">Moyo header</h1>


Remove it

Suggested change

<h1 class="heading">Moyo header</h1>

volodymyr-soltys97 · 2024-12-12T08:41:25Z

src/index.html

+      <nav>
+        <ul class="nav__list">
+          <li>
+            <a
+              href="#apple"
+              class="is-active"
+            >
+              Apple
+            </a>


Add classes everywhere

Suggested change

<nav>

<ul class="nav__list">

<li>

<a

href="#apple"

class="is-active"

>

Apple

</a>

<nav class="nav">

<ul class="nav__list">

<li class="nav__item">

<a

href="#apple"

class="nav__link is-active"

>

Apple

</a>

volodymyr-soltys97 · 2024-12-12T08:41:40Z

src/index.html

+          </li>
+          <li>


Add the blank line between the links

Suggested change

</li>

<li>

</li>

<li>

volodymyr-soltys97 · 2024-12-12T08:41:52Z

src/index.html

@@ -17,6 +17,84 @@
    />
  </head>
  <body>
-    <h1>Moyo header</h1>
+    <h1 class="heading">Moyo header</h1>
+    <header>


Suggested change

<header>

<header class="header">

volodymyr-soltys97 · 2024-12-12T08:42:05Z

src/style.css

+.heading {
+  text-align: center;
+}


Suggested change

.heading {

text-align: center;

}

volodymyr-soltys97 · 2024-12-12T08:42:41Z

src/style.css

+header {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  background-color: #f8f8f8;
+}


Suggested change

header {

width: 100%;

display: flex;

align-items: center;

background-color: #f8f8f8;

}

.header {

width: 100%;

display: flex;

align-items: center;

padding: 0 50px;

box-sizing: border-box;

}

volodymyr-soltys97 · 2024-12-12T08:42:55Z

src/style.css

+
+.is-active {
+  position: relative;
+  color: #00acdc;


Create a variable for repeated color and use it everywhere

volodymyr-soltys97 · 2024-12-12T08:43:12Z

src/style.css

+  bottom: -15px;
+}
+
+[data-qa='hover'] {


Use only class as css selectors

etojeDenys

please, don't hesitate to ask how to fix those tests in the chat, you need to pass them

anastasiiavorobiova

Great work!

anastasiiavorobiova · 2024-12-15T12:07:33Z

src/style.css

+  content: '';
+  bottom: 0;
+  top: auto;
+  width: 37px;


Suggested change

width: 37px;

width: 100%;

anastasiiavorobiova · 2024-12-15T12:07:38Z

src/style.css

+
+.is-active {
+  position: relative;
+  color: #00acdc;


add task solution

6894a32

mateacademy-ai-mentor suggested changes Dec 11, 2024

View reviewed changes

katerinaasss closed this Dec 11, 2024

katerinaasss reopened this Dec 11, 2024

add task solution

cdfd800

katerinaasss closed this Dec 11, 2024

katerinaasss reopened this Dec 11, 2024

katerinaasss requested a review from mateacademy-ai-mentor December 11, 2024 21:23

volodymyr-soltys97 suggested changes Dec 12, 2024

View reviewed changes

add task solution

d4ef145

katerinaasss requested a review from volodymyr-soltys97 December 12, 2024 14:22

etojeDenys suggested changes Dec 12, 2024

View reviewed changes

katerinaasss added 12 commits December 13, 2024 12:53

add task solution

cc31844

add task solution

82bbdf0

add task solution

40fd1c1

add task solution

57ad4da

add task solution

2a2a1d3

add task solution

58c312e

add task solution

a1f89c6

add task solution

038cc05

add task solution

f055de7

add task solution

9c0e757

add task solution

22e34dd

add task solution

bc9649a

katerinaasss requested a review from etojeDenys December 15, 2024 11:39

anastasiiavorobiova approved these changes Dec 15, 2024

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

add task solution #5805

add task solution #5805

katerinaasss commented Dec 11, 2024

mateacademy-ai-mentor left a comment

mateacademy-ai-mentor Dec 11, 2024

mateacademy-ai-mentor Dec 11, 2024

mateacademy-ai-mentor Dec 11, 2024

volodymyr-soltys97 left a comment

volodymyr-soltys97 Dec 12, 2024

volodymyr-soltys97 Dec 12, 2024

volodymyr-soltys97 Dec 12, 2024

volodymyr-soltys97 Dec 12, 2024

volodymyr-soltys97 Dec 12, 2024

volodymyr-soltys97 Dec 12, 2024

volodymyr-soltys97 Dec 12, 2024

anastasiiavorobiova Dec 15, 2024

volodymyr-soltys97 Dec 12, 2024

etojeDenys left a comment

anastasiiavorobiova left a comment

anastasiiavorobiova Dec 15, 2024

anastasiiavorobiova Dec 15, 2024

-          </li>
-          <li>
+          </li>
+          <li>

add task solution #5805

Are you sure you want to change the base?

add task solution #5805

Conversation

katerinaasss commented Dec 11, 2024

mateacademy-ai-mentor left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

volodymyr-soltys97 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

etojeDenys left a comment

Choose a reason for hiding this comment

anastasiiavorobiova left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment