Create a ludo using html and css code
Make a attractive ludo board using html and css coding
Create Ludo using html make a code colorful ludo board
<html>
<head>
<style>
#box
{
height:900px;
width:900px;
background:red;
}
.b1
{
height:360px;
width:900px;
background:yellow;
float:left;
}
.b2
{
height:180px;
width:900px;
background:#76ff03;
float:left;
}
.u1
{
height:360px;
width:360px;
background:grey;
float:left;
}
.u2
{
height:360px;
width:180px;
background:brown;
float:left;
}
.m1
{
height:180px;
width:360px;
background:pink;
float:left;
}
.m2
{
height:180px;
width:180px;
background:black;
float:left;
}
.m2
{
height:0px;
width:0px;
background:aqua;
border-bottom:90px solid blue;
border-top:90px solid #76ff03;
border-left:90px solid red;
border-right:90px solid yellow;
}
.u21
{
height:360px;
width:60px;
background:white;
float:left;
}
.m11
{
height:60px;
width:360px;
background:white;
float:left;
}
.red
{
height:250px;
width:250px;
margin:55px;
border-radius:50px;
transform:rotate(45deg);
background:white;
float:left;
}
.red1
{
height:70px;
width:70px;
background:#bf360c;
margin:27px;
border-radius:50%;
float:left;
}
.rec
{
height:57px;
width:60px;
border:1px solid;
float:left;
}
.rec2
{
height:60px;
width:57px;
border:1px solid;
float:left;
}
</style>
</head>
<body>
<div id="box">
<div class="b1">
<div class="u1" style="background:linear-gradient(red,#bf360c)">
<div class="red">
<div class="red1"></div>
<div class="red1"></div>
<div class="red1"></div>
<div class="red1"></div>
</div>
</div>
<div class="u2">
<div class="u21">
<div class="rec"></div>
<div class="rec"></div>
<div class="rec"></div>
<div class="rec"></div>
<div class="rec"></div>
<div class="rec"></div>
</div>
<div class="u21">
<div class="rec"></div>
<div class="trig">
</div>
<div class="rec" style="background-color:#76ff03"></div>
<div class="rec" style="background-color:#76ff03"></div>
<div class="rec" style="background-color:#76ff03"></div>
<div class="rec" style="background-color:#76ff03"></div>
<div class="rec" style="background-color:#76ff03"></div>
</div>
<div class="u21">
<div class="rec" ></div>
<div class="rec" style="background-color:#76ff03"></div>
<div class="rec"></div>
<div class="rec"></div>
<div class="rec"></div>
<div class="rec"></div>
</div>
</div>
<div class="u1" style="background:linear-gradient(#76ff03,green)">
<div class="red">
<div class="red1" style="background-color:green"></div>
<div class="red1" style="background-color:green"></div>
<div class="red1" style="background-color:green"></div>
<div class="red1" style="background-color:green"></div>
</div>
</div>
</div>
<div class="b2">
<div class="m1">
<div class="m11">
<div class="rec2" ></div>
<div class="rec2" style="background-color:red"></div>
<div class="rec2"></div>
<div class="rec2"></div>
<div class="rec2"></div>
<div class="rec2"></div>
</div>
<div class="m11">
<div class="rec2">
<div class="trir" ></div>
</div>
<div class="rec2" style="background-color:red"></div>
<div class="rec2" style="background-color:red"></div>
<div class="rec2" style="background-color:red"></div>
<div class="rec2" style="background-color:red"></div>
<div class="rec2" style="background-color:red"></div>
</div>
<div class="m11">
<div class="rec2" ></div>
<div class="rec2"></div>
<div class="rec2"></div>
<div class="rec2"></div>
<div class="rec2"></div>
<div class="rec2"></div>
</div>
</div>
<div class="m2"></div>
<div class="m1">
<div class="m11">
<div class="rec2"></div>
<div class="rec2"></div>
<div class="rec2"></div>
<div class="rec2"></div>
<div class="rec2"></div>
<div class="rec2"></div>
</div>
<div class="m11">
<div class="rec2" style="background-color:yellow"></div>
<div class="rec2" style="background-color:yellow"></div>
<div class="rec2" style="background-color:yellow"></div>
<div class="rec2" style="background-color:yellow"></div>
<div class="rec2" style="background-color:yellow"></div>
<div class="rec2">
<div class="triy"></div>
</div>
</div>
<div class="m11">
<div class="rec2"></div>
<div class="rec2"></div>
<div class="rec2"></div>
<div class="rec2"></div>
<div class="rec2" style="background-color:yellow"></div>
<div class="rec2"></div>
</div>
</div>
</div>
<div class="b1">
<div class="u1" style="background:linear-gradient(blue,#0d47a1)">
<div class="red">
<div class="red1" style="background-color:#0d47a1"></div>
<div class="red1" style="background-color:#0d47a1"></div>
<div class="red1" style="background-color:#0d47a1"></div>
<div class="red1" style="background-color:#0d47a1"></div>
</div>
</div>
<div class="u2">
<div class="u21">
<div class="rec"></div>
<div class="rec"></div>
<div class="rec"></div>
<div class="rec"></div>
<div class="rec" style="background-color:blue"></div>
<div class="rec"></div>
</div>
<div class="u21">
<div class="rec" style="background-color:blue"></div>
<div class="rec" style="background-color:blue"></div>
<div class="rec" style="background-color:blue"></div>
<div class="rec" style="background-color:blue"></div>
<div class="rec" style="background-color:blue"></div>
<div class="rec">
<div class="trib"></div>
</div>
</div>
<div class="u21">
<div class="rec"></div>
<div class="rec"></div>
<div class="rec"></div>
<div class="rec"></div>
<div class="rec"></div>
<div class="rec"></div>
</div>
</div>
<div class="u1" style="background:linear-gradient(yellow,#FF8800)">
<div class="red">
<div class="red1" style="background-color:#FF8800"></div>
<div class="red1" style="background-color:#FF8800"></div>
<div class="red1" style="background-color:#FF8800"></div>
<div class="red1" style="background-color:#FF8800"></div>
</div>
</div>
</div>
</div>
</body>
</html>
Output Image
Please like and comment for more such type coding article .
nice
ReplyDelete