html+css

<html>
<head>
<title>Akido</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="header">
<div class="pageCenter">
<a id="logo" href="#"></a><br/><br/>
<div class="purplelight">
NEXT EVENT: Radio Interview<a href="#">More Information</a>
</div>
<div id="nav">
<ul>
<li><a href="#" ><span class="lightsgreenBackground">Home</span></a></li>
<li><a href="#"><span class="lightsgreenBackground">Blog</span></a>
<li><a href="#"><span class="lightsgreenBackground">Music</span></a></li>
</ul>
</div>

<div id="join">
<span class="lightgray">JOIN THE AKIDO TEAM</span>
<a href="#"><img src="images/icon_facebook.gif"></a>
<a href="#"><img src="images/icon_twitter.gif"></a>
</div>
<div class="clear"></div>
</div>
</div>
<div id="content">
<div class="pageCenter">

<div class="main">
<div class="mainbar1">
<img src="images/akidino.jpg" width="258" height="258">
</div>
<div class="mainbardata">
<span class="lightgray">LATEST RELEASE</span><br/>
<span class="white"><blink>BLINK (REISSUE)</blink></span><br/>
<span class="lightgray">NORDIQUE RECORDS - nord05 - DIGITAL</span><br/><br/><br/>
<a href="#"><span class="greydark lightgreyBackground">BUY NOW </span></a><br/><br/>
<span class="greydark">AKIDOSHOP<br/>ITUNES<br/>AMAZON</span><br/><br/>
<a href="#"><span class="greyBackground">More Information ></span></a>
</div>
<div class="clear"></div>
<div class="mainbar2">
<div class="maincontent">
<div class="maincontentdata">
<span class="lightgray">Latest news from the aKido HQ...</span><br/>
<h2>aKido song chosen for ADIDAS campaign!</h2>
<span class="lightgray">POSTED FROM: Montreal, QC | April 30th 2010</span>
<div align="right">
<span class="lightgray" >SHARE:</SPAN>  
<img src="images/icon_facebook.gif" width="15" height="15">
<img src="images/icon_twitter.gif" width="15" height="15">
<img src="images/icon_flickr.gif" width="15" height="15">
<img src="images/icon_youtube.gif" width="15" height="15">
</div></br></br>
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Quisque felis felis,
adipiscing elit. Quisque felis felis,
adipiscing vel facilisis nec, eleifend quis
risus. Mauris eget nulla nisi, eget lobortis
aliquet eget erat. Duis iaculis tempus augue,
<br/><br/>
<a href="#"><span class="greyBackground">More ></span></a><br/>
<a href="#">
<div align="right"><span class="greyBackground">See all Blog Posts ></div></span></a>
</div>
</div>
</div>

</div>

<div class="sidebar">
<div class="innersidebar1">
<div class="sidecontent1" align="left">
<span class="greenlight">aKido on Twitter</span></br></br>

</div>
</div>
<div class="innersidebar2">
<div class="sidecontent2" align="left">
<span class="purple">aKido Gear</span></br></br>
   <img src="images/img1.png" ></br>
<a href="#"><span class="darkpurple violetBackground">AKIDOSHOP ></span></a>
</div>
</div>
</div>
<div class="clear"></div>
</div>
</div>

<div id="footer">
<div class="pageCenter">
<div id="nav">
<ul>
<li>
<a href="#">Home |</a></li><li>
<a href="#">Blog |</a></li><li>
<a href="#">Music |</a></li><li>
<a href="#">Merchandise |</a></li><li>
<a href="#">Videos |</a></li><li>
<a href="#">Photos |</a></li><li>
<a href="#">Licensing |</a> </li><li>
<a href="#">Extras |</a> </li><li>
<a href="#">Contact</a></li>
</li>
</ul>
</div>

</div>
<br/>
<span class="greydark">
Copyright NORDIQUE MUSIC COMPANY inc. All rights reserved Worldwide </span>
</div>
</body>
</html>

css

/*
Theme Name: akido
Theme URI:
Description:
Version: 1.0
Author:
Author URI:
Tags:
*/
body {
margin: 0;
padding: 0;
background-color: #f1f3f6;
font-family:Times New Roman;
text-align: center;
color: #ffffff;
}

.pageCenter {
width: 975px;
margin: auto;
}

#logo {
background: url(images/logo.gif) no-repeat;
float: left;
display: block;
height: 48px;
margin: 44px 0 0 2px;
width: 180px;
}

#header {
background-color: #515151;
}

#join {
float: right;
font-size: 14px;
margin: 0 47px;
width: 227px;
}

#nav {
height: 47px;
margin: 2px 0 0 0;
}

#nav ul {
margin: 0;
padding: 0;
}

#nav ul li {
float: left;
list-style: none;
}

#nav ul li a {
color: #111111;
display: block;
padding: 9px 3px 2px;
text-decoration: none;
}

#nav ul li a img {
border: 0;
}

.clear{
clear:both;
}

#content {
background: #909090;
}

#footer {
background: #909090;
padding:9px;
}

.sidebar {
width: 340px;
float: right;
}

.innersidebar1 {
border: 6px solid #75D7D8;
margin: 9px 0 0 0;
width: 282px;

}

.innersidebar2 {
border: 6px solid #B29CFA;
margin: 9px 0 0 0;
width: 282px;

}

.innersidebar3 {
border: 6px solid #30FF81;
margin: 9px 0 0 0;
width: 282px;

}

.innersidebar4 {
border: 6px solid #1DD4CF;
margin: 9px 0 0 0;
width: 282px;

}

.sidecontent1 {
background: #101010;
color: #FFFFFF;
padding: 8px 14px;
}

.sidecontent2 {
background: #101010;
padding: 8px 14px;
}

.sidecontent3 {
background: #101010;
padding: 8px 14px;
}

.sidecontent4{
background: #101010;
padding: 8px 14px;
}

.main {
float: left;
width: 603px;
margin: 0 0 0 0;
}

.mainbar1{
float: left;
border: 6px solid #515151;
margin: 9px 0 0 0;
width: 258px;
}

.mainbardata {
float: right;
}

.mainbar2{
border: 6px solid #515151;
margin: 14px 0 0;
width: 594px;
}

.maincontent {
background: #101010;
color: #FFFFFF;
text-align:justify;
}

.maincontentdata {
color: #FFFFFF;
padding: 8px 14px;
}

.lightgray {
color: #CBC9CB;
font-weight: bold;
}

.white {
color: #FFFFFF;
font-size: 24px;
font-weight: bold;
}

.purplelight {
color: #CBC9E5;
font-size: 11px;
font-weight: bold;
margin: 0 547px 0 0;
}

.greydark {
color: #515151;
font-size: 16px;
font-weight: bold;
}

.greenlight {
margin: 13px;
color: #7CCED2;
font-weight: bold;
}

.lightgreenlight {
margin: 13px;
color: #30FF81;
font-weight: bold;
}

.bluelight {
margin: 13px;
color: #1DD4CF;
font-weight: bold;
}

.purple {
margin: 13px;
color: #AB9BCB;
font-weight: bold;
}

.darkpurple {
font-size:10px;
font-weight: bold;
color: #384043;

}

.purpleBackground {
background-color: #AB9BCB;
padding: 1px 4px;
margin: 171px;
}

.greyBackground {
background-color: #515151;
padding: 4px 12px;
margin: 1px 7px;
font-weight: bold;
}

.lightgreyBackground {
background-color: #CBC9CB;
padding: 4px 12px;
margin: 1px 7px;
}

.lightsgreenBackground {
background-color: #75D7D8;
padding: 4px 12px;
margin: 0 1px;
font-weight: bold;
}

a {
color: #CBC9E5;
text-decoration: none;
}

img {
border: 0;
}

View Answers