Playing Card

index.html

<div class="wrapper">
  <div class="card">2♥︎</div>
    <div class="card">3♥︎</div>
      <div class="card">4♥︎</div>
        <div class="card">5♥︎</div>
          <div class="card">6♥︎</div>
           <div class="card">7♥︎</div>
            <div class="card">8♥︎</div>
            <div class="card">9♥︎</div>
            <div class="card">10♥︎</div>
            <div class="card">J♥︎</div>
            <div class="card">Q♥︎</div>
            <div class="card">K♥︎</div>
            <div class="card">A♥︎</div>        </div>

playing-card.markdown

Playing Card

A Pen by Ismail Jamiu Babatunde on CodePen.

License.

style.css

*{
  color: red;
  font-family: 'Trebuchet MS';
  text-align: center;
  font-size: 50px;
  box-sizing: border-box;
}
.wrapper{
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  flex-flow: row wrap;
  align-items: center;
}
.card{
  border: 2px solid black;
  border-radius: 3px;
  padding: 60px 10px;
  margin: 10px;
  width: 140px;
  height: 200px;
}