Posted by 
Sop4 Textbook Exercise Solution Chapter 1 Advanced Web design
Write code using CSS & HTML the following web page giving desired output.
<!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>
comment 0 Comments
more_vert