Footer Library - MKQazi786

A customizable footer component for web applications, featuring popular social icons and flexible styling options.

Features

• Fully Customizable: Easily modify text, colors, and social media links.
• Responsive Design: Adapts to all screen sizes.
• Supports Popular Icons: GitHub, LinkedIn, Facebook, YouTube, and more.

Installation

You can include the library using CDN, unpkg, or npm:

1. CDN:

<script src="https://cdn.jsdelivr.net/gh/MKQazi786/Footer-library-MKQazi786-/footer.js"></script>

2. unpkg:

<script src="https://unpkg.com/footer-library-mkqazi786-/footer.js"></script>

NPM Usage

Or you can install it via npm:

npm install footer-library-mkqazi786

After installing via npm, import the library in your JavaScript file:

import { loadFooter } from 'footer-library-mkqazi786';

Usage

For CDN and unpkg

Initialize the footer with your custom configuration options:

<script>
loadFooter({
    copyrightText: "Enter Your Field Like (Web and App Developer)",
    developerName: "Your Name Here Like (Muhammad Khubaib)",
    links: [
        { url: 'https://www.github.com/MKQazi786', icon: 'github' },
        { url: 'https://www.linkedin.com/in/muhammad-khubaib-mkqazi786/', icon: 'linkedin' },
        { url: 'https://www.facebook.com/MKQazi786', icon: 'facebook' },
        { url: 'https://www.youtube.com/@MKQazi786', icon: 'youtube' },
        { url: 'https://x.com/MKQazi786', icon: 'twitter' }
    ],
    textColor: "#ffffff",          // Text color for footer text
    iconColor: "#cccccc",          // Color of social icons
    backgroundColor: "#333333"     // Background color of footer
});
</script>

For npm

After installation, import and initialize in your JavaScript file:

import loadFooter from 'footer-library-mkqazi786';
loadFooter({
copyrightText: "Enter Your Field Like (Web and App Developer)",
developerName: "Your Name Here Like (Muhammad Khubaib)",
links: [
{ url: 'https://www.github.com/MKQazi786', icon: 'github' },
{ url: 'https://www.linkedin.com/in/muhammad-khubaib-mkqazi786/', icon: 'linkedin' },
{ url: 'https://www.facebook.com/MKQazi786', icon: 'facebook' },
{ url: 'https://www.youtube.com/@MKQazi786', icon: 'youtube' },
{ url: 'https://x.com/MKQazi786', icon: 'twitter' }
],
textColor: "#ffffff",
iconColor: "#cccccc",
backgroundColor: "#333333"
});

Configuration Options

Here’s a list of all available configuration options and their descriptions:

Option	Description
copyrightText	Your designation or field, e.g., "Web and App Developer".
developerName	Your name, e.g., "Muhammad Khubaib".
links	An array of social media links with URLs and icon names.
url	Link to the social profile.
icon	Name of the icon, e.g., "github", "linkedin", "facebook", "youtube", "twitter-x".
textColor	Text color in hexadecimal, e.g., "#ffffff".
iconColor	Icon color in hexadecimal, e.g., "#cccccc".
backgroundColor	Background color in hexadecimal, e.g., "#333333".

License

Licensed under the ISC License.

End

Thank you for using the Footer Library MKQazi786! For any questions or feedback, feel free to reach out.