<div class="bg-gray-400">

    <div class="flex flex-col md:flex-row text-center md:text-left max-w-6xl mx-auto">

        <div class="px-4 py-6 w-full md:w-1/4">
            <i class="fab fa-internet-explorer text-4xl text-purple-900"></i>
            <p class="uppercase font-medium py-2 text-purple-900">Love deals?</p>
            <p class="text-white">Receive the latest info on deals, local events and more directly to your inbox.</p>
            <div class="py-4">
                <label class="sr-only" for="email">Enter your email</label>
                <input class="h-12 border-b-2 py-2 px-3 w-full" placeholder="EMAIL" type="email" id="email">
            </div>
            <button class="uppercase px-4 py-2 border-white border font-normal text-white">submit</button>
        </div>

        <div class="px-4 py-6 w-full md:w-1/4">
            <i class="far fa-comments text-4xl text-purple-900"></i>
            <p class="py-2 uppercase font-medium text-purple-900">keep in touch</p>
            <div class="text-white">
                <p>13011 Lakwshore Dr. South, Summerland,</p>
                <p>Birtish Columbia, Canada</p>
            </div>
            <div class="text-white pt-4">
                <div flex>
                    <a href="tel:18774948111">1-877-494-8111</a>
                    <a class="pl-2" href="tel:12504948180">250-494-8180</a>
                </div>
                <a href="mailto:[email protected]">[email protected]</a>
            </div>
        </div>

        <div class="px-4 py-6 w-full md:w-1/4">
            <i class="fas fa-gift text-4xl text-purple-900"></i>
            <p class="uppercase font-medium py-2 text-purple-900">give a getaway</p>
            <p class="text-white">We like how you roll.  Gift certificates are always an amazing idea.</p>
            <a class="text-white underline" href="">Purchase one now</a>
        </div>

        <div class="w-full md:w-1/4 uppercase py-16">
            
            <div class="text-purple-900">
                <p><a href="">package deals</a> <i class="fas fa-arrow-circle-right"></i> </p>
                <p><a href="">gallery</a> <i class="fas fa-arrow-circle-right"></i> </p>
                <p><a href="">Get directions</a> <i class="fas fa-arrow-circle-right"></i> </p> 
            </div>

            <div class="text-white text-lg pt-4">
                <i class="fab fa-facebook-square"></i>
                <i class="fab fa-twitter-square"></i>
                <i class="fab fa-youtube-square"></i>
                <i class="fab fa-tripadvisor"></i>
                <i class="fab fa-instagram"></i>
                <i class="fab fa-pinterest-square"></i>
            </div>

        </div>

    </div>

</div>