Try it yourself editor

Online Code Editor [-OCE-]

Code

<!DOCTYPE html>
<html>
<head>
	<title>Sop4 Demo practical</title>
	<style type="text/css">
		body
		{
			background-color: lightgrey;
		}
		nav
		{
			background-color: blue;
			height:30px;
			line-height: 30px;
			font-size: 18px;
			font-family: sans-serif;
		}
		span
		{
			font-size: 20px;
		}
		a
		{
			color:#FFFFFF;
			padding: 15px;
		}
		section
		{
			float: left;
			width: 70%;
			background-color: grey;
			margin: 5px 0;
		}
		article
		{
			background-color: white;
			margin: 0 5px;
		}
		footer
		{
			background-color: blue;
			line-height: 20px;
			height:20px;
			margin: 5px 0;
			color: white;
			padding:12px;
			font-size: 20px;
			font-family: sans-serif;
			clear:both;
		}
		aside
		{
			float: right;
			width: 29%;
			margin: 5px 0;
			background-color: grey;
		}
		h2,h3,h1,p
		{
			margin : 5px  0;
			padding :0  10px;

}
	</style>
</head>
<body>
	<header>
		<h1>News</h1>
		<h3> Local and National News</h3>
		<nav>
			<a href="#"><span>H</span>OME</a>
			<a href="#"><span>A</span>rchives</a>
			<a href="#"><span>A</span>bout</a>
		</nav>
	</header>
<aside>
	<h2>BE A NEWS REPORTER</h2>
	<p>If you see news happening. Send us a Text.</p>
</aside>
<section>
	<h2>Local News</h2>
<article>
	<h3>Fire Fighters rescue man from building this is local news 1</h3>
<p>(reporter name, date)</p>
<p>  This is the fighter details. This is the story of fighter.
<br>
This is the detail of rescue man. This is the story of how is rescued.
</p>
</article>
	<article>
	<h3>
		New Library to be built this is local news 2
	</h3>
	<p>(reporter name,date)</p>
	<p> This is the story text. This is the story text.
		<br>
	This is the story text. This  is the story text.</p>
</article>
</section>
<section>
	<h2>
		National News
	</h2>
	<article>
		<h3>
		Snow storm is making travel difficult </h3>
<p>(reporter name, date)</p>

<p>This is the story snow storm. This is the story distoiral of storm.
	<br>
This is the story part continued . This is the story text continued.</p>
</article>
<article>
<h3>Thousands are without power</h3>
<p>(reporter name, date)</p>
<br>
<p>This is the story of not having power. This is the story text continued.
<br> This is the story bad effect. This is the story about destroyal of economy.
</p>
</article>
</section>
<footer>
footer information
</footer>
</body>
</html>

Output

CodeVerse Projects

Search This Blog

#4 Blogging Site Try it your self [-OCE-]

Online Code Editor [-OCE-]

Comments

Post a Comment