National Art Museum of Ukraine Landing Page

Visit the Website | View Figma Design

This landing page project for the National Art Museum of Ukraine showcases responsive design and a comprehensive range of features implemented using HTML5, SCSS, and JavaScript.

Project Overview

• Technologies Used: HTML5, SCSS, JavaScript
• Methodology: BEM (Block Element Modifier)
• Optimization:
  • HTML/CSS: Validated using W3C validator
  • Image and Font Compression
  • SVG Usage in HTML for Scalability
  • Responsive Design: Adapted for Desktop, Tablet, and Mobile
  • Font Formats: TTF, WOFF, WOFF2 for performance and browser support
  • Image Formats: WEBP with responsive sizing based on screen width
• Features:
  • Semantic HTML Structure
  • Excellent Accessibility Practices
  • Header, Toggleable Aside Menu
  • CSS Animations
  • Pixel-Perfect Design

Additional Details:

• Mobile-First Approach: The project follows a mobile-first design strategy, ensuring seamless responsiveness across various devices.
• Reset.css and Cross-Browser Support: Utilizes reset.css for enhanced development, achieving pixel-perfect design, and ensuring cross-browser compatibility.
• SCSS Preprocessor Features: Leverages SCSS with placeholders, mixins, and other preprocessor features for efficient styling and code management.
• Layout with Flexbox and Grid: Utilizes Flexbox and GRID for creating flexible and responsive layouts.
• No External Fonts or Icon Libraries: The project is independent of external font and icon libraries like Google Fonts, utilizing only in-house assets like SVG icons for enhanced performance and autonomy.
• Animation on Scroll implementation: Pure JavaScript Implementation for Scroll Animations in "Visit" Block