Art gallery website

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned

Overview

This is one of my initial projects where I ventured into creating a multi-page website. It's designed for an art gallery and showcases my first attempt at integrating an API using leaflet.js for map functionality. The website is built with straightforward HTML, CSS, and JavaScript and is made to be fully responsive to fit any device.

The challenge

The site is designed for users to:

• Experience an optimal layout tailored to their device's screen size.
• Observe hover states for all interactive elements.
• Engage with a map, powered by Leaflet.js.

Screenshot

Links

• Solution URL: https://www.frontendmentor.io/solutions/art-gallery-website-api-leafletjs-html-css-js-responsive-SkmwU5_f9
• Live Site URL: https://jolly-arithmetic-681a61.netlify.app/

My process

Built with

• HTML5
• CSS3
• Flexbox
• CSS Grid
• Mobile-first workflow
• Leaflet.js
• Mapbox API

What I learned

• Linear Gradient on Text: I explored the use of linear gradients as a color effect on text, giving it a dynamic and engaging look.

• Picture Tag & Srcset: I familiarized myself with the element and the srcset attribute, which are vital for responsive image solutions. This ensures images are displayed optimally across a variety of device sizes and resolutions.