Skillpundit | Chowka Bhara In HTML

HTML

Hypertext Markup Language

Chowka Bhara (Board Game)

Source Code HTML + CSS

Click for download images Images Zip

<html>
<head>
<title>Chowka Bhara using Pure CSS and HTML</title>
<style type="text/css">
.Chowka table
{

margin : 20px auto;

border : 2px solid #333;

width : 640px;

height : 640px;

}
.Chowka.table tr td.empty
{

float : left;

width : 70.8px;

height : 69.8px;

font-size : 40px;

text-align : center;

display : table-cell;

vertical-align : middle;

background-color : #fff;

border : 1px solid #000 !important;

}
.Chowka.table tr td.empty.room
{

background-color : #282256;

position : relative;

}
.Chowka.table tr td
{

z-index : 1;

position : relative;

}
.Chowka.table tr td.empty.room:after
{

-webkit-transform : rotate(135deg);

-moz-transform : rotate(135deg);

-ms-transform : rotate(135deg);

-o-transform : rotate(135deg);

transform : rotate(135deg);

position : absolute;

background : white;

margin : 0 auto;

height : 102px;

content : "";

right : 0px;

top : -17px;

width : 2px;

left : 0px;

}
.Chowka.table tr td.empty.room:before
{

-webkit-transform : rotate(-135deg);

-moz-transform : rotate(-135deg);

-ms-transform : rotate(-135deg);

-o-transform : rotate(-135deg);

transform : rotate(-135deg);

position : absolute;

background : white;

margin : 0 auto;

height : 125px;

content : "";

right : 0px;

top : -28px;

width : 2px;

left : 0px;

}
.Chowka.table tr td.empty.room
{

background-color : #282256;

}
.img1
{
padding-top:10px;
}
</style>
</head>
<body>
<table class="Chowka table" cellpadding="0" cellspacing="0" border="1">
<tbody>
<tr>

</tr>
<tr>

</tr>
<tr>

</tr>
<tr>

</tr>
<tr>

</tr>
<tr>

</tr>
<tr>

</tr>
</tbody>
</table>
</body>
</html>

Web Tutorials

</> HTML Tutorial

HTML Forms

Tables

Form Practicals

Practicals

HTML

Source Code HTML + CSS