Open Footer Responsive Full-Screen Footer

Hello Everyone, today in this blog we will learn how to create Open Footer Responsive Full-Screen Footer. With this, you can make a footer with many kinds of content (text, images/photos, videos/iframes…) and you can also add contents as much as you want.

First of all, create an HTML file
[pastacode manual=”%3C!DOCTYPE%20html%3E%0D%0A%3Chtml%20lang%3D%22en%22%3E%0D%0A%3Chead%3E%0D%0A%3Cmeta%20charset%3D%22UTF-8%22%3E%0D%0A%3Ctitle%3ECodePen%20-%20OpenFooter%20Responsive%20Full%20Screen%20Footer%3C%2Ftitle%3E%0D%0A%3Cmeta%20name%3D%22viewport%22%20content%3D%22width%3Ddevice-width%2C%20user-scalable%3Dno%22%20%2F%3E%0D%0A%3Clink%20rel%3D’stylesheet’%20href%3D’https%3A%2F%2Fwww.rckinfosystem.com%2FCodepen_Projects%2Ffont-awesome.min.css’%3E%0D%0A%3Clink%20rel%3D’stylesheet’%20href%3D’https%3A%2F%2Fwww.rckinfosystem.com%2FCodepen_Projects%2Fglobal_demo.css’%3E%0D%0A%3Clink%20rel%3D’stylesheet’%20href%3D’https%3A%2F%2Fwww.rckinfosystem.com%2FCodepen_Projects%2Fopenfooter.css’%3E%0D%0A%3Clink%20rel%3D’stylesheet’%20href%3D’https%3A%2F%2Fwww.rckinfosystem.com%2FCodepen_Projects%2Fbackground-base.css’%3E%09%0D%0A%3C%2Fhead%3E%0D%0A%3Cbody%20translate%3D%22no%22%3E%0D%0A%3C!–%20START%20OPENFOOTER%20–%3E%0D%0A%09%3Cdiv%20class%3D%22openfooter%20of-largebt%20light-text%22%3E%0D%0A%09%0D%0A%09%09%3C!–%20Start%20OpenFooter%20Bar%20–%3E%0D%0A%09%09%3Cdiv%20class%3D%22of-bar%22%3E%0D%0A%09%09%0D%0A%09%09%3Cdiv%20class%3D%22of-barcontainer%22%3E%0D%0A%09%09%0D%0A%09%09%09%3C!–%20Start%20OpenFooter%20Button%20–%3E%0D%0A%09%09%09%3Cdiv%20class%3D%22of-button%20texthover-bluelight%22%20data-ofid%3D%22of-apps%22%3E%0D%0A%09%09%09%0D%0A%09%09%09%09%3Cspan%20class%3D%22of-bt-icon%22%3E%3Ci%20class%3D%22fa%20fa-cloud%22%3E%3C%2Fi%3E%3C%2Fspan%3E%0D%0A%09%09%09%09%3Cspan%20class%3D%22of-bt-title%22%3EApps%3C%2Fspan%3E%0D%0A%09%09%09%0D%0A%09%09%09%3C%2Fdiv%3E%0D%0A%09%09%09%3C!–%20End%20OpenFooter%20Button%20–%3E%0D%0A%09%09%09%0D%0A%09%09%09%0D%0A%09%09%09%3C!–%20Start%20OpenFooter%20Button%20–%3E%0D%0A%09%09%09%3Cdiv%20class%3D%22of-button%20texthover-bluelight%22%20data-ofid%3D%22of-settings%22%3E%0D%0A%09%09%09%0D%0A%09%09%09%09%3Cspan%20class%3D%22of-bt-icon%22%3E%3Ci%20class%3D%22fa%20fa-cogs%22%3E%3C%2Fi%3E%3C%2Fspan%3E%0D%0A%09%09%09%09%3Cspan%20class%3D%22of-bt-title%22%3ESettings%3C%2Fspan%3E%0D%0A%09%09%09%0D%0A%09%09%09%3C%2Fdiv%3E%0D%0A%09%09%09%3C!–%20End%20OpenFooter%20Button%20–%3E%0D%0A%09%09%09%0D%0A%09%09%09%0D%0A%09%09%09%3C!–%20Start%20OpenFooter%20Button%20–%3E%0D%0A%09%09%09%3Cdiv%20class%3D%22of-button%20texthover-bluelight%22%20data-ofid%3D%22of-storage%22%3E%0D%0A%09%09%09%0D%0A%09%09%09%09%3Cspan%20class%3D%22of-bt-icon%22%3E%3Ci%20class%3D%22fa%20fa-hdd-o%22%3E%3C%2Fi%3E%3C%2Fspan%3E%0D%0A%09%09%09%09%3Cspan%20class%3D%22of-bt-title%22%3EStorage%3C%2Fspan%3E%0D%0A%09%09%09%0D%0A%09%09%09%3C%2Fdiv%3E%0D%0A%09%09%09%3C!–%20End%20OpenFooter%20Button%20–%3E%0D%0A%09%09%09%0D%0A%09%09%09%0D%0A%09%09%09%3C!–%20Start%20OpenFooter%20Button%20–%3E%0D%0A%09%09%09%3Cdiv%20class%3D%22of-button%20texthover-bluelight%22%20data-ofid%3D%22of-email%22%3E%0D%0A%09%09%09%0D%0A%09%09%09%09%3Cspan%20class%3D%22of-bt-icon%22%3E%3Ci%20class%3D%22fa%20fa-envelope-o%22%3E%3C%2Fi%3E%3C%2Fspan%3E%0D%0A%09%09%09%09%3Cspan%20class%3D%22of-bt-title%22%3EEmail%3C%2Fspan%3E%0D%0A%09%09%09%0D%0A%09%09%09%3C%2Fdiv%3E%0D%0A%09%09%09%3C!–%20End%20OpenFooter%20Button%20–%3E%0D%0A%09%09%09%0D%0A%09%09%09%0D%0A%09%09%09%3C!–%20Start%20OpenFooter%20Button%20–%3E%0D%0A%09%09%09%3Cdiv%20class%3D%22of-button%20texthover-bluelight%22%20data-ofid%3D%22of-acc%22%3E%0D%0A%09%09%09%0D%0A%09%09%09%09%3Cspan%20class%3D%22of-bt-icon%22%3E%3Ci%20class%3D%22fa%20fa-user%22%3E%3C%2Fi%3E%3C%2Fspan%3E%0D%0A%09%09%09%09%3Cspan%20class%3D%22of-bt-title%22%3EAccount%3C%2Fspan%3E%0D%0A%09%09%09%0D%0A%09%09%09%3C%2Fdiv%3E%0D%0A%09%09%09%3C!–%20End%20OpenFooter%20Button%20–%3E%0D%0A%09%09%09%0D%0A%09%09%09%0D%0A%09%09%09%3C!–%20Start%20OpenFooter%20Button%20–%3E%0D%0A%09%09%09%3Cdiv%20class%3D%22of-button%20texthover-bluelight%22%20data-ofid%3D%22of-social%22%3E%0D%0A%09%09%09%0D%0A%09%09%09%09%3Cspan%20class%3D%22of-bt-icon%22%3E%3Ci%20class%3D%22fa%20fa-group%22%3E%3C%2Fi%3E%3C%2Fspan%3E%0D%0A%09%09%09%09%3Cspan%20class%3D%22of-bt-title%22%3ESocial%3C%2Fspan%3E%0D%0A%09%09%09%0D%0A%09%09%09%3C%2Fdiv%3E%0D%0A%09%09%09%3C!–%20End%20OpenFooter%20Button%20–%3E%0D%0A%09%09%09%0D%0A%09%09%09%0D%0A%09%09%09%3Cdiv%20class%3D%22clearspace%22%3E%3C%2Fdiv%3E%0D%0A%09%09%0D%0A%09%09%3C%2Fdiv%3E%0D%0A%09%09%09%0D%0A%09%09%3C%2Fdiv%3E%0D%0A%09%09%3C!–%20End%20OpenFooter%20Bar%20–%3E%0D%0A%09%09%0D%0A%09%09%0D%0A%0D%0A%09%09%3C!–%20Start%20OpenFooter%20Content%20–%3E%0D%0A%09%09%3Cdiv%20class%3D%22of-contentstation%22%3E%0D%0A%09%09%0D%0A%09%09%09%3C!–%20Start%20Content%20Block%20-%20Apps%20–%3E%0D%0A%09%09%09%3Cdiv%20class%3D%22of-content%20transparent-darknight%20light-text%22%20data-ofid%3D%22of-apps%22%3E%0D%0A%09%09%09%0D%0A%09%09%09%09%3Cdiv%20class%3D%22of-contentbody%22%3E%0D%0A%09%09%09%09%0D%0A%09%09%09%09%09%3Cp%20class%3D%22of-bigtitle%22%3E%0D%0A%09%09%09%09%09Apps%0D%0A%09%09%09%09%09%3C%2Fp%3E%0D%0A%09%09%09%09%09%0D%0A%09%09%09%09%09%3Cp%3E%0D%0A%09%09%09%09%09Lorem%20ipsum%20dolor%20sit%20amet%2C%20consectetur%20adipiscing%20elit.%20In%20cursus%20risus%20quis%20turpis%20interdum%2C%20pretium%20bibendum%20nisi%20consequat.%20Integer%20eu%20neque%20fringilla%2C%20adipiscing%20ante%20vitae%2C%20volutpat%20enim.%20Ut%20a%20metus%20tempor%2C%20dapibus%20justo%20quis%2C%20tempor%20sapien.%20Morbi%20sagittis%20luctus%20velit%2C%20vel%20tincidunt%20lacus%20vulputate%20vitae.%20Suspendisse%20ut%20lectus%20justo.%20Curabitur%20vel%20dui%20quis%20nisl%20adipiscing%20vestibulum%20quis%20id%20risus.%20Donec%20et%20consectetur%20sapien.%20Mauris%20ac%20pulvinar%20neque%2C%20nec%20imperdiet%20mauris.%20Proin%20nec%20felis%20nec%20neque%20ultricies%20molestie.%20Phasellus%20ante%20elit%2C%20feugiat%20vitae%20convallis%20eget%2C%20sollicitudin%20ac%20nisi.%0D%0A%09%09%09%09%09%3C%2Fp%3E%0D%0A%09%09%09%09%09%0D%0A%09%09%09%09%3C%2Fdiv%3E%0D%0A%09%09%09%09%0D%0A%09%09%09%3C%2Fdiv%3E%0D%0A%09%09%09%3C!–%20End%20Content%20Block%20-%20Apps%20–%3E%0D%0A%09%09%09%0D%0A%09%09%09%0D%0A%09%09%09%0D%0A%09%09%09%3C!–%20Start%20Content%20Block%20-%20Settings%20–%3E%0D%0A%09%09%09%3Cdiv%20class%3D%22of-content%20transparent-orange%22%20data-ofid%3D%22of-settings%22%3E%0D%0A%09%09%09%09%3Cdiv%20class%3D%22of-contentbody%22%3E%0D%0A%09%09%09%09%0D%0A%09%09%09%09%09%3Cp%20class%3D%22of-bigtitle%22%3E%0D%0A%09%09%09%09%09Settings%0D%0A%09%09%09%09%09%3C%2Fp%3E%0D%0A%09%09%09%09%09%0D%0A%09%09%09%09%09%3Cp%3E%0D%0A%09%09%09%09%09Lorem%20ipsum%20dolor%20sit%20amet%2C%20consectetur%20adipiscing%20elit.%20In%20cursus%20risus%20quis%20turpis%20interdum%2C%20pretium%20bibendum%20nisi%20consequat.%20Integer%20eu%20neque%20fringilla%2C%20adipiscing%20ante%20vitae%2C%20volutpat%20enim.%20Ut%20a%20metus%20tempor%2C%20dapibus%20justo%20quis%2C%20tempor%20sapien.%20Morbi%20sagittis%20luctus%20velit%2C%20vel%20tincidunt%20lacus%20vulputate%20vitae.%20Suspendisse%20ut%20lectus%20justo.%20Curabitur%20vel%20dui%20quis%20nisl%20adipiscing%20vestibulum%20quis%20id%20risus.%20Donec%20et%20consectetur%20sapien.%20Mauris%20ac%20pulvinar%20neque%2C%20nec%20imperdiet%20mauris.%20Proin%20nec%20felis%20nec%20neque%20ultricies%20molestie.%20Phasellus%20ante%20elit%2C%20feugiat%20vitae%20convallis%20eget%2C%20sollicitudin%20ac%20nisi.%0D%0A%09%09%09%09%09%3C%2Fp%3E%0D%0A%09%09%09%09%09%0D%0A%09%09%09%09%3C%2Fdiv%3E%0D%0A%09%09%09%09%0D%0A%09%09%09%3C%2Fdiv%3E%0D%0A%09%09%09%3C!–%20End%20Content%20Block%20-%20Settings%20–%3E%0D%0A%09%09%09%0D%0A%09%09%09%0D%0A%09%09%09%0D%0A%09%09%09%0D%0A%09%09%09%3C!–%20Start%20Content%20Block%20-%20Storage%20–%3E%0D%0A%09%09%09%3Cdiv%20class%3D%22of-content%20transparent-darknight%20light-text%22%20data-ofid%3D%22of-storage%22%3E%0D%0A%09%09%09%0D%0A%09%09%09%09%3Cdiv%20class%3D%22of-contentbody%22%3E%0D%0A%09%09%09%09%0D%0A%09%09%09%09%09%3Cp%20class%3D%22of-bigtitle%22%3E%0D%0A%09%09%09%09%09Storage%0D%0A%09%09%09%09%09%3C%2Fp%3E%0D%0A%09%09%09%09%09%0D%0A%09%09%09%09%09%3Cp%3E%0D%0A%09%09%09%09%09Lorem%20ipsum%20dolor%20sit%20amet%2C%20consectetur%20adipiscing%20elit.%20In%20cursus%20risus%20quis%20turpis%20interdum%2C%20pretium%20bibendum%20nisi%20consequat.%20Integer%20eu%20neque%20fringilla%2C%20adipiscing%20ante%20vitae%2C%20volutpat%20enim.%20Ut%20a%20metus%20tempor%2C%20dapibus%20justo%20quis%2C%20tempor%20sapien.%20Morbi%20sagittis%20luctus%20velit%2C%20vel%20tincidunt%20lacus%20vulputate%20vitae.%20Suspendisse%20ut%20lectus%20justo.%20Curabitur%20vel%20dui%20quis%20nisl%20adipiscing%20vestibulum%20quis%20id%20risus.%20Donec%20et%20consectetur%20sapien.%20Mauris%20ac%20pulvinar%20neque%2C%20nec%20imperdiet%20mauris.%20Proin%20nec%20felis%20nec%20neque%20ultricies%20molestie.%20Phasellus%20ante%20elit%2C%20feugiat%20vitae%20convallis%20eget%2C%20sollicitudin%20ac%20nisi.%0D%0A%09%09%09%09%09%3C%2Fp%3E%0D%0A%09%09%09%09%09%0D%0A%09%09%09%09%3C%2Fdiv%3E%0D%0A%09%09%09%09%0D%0A%09%09%09%3C%2Fdiv%3E%0D%0A%09%09%09%3C!–%20End%20Content%20Block%20-%20Storage%20–%3E%0D%0A%09%09%09%0D%0A%09%09%09%0D%0A%09%09%09%0D%0A%09%09%09%0D%0A%09%09%09%3C!–%20Start%20Content%20Block%20-%20Email%20–%3E%0D%0A%09%09%09%3Cdiv%20class%3D%22of-content%20transparent-darknight%20light-text%22%20data-ofid%3D%22of-email%22%3E%0D%0A%09%09%09%0D%0A%09%09%09%09%3Cdiv%20class%3D%22of-contentbody%22%3E%0D%0A%09%09%09%09%0D%0A%09%09%09%09%09%3Cp%20class%3D%22of-bigtitle%22%3E%0D%0A%09%09%09%09%09Email%0D%0A%09%09%09%09%09%3C%2Fp%3E%0D%0A%09%09%09%09%09%0D%0A%09%09%09%09%09%3Cp%3E%0D%0A%09%09%09%09%09Lorem%20ipsum%20dolor%20sit%20amet%2C%20consectetur%20adipiscing%20elit.%20In%20cursus%20risus%20quis%20turpis%20interdum%2C%20pretium%20bibendum%20nisi%20consequat.%20Integer%20eu%20neque%20fringilla%2C%20adipiscing%20ante%20vitae%2C%20volutpat%20enim.%20Ut%20a%20metus%20tempor%2C%20dapibus%20justo%20quis%2C%20tempor%20sapien.%20Morbi%20sagittis%20luctus%20velit%2C%20vel%20tincidunt%20lacus%20vulputate%20vitae.%20Suspendisse%20ut%20lectus%20justo.%20Curabitur%20vel%20dui%20quis%20nisl%20adipiscing%20vestibulum%20quis%20id%20risus.%20Donec%20et%20consectetur%20sapien.%20Mauris%20ac%20pulvinar%20neque%2C%20nec%20imperdiet%20mauris.%20Proin%20nec%20felis%20nec%20neque%20ultricies%20molestie.%20Phasellus%20ante%20elit%2C%20feugiat%20vitae%20convallis%20eget%2C%20sollicitudin%20ac%20nisi.%0D%0A%09%09%09%09%09%3C%2Fp%3E%0D%0A%09%09%09%09%09%0D%0A%09%09%09%09%3C%2Fdiv%3E%0D%0A%09%09%09%09%0D%0A%09%09%09%3C%2Fdiv%3E%0D%0A%09%09%09%3C!–%20End%20Content%20Block%20-%20Email%20–%3E%0D%0A%09%09%09%0D%0A%09%09%09%0D%0A%0D%0A%09%09%09%3C!–%20Start%20Content%20Block%20-%20Account%20–%3E%0D%0A%09%09%09%3Cdiv%20class%3D%22of-content%20transparent-darknight%20light-text%22%20data-ofid%3D%22of-acc%22%3E%0D%0A%09%09%09%0D%0A%09%09%09%09%3Cdiv%20class%3D%22of-contentbody%22%3E%0D%0A%09%09%09%09%0D%0A%09%09%09%09%09%3Cp%20class%3D%22of-bigtitle%22%3E%0D%0A%09%09%09%09%09Account%0D%0A%09%09%09%09%09%3C%2Fp%3E%0D%0A%09%09%09%09%09%0D%0A%09%09%09%09%09%3Cp%3E%0D%0A%09%09%09%09%09Lorem%20ipsum%20dolor%20sit%20amet%2C%20consectetur%20adipiscing%20elit.%20In%20cursus%20risus%20quis%20turpis%20interdum%2C%20pretium%20bibendum%20nisi%20consequat.%20Integer%20eu%20neque%20fringilla%2C%20adipiscing%20ante%20vitae%2C%20volutpat%20enim.%20Ut%20a%20metus%20tempor%2C%20dapibus%20justo%20quis%2C%20tempor%20sapien.%20Morbi%20sagittis%20luctus%20velit%2C%20vel%20tincidunt%20lacus%20vulputate%20vitae.%20Suspendisse%20ut%20lectus%20justo.%20Curabitur%20vel%20dui%20quis%20nisl%20adipiscing%20vestibulum%20quis%20id%20risus.%20Donec%20et%20consectetur%20sapien.%20Mauris%20ac%20pulvinar%20neque%2C%20nec%20imperdiet%20mauris.%20Proin%20nec%20felis%20nec%20neque%20ultricies%20molestie.%20Phasellus%20ante%20elit%2C%20feugiat%20vitae%20convallis%20eget%2C%20sollicitudin%20ac%20nisi.%0D%0A%09%09%09%09%09%3C%2Fp%3E%0D%0A%09%09%09%09%09%0D%0A%09%09%09%09%3C%2Fdiv%3E%0D%0A%09%09%09%09%0D%0A%09%09%09%3C%2Fdiv%3E%0D%0A%09%09%09%3C!–%20End%20Content%20Block%20-%20Account%20–%3E%0D%0A%3C!–%20Start%20Content%20Block%20-%20Social%20–%3E%0D%0A%09%09%09%3Cdiv%20class%3D%22of-content%20solid-black%22%20data-ofid%3D%22of-social%22%3E%0D%0A%09%09%09%09%3Cdiv%20class%3D%22of-contentbody%22%3E%0D%0A%09%09%09%09%09%3Cp%20class%3D%22of-bigtitle%22%3E%0D%0A%09%09%09%09%09Social%0D%0A%09%09%09%09%09%3C%2Fp%3E%0D%0A%09%09%09%09%09%3Cp%3E%0D%0A%09%09%09%09%09Lorem%20ipsum%20dolor%20sit%20amet%2C%20consectetur%20adipiscing%20elit.%20In%20cursus%20risus%20quis%20turpis%20interdum%2C%20pretium%20bibendum%20nisi%20consequat.%20Integer%20eu%20neque%20fringilla%2C%20adipiscing%20ante%20vitae%2C%20volutpat%20enim.%20Ut%20a%20metus%20tempor%2C%20dapibus%20justo%20quis%2C%20tempor%20sapien.%20Morbi%20sagittis%20luctus%20velit%2C%20vel%20tincidunt%20lacus%20vulputate%20vitae.%20Suspendisse%20ut%20lectus%20justo.%20Curabitur%20vel%20dui%20quis%20nisl%20adipiscing%20vestibulum%20quis%20id%20risus.%20Donec%20et%20consectetur%20sapien.%20Mauris%20ac%20pulvinar%20neque%2C%20nec%20imperdiet%20mauris.%20Proin%20nec%20felis%20nec%20neque%20ultricies%20molestie.%20Phasellus%20ante%20elit%2C%20feugiat%20vitae%20convallis%20eget%2C%20sollicitudin%20ac%20nisi.%0D%0A%09%09%09%09%09%3C%2Fp%3E%0D%0A%09%09%09%09%09%3Cdiv%20class%3D%22clearspace%22%3E%3C%2Fdiv%3E%0D%0A%09%09%09%09%3C%2Fdiv%3E%0D%0A%09%09%09%3C%2Fdiv%3E%0D%0A%09%09%3C!–%20End%20Content%20Block%20-%20Social%20–%3E%0D%0A%09%09%3C%2Fdiv%3E%0D%0A%09%09%3C!–%20End%20OpenFooter%20Content%20–%3E%0D%0A%09%3C%2Fdiv%3E%0D%0A%09%3C!–%20END%20OPENFOOTER%20–%3E%0D%0A%0D%0A%3Cscript%20src%3D’https%3A%2F%2Fwww.rckinfosystem.com%2FCodepen_Projects%2Fjquery.min.2.1.0.js’%3E%3C%2Fscript%3E%0D%0A%3Cscript%20src%3D’https%3A%2F%2Fwww.rckinfosystem.com%2FCodepen_Projects%2Fjquery.mousewheel.min.js’%3E%3C%2Fscript%3E%0D%0A%3Cscript%20src%3D’https%3A%2F%2Fwww.rckinfosystem.com%2FCodepen_Projects%2Fopenfooter.js’%3E%3C%2Fscript%3E%0D%0A%3C%2Fbody%3E%0D%0A%3C%2Fhtml%3E” provider=”manual” lang=”default”/]
Now create CSS File and Paste the below code
[pastacode manual=”html%20%7B%0D%0Aheight%3A100%25%3B%0D%0Abackground%3A%20url(https%3A%2F%2Fcdn.pixabay.com%2Fphoto%2F2018%2F06%2F30%2F09%2F31%2Fbackground-image-3507320_960_720.jpg)%20repeat%20center%20center%20fixed%3B%0D%0A%7D” provider=”manual” lang=”css”/]
Now We also Create a javascript file
[pastacode manual=”%24(window).load(function%20()%20%7B%0D%0A%20%20%24(‘.openfooter’).openfooter(%7B%0D%0A%20%20%20%20barBg%3A%20’transparent-deepsea’%20%7D)%3B%0D%0A%0D%0A%7D)%3B” provider=”manual” lang=”javascript”/]
You May Also Like:

• Limit number of login attempt using PHP & MySQL
• Take Image Snapshot from a webcam with Jquery and HTML
• How to decode JSON data and accessing the results in PHP
• Difference Between search() and indexOf() in Javascript

See Demo Here

See the Pen
OpenFooter Responsive Full Screen Footer by NIRBHAY SINGH (@nirbhakant)
on CodePen.

Now, you can use this in your project for a more attractive look. If you have any query comment down below.

Thanks for Reading, Keep Visiting, Keep Sharing.