Ludo Game Design With Programming of HTML & CSS
HTML CODE
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Ludo Game Design With Maa Blogger</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="style.css" />
</head>
<body>
<div class="container card">
<div class="container-row1 clearfix">
<div class="row1-col1 green">
<div class="row1-col1-child clearfix white">
<div class="green"></div>
<div class="green"></div>
<div class="green"></div>
<div class="green"></div>
</div>
</div>
<div class="row1-col2 clearfix">
<div></div>
<div></div>
<div></div>
<div></div>
<div class="yellow"></div>
<div class="yellow"></div>
<div></div>
<div class="yellow"></div>
<div></div>
<div></div>
<div class="yellow"></div>
<div></div>
<div></div>
<div class="yellow"></div>
<div></div>
<div></div>
<div class="yellow"></div>
<div></div>
</div>
<div class="row1-col3 yellow">
<div class="row1-col3-child clearfix white">
<div class="yellow"></div>
<div class="yellow"></div>
<div class="yellow"></div>
<div class="yellow"></div>
</div>
</div>
</div>
<div class="container-row2 clearfix">
<div class="row2-col1 clearfix">
<div></div>
<div class="green"></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div class="green"></div>
<div class="green"></div>
<div class="green"></div>
<div class="green"></div>
<div class="green"></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="row2-col2">
<div class="contain-triangles">
<div class="triangle-right"></div>
<div class="triangle-up"></div>
<div class="triangle-left"></div>
<div class="triangle-down"></div>
<div class="circle"></div>
</div>
</div>
<div class="row2-col3 clearfix">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div class="blue"></div>
<div class="blue"></div>
<div class="blue"></div>
<div class="blue"></div>
<div class="blue"></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div class="blue"></div>
<div></div>
</div>
</div>
<div class="container-row3 clearfix">
<div class="row3-col1 red">
<div class="row3-col1-child clearfix white">
<div class="red"></div>
<div class="red"></div>
<div class="red"></div>
<div class="red"></div>
</div>
</div>
<div class="row3-col2 clearfix">
<div></div>
<div class="red"></div>
<div></div>
<div></div>
<div class="red"></div>
<div></div>
<div></div>
<div class="red"></div>
<div></div>
<div></div>
<div class="red"></div>
<div></div>
<div class="red"></div>
<div class="red"></div>
<div ></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="row3-col3 blue">
<div class="row3-col3-child clearfix white">
<div class="blue"></div>
<div class="blue"></div>
<div class="blue"></div>
<div class="blue"></div>
</div>
</div>
</div>
</div>
</body>
</html>
CSS CODE
*,
*:before,
*:after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.clearfix::after {
clear: both;
content: "";
display: table;
}
.container {
width: 570px;
height: 570px;
margin: auto;
margin-top: 80px;
cursor: pointer;
border: 1.5px solid black;
background: url("https://i.pinimg.com/originals/83/30/eb/8330ebe66114e601ae3847ab454a9eca.jpg");
}
.container-row1,
.container-row3 {
width: 100%;
height: 40%;
}
.container-row2 {
width: 100%;
height: 20%;
}
.row1-col1,
.row1-col3,
.row3-col1,
.row3-col3 {
height: 100%;
width: 40%;
}
.row1-col2,
.row3-col2 {
height: 100%;
width: 20%;
}
.row1-col2>div:hover,
.row3-col2>div:hover {
box-shadow: -2px 14px 28px rgba(0, 0, 0, 0.25), -2px 10px 10px rgba(0, 0, 0, 0.22);
transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
}
.row1-col1,
.row1-col2,
.row1-col3,
.row2-col1,
.row2-col2,
.row2-col3,
.row3-col1,
.row3-col2,
.row3-col3 {
float: left;
}
.row2-col1,
.row2-col3 {
width: 40%;
height: 100%;
}
.row2-col1>div:hover,
.row2-col3>div:hover {
box-shadow: -2px 14px 28px rgba(0, 0, 0, 0.25), -2px 10px 10px rgba(0, 0, 0, 0.22);
transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
}
.row2-col2 {
width: 20%;
height: 100%;
border: 1px solid black;
}
.row1-col1,
.row1-col3,
.row3-col1,
.row3-col3 {
display: flex;
justify-content: center;
align-items: center;
}
.row1-col1-child,
.row1-col3-child,
.row3-col1-child,
.row3-col3-child {
width: 70%;
height: 70%;
}
.row1-col1-child>div,
.row1-col3-child>div,
.row3-col1-child>div,
.row3-col3-child>div {
width: 35%;
height: 35%;
float: left;
margin: 7.5%;
box-shadow: -2px 14px 28px rgba(0, 0, 0, 0.25), -2px 10px 10px rgba(0, 0, 0, 0.22);
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
}
.row1-col1-child>div:hover,
.row1-col3-child>div:hover,
.row3-col1-child>div:hover,
.row3-col3-child>div:hover {
box-shadow: -2px 14px 28px rgba(0, 0, 0, 0.25), -2px 10px 10px rgba(0, 0, 0, 0.22);
}
.row1-col2>div,
.row3-col2>div {
width: 33.333%;
height: 16.667%;
float: left;
border: 1px solid black;
}
.row2-col1>div,
.row2-col3>div {
width: 16.667%;
height: 33.333%;
float: left;
border: 1px solid black;
}
.green {
background-color: #008000;
}
.red {
background-color: #FF0000;
}
.blue {
background-color: #0000CD;
}
.yellow {
background-color: #FFFF00;
}
.white {
background: url("https://wallpaperaccess.com/full/1492688.jpg") no-repeat center center;
}
.contain-triangles {
height: 100%;
width: 100%;
position: relative;
}
.triangle-right {
width: 0;
height: 0;
border-top: 45px solid transparent;
border-left: 45px solid #008000;
border-bottom: 45px solid transparent;
position: absolute;
left: 0;
top: 5.2px;
}
.triangle-up {
width: 0;
height: 0;
border-left: 45px solid transparent;
border-right: 45px solid transparent;
border-bottom: 45px solid #FF0000;
position: absolute;
bottom: 0;
left: 5.2px;
}
.triangle-left {
width: 0;
height: 0;
border-right: 45px solid #0000CD;
border-bottom: 45px solid transparent;
border-top: 45px solid transparent;
position: absolute;
right: 0;
top: 5.2px;
}
.triangle-down {
width: 0;
height: 0;
border-left: 45px solid transparent;
border-right: 45px solid transparent;
border-top: 45px solid #FFFF00;
position: absolute;
top: 0;
right: 5.2px;
}
.card {
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
}
.card:hover {
box-shadow: 0 19px 38px rgba(0, 0, 0, 0.30), 0 15px 12px rgba(0, 0, 0, 0.22);
}
@media only screen and (max-width: 600px) {
.container {
width: 400px;
height: 400px;
margin-top: 80px;
}
.triangle-right {
width: 0;
height: 0;
border-top: 35px solid transparent;
border-left: 35px solid #008000;
border-bottom: 35px solid transparent;
position: absolute;
left: 0;
top: 4.2px;
}
.triangle-up {
width: 0;
height: 0;
border-left: 35px solid transparent;
border-right: 35px solid transparent;
border-bottom: 35px solid #FF0000;
position: absolute;
bottom: 0;
left: 4.2px;
}
.triangle-left {
width: 0;
height: 0;
border-right: 35px solid #0000CD;
border-bottom: 35px solid transparent;
border-top: 35px solid transparent;
position: absolute;
right: 0;
top: 4.2px;
}
.triangle-down {
width: 0;
height: 0;
border-left: 35px solid transparent;
border-right: 35px solid transparent;
border-top: 35px solid #FFFF00;
position: absolute;
top: 0;
right: 4.2px;
}
}
@media only screen and (max-width: 460px) {
.container {
width: 350px;
height: 350px;
margin-top: 100px;
}
.triangle-right {
width: 0;
height: 0;
border-top: 30px solid transparent;
border-left: 30px solid #84c21f;
border-bottom: 30px solid transparent;
position: absolute;
left: 0;
top: 4.2px;
}
.triangle-up {
width: 0;
height: 0;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
border-bottom: 30px solid #dc2418;
position: absolute;
bottom: 0;
left: 4.2px;
}
.triangle-left {
width: 0;
height: 0;
border-right: 30px solid #0092dc;
border-bottom: 30px solid transparent;
border-top: 30px solid transparent;
position: absolute;
right: 0;
top: 4.2px;
}
.triangle-down {
width: 0;
height: 0;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
border-top: 30px solid #FFFF00;
position: absolute;
top: 0;
right: 4.2px;
}
}
OUTPUT SCREEN
Posts
14 Comments
Wow Awesome
ReplyDeletePerfect 👌
ReplyDeleteFantastic job
ReplyDeleteAttractive works
ReplyDeleteVery Very Excellent work
ReplyDeleteExclusive Work
ReplyDeleteWow Great Guys
ReplyDeleteWonderful Awesome
ReplyDeleteEffective
ReplyDeleteBrilliant idea
ReplyDeleteFabulous idea
ReplyDeleteAwesome
ReplyDeleteMind Blowing
Brilliant
ReplyDeletePerfect
ReplyDeleteInteresting