https://github.com/veronika-chenko/orange-digital-project-test

An adaptive main page for a real estate developer website
https://github.com/veronika-chenko/orange-digital-project-test

css3 html5 javascript sass swiper-slider

Last synced: 5 days ago
JSON representation

An adaptive main page for a real estate developer website

• Host: GitHub
• URL: https://github.com/veronika-chenko/orange-digital-project-test
• Owner: Veronika-chenko
• Created: 2023-08-15T18:53:32.000Z (over 1 year ago)
• Default Branch: master
• Last Pushed: 2024-08-21T14:53:21.000Z (3 months ago)
• Last Synced: 2024-08-21T16:50:56.488Z (3 months ago)
• Topics: css3, html5, javascript, sass, swiper-slider
• Language: CSS
• Homepage: https://veronika-chenko.github.io/orange-digital-project-test/
• Size: 3.26 MB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Digital Project Website

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.

## Features

- **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.

## Technologies Used

- **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.