Yet another Technical Documentation page. Thanks for your honest feedback

Hey there, here is my technical documentation page:

https://codepen.io/marco1618/full/qBabQEZ

As I want to learn Git soon, it’s focused on it. I didn’t expect it to be fun making it. :smiley:
I’m very happy that I joined freeCodeCamp, and this community in general, I’m learning a lot.
As usual, thanks for your precious feedback.

2 Likes

I really like how when you hovered over a topic the section was highlighted as well . How did you go about this if I may ask?

1 Like

Hey @Marco16168 This page looks Good! I like the colors how you have structures the color scheme. Just a few things that I noticed are that when I change the size of window to less than 700px horizontal scrollbar appear and there is some blank space on the right side as I shrink the window further that becomes bigger and bigger. I didn’t really go through the CSS to tell what might me causing the problem but I know you’ll figure it out.

1 Like

Thank you, I see what you mean now. I didn’t have this issue while working on it without codepen. I need to have a look at it.

Thank you @ashwinralph, I’ll try to explain.

The index is a <ul> and every main topic is a <li>. So if you do:

 nav ul li:hover {
  background-color: var(--green1);
}

you get the color var(–green1) when you hover a main topic.
Then, since the sub-topics are another <ul> altogether you can do:

nav ul li li:hover {
  background-color: var(--green2);
} 

and you get the color var(–green2) on that sub-topic; since the latter is in fact part of the “main” (the parent) <li>, the :hover state on that <li> is still valid.

Hope I’ve been clear enough, English is not my first language.

1 Like

Ah I seee, that’s pretty clever, good job :grinning_face_with_smiling_eyes:

Found it, thanks :nerd_face: