Friday, January 15, 2010

stuff.co.nz Logo by HTML+CSS

It's Friday afternoon, I am feeling bored, so spent half hour to built stuff.co.nz logo by pure html+css. It was heaps of fun. Here is the preview and my code, guess left one or right one? From you memory,  don't look at stuff.co.nz!



HTML

<div id="logo">
 <span id="text">stuff<span class="dot first">.</span><span class="domain">co</span><span class="dot">.</span><span class="domain">nz</span></span>
 <ul><li id="r"></li><li id="y"></li><li id="g"></li><li id="b"></li><li id="p"></li></ul>
 </div>

CSS

#logo{font-family:tahoma;font-weight:bold; width:235px;}
 #text{font-size:62px;}
 .dot{font-family:Georgia; font-size:36px; letter-spacing:-2px;}
 .first{margin-left:-7px;}
 .domain{font-size:32px; letter-spacing:-1px;}
 ul{margin: -6px 0 0; list-style:none; padding:0}
 li{float:left; width:45px; height:10px;}
 #r{background-color:#C7221F}
 #y{background-color:#F59900}
 #g{background-color:#007C47}
 #b{background-color:#007DCD}
 #p{background-color:#9C1A87}

1 comments:

October 6, 2011 8:48 PM Anonymous said...

left

Post a Comment