Homepage Design with Ripples Background

In this blog, We will be sharing the source code of a Responsive Homepage snippet where we have added the water ripples effect as a background animation. Before you collect the source code, please watch the video below. You will be able to understand the coding of the piece of code. Front-end development videos are uploaded to our YouTube channel on a regular basis. If you'd like to learn more about front-end development, then you can subscribe to our channel.

Hope you watched the whole video and understood how the snippet was created. Now, what is the Homepage of a Website? The homepage is the front or default page of any website that loads after any visitors load a web address. Each homepage has a menu that allows visitors to dive deeper into different areas of the site. In addition, the home page serves a variety of titles, titles and visual images that serve to show visitors what the website is about.

We've shown an example of a simple homepage in this blog with a logo image, a navigation menu on the right, a title, and a call-to-action button in the middle. This snippet has been given a responsive look using CSS Media queries. This means that the homepage can be seen beautifully on small devices as well. Today's snippet features a JQuery plugin and that is called JQuery Water Ripples. The purpose of our snippet today is to teach you how to use this plugin. Nowadays developers are using this plugin to create their website homepage. So we tried to teach you how to implement this. Once you watch the whole video above, you will understand how and where to download the plugin. Which files are useful to us from the plugin and above all how to implement them.

You may also like:

Homepage Design with Ripples Background [Source Code]:

First, you need to download the plugin from the link provided in the video description. Extract the zip file, go to the folder, and get the required file from there. Next, create an HTML file and add the CSS file for our project. Add an external style sheet and link it to the HTML. This plugin uses jquery, so you need to include the latest jquery file in your project. Copy the code in the box below and then paste it into your project. If for some reason your code is not working, then you can download the code from the download button below.

ADD HTML:

<!DOCTYPE html>
<html lang="en">
<!--divinectorweb.com-->
<head>
	<meta charset="UTF-8">
	<title>Responsive Homepage Layout Water Ripples Effect</title>
	<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
	<link href="https://fonts.googleapis.com/css2?family=Allura&display=swap" rel="stylesheet">
	<link href="style.css" rel="stylesheet">
</head>
<body>
	<header>
		<div class="container">
			<div class="logo"><img alt="" src="logo.png"></div>
			<ul class="nav">
				<li>
					<a href="#">Home</a>
				</li>
				<li>
					<a href="#">About</a>
				</li>
				<li>
					<a href="#">Services</a>
				</li>
				<li>
					<a href="#">Portfolio</a>
				</li>
				<li>
					<a href="#">Contact</a>
				</li>
			</ul>
		</div>
		<div class="content">
			<h1>Digital <span>Photography</span></h1>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut, est.</p><!--lorem10-->
			<a href="#">Contact US</a>
		</div>
	</header>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
	<script src="jquery.ripples-min.js"></script> 
	<script>
	       $('header').ripples({
	           dropRadius: 30,
	           perturbance: 0.03
	       });
	</script>
</body>
</html>

ADD CSS:

* {
	margin: 0;
	padding: 0;
}
body {
	font-family: 'Poppins', sans-serif;
}
.container {
	width: 1170px;
	margin: auto;
}
header {
	background: #101010;
	height: 100vh;
}
.nav {
	float: right;
	list-style: none;
	margin-top: 30px;
}
.nav li {
	display: inline-block;
}
.nav li a {
	color: #fff;
	text-decoration: none;
	padding: 5px 20px;
	font-family: poppins;
	font-size: 16px;
	text-transform: uppercase;
}
.nav li a:hover {
	background: #fff;
	color: #333;
}
.logo {
	float: left;
}
.logo img {
	width: 100%;
	padding: 15px 0;
}
.content {
	position: absolute;
	width: 600px;
	height: 300px;
	margin: 20% 30%;
	text-align: center;
}
.content h1 {
	text-align: center;
	color: #fff;
	font-family: 'Allura', cursive;
	font-size: 60px;
}
.content p {
	font-family: ubuntu;
	font-size: 16px;
	line-height: 1.5;
	color: #ddd;
}
.content h1 span {
	color: #3594cc;
}
.content a {
	border: 1px solid #fff;
	padding: 10px 25px;
	text-decoration: none;
	text-transform: uppercase;
	font-size: 14px;
	margin-top: 20px;
	display: inline-block;
	color: #fff;
}
.content a:hover {
	background: #fff;
	color: #333;
}
/*resposive*/

@media (max-width:991px) {
	.container {
		width: 100%;
	}
	.logo {
		float: none;
		width: 50%;
		text-align: center;
		margin: auto;
	}
	.nav {
		float: none;
		margin-top: 0;
	}
	.nav li a {
		padding: 15px;
		font-size: 18px;
	}
	.nav {
		text-align: center;
	}
	.content {
		width: 100%;
		height: auto;
		margin: 30% 0;
	}
	.content h1 {
		font-size: 70px;
	}
}
@media (max-width:767px) {
	.container {
		width: 100%;
	}
	.logo {
		float: none;
		width: 50%;
		text-align: center;
		margin: auto;
	}
	.nav {
		float: none;
		margin-top: 0;
	}
	.nav li a {
		padding: 5px;
		font-size: 11px;
	}
	.nav {
		text-align: center;
	}
	.content {
		width: 100%;
		height: auto;
		margin: 15% 0;
	}
	.content h1 {
		font-size: 30px;
	}
}

I hope you've already implemented the code. The source code related to the frontend development is published regularly on our website. You're welcome to visit our website if you think that you need them. Please share the articles of this blog and follow us on our social media profiles. Thank you for visiting our site.

DOWNLOAD CODE

Homepage Design with Ripples Background [Source Code]:

Post a Comment

Post a Comment

About Us

Contact Form

Homepage Design with Ripples Background

Homepage Design with Ripples Background [Source Code]:

You might like

Post a Comment

Post a Comment

Contact Form