Elements

Elements Icon
Navbar MenusArrow Icon
SlidersArrow Icon
FootersArrow Icon
Classic Footer
The Classic Footer is designed to enhance both the usability and aesthetics of websites, featuring a responsive and dynamic layout. This footer includes organized links for easy navigation, integrated social media icons, and sections for company information, making it versatile for various online platforms. Built with HTML and CSS, it ensures simplicity and ease of integration into any project. The footer is customizable through CSS variables and optimized for performance, providing a smooth user experience across different devices.
Finder
File
Edit
View
Go
Window
Help
2:35
webcraftery.com
webcraftery.com
Classic Footer
The Classic Footer is designed to enhance both the usability and aesthetics of websites, featuring a responsive and dynamic layout. This footer includes organized links for easy navigation, integrated social media icons, and sections for company information, making it versatile for various online platforms. Built with HTML and CSS, it ensures simplicity and ease of integration into any project. The footer is customizable through CSS variables and optimized for performance, providing a smooth user experience across different devices.
HTML
50%
CSS
50%
JS
0%
1<footer class="footer">
2      <div class="footer__container">
3        <div class="footer__content">
4          <h3 class="footer__title">Our Services</h3>
5          <ul class="footer__links">
6            <li><a href="#" class="footer__link">Support </a></li>
7            <li><a href="#" class="footer__link">Donate </a></li>
8            <li><a href="#" class="footer__link">Report a bug</a></li>
9            <li><a href="#" class="footer__link">Terms of Service</a></li>
10          </ul>
11        </div>
12
13        <div class="footer__content">
14          <h3 class="footer__title">Our Company</h3>
15          <ul class="footer__links">
16            <li><a href="#" class="footer__link">Blog</a></li>
17            <li><a href="#" class="footer__link">Our mission</a></li>
18            <li><a href="#" class="footer__link">Get in touch</a></li>
19          </ul>
20        </div>
21
22        <div class="footer__content">
23          <h3 class="footer__title">Community</h3>
24          <ul class="footer__links">
25            <li><a href="#" class="footer__link">Support</a></li>
26            <li><a href="#" class="footer__link">Questions</a></li>
27            <li><a href="#" class="footer__link">Usage help</a></li>
28          </ul>
29        </div>
30
31        <div class="footer__social">
32          <a href="#" class="footer__social-link"><i class="bx bxl-facebook-circle"></i></a>
33          <a href="#" class="footer__social-link"><i class="bx bxl-github"></i></a>
34          <a href="#" class="footer__social-link"><i class='bx bxl-instagram'></i></a>
35        </div>
36      </div>
37
38      <p class="footer__copy">&#169; John Wick. All right reserved</p>
39    </footer>

Docs & Downloads

You can copy code manually, download icons/images separately, or download the entire project:

Download the Project with Github

Clone the Classic Responsive Footer with one Git command:

Terminal

 - git 

Contributions are welcome!

Feel free to open issues or submit pull requests to improve this project.

View on Github

Important

Add this to the head of html:

In this element were used icons from boxicons so please don’t forget to add this link to your html head.

HTML
50%
CSS
50%
JS
0%

MIT License

Quick Guide: Start Using Your Downloaded Project

  1. 1. Download the Project

    Click the 'Download' button to save the zipped project file to your computer.

  2. 2. Unzip the Folder

    Navigate to your downloaded file and right-click on the zip file. Select "Extract All..." to unzip the contents.

  3. 3. Start Using the Project

    Open the extracted folder and access the project files. For specific setup instructions, refer to the provided documentation.

Troubleshooting Common Issues

If your download does not complete or the file is corrupt, try downloading again or contact support.

Contact Support