/handy-solver-challenge

Primary LanguageCSS

Project Title

This project for HandlySolver chaellenge

Project Structure

The project structure is organized as follows:

  • index.html: The main HTML file that integrates the enhanced UI components.
  • assets/: Contains static assets such as images, fonts, and vendor files.
    • resources/: Custom JavaScript and CSS files.
      • app.js: Contains custom JavaScript code for interactive features.
      • style.css: Contains custom CSS styles for enhancing the UI.
    • vendors/: Third-party plugins and libraries.
      • js/: JavaScript files of third-party plugins.
      • css/: CSS files of third-party plugins.
    • img/: Contains sub icon folder and images used in the project.

Technologies Used

  • HTML/HTML5: Markup language for structuring content.
  • CSS2/CSS3: Used for styling and layout.
  • JavaScript/JQuery: Implemented for dynamic behavior and interactive features.

Third-Party Enhancements

This project leverages several third-party tools and frameworks to elevate its user interface and functionality:

Normalize.css

  • A CSS reset library for consistent styling across various browsers.

jQuery

  • A versatile JavaScript library for simplified DOM manipulation, event handling, and animation.

HTML5shiv

  • Enables HTML5 elements to be used and styled in older versions of Internet Explorer.

Respond.js

  • Provides media query support for responsive design in older versions of Internet Explorer.

Modernizr

  • Detects browser features and capabilities for a better user experience.

Selectivizr

  • Adds support for CSS3 pseudo-class and attribute selectors in older versions of Internet Explorer.

AOS.js

  • A JavaScript library for scroll-triggered animations.

Animate.css

  • A cross-browser library of CSS animations.

Owl Carousel

  • owl-carousel.js: JavaScript file for the Owl Carousel plugin.

  • owl-carousel.css: Main CSS file for styling the Owl Carousel.

  • owl.theme.css: Theme CSS file for customizing the appearance of the Owl Carousel.

Custom Styles

  • styles.css: Custom CSS styles tailored to enhance the user interface of the Handy Solver challenge website.

  • reset.css: Custom CSS file for resetting default browser styles.

  • responsive.css: Custom CSS file for making the website responsive across different devices.

Custom JavaScript Modules

  • about-slider.js: Module for handling the about slider.

  • aos-initilization.js: Module for initializing AOS.js scroll-triggered animations.

  • app.js: Custom JavaScript file containing interactive functionality for the Handy Solver challenge website.

  • loader.js: Module for managing the page loader.

  • mobile-menu.js: Module for handling the mobile menu.

  • progressbar.js: Module for updating progress bars.

  • smooth-navigation.js: Module for implementing smooth page navigation.

  • sticky-navigation.js: Module for creating a sticky navigation bar.

  • testimonial-slider.js: Module for handling the testimonial slider.