Web Tutorials

</>   CSS Tutorial

CSS

Cascading Style Sheet

Vaikuntapali

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">
  • .vaikuntapali
  • {
  • background : url(http://gauriagencies.com/skillpundit.com/cascading-stylesheet/img/vaikuntapali/vaikuntapali.jpg);
  • background-repeat : no-repeat;
  • background-size : 100% 100%;
  • width : 507px !important;
  • margin : 0 auto;
  • height : 400px;
    •
  • }
  • .vaikuntapali .positions
  • {
  • width : 100%;
  • height : 100%;
  • position : relative;
    •
  • }
  • .vaikuntapali .positions .lader1
  • {
  • position : absolute;
  • left : 10px;
  • top : 30px;
    •
  • }
  • .vaikuntapali .positions .snake
  • {
  • position : absolute;
  • margin : 0 auto;
  • width : 110px;
  • left : 20px;
  • right : 0px;
  • top : 40px;
    •
  • }
  • .vaikuntapali .positions .lader2
  • {
  • position : absolute;
  • right : 0px;
  • top : 80px;
    •
  • }
  • </style>
  • </head>
  • <body>
  • <div class = "pachisi table table-bordered">
  • <div class = "vaikuntapali table table-bordered">
  • <div class = "positions">
  • <div class = "lader1">
  • <img src = "http://skillpundit.com/cascading-stylesheet/img/vaikuntapali/lader.png" />
  • </div>
  • <div class = "snake">
  • <img src = "http://skillpundit.com/cascading-stylesheet/img/vaikuntapali/snake.png" />
  • </div>
  • <div class = "lader2">
  • <img src = "http://skillpundit.com/cascading-stylesheet/img/vaikuntapali/lader1.png" />
  • </div>
  • </div>
  • </div>
  • </body>
  • </html>