HTML & CSS Fifth Edition

Remaking.

by jshacker

HTML

<div class="cover">
  <div class="row">
    <div class="heading col">
      <div class="item" id="the">The</div>
      <div class="item">Complete</div>
      <div class="item">Reference</div>
    </div>
    <div class="version-info col">
      <div class="item">Covers</div>
      <div class="item">HTML5</div>
    </div>
  </div>
  <div class="row" id="title-container">
    <div class="title">
      <div class="item">HTML</div>
      <div class="item">&amp CSS</div>
      <div class="fifth-edition">Fifth Edition</div>
    </div>
  </div>
  <div class="row"></div>
</div>

CSS

.cover {
  font-family: "Times New Roman";
  width: 18cm;
  box-shadow: 2px 2px 8px black;
  height: 20.65cm;
}

.row {
  display: block;
  float: none;
  clear: both;
}

.row::after {
  clear: both;
}

.col {
  float: left;
}

.col .item::after,
.col::after {
  content: ' ';
  display: block;
  clear: both;
}

.heading,
.version-info {
  font-weight: bold;
}

.heading {
  padding: 2cm 2cm 1cm 2cm;
  background-color: white;
  width: 9.5cm;
  font-size: 1.8cm;
  text-shadow: 0 3px 2px black;
}

.heading .item {
  margin-top: -.4em;
}

.heading #the {
  font-size: .75em;
  position: relative;
  left: 1em;
  top: .2em;
}

.heading .item::first-letter {
  text-transform: capitalize;
  font-size: 1.2em;
}

.version-info {
  font-size: .9cm;
  background-color: #FF0;
  padding: 2.5cm .5cm 2cm .7cm;
  vertical-align: top;
  width: 3.5cm;
  height: 16.1cm;
  margin-left: -1cm;
}

.row .title {
  padding: 1cm 0 .5cm 1cm;
  background-color: black;
  color: #D00;
  font-size: 3.5cm;
  font-weight: bold;
}

.row .title .fifth-edition {
  color: white;
  font-size: 1.2cm;
  position: relative;
  left: 8.8cm;
}

#title-container {
  position: relative;
  top: -13.6cm;
  width: 18cm; // .row .title forgot it's width, so had to bring here. */
}