footer.html

<style>
    *{
        font-family: 'Lato', sans-serif;
    }
    .footer {
        display: flex;
        background-color:whitesmoke;
        
    }

    .footer-col{
        flex-basis: 250px;
        padding:10px;

    }
    .heading{
        font-size: 15px;
        font-weight: 700;
    }
    .ul{
        list-style-type: none;
        text-align:start;
    }

    .ul > li{
        padding:5px;
        font-size: 12px;
     
    }
    .ul> li:hover{
        text-decoration: underline;
        text-decoration-color: black;
        text-decoration-thickness: 1px;
    }

    .footer > p{
        flex-basis: 120px;
        padding:20px;
        font-size: 12px;
    }

    .footer > p:hover{
        text-decoration: underline;
        text-decoration-color: black;
        text-decoration-thickness: 1px;
    }
</style>


<div class="footer">
    <div class="footer-col">
        
        <ul class="ul">
            <li><label class="heading">Customer Service</label></li>
            <li>Contact Us</li>
            <li>Order Status</li>
            <li>Shipping</li>
            <li>Returns &amp; Exchanges</li>
            <li>Shipping</li>
            <li>Product recalls</li>
        <ul>
    </div>
    <div class="footer-col">
        <ul class="ul">
            <li><label class="heading">Stores &amp; Events</label></li>
            <li>Stores &amp; Events</li>
            <li>Carrers</li>
            <li>Corporate Responsibility</li>
            <li>Diversity Inclusion &amp; Belonging</li>
            <li>Get Email Updates</li>
            <li>Nordstrom Blog</li>
            
        <ul>
    </div>
    <div class="footer-col">
        <ul class="ul">
            <li><label class="heading">Services</label></li>
            <li>Personal Styling</li>
            <li>Altration &amp; Tailoring</li>
            <li>Spa Nordstrom</li>
            <li>Nordstrom Restaurants</li>
            <li>Gift Cards</li>
            
        <ul>
    </div>
    <div class="footer-col">
        <ul class="ul">
            <li><label class="heading">Nordstrom Card</label></li>
            <li>Pay My Bill</li>
            <li>Manage my Nordstrom Card</li>
            
        <ul>
    </div>
    <div class="footer-col">
        <ul class="ul">
            <li><label class="heading">Nordstrom Inc</label></li>
            <li>Nordstrom Rack</li>
            <li>Nordstrom Canada</li>
            <li>Trunk Club</li>
            <li>Investor Relations</li>
            <li>Press Releases</li>
            
        <ul>
    </div>

    <div class="footer-col">
        <ul class="ul">
            <li style="padding:5px"><img src="./images/mobile.svg" alt="facebook" style="width:18px;margin-right:0px;padding:5px"/>Get our apps</li>
            <div style="display:flex;gap:15px;margin-top: 20px;">
                
                <img src="./images/insta.svg" alt="facebook" style="width:24px;"/>
                <img src="./images/pin.svg" alt="facebook" style="width:24px;"/>
                <img src="./images/twitter.svg" alt="facebook" style="width:24px;"/>
                <img src="./images/fb.svg" alt="facebook" style="width:24px;"/>
            </div>
        <ul>
    </div>
    

    
    
</div>

<div class="footer" >
    <p>Your Privacy Rights</p>
    <p>Dont Sell My Info</p>
    <p>Terms &amp; Conditions</p>
    <p>Intrest Based Ads</p>
    <p>&copy;2021 Nordstrom,Inc</p>
</div>