All solutions

What challenges did you encounter, and how did you overcome them?

Initially, I tried to make the JavaScript code change the style.display of the thank you card from 'none' to 'block', but this interfered with the layout and the behavior of the flexbox. When you hide the card with display: none, the element is completely removed from the page flow, which can sometimes break the layout when re-displayed with display: block. Instead of using display: none and display: block, it is safer to use visibility and opacity to prevent the layout from breaking when the content is hidden and displayed. I also had to adjust the position of the cards. I created a card-container div to wrap both cards and used position: relative. In the cards, I used position: absolute so that they occupy the exact same space within this container.

What are you most proud of, and what would you do differently next time?

HTML and CSS: Improved my skills in HTML and CSS, particularly in organizing and structuring elements. Responsiveness: Learned to create responsive layouts using Flexbox and media queries, ensuring the design works well on devices of various sizes. Element Positioning: Gained a better understanding of using z-index to control the overlap of elements and how it can affect the visual hierarchy of the layout. Visual Organization: Separating elements using divs helped enhance code clarity and maintainability, allowing for a cleaner and more understandable structure.