A Pen by Eric Rasch.

index.html

<h1>Proper HTML Formatting</h1>

<table class="t1" summary="Top 10 downloaded movies in 2011 using BitTorrent, in descending order, listing number of downloads and worldwide cinema grosses">
    <caption>
        Most Downloaded Movies on BitTorrent, 2011
    </caption>
    <thead>
        <tr>
            <th>Rank</th>
            <th>Movie</th>
            <th>Downloads</th>
            <th>Grosses</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <th colspan="4">torrentfreak.com</th>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <th>1</th>
            <td>Fast Five</td>
            <td>9,260,000</td>
            <td>$626,137,675</td>
        </tr>
        <tr>
            <th>2</th>
            <td>The Hangover II</td>
            <td>8,840,000</td>
            <td>$581,464,305</td>
        </tr>
        <tr>
            <th>3</th>
            <td>Thor</td>
            <td>8,330,000</td>
            <td>$449,326,618</td>
        </tr>
        <tr>
            <th>4</th>
            <td>Source Code</td>
            <td>7,910,000</td>
            <td>$123,278,618</td>
        </tr>
        <tr>
            <th>5</th>
            <td>I Am Number Four</td>
            <td>7,670,000</td>
            <td>$144,500,437</td>
        </tr>
        <tr>
            <th>6</th>
            <td>Sucker Punch</td>
            <td>7,200,000</td>
            <td>$89,792,502</td>
        </tr>
        <tr>
            <th>7</th>
            <td>127 Hours</td>
            <td>6,910,000</td>
            <td>$60,738,797</td>
        </tr>
        <tr>
            <th>8</th>
            <td>Rango</td>
            <td>6,480,000</td>
            <td>$245,155,348</td>
        </tr>
        <tr>
            <th>9</th>
            <td>The King’s Speech</td>
            <td>6,250,000</td>
            <td>$414,211,549</td>
        </tr>
        <tr>
            <th>10</th>
            <td>Harry Potter and the Deathly Hallows Part 2</td>
            <td>6,030,000</td>
            <td>$1,328,111,219</td>
        </tr>
    </tbody>
</table>

<hr>

<blockquote>
    <p>Measuring programming progress by lines of code is like measuring aircraft building progress by weight.</p>
    <footer>
        — <cite><a href="http://www.thegatesnotes.com">Bill Gates</a></cite>
    </footer>
</blockquote>

Proper-HTML-Formatting.markdown

Proper HTML Formatting

Just wanted a simple resource for referencing the proper way to correctly format HTML code.

A Pen by Eric Rasch on CodePen.

License.

style.scss

@import "compass";
h1 {
  border-bottom: 1px solid black;
  margin-bottom: 2em;
  padding-bottom: 1em;
  text-align: center;
}

hr {
  margin: 3em 20%;
}

// Table Markup Source: http://www.the-art-of-web.com/html/table-markup/
table.t1 {
  margin: 1em auto;
  border-collapse: collapse;
  font-family: Arial, Helvetica, sans-serif;
  th, td {
    padding: 4px 8px;
  }
  thead th {
    background: #4f81bd;
    text-transform: lowercase;
    text-align: left;
    font-size: 15px;
    color: #fff;
  }
  tr {
    border-right: 1px solid #95b3d7;
  }
  tbody tr {
    border-bottom: 1px solid #95b3d7;
  }
  tbody tr:nth-child(odd) {
    background: #dbe5f0;
  }
  tbody th, tbody tr:nth-child(even) td {
    border-right: 1px solid #95b3d7;
  }
  tfoot th {
    background: #4f81bd;
    text-align: left;
    font-weight: normal;
    font-size: 10px;
    color: #fff;
  }
  tr *:nth-child(3), tr *:nth-child(4) {
    text-align: right;
  }
}


// Blockquote Markup Source: http://stackoverflow.com/a/19862672/284091
// Blockquote Style Source: http://getbootstrap.com/css/#type-blockquotes
blockquote {
  background-color: #f4f4f4;
  border-left: 5px solid #ddd;
  font-size: 1em;
  margin: 1em auto;
  padding: 0.5em 1em;
  width: 20%;

  p:last-child, ul:last-child, ol:last-child {
    margin-bottom: 0;
  }

  footer {
    color: #999;
    display: block;
    font-size: 80%;
    line-height: 1.4;
  }
}