Hovering over any item in the Netflix shows list should cause transition:

  • the value of the margin-left property should become -300px;
  • the value of the font-size property should be 32px.
    The duration of the transition is 1s, the timing function is ease-in-out.
    Use one property to describe the transition.

This task is part of the Full-Stack JavaScript Course
If you have any issues with it, you can ask for community help below the post
Feel free to help others if you’ve already solved the task

index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Best shows</title>
    <style>
      body {
          font-family: monospace;
      }
      h1, li {
          text-align: center;
      }
      h1 span {
          color: #DC0303;
      }
      ul {
          list-style: none;
          font-size: 16px;
      }
      li {
          position: relative;
      }
    </style>
  </head>
  <body>
    <h1>the best <span>NETFLIX</span> series:</h1>
    <ul>
      <li>The People v. O.J. Simpson</li>
      <li>Line of Duty</li>
      <li>Parks and Recreation</li>
      <li>Big Mouth</li>
      <li>The Crown</li>
    </ul>
  </body>
</html>