Drink2Go is a one-page landing site for a coffee shop, developed as a personal study project. The landing page is designed to provide an engaging and informative experience for potential customers. It features responsive design optimized for various devices, from mobile to desktop, with a flexible layout that adapts seamlessly to different screen dimensions.

HTML, SCSS, and JavaScript. JavaScript libraries: noUiSlider for price range selectors, Swiper JS for interactive product slider, and Leaflet for the interactive map feature. Gulp is employed to optimize the development workflow, automating processes such as image conversion, SVG sprite creation, file minification, and more.

• Responsive Design: The landing page is designed with a mobile-first approach, ensuring optimal viewing experience across various devices.
• Interactive Elements: Interactive autoplaying slider for product showcasing, price range selection, interactive map.
• Retina Resolution Support: All images are optimized for retina resolution screens.
• Optimized Workflow: Gulp automates development tasks, improving efficiency and productivity during the development process.
• Accessibility and cross-browser compatibility: The website adheres to accessibility principles to ensure inclusivity and usability for all users. Cross-browser compatibility is implemented with Gulp automations, ensuring the site functions correctly across different web browsers.

In the project directory, you can run:

• npm run lint: Runs editorconfig, stylelint, w3c validation, and BEM linter to ensure code quality and adherence to coding standards.
• npm start: Runs the development server using Gulp, allowing you to preview the website in your browser.
• npm run build: Builds the project for production.
• npm run preview: Builds the project for production and starts a server to preview the website.
• npm run deploy: Deploys the built project to GitHub Pages.

To view the Drink2Go landing page, visit the following link: Drink2Go Landing Page

The Figma design for the landing page was provided by HTML Academy.