Thursday, May 29, 2014

Css Style

 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=iso-8859-1?/>
<title>Untitled Document</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
<body>
<div id="container"><!--BEGIN CONTAINER-->

<div id="title"><!--BEGIN TITLE--> <img src="images/title.png"/>
</div><!--END TITLE-->

<div id="navigation"><!--BEGIN NAVIGATION-->
<ul class="nav_menu">
<li><a href="#">Home</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Free Quote</a></li>
<li><a href="#">Support</a></li>
 <li><a href="#">Contact</a></li>
</ul>
</div><!--END NAVIGATION-->
<!--WELCOME AREA STARTS-->
 <div id="welcome">
  <!--WELCOME TEXT STARTS-->
  <div id="welcome-text">
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque lacinia pellentesque neque in hendrerit. Suspendisse in malesuada mi. Donec in dictum neque. Mauris vel lacus eget risus fermentum tristique. Nulla ac elit augue. consectetur adipiscing elit. Quisque lacinia pellentesque nconsectetur adipiscing elit. Quisque lacinia pellentesque nconsectetur adipiscing elit. Quisque lacinia pellentesque nconsectetur adipiscing elit. Quisque lacinia pellentesque nconsectetur adipiscing elit. Quisque lacinia pellentesque n consectetur adipiscing elit. Quisque lacinia pellentesque nconsectetur adipiscing elit. Quisque lacinia pellentesque n</p>
   <p>Proin fringilla nunc lorem, in sollicitudin orci. Sed ut eros ligula.</p>
   <ul class="list">
  </div>
  <!--WELCOME TEXT ENDS-->
    <!--WELCOME IMAGE STARTS-->
  <div id="welcome-image">
   <img src="images/welcome_image.png" alt="Welcome..." />
  </div>
  <!--WELCOME IMAGE ENDS-->
 </div>
 <!--WELCOME AREA ENDS-->
  <div id="footer">
  <p>Designed by Farid Ahmed</p>
 </div>
 <!--FOOTER ENDS-->

</div><!--END CONTAINER-->
</div><!--END CLOUDS-->
</div>
</body>
</html>

/* CSS Document */

*{
    padding:0;
    margin:0;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #797979;
    margin: 0px;
    padding: 0px;
    background-color: #070188;
    background-image: url(images/background.png);
    background-repeat: repeat-x;
}
#container {
    width: 960px;
    margin: auto;
}
#title {
    background-image: url(images/title.png)
background-repeat: no-repeat;
    height: 139px;
    width: 243px;
float: left;  
margin-top: 45px;
    margin-left: 20px;
}
#navigation {
    background-image: url(images/navigation.png);
    background-repeat: no-repeat;
    height: 120px;
    width: 499px;
    float: right;
    margin-top: 57px;
}
.nav_menu li{
    list-style:none;
    z ce;
    padding-left: 22px;
    padding-right: 13px;
    float: left;
    padding-top: 22px;
}

.nav_menu a {
    font-size: 12px;
    text-decoration: none;
    font-family: Arial, Helvetica, sans-serif;
    color: #848484;
    font-weight: bold;
}

.nav_menu a:hover {
    color: #070188;
}
#welcome {
  float: left;
  width: 960px;
  background-image: url(images/content_background.png);
  background-repeat: no-repeat;
  height: 326px;
  padding-top: 40px;
}
#welcome-text {
  width: 506px;
  line-height: 18px;
  padding-top: 50px;
  padding-left: 22px;
  float: left;
  text-align: justify;
}
#welcome-text { margin-bottom:10px; }
#welcome-image {
  float: right;
  height: 326px;
  width: 427px;
}
#footer {
  float: left;
  width: 1200px;
  height:40px;
  background-image: url(images/footer.png);
  background-repeat: no-repeat;
  margin-top: 40px;
  padding-top: 25px;
  text-align: center;
  color: #797979;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 18px;
}

No comments:

Post a Comment