-
Notifications
You must be signed in to change notification settings - Fork 4.8k
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 solution #5348
base: master
Are you sure you want to change the base?
add solution #5348
Conversation
izotovav
commented
Sep 9, 2024
- DEMO LINK
- TEST REPORT LINK
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
src/index.html
Outdated
<h1>Moyo header</h1> | ||
<header class="header"> | ||
<a | ||
class="logo" |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
class="logo" | |
class="header__link" |
src/index.html
Outdated
<main> | ||
<div class="div"></div> | ||
</main> | ||
<footer></footer> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Redundant
<main> | |
<div class="div"></div> | |
</main> | |
<footer></footer> |
font-family: Roboto, sans-serif; | ||
font-size: 12px; | ||
font-weight: 500; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Move font styles to the html selector
src/style.css
Outdated
div:hover::after { | ||
outline: solid 1px; | ||
text-decoration-color: var(--active-color); | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
div:hover::after { | |
outline: solid 1px; | |
text-decoration-color: var(--active-color); | |
} |
src/style.css
Outdated
display: block; | ||
height: 4px; | ||
width: 37px; | ||
background-color: #00acdc; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Create a variable for repeated colors
src/style.css
Outdated
content: ''; | ||
display: block; | ||
height: 4px; | ||
width: 37px; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
width: 37px; | |
width: 100%; |
src/style.css
Outdated
} | ||
|
||
.logo { | ||
position: absolut; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
position: absolut; |
src/style.css
Outdated
color: var(--active-color); | ||
} | ||
|
||
.data-qa:hover { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
.data-qa:hover { | |
.nav__link:hover { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Almost done!
src/index.html
Outdated
<nav class="nav"> | ||
<ul class="nav__list"> | ||
<li class="nav__item"> | ||
<a class="nav__link color is-active">Apple</a> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
<a class="nav__link color is-active">Apple</a> | |
<a class="nav__link is-active">Apple</a> |
src/style.css
Outdated
@@ -1,3 +1,80 @@ | |||
body { | |||
margin: 0; | |||
|
|||
--active-color: #00acdc; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Create a variable with root selector
src/style.css
Outdated
.header:hover { | ||
outline: solid 3px var(--active-color); | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
.header:hover { | |
outline: solid 3px var(--active-color); | |
} |
src/style.css
Outdated
color: var(--active-color); | ||
} | ||
|
||
a:hover { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Use class selector here
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Good job! 👍
src/index.html
Outdated
</a> | ||
<nav class="nav"> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
</a> | |
<nav class="nav"> | |
</a> | |
<nav class="nav"> |
src/index.html
Outdated
</li> | ||
<li class="nav__item"> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
</li> | |
<li class="nav__item"> | |
</li> | |
<li class="nav__item"> |