First, I wanted to find some cool template from oswd.org for the Mass PageRank Checker tool, but then I decided to create myself a very simple design for it. And taking into consideration that I found Blueprint CSS Framework some days ago I decided to use it in my project.

What is Blueprint CSS Framework? Technically it’s a set of css-files which contain a set of CSS classes and formatting rules that simplify a process of web page creation and design layout building. You can learn more details about it on Blueprint CSS Framework site.

So, I divided all web-page space into 4 parts: top part with header, left part with form, right part with saved previous results table and bottom part with current results table.

Each part is in the separate div - form, previous and results. Look at this code:

<div id="header" class="container">
</div>
<div id="main" class="container">
  <div id="form" class="span-12">
  </div>
  <div id="previous" class="span-12 last">
  </div>
</div>
<div id="results" class="container">
</div>

The code for all parts is easy. The only thing is that I just added some formatting to the original Blueprint’s one:

th {
  border-bottom: 2px solid #CCCCCC;
}
td {
  border-bottom: 1px solid #DDDDDD;
}
.hand {
  cursor: pointer;
}
.hl:hover {
  background-color: #FFFFD9;
}
.center {
  text-align: center;
}
a {
  text-decoration: none;
  color: #000000;
}
a:hover.red {
  color: #FF0000;
  text-decoration: underline;
}

Result page looks like on the following image:

You can download html-page with css files here.