index.html

<link rel="stylesheet" href="style.css" />

<section>
  <h1 class="logo"></h1>
  <ul>
    <li><a class="profile icon"></a></li>
    <li><a class="contact icon"></a></li>
    <li><a class="close icon"></a></li>
  </ul>
  <p>I saw for the first time the earth's shape. I could easily see the shores of continents, islands, great rivers, folds of the terrain, large bodies of water. The horizon is dark blue, smoothly turning to black. . . the feelings which filled me I can express with one word - joy.</p>
</section>

style.css

/** ----------------------------------- **/
/** base **/
/** ----------------------------------- **/
body {
  background: #111;
  font: 300 1em/1.5em Helvetica Neue, Arial, sans-serif;
  color: #444;
  }

  section {
    width: 500px;
    background: #fff;
    padding: 20px;
    margin: auto;
    box-sizing: border-box;
    position: relative; }

  section ul {
    position: absolute;
    display: block;
    margin: 0; padding: 0;
    top: 70px; right: 10px; }

    section ul li {
      display: inline-block;
      position: relative;
      margin: 0; padding: 0;
      left: -20px;
    }
      section ul li:nth-child(2n+1) {
        top: 27px;
      }

      section ul li a {
        cursor: pointer;
      }

  section p {
    margin-top: 30px;
    padding-left: 10px;
    padding-right: 10px;
  }


/** ----------------------------------- **/
/** sprites definition **/
/** ----------------------------------- **/

h1.logo,
.icon {
  margin: 0; padding: 0;
  display: inline-block;
  background-image: url(https://dl.dropbox.com/u/2281027/blog/sprites.svg);
  background-repeat: no-repeat;
}

h1.logo {
  width: 190px;
  height: 200px;
  background-position: 0 0;
}

.icon {
  width: 60px;
  height: 50px;
  overflow: hidden; }

  .icon.profile {
    background-position: 0px -200px; }
  
  .icon.contact {
    background-position: 0 -250px; }

  .icon.close {
    background-position: 0 -300px; }