pinkaloo : Pink « Templates « HTML / CSS

pinkaloo
   

<!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">
<head>
<title>Pinkaloo 2.0</title>
<style type='text/css'>
*
{
  margin: 0em;
  padding: 0em;
}



body
{
  background-color: #222222;
  color: #ffffff;
  font-family: "Verdana", serif;
  font-size: 10pt;
}

#outer
{
  width: 860px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 1.0em;
  background-color: #313131;  
  padding: 1.0em;
  border: solid 4px #121212;
  margin-bottom: 1.0em;
}

#menu
{
  background-color: #262626;
  font-family: "Trebuchet MS", serif;
  color: #ffffff;
  height: 1.2em;
  font-size: 1.2em;
  line-height: 1.1em;
  padding: 0.8em;
}

#menu a
{
  color: #d6d6d6;
  text-decoration: none;
}

#menu ul
{
  list-style: none;
  padding: 0em;
}

#menu li
{
  display: inline;
  font-size: 0.9em;
  font-weight: bold;
}

#menu li a
{
  padding: 0.8em;
}

#menu li a:hover
{
  color: #888888;
  background-color: #121212;
}

#header
{
  padding: 0.8em 1.2em 1.2em 1.2em;
}

#header h1
{
  font-size: 2.8em;
  text-transform: none;
  font-weight: bold;
  font-family: "Trebuchet MS", serif;
  color: #FF0084;
}

#header h2
{
  position: relative;
  top: -0.1em;
  text-transform: lowercase;
  font-family: "Trebuchet MS", serif;
  font-size: 1.5em;
  color: #4096EE;
}

#header h1 sup {
  color:#DDDDDD;
  font-size: 0.5em;
}


#search
{
position: absolute;
float: right;
top: 6.2em;
right: 4.0em;
padding-right: 2.3em;
}


#topright
{
position: absolute;
float: right;
top: 2.2em;
right: 4.0em;
padding-right: 2.3em;
}


#topright ul
{
  list-style: none;
  margin: 0px;
  padding: 0px;
  font-family: "Trebuchet MS", serif;
  font-size: 1.0em;
  font-weight: bold;
}

#topright li
{
  position: relative;
  Width: 240px;
  margin: 0px;
  padding: 0px;
}

#topright li a
{
  height: 1.6em;  
  position: relative;
  display: block;
  color: #ffffff;
  background: #222222;
  padding: 10px 0px 5px 7px;
  text-decoration: none;
}

#topright li a:hover
{
  color: #777777;
  background: #121212;
}



#content
{
  margin-top: 1.0em;
  padding: 1.2em;
  line-height: 1.9em;
  font-size: 0.9em;
  position: relative;
}

#footer
{
  height: 1.0em;
  font-family: "Trebuchet MS", serif;
  font-size: 0.9em;
  color: #777777;
  background-color: #262626;
  padding-left: 1.2em;
  padding-top: 1.0em;
  padding-bottom: 1.3em;
  clear: both;
}

#footer a
{
  color: #999999;
  text-decoration: underline;
}

#footer a:hover
{
  text-decoration: none;
  color: #fff;
}

#column1
{
  width: 554px;
  float: left;
  position: relative;
}

#column1 p
{
  text-align: justify;
  margin-bottom: 0.2em;
  color: #e0e0e0;
}


#column1 a
{
  color: #FF0084;
  text-decoration: underline;
}

#column1 a:hover
{
  text-decoration: none;
  color: #4096EE;
}


#column1 h1
{
  font-family: "Trebuchet MS", serif;
  font-size: 1.6em;
  color: #4096EE;
  margin-bottom: 0.2em;
}

#column1 h2
{
  font-family: "Trebuchet MS", serif;
  font-size: 1.6em;
  color: #4096EE;
  margin-Top: 1.0em;
  margin-bottom: 0.2em;
}


#column1 h3
{
  font-family: "Trebuchet MS", serif;
  font-size: 2.2em;
  line-height: 1.3em;
  color: #ffffff;
  margin-bottom: 1.5em;
  border-bottom: 1px solid #777777;
}

#column1 img
{
  border: 0;
}

.postfooter
{
  border-top: dashed 1px #777777;
  padding-top: 2px;
}


.postfooter p
{
  font-family: "Trebuchet MS", serif;
  font-size: 1.0em;
  color: #666666;
}



.postfooter p a
{
  color: #666666;
  text-decoration: underline;
}

.postfooter p a:hover
{
  text-decoration: none;
  color: #777777;
}


.postfooter img
{
  vertical-align: middle;
  border: 0px;
}

#column2
{
  width: 240px;
  float: right;
  position: relative;
  margin-left: auto;
}

#column2 p
{
  text-align: justify;
  margin-bottom: 2.0em;
  color: #ffffff;
  font-size: 1.0em;
}

#column2 h3
{
  font-size: 1.3em;
  font-family: "Trebuchet MS", serif;
  color: #4096EE;
  border-bottom: dashed 1px #777777;
  margin-bottom: 1.0em;
}

#column2 ul
{
  list-style: none;
  margin: 0px;
  padding: 0px;
}

#column2 li
{
  position: relative;
  Width: 240px;
  margin: 0px;
  padding: 0px;
  border-bottom: 1px solid #353535;
}

#column2 li a
{
  height: 2.1em;  
  position: relative;
  display: block;
  color: #ffffff;
  background: #222222 url(pinkaloo-images/bullet2.gif) left no-repeat;
  padding: 5px 0px 5px 24px;
  text-decoration: none;
}

#column2 li a:hover
{
  color: #777777;
  background: #121212  url(pinkaloo-images/bullet.gif) left no-repeat;
}



/* forms */

.styled {
  border: 1px double #E5E5E5;
  padding: 5px 6px 5px 6px;
  font-family: "Verdana", serif;
  font-size: 1.0em;
  color: #555555;
}

.button {
  border: 2px solid #71B1F2;
  background-color: #1167BD;
  margin-left: 5px;
  padding: 2px 3px 2px 3px;
  font-family: "Trebuchet MS", serif;
  color: #ffffff;
  font-size: 0.9em;
}


</style>


</head>
<body>
<div id="outer">
  <div id="header">
    <h1>Pinkaloo<sup>2.0</sup></h1>
    <h2>a skyrocketlabs.com open source template</h2>
  </div>
  <div id="menu">
    <ul>
      <li><a href="http://www.free-css.com/">Link 1</a></li>
      <li><a href="http://www.free-css.com/">Link 2</a></li>
      <li><a href="http://www.free-css.com/">Link 3</a></li>
      <li><a href="http://www.free-css.com/">Link 4</a></li>
      <li><a href="http://www.free-css.com/">Link 5</a></li>
    </ul>
  </div>
  <div id="content">
    <div id="column1">
      <h3>Lorem ipsum dolor poo ohn mie ahs yuh stuhdli mahn</h3>
      <h1>Lorem ipsum dolor</h1>
      <p><strong>Whatever</strong> I say to that! Etiam odio mi, suscipit et, rhoncus ac, lacinia malesuada, nisl. Aliquam gravida massa eu arcu. Fusce mollis tristique sem. Sed eu eros imperdiet eros nterdum blandit. Vivamus sagittis bibendum erat.</p>
      <p><a href="http://www.free-css.com/">Curabitur</a> malesuada turpis nec ante. Suspendisse quis felis. Suspendisse potenti. Nullam et orci in erat viverra ornare. Nunc pellentesque. Sed vestibulum blandit nisl. Quisque elementum convallis purus. Quisque pellentesque semper massa. Phasellus hendrerit. Vivamus consequat mauris quis nulla. <a href="http://www.free-css.com/">Suspendisse potenti. Donec nulla est, laoreet quis</a>, pellentesque in, congue in, dui. Nunc rhoncus placerat augue. Donec justo odio, eleifend varius, olutpat venenatis, sagittis ut, orci. Donec nulla est, laoreet quis, pellentesque in, congue in, dui. Nunc rhoncus placerat augue. Donec justo odio, eleifend varius, volutpat venenatis, sagittis ut, orci.</p>
      <div class="postfooter">
        <p>Posted: April 25, 2007 by <a href="http://www.free-css.com/">Your Name</a>&nbsp;&nbsp;&nbsp;<a href="http://www.free-css.com/"><img src="pinkaloo-images/rss.gif" alt=""></img></a>&nbsp;&nbsp;&nbsp;<a href="http://www.free-css.com/"><img src="pinkaloo-images/feedburner.gif" alt=""></img></a></p>
      </div>
      <h2>Sit amet nullam</h2>
      <p>Suspendisse vehicula. Phasellus luctus vulputate neque. Curabitur ut urna id turpis faucibus mattis. Pellentesque aliquet imperdiet orci. Nunc ultricies 
        fermentum libero. Sed consequat augue vitae mi. Vivamus hendrerit, augue et olestie tristique, dolor ligula pretium tortor, id aliquet arcu lorem quis nisl. Curabitur elementum. Phasellus nunc quam, accumsan vitae, consequat a, sagittis a, velit. Aliquam porta tellus eget lorem.</p>
      <p>&nbsp;</p>
      <p><a target="_blank" href="http://validator.w3.org/check?uri=referer"><img src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Strict" height="31" width="88" /></a></p>
      <p>&nbsp;</p>
    </div>
    <div id="column2">
      <h3>Nullam veroeros</h3>
      <ul>
        <li><a href="http://www.free-css.com/">Lorem ipsum dolor</a></li>
        <li><a href="http://www.free-css.com/">Sed in augue et</a></li>
        <li><a href="http://www.free-css.com/">Duis nec dui sed</a></li>
        <li><a href="http://www.free-css.com/">Morbi ullamcorper</a></li>
        <li><a href="http://www.free-css.com/">Praesent ultricies</a></li>
      </ul>
      <br/>
      <h3>Ipsum sed tempus</h3>
      <ul>
        <li><a href="http://www.free-css.com/">Veroeros vitae</a></li>
        <li><a href="http://www.free-css.com/">Nulla at enim</a></li>
        <li><a href="http://www.free-css.com/">Donec tincidunt</a></li>
      </ul>
    </div>
  </div>
  <div id="footer">
    <p>Copyright &copy;2007 skyrocketlabs.com - Valid XHTML</p>
  </div>
</div>
</body>
</html>
Related examples in the same category

1.	metamorph_pinkblossom
2.	pink 2
3.	pinkflower
4.	Pinki
5.	pinkish
6.	pinklily
7.	pinkweb
8.	pinky
9.	pink_float
10.	simplypink
11.	Pretty-in-Pink