Tuesday, January 26, 2016

How to create webpage with HTML5 and CSS3 with vertical menu

Visit Chandanmal's profile on Pinterest.



<div><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
body{
background-color: #d8da3d;
padding-left:11em ;
color: purple;
font-family: Georgia,"Times New Roman", Times, serif;
width: 500px;
border: 5px solid green;
}
#banner{
width: 468px;
height: 60px;
background-color: red;
background-image: url("http://cmjainphotos.blogspot.in/5m.jpg");
}
a:hover{
color: red;
}

#nav ul{
list-style-type: none;
margin: 0;
padding: 0;
position: absolute;
top: 2em;
left: 1em;
width: 9em;
border: 2px solid black;
}
#nav ul li{
border: 2px solid red;
border-radius: 5px;
background-color: white;
margin: 0.5em 0;
padding: 0.3em;
border-right: 1em solid black;
}
#nav ul li a{
text-decoration: none;
color: blue;
}
#nav ul li a:hover{
color: green;
}
#nav ul li a:visited{
color: red;
}
</style>
</head>
<body>
<!-- site navigation menu-->
<div id="nav">
<ul>
<li><a href="index.html">Home page</a></li>
<li><a href="about_us.html">About Us</a></li>
<li><a href="customers.html">Costomers</a></li>
<li><a href="contact_us.html">Contact Us</a></li>
</ul>
</div>
<!-- main content-->
<div id="banner"><a href="http://bardiaplaster.com"><center><h3>Bardia Plaster Industries,
Barmer<br><dfn><b>All types of slabes</b></dfn></h3></center></a></div>
<h1>My first styled page</h1>
<p>It lacs images, but at least it has style. And it has a links,evev
if they don'tgo any where & hellips; </p>
<p>There should be more here, but i don't know what yet.</p>
<hr>
<!-- Sign and date the page, it's only polite!-->
<address>Chandanmal Jain M: +91 9829930553,+91 7220023707<br>Mahaveer circle<br>Juna keradu marg<br>Barmer(Rajastha)<br>India-344001
</address>

</body>
</html></div>

No comments:

Post a Comment