Hello Everyone, today in this blog we will learn how to create OpenFooter 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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CodePen - OpenFooter Responsive Full Screen Footer</title> <meta name="viewport" content="width=device-width, user-scalable=no" /> <link rel='stylesheet' href='https://www.rckinfosystem.com/Codepen_Projects/font-awesome.min.css'> <link rel='stylesheet' href='https://www.rckinfosystem.com/Codepen_Projects/global_demo.css'> <link rel='stylesheet' href='https://www.rckinfosystem.com/Codepen_Projects/openfooter.css'> <link rel='stylesheet' href='https://www.rckinfosystem.com/Codepen_Projects/background-base.css'> </head> <body translate="no"> <!-- START OPENFOOTER --> <div class="openfooter of-largebt light-text"> <!-- Start OpenFooter Bar --> <div class="of-bar"> <div class="of-barcontainer"> <!-- Start OpenFooter Button --> <div class="of-button texthover-bluelight" data-ofid="of-apps"> <span class="of-bt-icon"><i class="fa fa-cloud"></i></span> <span class="of-bt-title">Apps</span> </div> <!-- End OpenFooter Button --> <!-- Start OpenFooter Button --> <div class="of-button texthover-bluelight" data-ofid="of-settings"> <span class="of-bt-icon"><i class="fa fa-cogs"></i></span> <span class="of-bt-title">Settings</span> </div> <!-- End OpenFooter Button --> <!-- Start OpenFooter Button --> <div class="of-button texthover-bluelight" data-ofid="of-storage"> <span class="of-bt-icon"><i class="fa fa-hdd-o"></i></span> <span class="of-bt-title">Storage</span> </div> <!-- End OpenFooter Button --> <!-- Start OpenFooter Button --> <div class="of-button texthover-bluelight" data-ofid="of-email"> <span class="of-bt-icon"><i class="fa fa-envelope-o"></i></span> <span class="of-bt-title">Email</span> </div> <!-- End OpenFooter Button --> <!-- Start OpenFooter Button --> <div class="of-button texthover-bluelight" data-ofid="of-acc"> <span class="of-bt-icon"><i class="fa fa-user"></i></span> <span class="of-bt-title">Account</span> </div> <!-- End OpenFooter Button --> <!-- Start OpenFooter Button --> <div class="of-button texthover-bluelight" data-ofid="of-social"> <span class="of-bt-icon"><i class="fa fa-group"></i></span> <span class="of-bt-title">Social</span> </div> <!-- End OpenFooter Button --> <div class="clearspace"></div> </div> </div> <!-- End OpenFooter Bar --> <!-- Start OpenFooter Content --> <div class="of-contentstation"> <!-- Start Content Block - Apps --> <div class="of-content transparent-darknight light-text" data-ofid="of-apps"> <div class="of-contentbody"> <p class="of-bigtitle"> Apps </p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. In cursus risus quis turpis interdum, pretium bibendum nisi consequat. Integer eu neque fringilla, adipiscing ante vitae, volutpat enim. Ut a metus tempor, dapibus justo quis, tempor sapien. Morbi sagittis luctus velit, vel tincidunt lacus vulputate vitae. Suspendisse ut lectus justo. Curabitur vel dui quis nisl adipiscing vestibulum quis id risus. Donec et consectetur sapien. Mauris ac pulvinar neque, nec imperdiet mauris. Proin nec felis nec neque ultricies molestie. Phasellus ante elit, feugiat vitae convallis eget, sollicitudin ac nisi. </p> </div> </div> <!-- End Content Block - Apps --> <!-- Start Content Block - Settings --> <div class="of-content transparent-orange" data-ofid="of-settings"> <div class="of-contentbody"> <p class="of-bigtitle"> Settings </p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. In cursus risus quis turpis interdum, pretium bibendum nisi consequat. Integer eu neque fringilla, adipiscing ante vitae, volutpat enim. Ut a metus tempor, dapibus justo quis, tempor sapien. Morbi sagittis luctus velit, vel tincidunt lacus vulputate vitae. Suspendisse ut lectus justo. Curabitur vel dui quis nisl adipiscing vestibulum quis id risus. Donec et consectetur sapien. Mauris ac pulvinar neque, nec imperdiet mauris. Proin nec felis nec neque ultricies molestie. Phasellus ante elit, feugiat vitae convallis eget, sollicitudin ac nisi. </p> </div> </div> <!-- End Content Block - Settings --> <!-- Start Content Block - Storage --> <div class="of-content transparent-darknight light-text" data-ofid="of-storage"> <div class="of-contentbody"> <p class="of-bigtitle"> Storage </p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. In cursus risus quis turpis interdum, pretium bibendum nisi consequat. Integer eu neque fringilla, adipiscing ante vitae, volutpat enim. Ut a metus tempor, dapibus justo quis, tempor sapien. Morbi sagittis luctus velit, vel tincidunt lacus vulputate vitae. Suspendisse ut lectus justo. Curabitur vel dui quis nisl adipiscing vestibulum quis id risus. Donec et consectetur sapien. Mauris ac pulvinar neque, nec imperdiet mauris. Proin nec felis nec neque ultricies molestie. Phasellus ante elit, feugiat vitae convallis eget, sollicitudin ac nisi. </p> </div> </div> <!-- End Content Block - Storage --> <!-- Start Content Block - Email --> <div class="of-content transparent-darknight light-text" data-ofid="of-email"> <div class="of-contentbody"> <p class="of-bigtitle"> Email </p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. In cursus risus quis turpis interdum, pretium bibendum nisi consequat. Integer eu neque fringilla, adipiscing ante vitae, volutpat enim. Ut a metus tempor, dapibus justo quis, tempor sapien. Morbi sagittis luctus velit, vel tincidunt lacus vulputate vitae. Suspendisse ut lectus justo. Curabitur vel dui quis nisl adipiscing vestibulum quis id risus. Donec et consectetur sapien. Mauris ac pulvinar neque, nec imperdiet mauris. Proin nec felis nec neque ultricies molestie. Phasellus ante elit, feugiat vitae convallis eget, sollicitudin ac nisi. </p> </div> </div> <!-- End Content Block - Email --> <!-- Start Content Block - Account --> <div class="of-content transparent-darknight light-text" data-ofid="of-acc"> <div class="of-contentbody"> <p class="of-bigtitle"> Account </p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. In cursus risus quis turpis interdum, pretium bibendum nisi consequat. Integer eu neque fringilla, adipiscing ante vitae, volutpat enim. Ut a metus tempor, dapibus justo quis, tempor sapien. Morbi sagittis luctus velit, vel tincidunt lacus vulputate vitae. Suspendisse ut lectus justo. Curabitur vel dui quis nisl adipiscing vestibulum quis id risus. Donec et consectetur sapien. Mauris ac pulvinar neque, nec imperdiet mauris. Proin nec felis nec neque ultricies molestie. Phasellus ante elit, feugiat vitae convallis eget, sollicitudin ac nisi. </p> </div> </div> <!-- End Content Block - Account --> <!-- Start Content Block - Social --> <div class="of-content solid-black" data-ofid="of-social"> <div class="of-contentbody"> <p class="of-bigtitle"> Social </p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. In cursus risus quis turpis interdum, pretium bibendum nisi consequat. Integer eu neque fringilla, adipiscing ante vitae, volutpat enim. Ut a metus tempor, dapibus justo quis, tempor sapien. Morbi sagittis luctus velit, vel tincidunt lacus vulputate vitae. Suspendisse ut lectus justo. Curabitur vel dui quis nisl adipiscing vestibulum quis id risus. Donec et consectetur sapien. Mauris ac pulvinar neque, nec imperdiet mauris. Proin nec felis nec neque ultricies molestie. Phasellus ante elit, feugiat vitae convallis eget, sollicitudin ac nisi. </p> <div class="clearspace"></div> </div> </div> <!-- End Content Block - Social --> </div> <!-- End OpenFooter Content --> </div> <!-- END OPENFOOTER --> <script src='https://www.rckinfosystem.com/Codepen_Projects/jquery.min.2.1.0.js'></script> <script src='https://www.rckinfosystem.com/Codepen_Projects/jquery.mousewheel.min.js'></script> <script src='https://www.rckinfosystem.com/Codepen_Projects/openfooter.js'></script> </body> </html> |
Now create CSS File and Paste the below code
|
1 2 3 4 |
html { height:100%; background: url(https://cdn.pixabay.com/photo/2018/06/30/09/31/background-image-3507320_960_720.jpg) repeat center center fixed; } |
Now We also Create a javascript file
|
1 2 3 4 5 |
$(window).load(function () { $('.openfooter').openfooter({ barBg: 'transparent-deepsea' }); }); |
You May Also Like:
- Limit number of login attempt using PHP & MySQL
- Take Image Snapshot from a webcam with Jquery and HTML
- Pure CSS Animated Background
- 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.
