added Momyo header in html and css #5814

ochepurna · 2024-12-12T21:22:04Z

DEMO LINK
TEST REPORT LINK
Header height is set in 1 place (for the links)
Content is vertically centered (for any header height)
CSS is used to show all letters in Uppercase (don't type them in HTML)
Logo is an image wrapped with a link
CSS Variable is used for a blue color
Pseudo-element is used for a blue line below the active link
Code follows all the Code Style Rules ❗️

mateacademy-ai-mentor

Thank you for your hard work on this project! 😊 However, there are a few critical issues that need to be addressed before we can approve the pull request:

HTML Issues:
- The href attributes in the <a> tags are not valid URLs. They should be updated to valid paths or URLs, such as /video or https://example.com/video.
- The link to the Google Fonts stylesheet is incorrect. Please ensure it points to a valid URL like https://fonts.googleapis.com/css?family=Roboto.
CSS Issues:
- The padding property in the .header class is incorrectly formatted. Use spaces instead of commas to separate values, e.g., padding: 0 50px;.

These issues impact the functionality and core requirements of the task. Once these are resolved, your code will be in great shape! Keep up the good work, and feel free 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-12T21:23:00Z

src/index.html

+    <link
+      rel="stylesheet"
+      href="https://fonts.google.com/specimen/Roboto"
+    />


The href attribute for the Google Fonts stylesheet is incorrect. It should be a URL pointing to the font resource, such as 'https://fonts.googleapis.com/css?family=Roboto'.

mateacademy-ai-mentor · 2024-12-12T21:23:01Z

src/index.html

-    <h1>Moyo header</h1>
+    <header class="header">
+      <a
+        href="Apple"


The href attribute 'Apple' is not a valid URL. It should be a valid URL or path, such as '/apple' or 'https://example.com/apple'.

mateacademy-ai-mentor · 2024-12-12T21:23:01Z

src/index.html

+        <ul class="nav__list">
+          <li>
+            <a
+              href="Apple"


The href attribute 'Apple' is not a valid URL. It should be a valid URL or path, such as '/apple' or 'https://example.com/apple'.

mateacademy-ai-mentor · 2024-12-12T21:23:01Z

src/index.html

+
+          <li>
+            <a
+              href="Samsung"


The href attribute 'Samsung' is not a valid URL. It should be a valid URL or path, such as '/samsung' or 'https://example.com/samsung'.

mateacademy-ai-mentor · 2024-12-12T21:23:01Z

src/index.html

+
+          <li>
+            <a
+              href="Smartphones"


The href attribute 'Smartphones' is not a valid URL. It should be a valid URL or path, such as '/smartphones' or 'https://example.com/smartphones'.

mateacademy-ai-mentor · 2024-12-12T21:23:01Z

src/index.html

+
+          <li>
+            <a
+              href="Tablets"


The href attribute 'Tablets' is not a valid URL. It should be a valid URL or path, such as '/tablets' or 'https://example.com/tablets'.

mateacademy-ai-mentor · 2024-12-12T21:23:01Z

src/index.html

+
+          <li>
+            <a
+              href="Photo"


The href attribute 'Photo' is not a valid URL. It should be a valid URL or path, such as '/photo' or 'https://example.com/photo'.

mateacademy-ai-mentor · 2024-12-12T21:23:01Z

src/index.html

+
+          <li>
+            <a
+              href="Video"


The href attribute 'Video' is not a valid URL. It should be a valid URL or path, such as '/video' or 'https://example.com/video'.

mateacademy-ai-mentor · 2024-12-12T21:23:01Z

src/style.css

@@ -1,3 +1,64 @@
 body {
  margin: 0;
+  font-family: Roboto, sans-serif;


Ensure that the Roboto font is properly loaded in your HTML file. The current setup in the HTML file does not correctly link to the Google Fonts stylesheet.

mateacademy-ai-mentor · 2024-12-12T21:23:01Z

src/style.css

+  display: flex;
+  flex-direction: row;
+  border-style: dotted;
+  padding: auto, 50px;


The padding property is incorrectly formatted. Use spaces instead of commas to separate values, e.g., 'padding: 0 50px;'.

mateacademy-ai-mentor

Great job on addressing many of the previous issues! 🎉 Your updates to the HTML and CSS files have significantly improved the code quality. However, there are still a few critical points to consider:

HTML Improvements:
- Ensure there are no spaces in the href attributes of <a> tags, such as in /laptops & Computers. This is important for proper link functionality.
- Consider making the alt attribute for images more descriptive than just "Moyo" to enhance accessibility.
CSS Enhancements:
- You've corrected the padding property in the .header class, which is great! Make sure to use the CSS variable --blue-color consistently across all elements, like in the .link__marked class.
General Considerations:
- Double-check that all task requirements are met, including using semantic tags and ensuring the header spans the full page width.

Your progress is commendable, and these adjustments will help you refine your skills further. Keep up the good work, and make sure to address these points in future projects to avoid similar issues. This approval is to encourage you to continue learning and improving. 🚀

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

volodymyr-soltys97

Good job!
Let's improve your code

Fix gap between the border and link, check it on the design

The header should stretch to the full width of the browser window.

All these links should have the same black color by default, the blue color should only be on hover.

Fix this error after click on the links

src/index.html

volodymyr-soltys97 · 2024-12-13T08:45:28Z

src/index.html

+          <li>
+            <a
+              href="/apple"
+              class="nav__link link__marked is-active"


Suggested change

class="nav__link link__marked is-active"

class="nav__link is-active"

src/style.css

volodymyr-soltys97 · 2024-12-13T08:46:05Z

src/style.css

+  display: flex;
+  flex-direction: row;
+  border-style: dotted;


Suggested change

display: flex;

flex-direction: row;

border-style: dotted;

display: flex;

align-items: center;

volodymyr-soltys97 · 2024-12-13T08:46:24Z

src/style.css

+  padding: 0 50px;
+}


Suggested change

padding: 0 50px;

}

padding: 0 50px;

box-sizing: border-box;

}

volodymyr-soltys97 · 2024-12-13T08:46:31Z

src/style.css

+  display: flex;
+  justify-content: flex-end;
+  list-style-type: none;
+  padding: 0 50px;


Suggested change

padding: 0 50px;

volodymyr-soltys97 · 2024-12-13T08:46:44Z

src/style.css

+.link__marked {
+  color: var(--blue-color);
+}


Suggested change

.link__marked {

color: var(--blue-color);

}

volodymyr-soltys97 · 2024-12-13T08:46:52Z

src/style.css

+[data-qa='hover']:hover {
+  color: red;
+}


Suggested change

[data-qa='hover']:hover {

color: red;

}

volodymyr-soltys97 · 2024-12-13T08:46:59Z

src/style.css

+  display: inline-block;
+  padding: 10px 50px;


Suggested change

display: inline-block;

padding: 10px 50px;

etojeDenys

lgtm

added Momyo header in html and css

f46bb48

mateacademy-ai-mentor suggested changes Dec 12, 2024

View reviewed changes

corrected mistakes

cda5013

ochepurna requested a review from mateacademy-ai-mentor December 12, 2024 21:46

mateacademy-ai-mentor approved these changes Dec 12, 2024

View reviewed changes

ochepurna requested a review from mateacademy-ai-mentor December 12, 2024 21:54

volodymyr-soltys97 suggested changes Dec 13, 2024

View reviewed changes

edited CSS file to match the task

b939a0b

ochepurna force-pushed the develop branch from fddffc4 to b939a0b Compare December 14, 2024 19:40

ochepurna requested a review from volodymyr-soltys97 December 14, 2024 19:45

etojeDenys approved these changes Dec 15, 2024

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

added Momyo header in html and css #5814

added Momyo header in html and css #5814

ochepurna commented Dec 12, 2024 •

edited

Loading

mateacademy-ai-mentor left a comment

mateacademy-ai-mentor Dec 12, 2024

mateacademy-ai-mentor Dec 12, 2024

mateacademy-ai-mentor Dec 12, 2024

mateacademy-ai-mentor Dec 12, 2024

mateacademy-ai-mentor Dec 12, 2024

mateacademy-ai-mentor Dec 12, 2024

mateacademy-ai-mentor Dec 12, 2024

mateacademy-ai-mentor Dec 12, 2024

mateacademy-ai-mentor Dec 12, 2024

mateacademy-ai-mentor Dec 12, 2024

mateacademy-ai-mentor left a comment

volodymyr-soltys97 left a comment

volodymyr-soltys97 Dec 13, 2024

volodymyr-soltys97 Dec 13, 2024

volodymyr-soltys97 Dec 13, 2024

volodymyr-soltys97 Dec 13, 2024

volodymyr-soltys97 Dec 13, 2024

volodymyr-soltys97 Dec 13, 2024

volodymyr-soltys97 Dec 13, 2024

etojeDenys left a comment

	class="nav__link link__marked is-active"
	class="nav__link is-active"

added Momyo header in html and css #5814

Are you sure you want to change the base?

added Momyo header in html and css #5814

Conversation

ochepurna commented Dec 12, 2024 • edited Loading

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

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

mateacademy-ai-mentor left a 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

etojeDenys left a comment

Choose a reason for hiding this comment

ochepurna commented Dec 12, 2024 •

edited

Loading