Frontend Mentor - Galleria slideshow site solution

This is a solution to the Galleria slideshow site challenge on Frontend Mentor.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
  • Useful resources
• Author
• Acknowledgments

Overview

The challenge

Users should be able to:

• View the optimal layout for the app depending on their device's screen size
• See hover states for all interactive elements on the page
• Navigate the slideshow and view each painting in a lightbox

Screenshot

Links

• Solution URL: GitHub repo
• Live Site URL: Vercel Live preview

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• Tailwind
• Sass/Scss
• Mobile-first workflow
• Vanilla JS
• BEM & CUBE CSS
• Astro dynamic routes

What I learned

I've done this project with dynamic routes in astro to navigate between the painting pages. And also for the CSS I've used grid layout to build a masonry layout. I've also used Sass, Tailwind and custom properties.

Author

• Frontend Mentor - @kaamiik
• X - @kiaakamran