<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Newspaper</title>
<style>
#container{
width:95%;
overflow:auto;
margin:auto;
}
header{
text-align: center;
background-color: aquamarine;
}
nav ul{
list-style-type:none;
margin:0;padding:0;
overflow:hidden;
}
nav li{
float:left;
}
nav li a{
text-decoration:none;
text-align:center;
padding:15px ;
}
nav li a:hover{
background-color: aqua;
}
section{
width:70%;
margin:5px;
float:left;
padding:6px;
border:solid 1pt black;
background-color: burlywood;
}
aside{
display:inline-block;
margin:5px;
padding:5px;
width:25%;
position: inherit;
vertical-align:top;
background-color: bisque;
}
figure{
float:left;
margin-right: 5px;
}
footer{
text-align: center;
font-weight:500;
height:30px;
background-color: rgb(131, 117, 131);
width: 100%;
font-size: larger;
}
</style>
</head>
<body>
<div id="container">
<header>
<img src="TOI.png" width="500px"/>
<nav role="navigation">
<ul>
<li><a href="#">City</a></li>
<li><a href="#">world</a></li>
<li><a href="#">business</a></li>
<li><a href="#">tech</a></li>
<li><a href="#">Cricket</a></li>
</ul>
</nav>
</header>
<section>
<h2>latest News</h2>
<article>
<h3>how cyclone done</h3>
<figure>
<img src="cyclone.JPG" width="200px" />
<figcaption>CYCLONE</figcaption>
</figure>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus aspernatur in earum cupiditate odit inventore aperiam iure quia ratione unde. Et voluptatem assumenda fugiat mollitia esse porro recusandae voluptatibus a!
</article>
</section>
<section>
<h2>latest News</h2>
<article>
<h3>how cyclone done</h3>
<figure>
<img src="cyclone.JPG" width="200px" />
<figcaption>CYCLONE</figcaption>
</figure>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus aspernatur in earum cupiditate odit inventore aperiam iure quia ratione unde. Et voluptatem assumenda fugiat mollitia esse porro recusandae voluptatibus a!
</article>
</section><section>
<h2>latest News</h2>
<article>
<h3>how cyclone done</h3>
<figure>
<img src="cyclone.JPG" width="200px" />
<figcaption>CYCLONE</figcaption>
</figure>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus aspernatur in earum cupiditate odit inventore aperiam iure quia ratione unde. Et voluptatem assumenda fugiat mollitia esse porro recusandae voluptatibus a!
</article>
</section>
<section>
<h2>latest News</h2>
<article>
<h3>how cyclone done</h3>
<figure>
<img src="cyclone.JPG" width="200px" />
<figcaption>CYCLONE</figcaption>
</figure>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus aspernatur in earum cupiditate odit inventore aperiam iure quia ratione unde. Et voluptatem assumenda fugiat mollitia esse porro recusandae voluptatibus a!
</article>
</section>
<aside>
<hgroup>
<h3> <a href="#">SOMETHING</a></h3>
<h3> <a href="#">SOMETHING</a></h3>
<h3> <a href="#">SOMETHING</a></h3>
</hgroup>
<figure>
<img src="sucess1.JPG" width="260px"/>
</figure>
<figure>
<img src="quotes2.JPG" width="260px"/>
</figure>
<figure>
<img src="quotes 3.JPG" width="260px"/>
</figure>
</aside>
</div>
<footer>
aksh|hey|bhkm
</footer>
</body>
</html>