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.

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

add task solution #5825

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from 1 commit
Commits
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
18 changes: 9 additions & 9 deletions readme.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,15 +7,15 @@ The page should match the design Pixel Perfect: all the sizes, colors and distan

## Requirements:

- reset browser default margins.
- use [Roboto font](https://fonts.google.com/specimen/Roboto).
- use semantic tags: `<header>`, `<img>`, `<nav>`, `<ul>`, `<li>` and `<a>`.
- the header should stretch the full page width (don't use horizontal margin).
- the height should be set for nav links (not the header), take it from the design.
-DONE reset browser default margins.
-DONE use [Roboto font](https://fonts.google.com/specimen/Roboto).
-DONE use semantic tags: `<header>`, `<img>`, `<nav>`, `<ul>`, `<li>` and `<a>`.
-DONE the header should stretch the full page width (don't use horizontal margin).
- DONE the height should be set for nav links (not the header), take it from the design.
- header content should be vertically centered.
- Logo should also be a link with an image inside (from [src/images](src/images)). But it should not be a part of the `<nav>`.
- ❗️ the blue link with a line below should have a class `is-active` in addition to any other classes you add.
- ❗️ add `data-qa="hover"` attribute to the 4th link for testing (`Laptops & computers`)
- DONE ❗️ the blue link with a line below should have a class `is-active` in addition to any other classes you add.
- DONE ❗️ add `data-qa="hover"` attribute to the 4th link for testing (`Laptops & computers`)
- link color should be changed on `:hover`
- Use the `::after` and position it relative to a link with `is-active` class
- Don't use flex `gap` property for indents. It's not supported in tests, use `margin` instead.
Expand All @@ -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://aleksandra-golebiewska.github.io/layout_moyo-header/)
- [TEST REPORT LINK](https://aleksandra-golebiewska.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
89 changes: 89 additions & 0 deletions src/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,19 @@
name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
/>
<link
rel="preconnect"
href="https://fonts.googleapis.com"
/>
<link
rel="preconnect"
href="https://fonts.gstatic.com"
crossorigin="anonymous"
/>
<link
href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
rel="stylesheet"
/>
<meta
http-equiv="X-UA-Compatible"
content="ie=edge"
Expand All @@ -18,5 +31,81 @@
</head>
<body>
<h1>Moyo header</h1>
<header>
<img
src="images/logo.png"
alt="Moyo"
class="images"
/>
<nav class="nav">
<ul class="nav__list">
<li>
<a
href="Apple"

Choose a reason for hiding this comment

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

The href attribute should contain a valid URL or path. Currently, it is set to 'Apple', which is not a valid URL. Consider using a relative path like './apple.html' or an absolute URL.

Choose a reason for hiding this comment

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

The href attribute contains an invalid URL. Consider using a valid path or URL, such as ./apple.html.

class="nav__link is-active"
>
APPLE

Choose a reason for hiding this comment

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

Text transformation should be handled using CSS. Consider using CSS to transform text to uppercase instead of directly using uppercase letters in HTML.

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

Choose a reason for hiding this comment

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

The href attribute should contain a valid URL or path. Currently, it is set to 'Samsung', which is not a valid URL. Consider using a relative path like './samsung.html' or an absolute URL.

Choose a reason for hiding this comment

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

The href attribute contains an invalid URL. Consider using a valid path or URL, such as ./samsung.html.

class="nav__link"
>
SAMSUNG

Choose a reason for hiding this comment

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

Text transformation should be handled using CSS. Consider using CSS to transform text to uppercase instead of directly using uppercase letters in HTML.

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

Choose a reason for hiding this comment

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

The href attribute should contain a valid URL or path. Currently, it is set to 'Smartphones', which is not a valid URL. Consider using a relative path like './smartphones.html' or an absolute URL.

Choose a reason for hiding this comment

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

The href attribute contains an invalid URL. Consider using a valid path or URL, such as ./smartphones.html.

class="nav__link"
>
SMARTPHONES

Choose a reason for hiding this comment

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

Text transformation should be handled using CSS. Consider using CSS to transform text to uppercase instead of directly using uppercase letters in HTML.

</a>
</li>
<li>
<a
href="Laptops&computers"

Choose a reason for hiding this comment

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

The href attribute should contain a valid URL or path. Currently, it is set to 'Laptops&computers', which is not a valid URL. Consider using a relative path like './laptops-computers.html' or an absolute URL.

Choose a reason for hiding this comment

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

The href attribute contains an invalid URL. Consider using a valid path or URL, such as ./laptops-computers.html.

class="nav__link"
data-qa="hover"
>
LAPTOPS & COMPUTERS

Choose a reason for hiding this comment

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

Text transformation should be handled using CSS. Consider using CSS to transform text to uppercase instead of directly using uppercase letters in HTML.

</a>
</li>
<li>
<a
href="Gadgets"

Choose a reason for hiding this comment

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

The href attribute should contain a valid URL or path. Currently, it is set to 'Gadgets', which is not a valid URL. Consider using a relative path like './gadgets.html' or an absolute URL.

Choose a reason for hiding this comment

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

The href attribute contains an invalid URL. Consider using a valid path or URL, such as ./gadgets.html.

class="nav__link"
>
GADGETS

Choose a reason for hiding this comment

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

Text transformation should be handled using CSS. Consider using CSS to transform text to uppercase instead of directly using uppercase letters in HTML.

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

Choose a reason for hiding this comment

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

The href attribute should contain a valid URL or path. Currently, it is set to 'Tablets', which is not a valid URL. Consider using a relative path like './tablets.html' or an absolute URL.

Choose a reason for hiding this comment

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

The href attribute contains an invalid URL. Consider using a valid path or URL, such as ./tablets.html.

class="nav__link"
>
TABLETS

Choose a reason for hiding this comment

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

Text transformation should be handled using CSS. Consider using CSS to transform text to uppercase instead of directly using uppercase letters in HTML.

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

Choose a reason for hiding this comment

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

The href attribute should contain a valid URL or path. Currently, it is set to 'Photo', which is not a valid URL. Consider using a relative path like './photo.html' or an absolute URL.

Choose a reason for hiding this comment

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

The href attribute contains an invalid URL. Consider using a valid path or URL, such as ./photo.html.

class="nav__link"
>
PHOTO

Choose a reason for hiding this comment

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

Text transformation should be handled using CSS. Consider using CSS to transform text to uppercase instead of directly using uppercase letters in HTML.

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

Choose a reason for hiding this comment

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

The href attribute should contain a valid URL or path. Currently, it is set to 'Video', which is not a valid URL. Consider using a relative path like './video.html' or an absolute URL.

Choose a reason for hiding this comment

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

The href attribute contains an invalid URL. Consider using a valid path or URL, such as ./video.html.

class="nav__link"
>
VIDEO

Choose a reason for hiding this comment

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

Text transformation should be handled using CSS. Consider using CSS to transform text to uppercase instead of directly using uppercase letters in HTML.

</a>
</li>
</ul>
</nav>
</header>
</body>
</html>
69 changes: 69 additions & 0 deletions src/style.css
Original file line number Diff line number Diff line change
@@ -1,3 +1,72 @@
body {
font-family: Roboto, sans-serif;
font-weight: 500;
font-size: 12px;
line-height: 14px;
margin: 0;
}

header {
display: flex;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
width: 100%;
}

.nav__list {
list-style-type: none;
display: flex;
padding: 0;
margin: 0;
margin-left: 20px;
justify-content: space-between;
}

.nav__link {
display: flex;
color: black;
font-style: normal;
text-decoration: none;
margin-right: 20px;
line-height: 60px;
text-align: center;
position: relative;
align-items: center;
}

.nav {
margin-right: 30px;
}

.nav__link:hover {
color: #00acdc;
text-decoration: none;
}

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

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

.images {
margin: 10px 50px;
}

li:last-child {
margin-right: 0;
}
Loading