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

MOYO header added task solution #113

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

MOYO header added task solution #113

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
74a4ecd
added task solution
aRabiej Jun 30, 2023
cde2822
added reset.css fixed formatting
aRabiej Jul 1, 2023
bccd290
made changes in css
aRabiej Jul 3, 2023
29d51fa
added a color variation
aRabiej Jul 4, 2023
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
@@ -1,7 +1,7 @@
# Moyo header
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-en/)
- [TEST REPORT LINK](https://<your_account>.github.io/layout_moyo-header-en/report/html_report/)
- [DEMO LINK](https://aRabiej.github.io/layout_moyo-header-en/)
- [TEST REPORT LINK](https://aRabiej.github.io/layout_moyo-header-en/report/html_report/)

> Follow [these instructions](https://mate-academy.github.io/layout_task-guideline/#how-to-solve-the-layout-tasks-on-github)

Expand Down
41 changes: 40 additions & 1 deletion src/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,48 @@
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Moyo header</title>
<link rel="stylesheet" href="./reset.css">
<link rel="stylesheet" href="./style.css">
<link
href="https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap"
rel="stylesheet"
type="text/css"
>
</head>
<body>
<h1>Moyo header</h1>
<header class="navigation__bar">
<a href="#home" class="nav_link">
<img src="images/logo.png" alt="icon of the website">
</a>
Copy link

Choose a reason for hiding this comment

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

Here between the a and nav there should be an empty lines as they are siblings.
Generally there are a few rules regarding spacing your tags for the sake of codes redability:

  • siblings should have an empty line between each other
<div>
  <span></span>

  <p></p>
</div>

there are however a few exceptions from that rule, for example when you have a bunch of repeated tags like in your ul below:

<div>
  <p></p>
  <p></p>

  <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>


<nav class="nav">
<ul class="nav_list">
<li class="nav_item">
<a href="#apple" class="is-active nav_link">Apple</a>
</li>
<li class="nav_item">
<a href="#samsung" class="nav_link">Samsung</a>
</li>
<li class="nav_item">
<a href="#smartphones" class="nav_link">SmartPhones</a>
</li>
<li class="nav_item" data-qa="hover">
<a href="#laptops" class="nav_link">Laptops & computers</a>
</li>
<li class="nav_item">
<a href="#gadgets" class="nav_link">Gadgets</a>
</li>
<li class="nav_item">
<a href="#tablets" class="nav_link">Tablets</a>
</li>
<li class="nav_item">
<a href="#photo" class="nav_link">Photo </a>
</li>
<li class="nav_item">
<a href="#video" class="nav_link">Video</a>
</li>
</ul>
</nav>
</header>
</body>
</html>
87 changes: 87 additions & 0 deletions src/reset.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,87 @@
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
vertical-align: baseline;
}
63 changes: 62 additions & 1 deletion src/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,62 @@
/* Styles go here */
body {
Copy link

Choose a reason for hiding this comment

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

One of the task requirements is to reset browsers default styles, setting margin: 0; only on the body is not enough. You reset the styles either by setting default values on all elements

* {
  margin: 0;
}

or by creating a new file reset.css with for example Meyer Reset and importing it to the main one -> this way is better as in meyers reset you have complete control over what elements you modify as they are all listed instead of blindly setting values with *

margin: 0;
Copy link

Choose a reason for hiding this comment

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

You don't need this rule if you imported reset.css file :) it already has that

text-transform: uppercase;
font-family: "Roboto", sans-serif;
font-weight: 500;
}

.navigation__bar {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: 0 50px;
background: rgb(255 255 255);
box-shadow: 0 2px 4px rgb(0 0 0 / 5%);
}

.nav_list {
display: flex;
list-style: none;
}

.nav_item {
position: relative;
margin-left: 20px;
font-size: 12px;
box-sizing: border-box;
display: flex;
align-items: center;
cursor: pointer;
}

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

.nav_link {
color: black;
text-decoration: none;
display: flex;
align-items: center;
height: 60px;
}

.nav_link:hover {
color: #00acdc;
}

.is-active {
color: #00acdc;
Copy link

Choose a reason for hiding this comment

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

You are using this color 3 times, so it would be good to use here css variables to make color modification easier.
Create variable for the color :)

Copy link

Choose a reason for hiding this comment

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

Bump this comment you can declare a variable in .css as example: --blue: #1e90ff; and then you use it where do you need as an example color: var(--blue); or background-color: var(--blue);

}

.is-active::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 4px;
border-radius: 2px;
background-color: #00acdc;
}