@volkanguneri
Posted
Awesome!
I can suggest you in CSS
1-
background-image: url('images/icon-star.svg') center center / cover no repeat;
instead of
background-image: url(images/icon-star.svg); background-repeat: no-repeat; background-position: center;
2-
use of rem and em instead of pixels
3-
u can also use css :active proporty instead of javascript here by adding tabindex="1" to your "li" in HTML.
li:active { color: hsl(0, 0%, 100%); background-color: hsl(217, 12%, 63%); }
instead of creating a new css class
.selected { color: hsl(0, 0%, 100%); background-color: hsl(217, 12%, 63%); }
4- you can also manipulate css directly by javascript DOM instead of creating a new css class like
.display-not { display: none; }
main.style.display = 'none'; section.style.display = 'block';
I hope that it can make more economy.
I also learned from your javascript code.
Thanks
