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

add task solution #5825

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

add task solution #5825

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
8502122
add task solution
aleksandra-golebiewska Dec 16, 2024
c679fa2
add task solution
aleksandra-golebiewska Dec 17, 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
18 changes: 9 additions & 9 deletions readme.md
View file
Open in desktop
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
90 changes: 90 additions & 0 deletions src/index.html
View file
Open in desktop
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,82 @@
</head>
<body>
<h1>Moyo header</h1>
<header>
<a href="logo" class="images">
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 for the logo link should be a valid URL or path. Consider using a relative path like ./index.html if this is meant to link back to the homepage.

<img
src="images/logo.png" alt="Moyo"
class="images"
/>
</a>
<nav class="nav">
<ul class="nav__list">
<li>
<a
href="Apple"
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 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.

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 contains an invalid URL. Consider using a valid path or URL, such as ./apple.html.

class="nav__link is-active"
>
APPLE
Copy link

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"
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 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.

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 contains an invalid URL. Consider using a valid path or URL, such as ./samsung.html.

class="nav__link"
>
SAMSUNG
Copy link

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"
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 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.

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 contains an invalid URL. Consider using a valid path or URL, such as ./smartphones.html.

class="nav__link"
>
SMARTPHONES
Copy link

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"
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 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.

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 contains an invalid URL. Consider using a valid path or URL, such as ./laptops-computers.html.

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

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"
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 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.

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 contains an invalid URL. Consider using a valid path or URL, such as ./gadgets.html.

class="nav__link"
>
GADGETS
Copy link

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"
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 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.

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 contains an invalid URL. Consider using a valid path or URL, such as ./tablets.html.

class="nav__link"
>
TABLETS
Copy link

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"
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 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.

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 contains an invalid URL. Consider using a valid path or URL, such as ./photo.html.

class="nav__link"
>
PHOTO
Copy link

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"
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 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.

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 contains an invalid URL. Consider using a valid path or URL, such as ./video.html.

class="nav__link"
>
VIDEO
Copy link

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>
73 changes: 73 additions & 0 deletions src/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,76 @@
body {
font-family: Roboto, sans-serif;
font-weight: 500;
font-size: 12px;
line-height: 14px;
margin: 0;

--text-color-second: #00acdc;
Copy link

Choose a reason for hiding this comment

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

Good job using a CSS variable for the blue color. This aligns with the task requirement to use CSS variables.

}

header {
display: flex;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
width: 100%;
text-transform: uppercase;
Copy link

Choose a reason for hiding this comment

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

Text transformation is correctly handled using CSS with text-transform: uppercase;. This is in line with the task requirements.

height: 60px;
Copy link

Choose a reason for hiding this comment

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

The header height is set explicitly, which meets the task requirement to ensure the header height is set in one place.

}

.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: var(--text-color-second);
text-decoration: none;
}

.is-active {
color: var(--text-color-second);
position: relative;
}

.is-active::after {
content: '';
position: absolute;
display: block;
background-color: var(--text-color-second);
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