index.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>
<link rel="stylesheet" type="text/css" href="main.css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<div align="center">
<div id="wrapper">
<div id="header">
<div id="logo">
<img src="../images/logo.png" alt="Logo" />
</div>
<div id="contact-number">
CALL US - 123.1234
</div>
<div id="user-control">
<a href="#">About Us</a> | <a href="#">Register</a> | <a href="#">Login</a>
</div>
<div id="get-started">
<img src="../images/get-started-btn.png" alt="get started" />
</div>
<div class="clear"></div>
</div><!-- .header -->
<div id="navigation">
<ul>
<li><a href="#"><img src="../images/btn-ourservices.jpg" alt="our services" /></a></li>
<li><a href="#"><img src="../images/btn-why.jpg" alt="why" /></a></li>
<li><a href="#"><img src="../images/btn-business.jpg" alt="business" /></a></li>
<li><a href="#"><img src="../images/btn-get.jpg" alt="get" /></a></li>
<div class="clear"></div>
</ul>
</div><!-- #navigation -->
<div id="banner"><img src="../images/banner.jpg" alt="banner" /></div>
</div><!-- #wrapper -->
</div>
</body>
</html>
main.css
@charset "utf-8";
/* CSS Document */
body{
margin:0px 0px 0px 0px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
background:#ffffff;
}
div, img, form{
margin:0px;
padding:0px;
border:0px;
}
a{
color:#000000;
text-decoration:none;
}
a:hover{
text-decoration:underline;
}
#wrapper{
width:895px;
text-align:left;
}
#header{
padding:8px 0px 0px 0px;
}
#header div#logo{
margin:0px 70px 0px 0px;
float:left;
}
#header div#contact-number{
color:#214099;
font-size:15px;
font-weight:bold;
padding-top:16px;
margin-right:40px;
float:left;
}
#header div#user-control{
margin-right:14px;
padding-top:38px;
float:left;
}
#header div#user-control a{
text-decoration:none;
font-weight:bold;
color:#0000ff;
}
#header div#user-control a:hover{
text-decoration:underline;
}
#header div#get-started{
padding-top:10px;
}
#navigation{
text-align:left;
margin-top:5px;
height:41px;
}
#navigation ul{
list-style:none;
padding:0px;
margin:0px;
}
#navigation ul li{
float:left;
height:41px;
}
#banner{
border: 1px solid #cccccc;
border-top:0px;
width:889px;
}
.clear{
clear:both;
}
No comments:
Post a Comment