Create website layout using CSS – Urdu Lecture 07

0 Views 0

Create web site structure utilizing CSS – Urdu Lecture 07. On this urdu tutorial you’ll learn the way we will create a fundamental web site structure like header bar, Menu bar, left sidebar, physique or content material space, proper sidebar and footer space.

Right here additionally, you will discover full coding for Create web site structure. Full HTML and CSS coding is connected under. in addition to video tutorial is connected on your assist.

HTML Coding to Create web site structure utilizing CSS

<!DOCTYPE html>
<html>
<head>
	<title>Welcome to my Web site</title>
	<hyperlink rel="stylesheet" kind="textual content/css" href="model.css">
</head>
<physique>

	<div class="container">
		
		<div class="header">Header Space</div>
		<div class="menu">Menu Bar</div>
		<div class="contentbox">
			<h1>Studying CSS</h1>
			<p>
				E-Switch seventh Spherical Timeline 2020, Switch Coverage and Standards by SED. College Schooling Division Govt. of Punjab has deliberate the next given schedule, standards and timeline for E-Switch 2020. the whole particulars for E-Switch are in tabular kind under.
			</p>
		</div>
		<div class="sidebar">
			<p>E-Switch seventh Spherical Timeline 2020, Switch Coverage and Standards by SED. College Schooling Division Govt. of Punjab has deliberate the next given schedule, standards and timeline for E-Switch 2020. the whole particulars for E-Switch are in tabular kind under.</p>
		</div>
		<div class="footer">
			Copyright © 2020 - All rights reserved
		</div>

	</div>

</physique>
</html>

Full CSS code to Create web site structure

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

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

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

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

.sidebar{
	width: 400px;
	peak: 500px;
	background-color: orange;
	float: proper;
	
}

.footer{
	width: 1200px;
	peak: 30px;
	background-color: purple;
	clear: each;
	text-align: heart;
	colour: white;
	line-height: 30px;
}