HTML


<div class="frame">
    <section id="footer-items" class="clear">
        <div class="column-4 padding-30">
            <h1>INFORMATION</h1>
            <div class="separate color-2-bg"></div>
            <div class="footer-text color-1">Our restaurant is always happy to serve you</div>
            <div id="footer-links" class="clear">
                <a class="column-6">
                    <i class="fas fa-chevron-circle-down color-2"></i>
                    <span class="color-1">Menu</span>
                </a>
                
                <a class="column-6">
                    <i class="fas fa-chevron-circle-down color-2"></i>
                    <span class="color-1">Food</span>
                </a>
                
                <a class="column-6">
                    <i class="fas fa-chevron-circle-down color-2"></i>
                    <span class="color-1">Drinks</span>
                </a>
                
                <a class="column-6">
                    <i class="fas fa-chevron-circle-down color-2"></i>
                    <span class="color-1">Team</span>
                </a>
            </div>
        </div>
        
        <div class="column-4 padding-30">
            <h1>NEW OFFERS</h1>
            <div class="separate color-2-bg"></div>
                <a class="new-offer relative clear">
                    <div class="column-4 padding-10"><img class="image" src="https://web.imasmi.com/plugin/WebCss/file/sandra-seitamaa-akwA-GPF710-unsplash.jpg"/></div>
                    <div class="column-8 padding-10">
                        <h3>Daiquiri</h3>
                        <div class="offer-price">
                            <b class="color-2">$4.00</b>
                            <span class="color-1">$7.00</span>
                        </div>
                    </div>
                </a>
                
                <a class="new-offer relative clear">
                    <div class="column-4 padding-10"><img class="image" src="https://web.imasmi.com/plugin/WebCss/file/casey-lee-awj7sRviVXo-unsplash.jpg"/></div>
                    <div class="column-8 padding-10">
                        <h3>Salomon</h3>
                        <div class="offer-price">
                            <b class="color-2">$15.00</b>
                            <span class="color-1">$25.00</span>
                        </div>
                    </div>
                </a>
        </div>
        
        <div class="column-4 padding-30">
            <h1>CONTACT US</h1>
            <div class="separate color-2-bg"></div>
                <div class="contact-info relative">
                    <i class="fas fa-map-marker-alt color-2 absolute"></i>
                    <h3>LOCATION</h3>
                    <div class="footer-text">Vitosha street 1, Sofia 1000</div>
                </div>
                
                <div class="contact-info relative">
                    <i class="fas fa-phone color-2 absolute"></i>
                    <h3>PHONE</h3>
                    <div class="footer-text">+(359) 888 1234 567</div>
                </div>
                
                <div class="contact-info relative">
                    <i class="fas fa-envelope color-2 absolute"></i>
                    <h3>EMAIL</h3>
                    <div class="footer-text">info@baranddinner.com</div>
                </div>
                
        </div>
    </section>
    
    <section id="socials" class="clear color-2-bg">
        <div id="socials-image" class="column-3"><img id="footer-logo" class="image absolute" src="https://web.imasmi.com/plugin/WebCss/file/rich-smith-lVVs5skyWoo-unsplash.jpg"></div>
        <div id="socials-text" class="column-6 padding-30 white">
            <h2>FIND US ON SOCIAL MEDIA</h2>
            <div class="footer-text">Learn latest from us</div>
        </div>
        <div id="socials-icons" class="column-3 text-center padding-30">
            <i class="fab fa-facebook-f color-1-bg text-center"></i>
            <i class="fab fa-instagram color-1-bg text-center"></i>
            <i class="fab fa-twitter color-1-bg text-center"></i>
        </div>
    </section>
    
    <section id="newsletter" class="text-center">
        <div id="newsletter-heading" class="padding-60 border-box">
            <h1>NEWSLETTER</h1>
            <h3 class="color-1 relative inline-block">RECEIVE NEWS AND OFFERS</h3>
        </div>
        <form class="clear">
            <div class="column-4 padding-10"><input type="text" name="name" placeholder="Name"/></div>
            <div class="column-4 padding-10"><input type="text" name="email" placeholder="E-mail"/></div>
            <div class="column-4 padding-10"><button class="button color-2">SUBSCRIBE</button></div>
        </form>
    </section>
    
    <section id="footer-credit" class="relative">
        <div class="separate color-1-bg"></div>
        <div>Created by <a href="https://imasmi.com" title="Software and development" target="blank" class="color-2">ImaSmi</a></div>
        <div id="go-top" class="absolute pointer color-2" onclick="window.scrollTo({top: 0, left: 0, behavior: 'smooth'})"><i class="fas fa-chevron-up"></i></div>
    </section>
</div>


<div id="credit" class="text-center">
    <div>Created with <a href="https://web.imasmi.com/webcss" target="blank">WebCss</a></div>
    <div>Created with <a href="https://fontawesome.com/" target="blank">Font Awesome</a></div>
    <div>Photo by <a href="https://unsplash.com/@jess33mx?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Jose Vazquez</a> on <a href="https://unsplash.com/s/photos/beach-bar?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a></div>
    <div>Photo by <a href="https://unsplash.com/@seitamaaphotography?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Sandra Seitamaa</a> on <a href="https://unsplash.com/s/photos/drink?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a></div>
    <div>Photo by <a href="https://unsplash.com/@richwilliamsmith?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Rich Smith</a> on <a href="https://unsplash.com/s/photos/logo?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a></div>
</div>

CSS


body{font-family: helvetica, sans-serif;}
a{text-decoration: none;}
.frame{max-width: 1080px; margin: 0 auto;}
.color-1{color: #444444;}
.color-1-bg{background-color: #444444; color: #FFFFFF;}
.color-2, .denim-text h3{color: #29a1b3;}
.color-2-bg{background-color: #29a1b3;}
.separate{ height: 2px; width: 60px; margin: 5px 0 20px}
#footer-items h1{margin: 0;}
.footer-text, #footer-items span{font-size: 0.8em; letter-spacing: 1px; line-height: 1.4em;}
#footer-links{margin-top: 30px;}
#footer-links a{margin-bottom: 20px;}
#footer-links a span{margin-left: 10px;}
.new-offer .image{height: 80px;}
.new-offer h3{margin: 10px 0; font-size: 1.2em;}
.new-offer .column-4{padding-left: 0;}
.new-offer b{font-size: 1.2em;}
.new-offer span{text-decoration: line-through;}
.contact-info{padding: 0 0 30px 50px;}
.contact-info h3{margin: 0 0 5px;}
.contact-info i{left: 0; top: 5px; font-size: 1.4em;}
#socials-image{height: 150px;}
#footer-logo{height: 190px; left: 15px; top: 50%; transform: translateY(-50%);}
#socials-image:before{content: "\00a0";}
#socials-text{padding-left: 45px;}
#socials-icons{padding: 55px 30px;}
#socials i{width: 40px;  font-size: 26px; padding: 7px 0;}
#newsletter-heading{padding-bottom: 20px;}
#newsletter h3:before, #newsletter h3:after{content: ""; display: inline-block; position: absolute; height: 2px; width: 40px; top: 10px; background-color: #29a1b3;}
#newsletter h3:before{left: -50px;}
#newsletter h3:after{right: -50px;}
.button, input{background: none; outline: none; border: 2px solid; padding: 7px 25px; width: 100%; letter-spacing: 1px; font-size: 0.8em; display: table; cursor: pointer; transition: 0.5s;}
.button:hover, .button:active{background-color: #444444;}
#footer-credit .separate{width: 100%; height: 1px;}
#go-top{font-size: 2em; right: 10px; top: 10px;}
#credit{margin-top: 10px;}
#credit a{color: #29a1b3; text-decoration: none;}
@media (max-width: 1080px){
    #social-texts, .new-offer, #socials-text{text-align: center;}
    #footer-logo{left: 10%; position: relative; object-fit: contain; height: 100%; width: 80%; top: 0; transform: none;}
    #socials-icons{padding: 0 0 30px;}
    #socials-text{padding-left: 30px;}
}

JavaScript


Imasmi web loading