0% found this document useful (0 votes)
58 views7 pages

HTML Head Title Title Style

Uploaded by

Najaf Mughal
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
58 views7 pages

HTML Head Title Title Style

Uploaded by

Najaf Mughal
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 7

<!

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>

<h2 class="off">Curabitur Sem Urna</h2><br>


<p>On the other hand, we denounce with righteous
indignation and dislike men who are so beguiled and demoralized by the
charms of pleasure of the moment,<br><br> so blinded by desire, that
they cannot foresee the pain and trouble that are bound to ensue; and
equal blame belongs to those who fail in their duty through weakness
of will, which is the same as saying through shrinking from will
frequently occur that pleasures have to be repudiated and annoyances
accepted. The wise man therefore always holds in these matters ttoil
and pain. These cases are perfectly simple and easy to
distinguisness</p>

</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>

You might also like