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 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.
- 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/
- HTML5
- CSS3
- Flexbox
- CSS Grid
- Mobile-first workflow
- Leaflet.js
- Mapbox API
-
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.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent