DEV Community

Cover image for CSS & JavaScript: Beaches
Deep Patel
Deep Patel

Posted on

CSS & JavaScript: Beaches

This is a submission for Frontend Challenge v24.04.17, Glam Up My Markup: Beaches

What I Built

  1. CSS: I have used a modern, clean design with a color palette that reflects the beach theme, smooth transitions, and hover effects.
  2. JavaScript: I added interactive elements like a modal window to show more details about each beach and a smooth scroll effect for a better user experience.

Demo

Image description

GitHub link: Beaches

Journey

Key Enhancements:

  1. Modal Animation: Added fade-in and slide-in animations for the modal to make it more engaging.
  2. Backdrop Filter: Applied a blur effect to the background when the modal is open for better focus and a modern look.
  3. Hover Effects: Added hover effects to the beach list items to make them interactive and visually appealing.
  4. Responsive Design: Ensured the modal is responsive and looks good on various screen sizes.
  5. Interactivity: Made each beach title clickable to trigger the modal, displaying more information dynamically.

Top comments (1)

Collapse
 
jess profile image
Jess Lee

🙌