Creating a basic website with html and css

The Template look like this when you make it with the code below it’s quite simple and awesome. Give yourself a try.

template

your index.html page code will be

<!DOCTYPE html >
<html>
<head>
<link href=”style.css” rel=”stylesheet” type=”text/css” />
<title>Test Website | Home</title>
</head>
<body>
<div id=”wrapper”>
<header><img src=”img/logo.png” alt=”logo”/>
<nav>
<ul>
<li><a href=””>Home</a></li>
<li><a href=””>About Us</a></li>
<li><a href=””>Blog</a></li>
<li><a href=””>Contact Us</a></li>
</ul>
</nav>
</header>
<section>
<div class=”index-post”>
<img src=”img/fb.png” />
<a href=””>This is a tiltle</a>
<p>
This is soome good stuf to make website This is soome good stuf to make website This is soome good stuf to make website This is soome good stuf to make website on This is soome good stuf to make website on iits own. </p>
</div>
<div class=”index-post”>
<img src=”img/fb.png”/>
<a href=””>This is a tiltle</a>
<p>
This is soome good stuf to make website This is soome good stuf to make website This is soome good stuf to make website This is soome good stuf to make website on This is soome good stuf to make website on iits own. </p>
</div>
<div class=”index-post”>
<img src=”img/fb.png”/>
<a href=””>This is a tiltle</a>
<p>
This is soome good stuf to make website This is soome good stuf to make website This is soome good stuf to make website This is soome good stuf to make website on This is soome good stuf to make website on iits own. </p>
</div>

</section>
<aside>
<img src=”img/fb1.png” width=”250px”/>
<a href=”” class=”title-links”>This is great stuff</a>
<p>This one of the best side bar you can see ever and nice too. you can get code</p>
<img src=”img/fb1.png” width=”250px”/>
<a href=”” class=”title-links”>This is great stuff</a>
<p>This one of the best side bar you can see ever and nice too. you can get code</p>
</aside>
<footer>
<ul>
<li><a href=””>Home</a></li>
<li><a href=””>About Us</a></li>
<li><a href=””>Blog</a></li>
<li><a href=””>Contact Us</a></li>
</ul>
<p>&copy; 2012 Test Website</p>
<div class=”clear”></div>
</footer>
</div>
</body>
</html>

and your stylesheet code

body{
background-color:#DBD0D0;

}
.clear{
clear:both;
}
#wrapper{
width: 940px;
margin-right:auto;
margin-left:auto;
font-family:arial, sans-serif;
font-size:14px;
}

header{
padding-top:10px;
padding-bottom:10px;
height:80px;
background:#F5F2F2;
border-radius:5px;
border: 1px solid green;
margin-bottom:15px;
}
header img{
float:left;
}
header ul{
list-style:none;
float:right;
padding-top:20px;
padding-right:10px;
}
header ul li{
display: inline;
margin-left: 20px;
}
header a {
color:darkgrey;
text-decoration:none;
font-family:arial, sans-serif;
}
header a:hover{
color:#222;
}
section{
float:left;
padding:15px;
width:606px;
margin-right:2px;
background:#F5F2F2;
border-radius:5px;
border: 1px solid green;
margin-bottom:15px;

}
/* start Section classes */
.index-post{
height:120px;
}

.index-post a{
text-decoration:none;
color:#777;
font-size:16px;
font-weight:600px;
}
.index-post img{
float:left;
border:1px solid:green;
margin-right:10px;
padding:5px;
}
.title-links{
text-decoration:none;
color:#777;
font-size:16px;
font-weight:600px;
}
aside{
float:right;
width:258px;
padding:15px;
border-radius:5px;
border: 1px solid green;
background-color:#EDE1E1;
margin-bottom:15px;
}
footer{
clear:both;
background:#F5F2F2;
border-radius:5px;
border: 1px solid green;
padding:10px;
}
footer ul{
list-style:none;
padding:0px;
margin:0px;
float:left;
}
footer ul li{
display: inline;
margin-right: 15px;
}
footer p{
float:right;
padding:0px;
margin:0px;

}
footer a {
color:darkgrey;
text-decoration:none;
font-family:arial, sans-serif;
}
footer a:hover{
color:#222;
}

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s