Empowering The World Through Technology

Create website layout using CSS – Urdu Lecture 07

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.

website layout
web site structure

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

Top Trending

Theme Uploading Using CPanel

.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;
}

Lecture full Video Tutorial

You might be Lacking?

  1. Connecting CSS with Webpage Full Coding

Leave A Reply

Your email address will not be published.

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More