A responsive footer menu with social media icons

Responsive Footer Menu
    
    


    
        
            
                
                    
                
                
                    
                
                
                    
                
            
            
                Terms & Conditions
                Privacy Policy
                Contact Us
                About Us
            
        
    





    Enter fullscreen mode
    


    Exit fullscreen mode
    




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;
    }
}



    Enter fullscreen mode
    


    Exit fullscreen mode
    




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");
});



    Enter fullscreen mode
    


    Exit fullscreen mode
    




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.