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

<!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

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

$(window).load(function () {
  $('.openfooter').openfooter({
    barBg: 'transparent-deepsea' });

});

You May Also Like:

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.

3 Comments
Bhuvi 21st October 2019
|
This is cool, Thanks for sharing