If you looking for leaning a html and css.. then you are in the right place..here you learn about html/css/javascript.
here is html code for your website....
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="syl.css">
</head>
<body>
<div class="narrow">
<div class="narrow1"> <h2> Industrial Plant & Machine</h2>
<div class="mac1">
<img src="1395446_10151752499248218_1456460694_n.jpg" height="100px" width="120px" />
</div>
<div class="nav1"><a href="www.fb.com">Machines & Equipments</a> <br/><a href="www.fb.com">Textile & Garment Machines</a><br/><a href="www.fb.com" >Control Equipments</a></div>
</div>
<div class="narrow1"><h2>Electronics & Electrical</h2>
<div class="mac1">
<img src="almond_tree_california-1280x1024.jpg" height="100px" width="120px" />
</div>
<div class="nav1">
<a href="www.fb.com">Lights & Light products</a><br/><a href="www.fb.com">Audio video product</a><br/><a href="www.fb.com">Switchgear & Relays</a></div>
</div>
<div class="narrow1"><h2>Industrial Supplies</h2>
<div class="mac1">
<img src="alone_in_sea-1920x1080.jpg" height="100px" width="120px" />
</div>
<div class="nav1">
<a href="www.fb.com">Pipe fitting & flangs</a><br/>
<a href="www.fb.com">Filter & Accessories</a><br/>
<a href="www.fb.com">Plastic, PVC & PP Products</a></div>
</div>
<div class="narrow1"> <h2> Building & Construction</h2>
<div class="mac1">
<img src="Colosseum.jpg" height="100px" width="120px" />
</div>
<div class="nav1">
<a href="www.fb.com">Hardware Fittings</a> <br/>
<a href="www.fb.com">Builders & Developers</a><br/>
<a href="www.fb.com">Door & Window Hardware</a></div>
</div>
<div class="narrow1"><h2>Apperal & Garments</h2><div class="mac1">
<img src="393884_220040624750658_180919361_n_2.jpg" height="100px" width="120px" />
</div>
<div class="nav1">
<a href="www.fb.com">Thread & Sewing suppliers</a><br/>
<a href="www.fb.com">Ladies Dress & Apperal</a><br/>
<a href="www.fb.com">Work & Safety Clothing</a></div>
</div>
<div class="narrow1"><h2>Food Beverges</h2><div class="mac1">
<img src="407185_220024954752225_309172865_n_2.jpg" height="100px" width="120px" />
</div>
<div class="nav1">
<a href="www.fb.com">Fruit & Vegetables</a><br/>
<a href="www.fb.com">Bakery & Confectionery</a><br/>
<a href="www.fb.com"> Cereals & Food Grains</a></div>
</div>
<div class="narrow1"> <h2> Medical & Healthcare</h2><div class="mac1">
<img src="1 (20).jpg" height="100px" width="120px" />
</div>
<div class="nav1">
<a href="www.fb.com">Hospitals and Clinics</a><br/>
<a href="www.fb.com">Gym Fitness Equipment</a><br/>
<a href="www.fb.com">Pharma Raw Materials & API</a></div>
</div>
<div class="narrow1"><h2>Packaging Machines & Goods</h2><div class="mac1">
<img src="1 (19).jpg" height="100px" width="120px" />
</div>
<div class="nav1">
<a href="www.fb.com">Barcodes and Labels</a><br/>
<a href="www.fb.com">Packaging Box & Cartons</a><br/>
<a href="www.fb.com">Packing Bottles & Jar</a></div>
</div>
<div class="narrow1"><h2>Chemicals, Dyes & Solvents</h2><div class="mac1">
<img src="1 (18).jpg" height="100px" width="120px" />
</div>
<div class="nav1">
<a href="www.fb.com">Industry Chemical & Acid</a><br/>
<a href="www.fb.com">Chemicals & Derivatives</a><br/>
<a href="www.fb.com">Paints, Powder & Coating</a></div>
</div>
</div>
</body>
</html>
color:#666;
}
.narrow1{
float:left;
margin:20px 30px;
height:170px;
width:350px;
background-color:#FFF;
border-bottom-color:#6661;
border-bottom:solid;
border-right:solid;
border-radius:10px;
}
.narrow{
float:left;
height:200px;
width:1500px;
background-color:#FFF;
}
.mac1{ float:left;
height:70px;
width:60px;}
.mac1:hover{
cursor:pointer;
opacity:0.5px;}
.nav1{
font-family:"Arial Black", Gadget, sans-serif;
font-size:12px;
text-align:left;
width:350px;
margin:10px 150px;
color:#036;
}
.nav1:hover{
color:#C00;}
a:hover{
color:#C60;
cursor:pointer;
text-decoration:none;}
a{text-decoration:none}
here is html code for your website....
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="syl.css">
</head>
<body>
<div class="narrow">
<div class="narrow1"> <h2> Industrial Plant & Machine</h2>
<div class="mac1">
<img src="1395446_10151752499248218_1456460694_n.jpg" height="100px" width="120px" />
</div>
<div class="nav1"><a href="www.fb.com">Machines & Equipments</a> <br/><a href="www.fb.com">Textile & Garment Machines</a><br/><a href="www.fb.com" >Control Equipments</a></div>
</div>
<div class="narrow1"><h2>Electronics & Electrical</h2>
<div class="mac1">
<img src="almond_tree_california-1280x1024.jpg" height="100px" width="120px" />
</div>
<div class="nav1">
<a href="www.fb.com">Lights & Light products</a><br/><a href="www.fb.com">Audio video product</a><br/><a href="www.fb.com">Switchgear & Relays</a></div>
</div>
<div class="narrow1"><h2>Industrial Supplies</h2>
<div class="mac1">
<img src="alone_in_sea-1920x1080.jpg" height="100px" width="120px" />
</div>
<div class="nav1">
<a href="www.fb.com">Pipe fitting & flangs</a><br/>
<a href="www.fb.com">Filter & Accessories</a><br/>
<a href="www.fb.com">Plastic, PVC & PP Products</a></div>
</div>
<div class="narrow1"> <h2> Building & Construction</h2>
<div class="mac1">
<img src="Colosseum.jpg" height="100px" width="120px" />
</div>
<div class="nav1">
<a href="www.fb.com">Hardware Fittings</a> <br/>
<a href="www.fb.com">Builders & Developers</a><br/>
<a href="www.fb.com">Door & Window Hardware</a></div>
</div>
<div class="narrow1"><h2>Apperal & Garments</h2><div class="mac1">
<img src="393884_220040624750658_180919361_n_2.jpg" height="100px" width="120px" />
</div>
<div class="nav1">
<a href="www.fb.com">Thread & Sewing suppliers</a><br/>
<a href="www.fb.com">Ladies Dress & Apperal</a><br/>
<a href="www.fb.com">Work & Safety Clothing</a></div>
</div>
<div class="narrow1"><h2>Food Beverges</h2><div class="mac1">
<img src="407185_220024954752225_309172865_n_2.jpg" height="100px" width="120px" />
</div>
<div class="nav1">
<a href="www.fb.com">Fruit & Vegetables</a><br/>
<a href="www.fb.com">Bakery & Confectionery</a><br/>
<a href="www.fb.com"> Cereals & Food Grains</a></div>
</div>
<div class="narrow1"> <h2> Medical & Healthcare</h2><div class="mac1">
<img src="1 (20).jpg" height="100px" width="120px" />
</div>
<div class="nav1">
<a href="www.fb.com">Hospitals and Clinics</a><br/>
<a href="www.fb.com">Gym Fitness Equipment</a><br/>
<a href="www.fb.com">Pharma Raw Materials & API</a></div>
</div>
<div class="narrow1"><h2>Packaging Machines & Goods</h2><div class="mac1">
<img src="1 (19).jpg" height="100px" width="120px" />
</div>
<div class="nav1">
<a href="www.fb.com">Barcodes and Labels</a><br/>
<a href="www.fb.com">Packaging Box & Cartons</a><br/>
<a href="www.fb.com">Packing Bottles & Jar</a></div>
</div>
<div class="narrow1"><h2>Chemicals, Dyes & Solvents</h2><div class="mac1">
<img src="1 (18).jpg" height="100px" width="120px" />
</div>
<div class="nav1">
<a href="www.fb.com">Industry Chemical & Acid</a><br/>
<a href="www.fb.com">Chemicals & Derivatives</a><br/>
<a href="www.fb.com">Paints, Powder & Coating</a></div>
</div>
</div>
</body>
</html>
CSS
the sly.css file css is below:
<style type="text/css">
h2{color:#666;
}
.narrow1{
float:left;
margin:20px 30px;
height:170px;
width:350px;
background-color:#FFF;
border-bottom-color:#6661;
border-bottom:solid;
border-right:solid;
border-radius:10px;
}
.narrow{
float:left;
height:200px;
width:1500px;
background-color:#FFF;
}
.mac1{ float:left;
height:70px;
width:60px;}
.mac1:hover{
cursor:pointer;
opacity:0.5px;}
.nav1{
font-family:"Arial Black", Gadget, sans-serif;
font-size:12px;
text-align:left;
width:350px;
margin:10px 150px;
color:#036;
}
.nav1:hover{
color:#C00;}
a:hover{
color:#C60;
cursor:pointer;
text-decoration:none;}
a{text-decoration:none}
</style>
output
is this article is useful ?
if "yes" then
go to the footer
and
select "yes" on visiter poll.
(
would you like to visit my blog again ?
yes
no
may be
)
keep visiting anicistan
every day new post updated ..
thanks for visit .
.whenever you back on my blog i'll be back with new post that learn new things.
Tags:
html/css