Write a code for creating static page design using division tag || DWPD Sem 5 Practical 5

DWPD : Practical 5

Index.html file Code <!DOCTYPE html>
<html>
<head>
<title>Personal Blog</title>
<style>
body
{
 margin:0;
}
a
{
 text-decoration:none;
}
.top 
{
    height: 5em;
    background: #04023F;
 overflow:hidden;
}
.line
{
    height: .5em;
    background: #0ACB05;
}
.logo
{
 float:left;
 border-radius:5em;
 box-shadow:0px 0px 50px grey;
 width:20em;
 margin-left:13%;
 color:white;
 text-align:center;
 overflow:hidden;
}
.menu
{
 float:right;
 width:50%;
}
.menu a
{
 text-decoration:none;
 text-align:center;
 color:white;
 box-shadow:0px 0px 50px grey;
 display:inline-block;
 padding:.5em;
 border-top-right-radius:2em;
 border-bottom-right-radius:2em;
 width:3em;
 margin-top:1.5em;
}
.main
{
 margin:2em auto;
 box-shadow:0px 0px 10px grey;
 overflow:hidden;
}
.news
{
 width:30%;
 padding:5px;
 height:100%;
 float:left;
}
.content
{
 box-shadow:0px 0px 5px grey;
 padding:2px;
 margin:20px;
}
.art-content
{
 box-shadow:0px 0px 5px grey;
 padding:2px;
 margin:20px;
 width:100%;
}
.art
{
 float:left;
 padding:5px;
 width:65%;
 border-left:5px solid grey;
}
.footer
{
 margin:2em auto;
 background:#212222;
 overflow:hidden;
 color:white;
}
.desc
{
 float:left;
 margin-left:10em;
}
</style>
</head>
<body>
<div class="top">
 <div class="logo">
  <h1>Your Name</h1>
 </div>
 <div class="menu">
   <a href="#">Home</a>
   <a href="#">Blog</a>
   <a href="#">About</a>
   <a href="#">Contact</a>
   <a href="#">FAQs</a>
   <a href="#">Sitemap</a>
 </div>
</div>
<div class="line"></div>
<div class="main">
 <div class="news">
  <h2>Recent News</h2>
  <div class="content">
   <b>News Title</b>
   <p>Some Text... Some Text... Some Text... Some Text... </p>
  </div>
  <div class="content">
   <b>News Title</b>
   <p>Some Text... Some Text... Some Text... Some Text... </p>
  </div>
  <div class="content">
   <b>News Title</b>
   <p>Some Text... Some Text... Some Text... Some Text... </p>
  </div>
 </div>
 <div class="art">
  <h2>Recent Articles</h2>
  <div class="art-content">
   <b>Article Title</b><br>
   <img src="images/bg.jpg" width="20%" />
   <p>Some Text... Some Text... Some Text... Some Text... Some Text... Some Text... Some Text... Some Text... Some Text... Some Text... Some Text... Some Text... Some Text... Some Text... Some Text... Some Text... Some Text... Some Text... Some Text... Some Text... </p>
   <a href="#">Read More</a>
  </div>
 </div>
</div>
<div class="footer">
 <div class="logo">
  <h1>Your Name</h1>
 </div>
 <div class="desc">
  <p>Email : Sarjilshaikh02@gmail.com</p>
  <p>Mobile : +91 97121 69979</p>
  <p>Location : Vansda, India</p>
 </div>
</div>
</body>
</html>

Output :