Landing Page Design Only HTML & CSS With Animation | Portfolio Website Design With CSS Animation - LearnDesign

Hello friends, In this video i’m creating animated landing page design using only html and css(css rotate, css keyframe animation). I hope you love it and if you like this video so like, share & comment and subscribe to this(LearnDesign) channel for more creative and learning videos.

Friends, I want to tell people that this is only the hero section(also called a landing section) of the website and it is not responsive. Whenever you are going to create a website, you have to create a folder named after your project, inside which you have to create an index.html file, then create a folder for images and CSS, this is the basic structure of any website.

Below is the coding part, which I have attached below, you can download it and also watch the video, I have given its link and if you do not understand anything then you can also ask by commenting. I will try to answer him.

I have made this portfolio website in which some shapes have also been made so that the website looks better and it has been animated so that people can see this website in a better way. I have made this website only with the help of HTML and CSS. No third-party JS is used.

After that, I have taken a section and named it Home and I’ve taken another div and named its shape. Inside that, I have taken a div named text and a div named img. In the div named text, I have written my name, my position, and a little bit about myself and you can change it and add your information. And I have taken my image in a div named img whose size is 400×480. After that, I have taken images of triangles in a div named Shape and gave animation to it with the help of CSS.

After that, in CSS, I have the code for the animation of the style and shape of the website. In which I have used the animation keyframes property of CSS3 for animation. Transform Rotate is used to rotate the shape 360 degrees and Transform Translate is used to move the shape. I have given its code below, you guys can see how I have designed this website landing page and given smooth animation.

/*Google fonts*/
@import url('https://fonts.googleapis.com/css2?family=Dosis:wght@300;400;500;600;700&display=swap');

*{
	margin: 0;
	box-sizing: border-box;
	outline: none;
}
body{
	font-family: 'Dosis', sans-serif;
	font-weight: 400;
	color: #fff;
	overflow-x: hidden;
	overflow: hidden;
	background-color: #071F30;
}
h1,h2,h3,h4,h5,h6{
	font-weight: normal;
}
.header-inner{
	display: flex;
	justify-content: space-between;
	align-items: center;
	max-width: 1140px;
	margin: 0 auto;
}
header ul li{
	display: inline-block;
	margin: 0 25px;
}
header ul li:last-child{
	margin-right: 0;
}
header ul li a{
	text-decoration: none;
	text-transform: uppercase;
	color: #fff;
}
.common{
	padding: 130px 0;
	min-height: 100vh;
	position: relative;
}
.home-inner{
	display: flex;
	justify-content: center;
	align-items: center;
}
.home .text{
	max-width: 250px;
	text-align: right;
	margin-right: 60px;
}
.home h5{
	font-size: 18px;
	text-transform: uppercase;
	position: relative;
}
.home h5:before{
	content: '';
	position: absolute;
	top: 50%;
	left: 0;
	width: 60px;
	height: 1px;
	background-color: #fff;
}
.home h1{
	font-size: 64px;
	text-transform: uppercase;
}
.home p{
	font-size: 18px;
	line-height: 30px;
	color: #8d9eaa;
	margin: 30px 0 60px;
}
.home .btn{
	font-size: 18px;
	color: #fff;
	text-decoration: none;
	padding: 15px 20px;
	border:  1px solid #ffffff40;
}
.home .btn:hover{
	background-color: #ffffff40;
}
.shape img{
	position: absolute;
	width: 100%;
	z-index: -9;
}
.shape .shape1{
	right: -160px;
	top: -50px;
	width: 450px;
	opacity: .5;
	transform-origin: center;
	animation: shape linear 30s infinite reverse;
}
.shape .shape2{
	left: -70px;
	bottom: -50px;
	width: 450px;
	opacity: .5;
	transform-origin: center;
	animation: shape linear 30s infinite reverse;
}
@keyframes shape{
	100%{
		transform:  rotate(360deg);
	}
}
.shape .shape3{
	top: 0;
	left: 0;
	width: 250px;
	opacity: .4;
	transform-origin: center;
	animation: shape3 linear 20s infinite;
	transform: translate(-200px, -100px) rotate(0deg);
}
@keyframes shape3{
	100%{
		transform: translate(1300px, 600px) rotate(360deg);
	}	
}
.shape .shape4{
	left: 0;
	bottom: 0;
	width: 150px;
	opacity: .4;
	transform-origin: center;
	animation: shape4 linear 20s infinite 5s;
	transform: translate(700px, 80px) rotate(0deg);
}
@keyframes shape4{
	100%{
		transform: translate(1200px, -800px) rotate(360deg);
	}
}
.shape .shape5{
	left: 500px;
	top: 0;
	width: 100px;
	opacity: 0;
	transform-origin: center;
	animation: shape5 linear 25s infinite;
	transform: translate(0, -150px) rotate(0deg);
}
@keyframes shape5{
	100%{
		opacity: 1;
		transform: translate(0, 800px) rotate(720deg);
	}
}

below i have attached some of the jquery plugins, you can use into your personal projects.

In this project, I have used CSS properties like CSS transform rotate, CSS transform translation, CSS keyframe animation. So many people don’t know about this property so I have made a video for them so that they can learn something new through this video and use it in their project. I have made a video and attached the source code for how you can create such a website.

If you like video tutorial of this video so please visit my youtube channel then watch & share that video and also don’t forget to subscribe LearnDesign youtube channel.

Below I have attached the source code you can download.

CSS Animation landing page design portfolio website

Landing Page Design Only HTML & CSS With Animation | Portfolio Website Design With CSS Animation

You may also like

Responsive Masonry Grid Layout Using Only CSS

Portfolio Website Design | Website Landing Page Design & Animation | HTML, CSS, ANIME JS

Related Articles

1 comment

Leave a Comment Cancel Reply