Web Tutorials

</>   CSS Tutorial

CSS

Cascading Style Sheet

Carrom Board

Source Code HTML + CSS

HTML Code of the above Diagram

Click for download images Images Zip

  • <html>
    • <head>
    • <meta charset = "UTF-8" >
    • <title>Carrom using Pure CSS and HTML</title>
    • <style type = "text/css">
    • .carrom
    • {
      • background : url(http://skillpundit.com/cascading-stylesheet/img/carrom/carrom-board.png);
      • background-repeat : no-repeat;
      • background-size : 100% 100%;
      • width : 475px !important;
      • position : relative;
      • margin : 0 auto;
      • height : 477px;
    • }
    • .carrom .positions
    • {
      • position : relative;
      • padding : 40px;
      • height : 83%;
      • width : 83%;
    • }
    • .carrom .positions .one, .carrom .positions .two, .carrom .positions .three, .carrom .positions .four, .carrom .positions .five, .carrom .positions .six, .carrom .positions .seven, .carrom .positions .eight, .carrom .positions .coins
    • {
      • position : absolute;
      •
    • }
    • .carrom .positions .one
    • {
    • }
    • .carrom .positions .two
    • {
      • left : 0px;
      • right : 0px;
      • width : 259px;
      • height : 29px;
      • margin : 0 auto;
      •
    • }
    • .carrom .positions .three
    • {
      • right : 40px;
      •
    • }
    • .carrom .positions .four
    • {
      • height : 100%;
      • right : 40px;
      • top : 0px;
      •
    • }
    • .carrom .positions .five
    • {
      • right : 56px;
      • bottom : 30px;
      • width : 101px;
      • height : 113px;
      •
    • }
    • .carrom .positions .six
    • {
      • left : 0px;
      • right : 0px;
      • bottom : 40px;
      • width : 259px;
      • height : 29px;
      • margin : 0 auto;
      •
    • }
    • .carrom .positions .seven
    • {
      • bottom : 40px;
      • width : 101px;
      • height : 113px;
      •
    • }
    • .carrom .positions .eight
    • {
      • height : 100%;
      • top : 0px;
      •
    • }
    • .carrom .positions .coins
    • {
      • top : 0px;
      • left : 0px;
      • width : 100%;
      • height : 100%;
      • text-align : center;
      •
    • }
    • .carrom .positions .coins img
    • {
      • margin-left : -15px;
      •
    • }
    • </style>
    • </head>
  • <body>
    • <div class=carrom table table-bordered">
    • <div class="positions">
    • <div class="one">
    • <img src="http://skillpundit.com/cascading-stylesheet/img/carrom/arrow2.png" />
    • </div>
    • <div class="two">
    • <img src="http://skillpundit.com/cascading-stylesheet/img/carrom/border3.png" />
    • </div>
    • <div class="three">
    • <img src="http://skillpundit.com/cascading-stylesheet/img/carrom/arrow3.png" />
    • </div>
    • <div class="four">
    • <span class="valmd" style="width: 100%; height: 100%; margin: auto; display: table; vertical-align: middle;"><span class="valmd-in" style="width: 100%; height: 100%; display: table-cell; vertical-align: middle;"><img src="http://skillpundit.com/cascading-stylesheet/img/carrom/border1.png" /></span>
      </span>
    • </div>
    • <div class="coins">
    • <span style="width: 100%; height: 100%; margin: auto; display: table; vertical-align: middle;" class="valmd"><span class="valmd-in" style="width: 100%; height: 100%; display: table-cell; vertical-align: middle;"><img src="http://skillpundit.com/cascading-stylesheet/img/carrom/coins.png" /></span>
      </span>
    • </div>
    • <div class="five">
    • <img src="http://skillpundit.com/cascading-stylesheet/img/carrom/arrow1.png" />
    • </div>
    • <div class="six">
    • <span class="valmd"><span class="valmd-in"><img src="http://skillpundit.com/cascading-stylesheet/img/carrom/border2.png" /></span></span>
    • </div>
    • <div class="seven">
    • <img src="http://skillpundit.com/cascading-stylesheet/img/carrom/arrow4.png" />
    • </div>
    • <div class="eight">
    • <span class="valmd" style="width: 100%; height: 100%; margin: auto; display: table; vertical-align: middle;" ><span class="valmd-in" style="width: 100%; height: 100%; display: table-cell; vertical-align: middle;" ><img src="http://skillpundit.com/cascading-stylesheet/img/carrom/border4.png" /></span></span>
    • </div>
    • </div>
    • </div>
  • </body>
  • </html>