A responsive footer menu with social media icons

Lets start with the HTML Code: HTML: Responsive Footer Menu Terms & Conditions Privacy Policy Contact Us About Us Next up, time to add some CSS Styling CSS: * { box-sizing: border-box; margin: 0; padding: 0; font-family: Arial, sans-serif; } body { display: flex; flex-direction: column; min-height: 100vh; justify-content: space-between; } .footer { background-color: #333; color: white; padding: 20px 0; text-align: center; } .footer-container { display: flex; flex-direction: column; align-items: center; justify-content: center; } .footer-social { margin-bottom: 20px; } .footer-social-icon { margin: 0 10px; } .footer-social-icon img { width: 30px; height: 30px; } .footer-links { display: flex; flex-wrap: wrap; justify-content: center; } .footer-link { color: white; margin: 5px 15px; text-decoration: none; } .footer-link:hover { text-decoration: underline; } @media (min-width: 600px) { .footer-container { flex-direction: row; justify-content: space-between; align-items: center; } .footer-social { margin-bottom: 0; } .footer-links { justify-content: flex-end; } } Last but not least, lets add some JavaScript: JavaScript: // JavaScript code if needed for future enhancements document.addEventListener('DOMContentLoaded', function() { // Placeholder for any future JavaScript functionality console.log("Footer loaded"); }); Code Explanation: 1. HTML: We create a footer element with a class of footer. Inside the footer, there's a footer-container which contains two main sections: footer-social and footer-links. footer-social contains anchor tags () with links to WhatsApp, Facebook, and LinkedIn. Each anchor tag wraps an image representing the social media icon. footer-links contains anchor tags pointing to different pages such as Terms & Conditions, Privacy Policy, Contact Us, and About Us. 2. CSS: Basic styles are applied to all elements to ensure consistent box-sizing and remove default margins and paddings. The body is set to use flexbox to ensure the footer is positioned at the bottom of the viewport. The footer section has a dark background color and white text, with padding for spacing. The footer-container uses flexbox to align its children elements in a column on small screens and a row on larger screens. Social media icons are styled to have a specific size, and links are styled for better visibility and interactivity. 3. JavaScript: A basic JavaScript snippet is included to handle any future enhancements. Currently, it only logs a message when the footer is loaded. Tips & Tricks: Responsive Design: Use media queries to adjust the layout for different screen sizes. Here, we switch from column to row layout on screens wider than 600px. Flexbox: Utilizes flexbox for easy alignment and spacing of elements. External Links: Ensure social media links open in a new tab using target="_blank". Accessibility: Provide descriptive alt attributes for images to improve accessibility.

May 3, 2025 - 22:46

A responsive footer menu with social media icons

Lets start with the HTML Code:
HTML:




    
    
    Responsive Footer Menu
    
    


    
        
            
                
                    
                
                
                    
                
                
                    
                
            
            
                Terms & Conditions
                Privacy Policy
                Contact Us
                About Us

Next up, time to add some CSS Styling
CSS:

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    justify-content: space-between;
}

.footer {
    background-color: #333;
    color: white;
    padding: 20px 0;
    text-align: center;
}

.footer-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.footer-social {
    margin-bottom: 20px;
}

.footer-social-icon {
    margin: 0 10px;
}

.footer-social-icon img {
    width: 30px;
    height: 30px;
}

.footer-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.footer-link {
    color: white;
    margin: 5px 15px;
    text-decoration: none;
}

.footer-link:hover {
    text-decoration: underline;
}

@media (min-width: 600px) {
    .footer-container {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    .footer-social {
        margin-bottom: 0;
    }

    .footer-links {
        justify-content: flex-end;
    }
}

Last but not least, lets add some JavaScript:
JavaScript:

// JavaScript code if needed for future enhancements
document.addEventListener('DOMContentLoaded', function() {
    // Placeholder for any future JavaScript functionality
    console.log("Footer loaded");
});

Code Explanation:

1. HTML:
We create a footer element with a class of footer.
Inside the footer, there's a footer-container which contains two main sections: footer-social and footer-links.
footer-social contains anchor tags () with links to WhatsApp, Facebook, and LinkedIn. Each anchor tag wraps an image representing the social media icon.
footer-links contains anchor tags pointing to different pages such as Terms & Conditions, Privacy Policy, Contact Us, and About Us.

2. CSS:
Basic styles are applied to all elements to ensure consistent box-sizing and remove default margins and paddings.
The body is set to use flexbox to ensure the footer is positioned at the bottom of the viewport.
The footer section has a dark background color and white text, with padding for spacing.
The footer-container uses flexbox to align its children elements in a column on small screens and a row on larger screens.
Social media icons are styled to have a specific size, and links are styled for better visibility and interactivity.

3. JavaScript:
A basic JavaScript snippet is included to handle any future enhancements. Currently, it only logs a message when the footer is loaded.

Tips & Tricks:

Responsive Design: Use media queries to adjust the layout for different screen sizes. Here, we switch from column to row layout on screens wider than 600px.

Flexbox: Utilizes flexbox for easy alignment and spacing of elements.

External Links: Ensure social media links open in a new tab using target="_blank".

Accessibility: Provide descriptive alt attributes for images to improve accessibility.