How to create Creative Website Design using HTML and CSS

You may have seen different types of Creative Website Design in many websites. There are many stylish Creative Website Design on HTML and CSS. But today, I will show you as a Simple Creative Website Design using HTML and CSS. This source code is really simple and easy to understand.

Creative Website Design using HTML and CSS

This Creative Website Design made with Only HTML & CSS. Copy source code from here.
For creating this project you have to create HTML File. Follow the steps to creating this without any error.

landingpage.html or landingpage.htm

Create an HTML file named ‘landingpage.html‘ and put these codes given below.

buttonhover1.css

Create an CSS file named ‘landingpage.css‘ and put these codes given below.

/* Code By Coding With Fun */

@import url("https://font.googleapis.com/css2?family=Poppins&display=swap");
@import url("https://font.googleapis.com/css2?family=Oswald:wght@600&display=swap");

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
nav {
	display: flex;
	justify-content: space-between;
	font-family: 'Poppins', sans-serif;
}

nav .logo {
	padding: 20px;
	color: #fff;
	margin-left: 10px;
}

nav li {
	list-style: none;
	padding: 20px;
	display: inline-block;
	margin-right: 30px;
}

nav li a {
	text-decoration: none;
	font-size: 20px;
	font-family: 'Poppins', sans-serif;
	color: #fff;
}

nav li a:hover {
	transition: 0.5s;
	color: #f5b041;
	border: 2px solid #fad03f;
	padding: 8px 15px;
	border-radius: 5px;
}

header {
	background: linear-gradient(to bottom, rgba(255,255,255,0.15)0%, 
		rgba(0,0,0,0.15)100%),
				radial-gradient(at top center, rgba(255,255,255,0.40)0%, 
		rgba(0,0,0,0.40)120%) #989898;
	background-blend-mode: multiply, multiply;
	height: 100vh;
}

.body {
	display: flex;
	justify-content: space-around;
	flex-wrap: wrap;
}

.left {
	margin-top: 10%;
}

.left h1 {
	font-size: 55px;
	font-family: 'Oswald', sans-serif;
	color: #fff;
	text-transform: uppercase;
	padding-bottom: 50px;
}

.left h1 span {
	font-size: 55px;
	font-family: 'Oswald', sans-serif;
	color: #fff;
	text-transform: uppercase;
	padding-bottom: 50px;
	color: #fad03f;
}

.left a {
	font-size: 20px;
	text-decoration: none;
	color: #fff;
	border-radius: 2px;
	padding: 10px 20px;
	font-family: 'Poppins', sans-serif;
	border: 2px solid #f6d365;
}

.left a:hover {
	background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	transition: 0.5s;
	font-size: 22px;
}

.right img {
	height: 100%;
}

That’s it. Now you have successfully create Creative Website Design. If you have any doubt or question comment down below.

I hope this post will useful to you, Thanks For Visiting, Keep Visiting.

How to create Creative Website Design using HTML and CSS