Save As index.html………..
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” lang=”en” xml:lang=”en”>
<head>
<meta http-equiv=”content-type” content=”text/html; charset=utf-8″ />
<meta name=”featureription” content=”your description goes here” />
<meta name=”keywords” content=”your,keywords,goes,here” />
<meta name=”author” content=”Your Name / Original design: Andreas Viklund – http://andreasviklund.com/” />
<link rel=”stylesheet” type=”text/css” href=”variant-winter.css” media=”screen,projection” title=”Variant winter” />
<title>Variant Winter v1.0</title>
</head>
<body>
<div id=”container”>
<div id=”logo”>
<h1><a href=”index.html”>Variant Winter</a></h1>
<p>A free CSS template from andreasviklund.com</p>
</div>
<div id=”main”>
<h2 class=”hide”>Site menu:</h2>
<ul id=”navitab”>
<li><a class=”current” href=”index.html”>Start</a></li>
<li><a href=”#”>Bio</a></li>
<li><a href=”#”>Downloads</a></li>
<li><a href=”#”>Photos</a></li>
<li><a href=”#”>Tour</a></li>
<li><a href=”#”>Interviews</a></li>
</ul>
<div id=”feature”>
<img src=”images/sample.jpg” class=”alignleft” width=”334″ height=”202″ alt=”Winter in Jokkmokk, northern Sweden” />
<h2>Let there be snow…</h2>
<p>February is a cold winter month in Sweden, and there is plenty of snow around. And still several months until spring. But it is also a month when the day gets longer and when the weather can create beautiful days. Variant Winter is a template inspired by the beautiful northern winter…</p>
<hr />
</div>
<h2>Technical details</h2>
<p>Partially based on the <a href=”http://andreasviklund.com/templates/variant-portal/”>Variant Portal</a> template (or actually an older and unreleased version of it), I decided to add some more colors and re-build the layout with some improvements and with possibilities to add an own header to the design. Variant Winter has one background image for the body (body-bg.gif) and another for the main content area (content-bg.jpg), and the latter can be edited to give the design a unique touch.</p>
<h3>What is a free website template?</h3>
<p>This is a basic site design that you can use to build your own website, either in HTML/CSS format or by converting the template design into a theme or template for whatever content management system you use. If you like this layout and would like to use it in any way, you are free to do so. You can make any changes you may want to, and there is no cost involved for using this template for commercial projects. All I ask for is that you leave the “Template design by Andreas Viklund” link in the footer of the site.</p>
</div>
<div id=”sidebar”>
<h2>Sample menu</h2>
<ul class=”sidelink”>
<li><a href=”#”>Page one</a></li>
<li><a href=”#”>Page two</a></li>
<li><a href=”#”>Page three</a></li>
<li><a href=”#”>Page four</a></li>
<li><a href=”#”>Subpages</a>
<ul>
<li><a href=”#”>Subpage one</a></li>
<li><a href=”#”>Subpage two</a></li>
</ul></li>
<li><a href=”#”>Last page</a></li>
</ul>
<h2>Sample links</h2>
<ul>
<li><a href=”http://andreasviklund.com/templates/”>More free templates</a></li>
<li><a href=”http://andreasviklund.com/blog/”>Andreas’ blog</a></li>
</ul>
</div>
</div>
<div id=”footer”>
<p>Copyright © 2011 Your Name · Template design by <a href=”http://andreasviklund.com/”>Andreas Viklund</a></p>
</div>
</body>
</html>
Save As variant-winter.css
/*
Original design: Variant Winter (v1.0 – Feb 01, 2011) – A free xhtml/css website template by Andreas Viklund.
For more information, see http://andreasviklund.com/templates/variant-winter/
*/
*{margin:0;padding:0;}
body{background:#dadada url(images/body-bg.gif) top center repeat-y;color:#555;font:84% Tahoma, Verdana, sans-serif;}
a{color:#286ea0;text-decoration:none;}
a:hover{text-decoration:underline;}
a img{border:0;}
h1{font-size:2.4em;letter-spacing:-1px;margin:0 0 5px;padding:0;}
h2{font-size:1.5em;margin:0 0 12px;padding:0;text-shadow:#ccc 2px 2px 4px;}
h3{font-size:1.2em;margin:0 0 10px;padding:0;text-shadow:#ccc 2px 2px 4px;}
p,ul{line-height:1.5em;margin:0 0 18px;text-align:left;}
ul,ol{list-style:square;margin:0 0 15px 20px;}
hr{clear:both;height:1px;visibility:hidden;}
#container{background:#fff url(images/container-bg.jpg) top left no-repeat;margin:0 auto;width:980px;}
#main{float:left;margin:0 0 10px 20px;padding:0;width:720px;}
#logo{margin:0 auto;padding:45px 0 15px 40px;width:960px;}
#logo h1 a{color:#777;padding:0;text-shadow:#ccc 2px 2px 7px;}
#logo h1 a:hover{text-decoration:none;}
#logo p{color:#555;font-size:1.3em;text-shadow:#ccc 2px 2px 7px;}
#feature{background-color:#eee;border-bottom:1px solid #ccc;border-left:1px solid #ccc;clear:both;color:#666;margin:0 0 15px;padding:10px 20px 5px 10px;}
#feature h2{padding-top:10px;}
#feature img{border:1px solid #ccc;}
#feature a{color:#eee;text-decoration:underline;}
#feature p{margin:0;padding:0; line-height:1.7em;}
ul#navitab{margin:0;padding:0;}
ul#navitab li{display:block;float:left;margin:0;padding:0;}
ul#navitab li a{background:url(images/corner.gif) no-repeat top right #dadada;border-left:1px solid #ccc;border-right:2px solid #fff;color:#555;display:block;height:1.2em;padding:5px 16px 7px;text-align:center;text-decoration:none;text-transform:uppercase;white-space:nowrap;}
ul#navitab li a:hover{background:#eee url(images/corner.gif) no-repeat top right;border-left:1px solid #ccc;color:#777;}
ul#navitab li a.current{background:#eee url(images/corner.gif) no-repeat top right;border-left:1px solid #ccc;color:#555;}
#sidebar{float:right;margin:0 20px 10px 0;width:200px;}
#sidebar h2{border-bottom:1px solid #ccc;font-size:1.2em;margin:0 0 6px;padding:0 0 2px;text-shadow:#ccc 2px 2px 4px;}
#sidebar ul{margin:0 0 18px;padding:0;}
#sidebar ul li{list-style:none;margin:0 0 4px;padding:0;}
#sidebar ul.sidelink{margin:0 0 18px;}
#sidebar ul.sidelink li{list-style:none;margin:0;}
#sidebar ul.sidelink li a{background:url(images/corner.gif) no-repeat top right #eee;border-bottom:1px solid #ccc;border-left:1px solid #ccc;color:#555;display:block;margin:0 0 3px;padding:3px 0 2px 5px;text-align:left;text-decoration:none;text-transform:uppercase;}
#sidebar ul.sidelink li a:hover{background:url(images/corner.gif) no-repeat top right #dadada;border-bottom:1px solid #dadada;border-left:1px solid #dadada;color:#555;text-decoration:none;}
#sidebar ul.sidelink ul{font-size:0.9em;margin:0;padding:0;}
#sidebar ul.sidelink ul li a{margin:0 0 2px 10px;padding:2px 0 1px 5px;}
#container img.alignleft{display:inline;float:left;margin:0 20px 5px 0;}
#container img.alignright{float:right;margin:0 0 5px 20px;}
#container img.aligncenter{display:block;margin:10px auto;}
#footer{background:#eee;clear:both;color:#555;margin:10px auto 0;padding:0;text-align:left;width:980px;}
#footer a{color:#555;font-weight:400;}
#footer p{font-size:0.9em;margin:0;padding:15px 0;text-align:center;}
.hide{display:none;}
