title: Design the UI for a card game in html and css
body: <p><img src="https://upload.wikimedia.org/wikipedia/en/d/da/Solitaire_7.png" alt="classic solitaire"></p>
  
  <p>I am trying to create the classic solitaire game in Javascript, but I am uncertain about how to design the HTML/CSS part of the game.</p>
  
  <p>Requirements:</p>
  
  <ol>
  <li><p>Animation. Dealing cards, shuffling cards etc. should be animated.</p></li>
  <li><p>Each card can be dragged and dropped.</p></li>
  </ol>
  
  <p>Here is my question:</p>
  
  <p>What are the general strategies/techniques to position the elements in HTML5 games? Apparently in this game, we may not want to simply hard-code a card's position to something like <code>top: 30px; left: 50px</code> etc, because it has to adopt itself to different screen sizes, not to mention it has to align with other cards.</p>