# 🦶 Footer Collection

> A premium collection of **15 modern responsive footer designs** built with **HTML, CSS, and Vanilla JavaScript** — designed for developers who want beautiful, reusable, production-ready website footers without frameworks.

![HTML](https://img.shields.io/badge/HTML5-100%25-orange?style=for-the-badge&logo=html5)
![CSS](https://img.shields.io/badge/CSS3-Modern-blue?style=for-the-badge&logo=css3)
![JavaScript](https://img.shields.io/badge/JavaScript-Vanilla-yellow?style=for-the-badge&logo=javascript)
![Responsive](https://img.shields.io/badge/Responsive-Mobile%20First-success?style=for-the-badge)
![Accessibility](https://img.shields.io/badge/Accessibility-Friendly-success?style=for-the-badge)
![License](https://img.shields.io/badge/License-MIT-green?style=for-the-badge)

---

# 📸 Collection Preview

| Modern Business | SaaS Startup |
|---|---|
| ![](PREVIEW/Modern%20Business.png) | ![](PREVIEW/SaaS%20Startup.png) |

| Creative Agency | Luxury Hotels |
|---|---|
| ![](PREVIEW/Creative%20Agency.png) | ![](PREVIEW/Luxury%20Hotels.png) |

| Travel Agency | Restaurant |
|---|---|
| ![](PREVIEW/Travel%20Agency.png) | ![](PREVIEW/Resturant.png) |

| Real Estate | Medical Clinic |
|---|---|
| ![](PREVIEW/Real%20Estate.png) | ![](PREVIEW/Medicinal%20Clinic.png) |

| E-commerce | Developer Portfolio |
|---|---|
| ![](PREVIEW/E-commerce.png) | ![](PREVIEW/Developer%20Porotoflio.png) |

| Fintech Banking | Gaming Platform |
|---|---|
| ![](PREVIEW/Fintech%20Banking.png) | ![](PREVIEW/Gaming%20Platform.png) |

| Minimal Scandinavian | Glass Morphism |
|---|---|
| ![](PREVIEW/Minimal%20Scandinavian.png) | ![](PREVIEW/Glass%20Morphism.png) |

| Cyber Security |
|---|
| ![](PREVIEW/Cyber%20Security.png) |

---

# ✨ Overview

The footer is one of the most overlooked sections of a website, yet it plays a major role in navigation, branding, SEO, trust, and user experience.

This collection provides **15 completely different responsive footer templates**, each built from scratch using semantic HTML, modern CSS, and vanilla JavaScript.

Every footer is fully independent, making it easy to copy directly into any personal or commercial project.

No frameworks.

No dependencies.

No build tools.

Just clean, reusable frontend code.

---

# 🎯 What's Included

✔ 15 Unique Footer Designs

✔ Responsive Layouts

✔ Mobile Friendly

✔ Newsletter Sections

✔ Contact Information

✔ Social Media Links

✔ Business Information

✔ Company Navigation

✔ Copyright Areas

✔ Trust Badges

✔ Back To Top Button

✔ Smooth Hover Animations

✔ Accessible HTML

✔ Copy & Paste Ready

✔ Production Ready

---

# 🦶 Footer Collection

| # | Design |
|---|------------------------|
| 01 | Modern Business |
| 02 | SaaS Startup |
| 03 | Creative Agency |
| 04 | Luxury Hotel |
| 05 | Travel Agency |
| 06 | Restaurant |
| 07 | Real Estate |
| 08 | Medical Clinic |
| 09 | E-commerce Store |
| 10 | Developer Portfolio |
| 11 | Fintech Banking |
| 12 | Gaming Platform |
| 13 | Minimal Scandinavian |
| 14 | Glassmorphism |
| 15 | Cyber Security |

---

# ⚡ Features

- 📱 Fully Responsive
- 🎨 Modern UI
- ⚙️ Vanilla JavaScript
- 🚀 Lightweight
- ♿ Accessible
- 🖱 Smooth Animations
- 💻 Clean Folder Structure
- 📦 Copy & Paste Ready
- 🧩 Modular Components
- 🛠 Beginner Friendly
- 🌐 Cross Browser Compatible
- 📈 Production Ready

---

# 🛡 Accessibility

Every footer includes accessibility best practices.

- Semantic HTML
- Keyboard navigation
- Visible focus states
- Screen-reader friendly markup
- Accessible newsletter forms
- Responsive layouts

---

# 📂 Project Structure

```text
footer-collection/

├── index.html
├── README.md
├── LICENSE
├── PREVIEW/
│
├── assets/
│   ├── preview.css
│   └── preview.js
│
├── footer-01/
├── footer-02/
├── footer-03/
├── footer-04/
├── footer-05/
├── footer-06/
├── footer-07/
├── footer-08/
├── footer-09/
├── footer-10/
├── footer-11/
├── footer-12/
├── footer-13/
├── footer-14/
└── footer-15/
```

Every footer folder contains:

```text
index.html
style.css
script.js
```

Each footer works completely independently.

---

# 🚀 Getting Started

Clone the repository

```bash
git clone https://github.com/PicartWeb/footer-collection.git
```

or download the ZIP.

Open

```text
index.html
```

inside your browser.

No installation required.

No npm.

No frameworks.

No packages.

No build process.

---

# 📋 Using a Footer

Using one of the footers takes less than one minute.

1. Open the footer folder you want.
2. Copy the HTML.
3. Copy the CSS.
4. Copy the JavaScript (optional).
5. Replace links, branding, contact details and newsletter integration.

Done.

---

# 🎨 Customization

Every footer is intentionally easy to edit.

You can quickly change:

- Company Logo
- Company Name
- Navigation Links
- Footer Columns
- Colors
- Typography
- Social Media Icons
- Contact Information
- Newsletter Form
- Copyright Text
- Background
- Icons
- Animations
- Buttons
- Border Radius
- Shadows
- Spacing

---

# 🌐 Browser Support

Tested with modern browsers.

- ✅ Chrome
- ✅ Edge
- ✅ Firefox
- ✅ Safari

---

# 🤝 Contributing

Contributions are welcome.

You can contribute by:

- Adding new footer layouts
- Improving responsiveness
- Improving accessibility
- Improving animations
- Fixing bugs
- Improving documentation

Please open a Pull Request.

---

# ⭐ Support the Project

If you found this project useful:

⭐ Star this repository

🍴 Fork it

💬 Share it with other developers

🚀 Use it in your own projects

Every star helps support future free developer resources.

---

# 📄 License

Licensed under the **MIT License**.

Feel free to use these footers in:

- Personal Projects
- Freelance Projects
- Client Websites
- Commercial Products
- Open Source Projects

No attribution required, although it is always appreciated.

---

## 👨‍💻 Built for the Developer Community

Made with ❤️ to help developers build faster, create better websites, and ship beautiful user experiences.

---

# 👨‍💻 About the Author

Hi! I'm **Korab**, a full-stack web developer passionate about building modern web applications, SaaS platforms, admin dashboards, booking systems, CRM solutions, and reusable developer resources.

I enjoy creating free open-source projects that help developers learn faster, build faster, and create better websites.

If this project helped you, consider giving it a ⭐ and following my work.

---

# 🌍 Connect With Me

🌐 **Website:** https://picartweb.com

💻 **GitHub:** https://github.com/PicartWeb

💼 **LinkedIn:** https://www.linkedin.com/in/korab-ahmeti-06916b348/

📸 **Instagram:** https://www.instagram.com/picart_web/

🎵 **TikTok:** https://www.tiktok.com/@picartweb

▶️ **YouTube:** https://www.youtube.com/@Picart_web

💬 **Discord Community:** https://discord.gg/2enUxfQRr

📧 **Email:** info@picartweb.com

---

# ❤️ Support My Work

If you enjoy this project and would like to support future free developer resources:

⭐ Star this repository

🍴 Fork it

🐛 Report issues

💡 Suggest new footer ideas

📢 Share it with other developers

Every star, fork, and contribution motivates me to continue building high-quality free UI resources for the developer community.

---

# 🚀 More Free UI Collections

This repository is part of a growing collection of free developer resources.

## ✅ Already Released

- Responsive Navbar Collection
- Login & Register UI Collection
- 404 Page Collection
- Contact Form Collection
- Footer Collection
- Admin Dashboard Template Collection

## 🔜 Coming Soon

- Hero Section Collection
- Pricing Table Collection
- Buttons Collection
- Cards Collection
- Modal Collection
- Toast Notification Collection
- Skeleton Loader Collection
- FAQ Collection
- Team Section Collection
- Feature Section Collection
- Call To Action Collection
- Landing Page Collection
- Statistics Section Collection
- Timeline Collection
- Pricing Calculator Collection
- Charts Collection
- Admin Widgets Collection

Stay tuned for many more free UI resources!

---

# ☕ Why I Build These Collections

I believe developers shouldn't have to reinvent common UI components for every project.

These collections are designed to help:

- 👨‍💻 Developers
- 🎓 Students
- 🚀 Startups
- 💼 Freelancers
- 🏢 Agencies
- 🌍 Open Source Contributors

Build modern websites faster while learning clean frontend architecture and responsive design.

Every collection focuses on:

- Clean Code
- Responsive Design
- Accessibility
- Reusability
- Performance
- Modern UI/UX
- Production-Ready Quality

---

# ⭐ Like This Project?

If this repository saved you time or inspired your next project...

⭐ Star it

🍴 Fork it

📢 Share it with other developers

💬 Join the Discord community

Your support helps me continue releasing free resources for developers worldwide.

---

### Built with ❤️ by Picart Web

**Picart Web** — Building modern websites, SaaS platforms, admin dashboards, booking systems, CRM software, business websites, and digital solutions for businesses worldwide.

🌐 https://picartweb.com