HTML Head Title Title Style
HTML Head Title Title Style
doctype html>
<html>
<head>
<title>
Lab Assignment 1
</title>
<style>
*
{
margin: 0px;
padding: 0px;
}
#nav{
margin-top: -7px;
}
#nav ul {
width: 44%;
background-color:white;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
#nav li {
float: left;
color: lightgray;
}
#nav li:hover{
background: blue;
}
#nav li a {
text-align: center;
display: block;
text-decoration: none;
padding: 14px 20px;
color: lightgray;
}
#nav a:hover {
color: white;
}
.second-part{
width: 100%;
background-image: url(picc.JPG);
height: 100px;
margin: 0px;
}
.pos
{
margin-left: 30%;
}
.third
{
margin-left: 30%;
margin-right: 35%;
height: 900px;
background-color: aqua;
}
.first-part
{
display: inline;
float: left;
width: 65%;
background-color: azure;
height: 900px;
}
.two
{
float: left;
width: 35%;
background-color:#3A91C8;
height:900px;
}
.imm
{
display: inline;
float: left
}
.update
{
width: 100%;
height: 40px;
background-color:#1953A9;
color: white;
}
.wh
{
margin-top: 10px;
margin-left: 5px;;
color: white;
}
.last
{
width: 100%;
height:100px;
padding-top: 20px;
background-color: #EDEBD5;
}
.off{
font-style: italic;
}
</style>
</head>
<body>
<center id = "nav" >
<div>
<ul >
<li> <a href="#">home</a></li>
<li> <a href="#">products</a></li>
<li><a href="#">services</a></li>
<li><a href="#">blog</a></li>
<li><a href="#">support</a></li>
<li><a href="#">about</a></li>
<li><a href="#">contact</a></li>
</ul>
</div>
</center>
<div class="second-part">
<img class="pos" src="l.png" height="100%">
<img src="l.png" width="400px" height="100%">
</div>
<div class="third">
<div class="tour">
<div class="first-part">
<h1 class="off">Tour of company</h1>
<img class="imm" src="blurr.JPG">
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing
elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua."<br> <a href="#">Read More..</a></p>
<br>
<h2 class="off">Lorem ipsum dolor</h2><br>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing
elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu
</p>
<br>
<h2 class="off">Lorem ipsum dolor</h2><br>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing
elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu
</p>
<br><br>
</div>
<div class="two">
<div class="update">
<h2 class="off">Recent Updates</h2></div>
<h3 class="wh">Blog post</h3>
<p class="wh">
<u>
Lorem ipsum dolor sit amet, consectetur adipiscing
elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud
</u>
</p>
<br>
<h3 class="wh">Blog post</h3>
<p class="wh">
<u>
exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
velit esse cillum dolore
</u>
</p>
<br>
<h3 class="wh">Blog post</h3>
<p class="wh">
<u>
eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim
id est laborum
</u>
</p>
<br>
<h3 class="wh">Blog post</h3>
<p class="wh">
<u>
Sed ut perspiciatis unde omnis iste natus error sit
voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque
ipsa quae ab illo
</u>
</p>
<br>
<h3 class="wh">Blog post</h3>
<p class="wh">
<u>
Sed ut perspiciatis unde omnis iste natus error sit
voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque
ipsa quae ab illo
</u>
</p>
</div>
</div>
</div>
<div class="last">
<p> <center>Copyright © 2009 My company. All Rights
Reserved</center></p>
<p> <center><u>Privacy policy </u>|<u>Terms of
Use</u></center></p>
</div>
</body>
</html>