Web Tutorials

</>   CSS Tutorial

CSS

Cascading Style Sheet

Pachisi

Source Code HTML + CSS

HTML Code of the above Diagram

Click for download images Images Zip

  • <html>
  • <head>
  • <meta charset="UTF-8">
  • <title>Chowka Bhara using Pure CSS and HTML</title>
  • <style type = "text/css">
  • .pachisi.table

  • {
  • border : 1px solid #fba43e !important;
  • margin : 20px auto !important;
  • width : 461px !important;
  • height : 460px;
  • display : block;
  • border : 0px;
    •
  • }
  • .pachisi.table .grid-top, .pachisi.table .grid-middle, .pachisi.table .grid-bottom
  • {
  • padding-left : 15px;
  • position : relative;
  • padding-right : 15px;
  • display : inline-block;
    •
  • }
  • .pachisi.table .grid-middle img.pachikalu
  • {
  • position : absolute;
  • margin : 0 auto;
  • height : 90px;
  • width : 88px;
  • right : 0px;
  • z-index : 1;
  • left : 0px;
    •
  • }
  • .pachisi.table .col-sm-44
  • {
  • float : left;
  • width : 183px;
  • height : 183px;
    •
  • }
  • .pachisi.table .col-sm-444
  • {
  • float : left;
  • width : 95px;
  • height : 183px;
    •
  • }
  • .pachisi.table .col-sm-left
  • {
  • float : left;
  • width : 183px;
  • height : 95px;
    •
  • }
  • .pachisi.table .col-sm-mid
  • {
  • float : left;
  • width : 95px;
  • height : 95px;
    •
  • }
  • .pachisi.table .col-sm-right
  • {
  • float : left;
  • width : 183px;
  • height : 95px;
    •
  • }
  • .pachisi.table .col-sm-44.top-left
  • {
  • padding : 10px 0px 0px 15px;
    •
  • }
  • .pachisi.table .col-sm-44.top-right
  • {
  • padding : 10px 15px 0px 0px;
  • text-align : right;
    •
  • }
  • .pachisi.table .col-sm-44.bottom-left
  • {
  • padding : 0px 0px 15px 10px;
  • position : relative;
    •
  • }
  • .pachisi.table .col-sm-44.bottom-right
  • {
  • padding : 0px 15px 15px 0px;
  • position : relative;
    •
  • }
  • .pachisi.table .col-sm-44.bottom-left img
  • {
  • position : absolute;
  • bottom : 0px;
  • left : 15px;
    •
  • }
  • .pachisi.table .col-sm-44.bottom-right img
  • {
  • position : absolute;
  • bottom : 0px;
  • right : 15px;
    •
  • }
  • .pachisi.table .col-sm-44.bottom-right img
  • {
  • position : absolute;
  • bottom : 0px;
  • right : 1 5px;
    •
  • }
  • .pachisi.table .col-sm-33
  • {
  • float : left;
  • width : 90px;
    •
  • }
  • .pachisi.table .empty.red, .pachisi.table .empty.green, .pachisi.table .empty.yellow, .pachisi.table .empty.blue
  • {
  • width : 30px;
  • height : 30px;
  • border : 1px solid #fba43e !important;
    •
  • }
  • .pachisi.table span.red
  • {
  • float : left;
  • height : 30px;
  • width : 30px !important;
  • display : flex !important;
  • border : 1px solid #fba43e;
  • background : #9f0e0e !important;
    •
  • }
  • </style>
  • </head>
  • <body>
  • <div class = "pachisi table table-bordered">
  • <div class="col-sm-44"><img src="http://skillpundit.com/cascading-stylesheet/img/pachisi/board-coins1.png" /> </div> <div class="col-sm-444"><img src="http://skillpundit.com/cascading-stylesheet/img/pachisi/top-brick.jpg" /> </div> <div style="text-align:right;" class="col-sm-44"><img src="http://skillpundit.com/cascading-stylesheet/img/pachisi/board-coins2.png" /> </div>
  • <div class="col-sm-left"><img src="http://skillpundit.com/cascading-stylesheet/img/pachisi/left-brick.jpg" /> </div> <div class="col-sm-mid"><img src="http://skillpundit.com/cascading-stylesheet/img/pachisi/pachikalu.jpg" /> </div> <div class="col-sm-right"><img src="http://skillpundit.com/cascading-stylesheet/img/pachisi/right-brick.jpg" /> </div>
  • <div class="col-sm-44"><img src="http://skillpundit.com/cascading-stylesheet/img/pachisi/board-coins3.png" style="margin-top:136px;" /> </div> <div class="col-sm-444"><img src="http://skillpundit.com/cascading-stylesheet/img/pachisi/bottom-brick.jpg" /> </div> <div style="text-align:right;" class="col-sm-44"><img src= "http://skillpundit.com/cascading-stylesheet/img/pachisi/board-coins4.png" style="margin-top:136px;" /> </div>
  • </div>
  • </body>
  • </html>