How To Make Animated Website Design Using HTML And CSS

In this HTML and CSS Tutorial I will show you how to make this web page using HTML and CSS, Where you can see one product image in the left side and in the right side there is a product title, small description, price and button.

Demo Download

The best part of this webpage page design is it’s animations. You can see one offer text and some growing shadow animation around it. Then product is also moving up and down, and there is an icon in BUY NOW button which is moving left and right. This type of product details page you can create in your eCommerce website design.

Step to Make Animated Website Design Using HTML and CSS

To make a animated website design using html and css we need to follow the below steps

  1. index.php
  2. style.css
  3. Required images of handfree and offer icon

1: Index.html

First of all we create a index.html file for write content, connect to style.css file in head section and following code paste in body section.

<div class="hero">
	<div class="left-col">
		<div class="product-img">
			<img src="handfree.png" class="handfree">
			<img src="offer.png" class="offer">
		</div>
	</div>
	<div class="right-col">
		<h1><span>EXTRA BASE</span> HANDFREE</h1>
		<p>Subscribe T-Code Scripts Toutube channel to watch more videos on Web development and Web designing</p>
		<h3>$ 100.00</h3>
		<a href="#"><span>➤</span>Buy Now</a>
	</div>
</div>

In above we make two column left and right, in left side we show images of product and right side show you product name and description and also show you button with animated arrow icon.

2: Style.css

Now create a style.css file and connect in html head section or you create a style tag in head section of index.html file and write all style code in it.

*{
	margin: 0;
	padding: 0;
}
.hero{
	height: 100%;
	padding: 150px 0px;
	display: flex;
	align-items: center;
}
.left-col{
	flex-basis: 50%;
	text-align: center;
}
.product-img{
	background: #f1f4f9;
	width: 400px;
	height: 400px;
	margin: 0 auto;
	position: relative;
}
.product-img:hover{
	animation: product 5s linear infinite;
}
@keyframes product{
	0%{
		background: #f4d4ff;
		opacity: 80%;
	}
	25%{
		background: #ff1100;
		opacity: 80%;
	}
	50%{
		background: #4dff00;
		opacity: 80%;
	}
	75%{
		background: #001eff;
		opacity: 80%;
	}
	100%{
		background: #f4d4ff;
		opacity: 80%;
	}
}
.handfree{
	width: 350px;
	margin-top: 20px;
	animation: handfree 2s linear infinite;
}
.right-col{
	flex-basis: 50%;
	padding-top: 0 30px;
	font-family: sans-serif;
}
.right-col h1{
	font-size: 42px;
	font-weight: 900;
	margin-bottom: 30px;
}
.right-col h1 span{
	color: #365895;
}
.right-col h3{
	margin: 30px 0;
	color: #365895;
}
.right-col a{
	width: 100px;
	padding: 10px 15px;
	color: #fff;
	text-decoration: none;
	border-radius: 4px;
	background: #365895;
}
.right-col a span{
	display: inline-block;
	margin-right: 5px;
	animation: arrow 1.5s linear infinite;
}
@keyframes arrow{
	0%{
		transform: translateX(-5px);
	}
	50%{
		transform: translateX(3px);
	}
	100%{
		transform: translateX(-5px);
	}
}
@keyframes handfree{
	0%{
		transform: translateY(-8px);
	}
	50%{
		transform: translateY(8px);
	}
	100%{
		transform: translateY(-8px);
	}
}
.offer{
	width: 60px;
	position: absolute;
	top: 0;
	left: 0;
	transform: translate(-50%,-50%);
	border-radius: 50%;
	animation: offer 2s linear infinite;
	
}
@keyframes offer{
	0%{
		box-shadow: 0 0 0 0px rgba(255,46,31,0.2),
					0 0 0 15px rgba(255,46,31,0.2),
					0 0 0 30px rgba(255,46,31,0.2);
	}
	100%{
		box-shadow: 0 0 0 15px rgba(255,46,31,0.2),
					0 0 0 30px rgba(255,46,31,0.2),
					0 0 0 45px rgba(255,46,31,0);
	}
}

As you can see above style.css code, you can copy and paste in style sheet.

Conclusion

Today we learnt how to make animated website using html and css, you can add multiple images or icon in your pages just by adding the input tag HTML markup and change name in style sheets.

If you found this tutorial helpful, share it with your friends and developers group.

Demo Download

I spent several hours to create this tutorial, if you want to say thanks so like my page on Facebook and share it.

Facebook Official Page: T-Code Scripts

One thought on “How To Make Animated Website Design Using HTML And CSS

Leave a Reply

Your email address will not be published. Required fields are marked *