General Tryout page 1

Basic layout prob

There was a problem laying out pages in the regular way. There was a gap between the container and the top of the page. This is due to the margin on the top element, which could typically be an h1 heading.

Reduce that to margin-top: 0; and use the container's padding to make the space: padding-top: 3em;

Dropdown Menu Animation

Some tries w animation out a dropdown menu.

• item 1
• item 2
• item 3
  • item 4
  • item 5
  • item 6
  • item 7
  • item 8
• item 4

The problem is how to get an animation to work when you remove the hover state. Putting an animation in the original element doesn't seem to work.

Illo explicabo velit impedit mollitia quaerat aliquid eaque pariatur perspiciatis odit quod ipsa eum amet ut, nihil deserunt vel minus dicta perferendis? Illum odio tempora, dolores.

The containing div has a width of 50% and a height of 550px. The image is set to object-fit: contain which means it shouldn't clip it.