How to Create a Stylish Footer Using HTML, CSS & JavaScript

They may be at the bottom of the page, but website footers hold immense power! From navigation to brand storytelling, footers can play a crucial role in how users experience your website.

What is a footer on a website?

A website footer is the area consistently located at the bottom of every webpage. It serves as a designated space to display various informative elements for users. Footers typically contain essential details like contact information, copyright notices, navigation links, and sometimes even social media icons. Although footers aren't the most prominent section of a website, they play a significant role in user experience by providing easy access to valuable information.

In quick tutorial, we'll walk you through the steps to create your own stunning neon themed website footer using HTML, CSS and JavaScript, adding a touch of retro-futuristic flair to your online presence.

We will use a simple layout with four columns and a fixed position at the bottom of the page. We will also add some animations and effects to make the website footer more attractive and dynamic.

Here's a sneak peak of how our neon themed website footer design will look.

Step 1: HTML Structure

The first step is to create the HTML structure for our footer. We will use a <div> element with the class footer to wrap the whole footer content. Inside the footer, we will have two sections: an upper section and a lower section. The upper section will have four <div> elements with the class column, each representing a column of the footer. Each column will contain a <h3> element for the title and a <ul> element for the list of links. We will also add some icons from Font Awesome for the social media links. The lower section will have our copyright text and will span the width of the screen.

Here's the HTML code for the footer:

HTML

                        
<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>A Stylish Footer</title>

  <link rel="stylesheet" type="text/css" href="style.css">

  <!-- Add the Font Awesome link here -->



</head>

<body>

    <main>

      <!-- page content goes here -->

    </main>



    <footer>

      <div class="upper-section">

        <div class="column">

          <img class="logo-img" src="sample-neon-logo.jpg" alt="logo">

        </div>

        <div class="column">

          <h3 class="neon-underline footer-header">About Us</h3>

          <ul>

            <li><a href="#">Who We Are</a></li>

            <li><a href="#">What We Do</a></li>

            <li><a href="#">Our Mission</a></li>

            <li><a href="#">Our Values</a></li>

          </ul>

        </div>

        <div class="column">

          <h3 class="neon-underline footer-header">Quick Links</h3>

          <ul>

            <li><a href="#">Home</a></li>

            <li><a href="#">Services</a></li>

            <li><a href="#">Portfolio</a></li>

            <li><a href="#">Contact</a></li>

          </ul>

        </div>

        <div class="column">

          <h3 class="neon-underline footer-header">Follow Us</h3>

          <ul>

            <li><a href="#"><i class="fa fa-facebook-f"></i> Facebook</a></li>

            <li><a href="#"><i class="fa fa-twitter"></i> Twitter</a></li>

            <li><a href="#"><i class="fa fa-instagram"></i> Instagram</a></li>

            <li><a href="#"><i class="fa fa-linkedin"></i> LinkedIn</a></li>

          </ul>

        </div>

      </div>

      <div class="lower-section">

        <p>© <span id="year"></span> Asaqeni Stylish Footer. All rights reserved.</p>

      </div>

    </footer>



  <script src="script.js"></script>

</body>

</html>

Adding Fontawesome

In the head section of the HTML file, add the following:

HTML

                        
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

Logo image

For this tutorial, we created a neon logo on a dark background. The image is then placed in the same folder as our HTML file. You can use any image of your choice but you would need to make sure it matches or compliments your footer's background.

Step 2: CSS Style

The next step is to add some CSS style to our footer. We will use the following properties and values:

The main layout

Global Box Sizing: This ensures consistent element sizing across browsers.
Flexible Layout: Uses display: flex and flex-direction: column to create a vertically flexible layout, allowing the footer to stick to the bottom.
Minimum Height: Sets a minimum height of 100vh to ensure the main content fills the viewport before stretching the footer.

The footer

Flexible Footer: Our footer uses display: flex and flex-direction: column for vertical arrangement and responsive alignment.
Stylish Background: Sets a black background with white text for a visually striking contrast.
Centered Content: Uses text-align: center for horizontal alignment and justify-content: center for vertical centering.
Responsive Positioning: We use margin-top: auto to stick the footer to the bottom, even when content is short.
Neon-Inspired Underline: We have created a unique glowing underline effect for links using a gradient and multiple box shadows.
Structured Sections: Divides the footer into upper and lower sections for clear organization.
Column Layout: Uses display: flex and justify-content: space-around to create a balanced four-column layout in the upper section.
Mobile-Friendly Adaptations: We use media queries to adjust layout and styling for smaller screens, ensuring a seamless experience across devices.

Here's the CSS code for the footer:

CSS

                        
* {

  box-sizing: border-box;

}



body {

  padding: 0;

  margin: 0;

  display: flex;

  flex-direction: column;

  min-height: 100vh;

}



main {

  flex: 1;

}



footer {

  width: 100%;

  background-color: black;

  color: white;

  text-align: center;

  margin-top: auto;

  padding: 20px 20px 10px 20px;

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  font-family: Arial, sans-serif;

}



.upper-section {

  width: 100%;

  padding: 20px;

  display: flex;

  justify-content: space-around;

  align-items: center;

}



.column {

  margin: 10px;

  text-align: left;

}



.neon-underline {

  position: relative; /* Enable positioning for the underline */

  text-decoration: none; /* Remove default underline */

}



.neon-underline::after {

  content: "";

  position: absolute;

  bottom: -5px; /* Adjust for desired underline thickness */

  left: 0;

  width: 100%;

  height: 1px; /* Adjust height as needed */

  background: linear-gradient(to right,

    hotpink 0%,

    rgb(255, 145, 0) 25%,

    rgb(217, 0, 255) 75%,

    rgb(246, 191, 255) 100%);

  /* Adjust colors to your preference */

  box-shadow: 0 0 5px hotpink, /* Inner glow */

              0 0 10px rgb(255, 145, 0), /* Middle glow */

              0 0 15px rgb(217, 0, 255); /* Outer glow */

}



.logo-img {

  display: block;

  width: 100px;

  height: 100px;

}



.footer-header {

  margin-bottom: 16px;

}



.column ul {

  list-style: none;

  padding: 0;

  margin: 0;

}



.column li {

  margin-top: 10px;

}



.column a {

  color: white;

  text-decoration: none;

  transition: all 0.3s ease;

}



.column a:hover {

  font-weight: bold;

}



.column i {

  width: 12px;

  margin-right: 8px;

}



.lower-section {

  width: 100%;

  border-top: 1px solid white;

  margin-top: 10px;

  padding-top: 10px;

}



.lower-section p {

  font-size: 14px;

}



@media (max-width: 768px) {

  .upper-section {

    flex-direction: column;

    justify-content: center;

  }



  .column {

    width: 100%;

  }



  .column ul li, h3, img {

    text-align: center;

    margin: 5px 10px;

  }



  .logo-img {

    margin: 20px auto;

  }



  .neon-underline::after {

    width: 24vw;

    left: calc(50% - 12vw);

  }

}

If you open your html page and resize it, you will notice that our footer is now responsive.

Here's how our footer will look on a mobile screen.

Step 3: JavaScript Animation

The final step is to add some JavaScript animation to our footer. We will use the following logic and methods:

We will select all the <a> elements inside the footer using the document.querySelectorAll() method and store them in a variable called links.
We will loop through the links variable using the forEach() method and add an event listener for the mouseover event to each link.
We will create a function called animateLink that will take the link element as a parameter and perform the following actions:

We will generate a random number between 0 and 360 using the Math.random() and Math.floor() methods and store it in a variable called hue.
We will use the hue variable to create a random color using the hsl() function and store it in a variable called color.
We will use the color variable to change the background color and the border color of the link element using the style property.
We will use the transform property to rotate the link element by 15 degrees using the rotate() function.

We will also add an event listener for the mouseout event to each link and create a function called resetLink that will take the link element as a parameter and perform the following actions:

We will use the style property to reset the background color, the border color, and the transform of the link element to their initial values.

Lastly we will get the current year by calling the getFullYear() function on the new Date() function. We will display it the span next to our copyright text.

Here's the JavaScript code for the footer:

Javascript

                        
let links = document.querySelectorAll(".column a");



links.forEach(function (link) {

  link.addEventListener("mouseover", function () {

    animateLink(link);

  });

  link.addEventListener("mouseout", function () {

    resetLink(link);

  });

});



function animateLink(link) {

  let hue = Math.floor(Math.random() * 360);

  let color = `hsl(${hue}, 100%, 50%)`;

  link.style.backgroundColor = color;

  link.style.borderColor = color;

  link.style.transform = "rotate(15deg)";

  link.style.padding = "6px 12px";

}



function resetLink(link) {

  link.style.backgroundColor = "transparent";

  link.style.borderColor = "transparent";

  link.style.transform = "none";

}





let year = document.getElementById("year");

year.textContent = new Date().getFullYear();

Conclusion

We have successfully created a stylish website footer using HTML, CSS and JavaScript. We have learned how to use the position, flexbox, and transition properties in CSS, and how to add some interactivity and randomness in JavaScript. You can customize the footer to your liking by changing the colors, fonts, icons, and animations. You can also add more columns or content to the footer as per your needs.