Responsive Technical Document - Feedback welcome :)

Code Feedback
1

Hello Folks,
Here’s my responsive technical document: https://codepen.io/leebut/pen/JgXOvQ
I created some styles for the code blocks, but there must be an easier way to do it than to manually add all of the classes to the tags, so I only styled the first few. Maybe JavaScript can deal with that.

When the viewport shrinks horizontally, the menu slides to the left and reappears when it is hovered over.

I’ll be happy to receive any feedback on it, whether visual or code aspects.
Thank you.

2 Likes
2

That viewport effect is really good, I have no idea how to make it, but why does it sometimes turn red when I mouse away?

1 Like
3

Have you done the CSS transforms, transitions and animations challenges towards the end of the Applied Visual Design section?
One way you can learn how to do things is look at other people’s code. Find the elements on a page you are interested in learning more about, and then read the CSS that is applied to that element. That way you are not trying to understand the whole code, just the smaller parts.

This part of the CSS in my pen deals with the sliding nav:

@media screen and (max-width: 800px) {
  nav {
    transform: translateX(-293px);
    transition: all 0.5s;
    animation: inout 10s infinite;
  }
  @keyframes inout {
    50% {
      background-color: red;
    }
  }
  nav:hover {
    transform: translateX(0);
    animation: inout none;
    opacity: 0.85;
    cursor: pointer;
  }

The animation is called inout because it used to make the nave slide in and out, but I decided that wasn’t good. About the red on mouse out, I’m not exactly sure, but I think the animation continues in the background while the mouse is hovering over the nav. When the nav is hovered the animation is set to ‘none’, but it will be visible again as the nav slides back in.

4

Great looking project, keep up the great work :smile:

1 Like
5

Thank you. I’ll do what I can. :slight_smile: