How to create Sidebar Dashboard using Html and Css

Sidebar Dashboard

You may have seen different types of Sidebar Dashboard in many websites. There are many stylish Sidebar Dashboard, with JavaScript and JavaQuery being used with HTML & CSS. But today I will show you the use of HTML and CSS as a Simple Sidebar Dashboard. This source code is really simple and easy to understand.

How to create Sidebar Dashboard using Html and Css

This Sidebar Dashboard 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.

SidebarDashboard.html or SidebarDashboard.htm

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

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head >
	<meta charset="utf-8">
	
	<title>Sidebar Dashboard</title>
	<link rel="stylesheet" type="text/css" href="C:\Users\pintu\Desktop\dashboard\SlideDsEx1.css">
	<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css">
	
	
</head>
<body>

	<input type="checkbox" id="check">

	<!-- Header Section Start -->
	<header>
		<label for="check"><i class="fas fa-bars" id="sidebar_btn"></i></label>
		<div class="left_area">
			<h3>Pintu <span>Vashishtha</span></h3>
		</div>
		<div class="right_area">
			<a href="#" class="logout_btn">Logout</a>
		</div>
	</header>
	<!-- Header Section End -->
	<!-- Sidebar Section Start -->
	<div class="sidebar">
		<center>
			<img src="pintu2.jpg" class="profile_image" alt="">
			<h4>Pintu</h4>
		</center>
		<a href="#"><i class="fas fa-desktop"></i><span>Dashboard</span></a>
		<a href="#"><i class="fas fa-cogs"></i><span>Components</span></a>
		<a href="#"><i class="fas fa-table"></i><span>Tables</span></a>
		<a href="#"><i class="fas fa-th"></i><span>Forms</span></a>
		<a href="#"><i class="fas fa-info-circle"></i><span>About</span></a>
		<a href="#"><i class="fas fa-sliders-h"></i><span>Settings</span></a>
	</div>
	<!-- Sidebar Section End -->
	<!-- Content Section Start -->
	<div class="content"></div>
	<!-- Content Section End -->
</body>
</html>

SidebarDashboard.css

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

body {
	margin: 0;
	padding: 0;
	font-family: "Roboto" , sans-serif;
}

header {
	/* z-index: 1; */
	position: fixed;
	background: #22242A;
	padding: 20px;
	width: 100%;
	height: 30px;
}

.left_area h3 {
	color: #fff;
	margin: 0;
	text-transform: uppercase;
	font-size: 22px;
	font-weight: 900;
}

.left_area span {
	color: #19B3D3;
}

.logout_btn {
	padding: 5px;
	background: #19B3D3;
	text-decoration: none;
	float: right;
	margin-top: -30px;
	margin-right: 40px;
	border-radius: 2px;
	font-size: 15px;
	font-weight: 600;
	color: #fff;
	transition: 0.5s;
	transition-property: background;
}

.logout_btn:hover {
	background: #0B87A6;
}

.sidebar {
	/* z-index: 1; */
	background: #2f323a;
	margin-top: 70px;
	padding-top: 30px;
	position: fixed;
	left: 0;
	width: 250px;
	height: 100%;
	transition: 0.5s;
	transition-property: left;

}

.sidebar .profile_image {
	width: 100px;
	height: 100px;
	border-radius: 100px;
	margin-bottom: 10px;
}

.sidebar h4 {
	color: #ccc;
	margin-top: 0;
	margin-bottom: 20px;
}

.sidebar a {
	color: #fff;
	display: block;
	width: 100%
	line-height: 60px;
	text-decoration: none;
	padding: 10px;
	padding-left: 40px;
	box-sizing: border-box;
	transition: 0.5s;
	transition-property: background;
}

.sidebar a:hover {
	background: #19B3D3; 
}

.sidebar i {
	padding-right: 10px;
}

label #sidebar_btn {
	z-index: 1;
	color: #fff;
	position: fixed;
	cursor: pointer;
	left: 300px;
	font-size: 20px;
	margin: 5px 0;
	transition: 0.5s;
	transition-property: color;
}

label #sidebar_btn:hover {
	color: #19B3D3;
}

#check:checked ~ .sidebar {
	left: -190px;
}

#check:checked ~ .sidebar a span {
	display: none;
}

#check:checked ~ .sidebar a {
	font-size: 20px;
	margin-left: 170px;
	width: 80px;
}

.content {
	margin-left: 250px;
	background: url(bg1.jpg) no-repeat;
	background-position: center;
	background-size: cover;
	height: 100vh;
	transition: 0.5s;
}

#check:checked ~ .content {
	margin-left: 60px;
}

#check {
	display: none;
}

That’s it. Now you have successfully create Sidebar Dashboard. 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 Sidebar Dashboard using Html and Css

How to create Sidebar Dashboard using Html and Css

How to create Sidebar Dashboard using Html and Css

Post a Comment

0 Comments

Popular Posts

How to create Pure CSS Neon Light Text Effect

How to create Sidebar Dashboard using Html and Css

How to create CSS Glowing Tubelight Text Animation Effect using HTML and CSS

Subscribe Us

Facebook

Labels

Pages

Search This Blog

Recent in Technology

How to create Sidebar Dashboard using Html and Css

How to create Sidebar Dashboard using Html and Css

How to create Sidebar Dashboard using Html and Css

You may like these posts

Post a Comment

0 Comments

Social Plugin

Popular Posts

How to create Pure CSS Neon Light Text Effect

How to create Sidebar Dashboard using Html and Css

How to create CSS Glowing Tubelight Text Animation Effect using HTML and CSS

Subscribe Us

Facebook

Labels

Pages

Search This Blog

Recent in Technology