CSS Playing Cards

<div class="card">
  <div class="front">
    <div class="index">7<br />&spades;</div>
    <div class="spotA1">&spades;</div>
    <div class="spotA3">&spades;</div>
    <div class="spotA5">&spades;</div>
    <div class="spotB2">&spades;</div>
    <div class="spotC1">&spades;</div>
    <div class="spotC3">&spades;</div>
    <div class="spotC5">&spades;</div>
  </div>
</div>

<div id="card1" class="black card">
  <div class="top number">7</div>
  <div class="top undersuit">&spades;</div>
  <div class="suit">&spades;</div>
  <div class="bottom number">7</div>
</div>

<div class="outline shadow rounded">
  <div class="top">
    <span>7</span>
    <span>&spades;</span>
  </div>
  <h1>&spades;<h1>
  <div class="bottom">
    <span>&spades;</span>
    <span>7</span>
  </div>
</div>

<div class="card seven spades">
  <span class="suit"></span>
  <span class="symbol"></span>
  <span class="symbol"></span>
  <span class="symbol"></span>
  <span class="symbol"></span>
  <span class="symbol"></span>
  <span class="symbol"></span>
  <span class="symbol"></span>
</div>

<div class="card rank-7 spades">
  <span class="rank">7</span>
  <span class="suit">&spades;</span>
</div>

<fieldset id="spades">
  <input class="card" id="spade" />
  <label class="base" for="spade">
    <span>
      <em>7</em>
      &spades;
    </span>
    <strong>&spades;</strong>
    <em>7</em>
    &spades;
  </label>
</fieldset>

<div class="card spades v7">
  <span></span>
  <p>7S</p>
</div>

<article>
  <div class="number_black">7</div>
  <div class="smallsymbol_black">&spades;</div>
  <div class="bigsymbol_black">&spades;</div>
  <div class="smallsymbol_black_rotate">&spades;</div>
  <div class="number_black_rotate">7</div>
</article>

<div class="card seven">
  <div class="corner top">
    <span class="number">7</span>
    <span>&#9824;</span>
  </div>
  <span class="suit top_left">&#9824;</span>
  <span class="suit top_right">&#9824;</span>
  <span class="suit middle_left">&#9824;</span>
  <span class="suit middle_top">&#9824;</span>
  <span class="suit middle_right">&#9824;</span>
  <span class="suit bottom_left">&#9824;</span>
  <span class="suit bottom_right">&#9824;</span>
  <div class="corner bottom">
    <span class="number">7</span>
    <span>&#9824;</span>
  </div>
</div>

<div id="spades">
    <div class="black" id="card1">
        <p class="topleft">7<br />&#9824;</p>
        <h1 class="center">&#9824;</h1>
        <p class="bottomright">7<br />&#9824;</p>
    </div>
</div>