Get inspired

Tips

• These (advanced) examples are not part of the need to know subjects of this course!
• They only serve to inspire your for your own projects
• Comment out some CSS lines and try to figure out what each line exactly does

Display inline-block

Chessboard

         <div> <p> <span>♜</span><span>♞</span><span>♝</span><span>♛</span><span>♚</span><span>♝</span><span>♞</span><span>♜</span> </p> <p> <span>♟</span><span>♟</span><span>♟</span><span>♟</span><span>♟</span><span>♟</span><span>♟</span><span>♟</span> </p> <p> <span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span> </p> <p> <span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span> </p> <p> <span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span> </p> <p> <span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span> </p> <p> <span>♟</span><span>♟</span><span>♟</span><span>♟</span><span>♟</span><span>♟</span><span>♟</span><span>♟</span> </p> <p> <span>♜</span><span>♞</span><span>♝</span><span>♚</span><span>♛</span><span>♝</span><span>♞</span><span>♜</span> </p> </div> 
    

         * { padding: 0; margin: 0; box-sizing: border-box; }
 html { font-size: 16px; }
 body { font-family: Verdana, Geneva, sans-serif; line-height: 1.5; padding: 1rem; background-color: #a3e3c1; }
 div { width: 400px; margin: 1rem auto; font-size: 0; }
 span { display: inline-block; border: 1px solid #472a09; text-align: center; color: white; background-color: #955f22; width: 50px; height: 50px; font-size: 40px; line-height: 50px; text-shadow: 3px 3px 3px rgba(0, 0, 0, .3); }
 p:nth-child(odd) span:nth-child(odd), p:nth-child(even) span:nth-child(even) { background-color: #e3c58c; }
 p:first-child span, p:nth-child(2) span { color: black; } 
    

REMARK

• The font-size: 0; inside is div tag is needed to remove the white spots between the chess blocks
• The white spots come from the returns inside the HTML code between the p tag and the span tags

div {
    width: 560px;
    margin: 1rem auto;
    font-size: 0;
}

https://www.youtube.com/watch?v=UCaII0CKnq0