A responsive, mobile-first landing page showcasing natural landscapes.

• Started with mobile layout and progressively enhanced for wider screens
• Used CSS Grid for card layouts

1. HTML Structure

   • Semantic HTML5 elements
   • Proper heading hierarchy
   • ARIA roles where appropriate

2. CSS Features

   • Mobile-firsit media queries
   • Grid layouts
   • CSS animations, enhanced user experience

3. JavaScript

   • Minimal JavaScript for smooth scrolling
   • Event delegation

MIT License - Feel free to use in personal and commercial projects.

1. Fork the repository
2. Create your feature branch
3. Make your changes
4. Test on multiple devices
5. Submit a pull request

• Optimized images using appropriate sizes
• Minimal JavaScript usage
• CSS animations for better performance
• Efficient selectors for styling

1. Responsive Images

   • Challenge: Maintaining image aspect ratios across different screen sizes
   • Solution: Used object-fit: cover with defined heights

2. Smooth Scrolling

   • Challenge: Implementing smooth scroll behavior across browsers
   • Solution: Combined CSS scroll-behavior

• Tested on latest versions of:
  • Chrome
  • Edge

• Add more interactive features(animation on hero banner text)
• Scroll customize

1. Ensure all assets (images) are in the root directory
2. Open index.html in a web browser
3. No build process required (HTML, CSS, and JavaScript implementation).

• Codesandbox.io Link

Built with ❤️ by Krishna S (Waller)