11
Nov
2020

Create website layout using CSS – Urdu Lecture 07

Create website layout using CSS – Urdu Lecture 07. In this urdu tutorial you will learn how we can create a basic website layout like header bar, Menu bar, left sidebar, body or content area, right sidebar and footer area.

Here you will also find complete coding for Create website layout. Complete HTML and CSS coding is attached below. as well as video tutorial is attached for your help.

website layout
website layout

HTML Coding to Create website layout using CSS

<!DOCTYPE html>
<html>
<head>
	<title>Welcome to my Website</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

	<div class="container">
		
		<div class="header">Header Area</div>
		<div class="menu">Menu Bar</div>
		<div class="contentbox">
			<h1>Learning CSS</h1>
			<p>
				E-Transfer 7th Round Timeline 2020, Transfer Policy and Criteria by SED. School Education Department Govt. of Punjab has planned the following given schedule, criteria and timeline for E-Transfer 2020. the complete details for E-Transfer are in tabular form below.
			</p>
		</div>
		<div class="sidebar">
			<p>E-Transfer 7th Round Timeline 2020, Transfer Policy and Criteria by SED. School Education Department Govt. of Punjab has planned the following given schedule, criteria and timeline for E-Transfer 2020. the complete details for E-Transfer are in tabular form below.</p>
		</div>
		<div class="footer">
			Copyright © 2020 - All rights reserved
		</div>

	</div>

</body>
</html>

Complete CSS code to Create website layout

.container{
	margin: auto;
	width: 1200px;
}

.header{
	width: 1200px;
	height: 150px;
	background-color: lightblue;
}

.menu{
	width: 1200px;
	height: 40px;
	background-color: lightgreen;
	margin-bottom: 10px;
}

.contentbox{
	width: 790px;
	height: 500px;
	background-color: lightblue;
	float: left;
}

.sidebar{
	width: 400px;
	height: 500px;
	background-color: orange;
	float: right;
	
}

.footer{
	width: 1200px;
	height: 30px;
	background-color: purple;
	clear: both;
	text-align: center;
	color: white;
	line-height: 30px;
}

Lecture complete Video Tutorial

You are Missing?

  1. Connecting CSS with Webpage Complete Coding

Leave a Reply

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