This project is a test task with the goal of creating an adaptive page based on the desktop FIGMA layout, using the SASS (SCSS) preprocessor.
-
Adaptability: The website's design has been self-developed to dynamically adapt to different screen sizes, ensuring a user-friendly experience across desktops, mobile phones, and tablets.
-
SVG Sprite Graphics: The power of SVG sprites has been harnessed to efficiently manage and display multiple graphics while minimizing HTTP requests. This approach contributes to quicker loading times and a smoother user experience.
-
Scroll Animations: Scroll animations have been integrated to bring elements to life as users navigate through the content. These animations provide an engaging and interactive browsing experience.
-
Sass Integration: The website's styles have been organized and enhanced using Sass, a powerful CSS preprocessor. This allows for more efficient styling, variable usage, and code reusability.
-
Mobile Menu Functionality: A JavaScript-powered mobile menu enhances the website's navigation on smaller screens, ensuring a seamless experience for all users.
-
Swiper Sliders in Hero Section: The Hero section features Swiper sliders, implemented with JavaScript, to showcase images that dynamically transition, creating an engaging introduction to the website.
- HTML5: The foundation of the website's structure and content presentation.
- CSS3: Styling and layout control, including the implementation of adaptability for different devices.
- Sass: Utilized to streamline and optimize the website's styles, offering features like variables and nesting.
- JavaScript: Used for scroll animations, mobile menu functionality, and Swiper sliders.
- SVG: Utilized for creating vector graphics that remain sharp and clear at any resolution.
- SVG Sprite: A technique used to consolidate multiple SVG images into a single sprite, optimizing loading times.