Skip to content
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

Jump to bottom

add files for test #5392

Open
wants to merge 4 commits into
base: master
Choose a base branch
from
+159 −2
Open

add files for test #5392

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
394fe2a
add files for test
internal77 Sep 19, 2024
845fd8f
add edited files
internal77 Sep 20, 2024
0a349e7
next change
internal77 Sep 20, 2024
f6a049d
Merge branch 'master' into develop
internal77 Sep 20, 2024
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
4 changes: 2 additions & 2 deletions readme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,8 +27,8 @@ The page should match the design Pixel Perfect: all the sizes, colors and distan

❗️ Replace `<your_account>` with your Github username and copy the links to `Pull Request` description:

- [DEMO LINK](https://<your_account>.github.io/layout_moyo-header/)
- [TEST REPORT LINK](https://<your_account>.github.io/layout_moyo-header/report/html_report/)
- [DEMO LINK](https://internal77.github.io/layout_moyo-header/)
- [TEST REPORT LINK](https://internal77.github.io/layout_moyo-header/report/html_report/)

❗️ Copy this `Checklist` to the `Pull Request` description after links, and put `- [x]` before each point after you checked it.

Expand Down
93 changes: 93 additions & 0 deletions src/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,10 @@
<!doctype html>
<html lang="en">
<head>
<link
href="https://fonts.googleapis.com/css2?family=Roboto:wght@500;700&display=swap"
rel="stylesheet"
/>
<meta charset="UTF-8" />
<meta
name="viewport"
Expand All @@ -18,5 +22,94 @@
</head>
<body>
<h1>Moyo header</h1>
<header class="header">
<a
href="/"
class="logo"
>

<img
src="images/logo.png"
alt="Company Logo"
Comment on lines +31 to +33
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The alt attribute should describe the image content. Instead of a generic 'Company Logo', provide a more descriptive alternative text that describes the logo or the company it represents.

/>
Comment on lines +26 to +34
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Add empty lines between multiline sibling blocks of HTML to add some 'air' and simplify reading. There should be an empty line before and after the tag containing the logo.


</a>
<nav>
<ul class="nav__list">
<li class="nav__item">
<a
href="apple"
class="nav__link is-active"
>
APPLE
</a>
Comment on lines +40 to +45
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Don't use spaces in tag's href property. Anchor links start with the # symbol. Change href="apple" to href="#apple".

</li>

<li class="nav__item">
<a
href="samsung"
class="nav__link"
>
SAMSUNG
</a>
Comment on lines +49 to +54
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

For the href attribute in the tags, ensure there are no spaces and that it starts with a # symbol. For example, change href="samsung" to href="#samsung".

</li>

<li class="nav__item">
<a
href="smartphones"
class="nav__link"
>
SMARTPHONES
</a>
Comment on lines +58 to +63
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Make sure to use # for the href attribute in the tags to indicate that it's an anchor link. Change href="smartphones" to href="#smartphones".

</li>

<li class="nav__item">
<a
href="laptops"
class="nav__link"
data-qa="hover"
>
LAPTOPS & COMPUTERS
</a>
Comment on lines +67 to +73
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The href attribute should not have spaces and should start with a #. Modify href="laptops" to href="#laptops". Also, ensure that the text does not exceed 80 characters per line for better readability.

</li>

<li class="nav__item">
<a
href="gadgets"
class="nav__link hover"
>
GADGETS
</a>
Comment on lines +77 to +82
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The href attribute in the tag should start with a # symbol and not contain spaces. Adjust href="gadgets" to href="#gadgets".

</li>

<li class="nav__item">
<a
href="tablets"
class="nav__link"
>
TABLETS
</a>
Comment on lines +86 to +91
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Use # for the href attribute in tags to denote an anchor link. Change href="tablets" to href="#tablets".

</li>

<li class="nav__item">
<a
href="photo"
class="nav__link"
>
PHOTO
</a>
Comment on lines +95 to +100
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The href attribute in tags should start with # and not include spaces. Change href="photo" to href="#photo".

</li>

<li class="nav__item">
<a
href="video"
class="nav__link"
>
VIDEO
</a>
Comment on lines +104 to +109
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Anchor links in href should start with # and not have spaces. Modify href="video" to href="#video".

</li>
</ul>
</nav>
</header>
Comment on lines +25 to +113
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Remember about correct indentation between parent and child elements. The

block should be indented with 2 spaces from the tag.

</body>
</html>
64 changes: 64 additions & 0 deletions src/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,67 @@
html {
font-family: Roboto, Arial, sans-serif;
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Consider adding a fallback font family in case the specified font 'Roboto' is not available. For example, 'font-family: Roboto, Arial, sans-serif;' can be written as 'font-family: Roboto, 'Helvetica Neue', Arial, sans-serif;' to provide better cross-platform compatibility.

}

body {
margin: 0;
}

.header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 50px;
}

.logo {
display: flex;
margin: 0;
padding: 0;
justify-content: center;
}

.nav__list {
display: flex;
list-style: none;
margin: 0;
padding: 0;
}

.nav__item {
font-size: 12px;
line-height: 14px;
font-weight: 500;
text-transform: uppercase;
margin-left: 20px;
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Be consistent with your vertical margins. It's recommended to add only top or only bottom margin, but not both. In your case, .nav__item has a left margin, which is horizontal, but keep the principle in mind for vertical margins.

}

.nav__item:first-child {
margin-left: 0;
}

.nav__link {
display: block;
line-height: 60px;
color: black;
text-decoration: none;
}

.is-active {
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The class name .is-active is not following BEM naming convention. It should be something like .nav__link--active to indicate that it's a modifier for the .nav__link element.

position: relative;
color: #00acdc;
}

.is-active::after {
display: block;
position: absolute;
bottom: 0;
content: '';
width: 100%;
height: 4px;
border-radius: 8px;
background-color: #00acdc;
}

.nav__link:hover {
color: #00acdc;
}
Loading