<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ludo game design</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" integrity="sha512-9usAa10IRO0HhonpyAIVpjrylPvoDwiPUiKdWk5t3PyolY1cOd4DSE0Ga+ri4AuTroPR5aQvXU9xC6qOPnzFeg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
    <div class="ludo">
        <div class="blue">
            <div class="box">
                <div class="insidebox blueBackground"></div>
                <div class="insidebox blueBackground"></div>
                <div class="insidebox blueBackground"></div>
                <div class="insidebox blueBackground"></div>
            </div>
        </div>
       
        <div class="squareContainer">
            <div class="left">
                <div class="square "></div>
                <div class="square"></div>
                <div class="square fa-regular fa-star"></div>
                <div class="square"></div>
                <div class="square"></div>
                <div class="square"></div>
            </div>
            <div class="middle">
                <div class="square  fa-solid fa-arrow-down redFont"></div>
                <div class="square redBackground"></div>
                <div class="square redBackground"></div>
                <div class="square redBackground"></div>
                <div class="square redBackground"></div>
                <div class="square redBackground"></div>
            </div>
            <div class="right">
                <div class="square"></div>
                <div class="square redBackground"></div>
                <div class="square"></div>
                <div class="square"></div>
                <div class="square"></div>
                <div class="square"></div>
            </div>
           
        </div>

        <div class="red">
            <div class="box">
                <div class="insidebox redBackground"></div>
                <div class="insidebox redBackground"></div>
                <div class="insidebox redBackground"></div>
                <div class="insidebox redBackground"></div>
            </div>
        </div>
       
        <div class="row">
            <div class="Rowleft">
                <div class="row1">
                    <div class="square"></div>
                    <div class="square blueBackground"></div>
                    <div class="square"></div>
                    <div class="square"></div>
                    <div class="square"></div>
                    <div class="square"></div>
                </div>
                <div class="row1">
                    <div class="square  fa-solid fa-arrow-right blueFont"></div>
                    <div class="square blueBackground"></div>
                    <div class="square blueBackground"></div>
                    <div class="square blueBackground"></div>
                    <div class="square blueBackground"></div>
                    <div class="square blueBackground"></div>
                </div>
                <div class="row1">
                    <div class="square"></div>
                    <div class="square"></div>
                    <div class="square  fa-regular fa-star"></div>
                    <div class="square"></div>
                    <div class="square"></div>
                    <div class="square"></div>
                </div>
            </div>
           



            <div class="rowright">
                <div class="row1">
                    <div class="square"></div>
                    <div class="square"></div>
                    <div class="square"></div>
                    <div class="square  fa-regular fa-star"></div>
                    <div class="square"></div>
                    <div class="square"></div>
                </div>
                <div class="row1">
                    <div class="square greenBackground"></div>
                    <div class="square greenBackground"></div>
                    <div class="square greenBackground"></div>
                    <div class="square greenBackground"></div>
                    <div class="square greenBackground"></div>
                    <div class="square fa-solid fa-arrow-left greenFont"></div>
                </div>
                <div class="row1">
                    <div class="square"></div>
                    <div class="square "></div>
                    <div class="square"></div>
                    <div class="square"></div>
                    <div class="square greenBackground"></div>
                    <div class="square"></div>
                </div>
            </div>
        </div>










       <div class="yellow">
            <div class="box">
                <div class="insidebox yellowBackground"></div>
                <div class="insidebox yellowBackground"></div>
                <div class="insidebox yellowBackground"></div>
                <div class="insidebox yellowBackground"></div>
            </div>
        </div>

        <div class="squareContainer">
            <div class="left">
                <div class="square"></div>
                <div class="square"></div>
                <div class="square"></div>
                <div class="square"></div>
                <div class="square yellowBackground"></div>
                <div class="square"></div>
            </div>
            <div class="middle">
                <div class="square yellowBackground"></div>
                <div class="square yellowBackground"></div>
                <div class="square yellowBackground"></div>
                <div class="square yellowBackground"></div>
                <div class="square yellowBackground"></div>
                <div class="square fa-solid fa-arrow-up yellowFont"></div>
            </div>
            <div class="right">
                <div class="square"></div>
                <div class="square "></div>
                <div class="square"></div>
                <div class="square fa-regular fa-star"></div>
                <div class="square"></div>
                <div class="square"></div>
            </div>
           
        </div>

        <div class="green">
            <div class="box">
                <div class="insidebox greenBackground"></div>
                <div class="insidebox greenBackground"></div>
                <div class="insidebox greenBackground"></div>
                <div class="insidebox greenBackground"></div>
            </div>
        </div>
    </div>


<div class="ludoCenter">
    <i class="fa-solid fa-crown"></i>
</div>
   
</body>
</html>

*{
    padding:0;
    margin:0;
}
body{
    display: flex;
    justify-content: center;
    align-items: center;
    height:100vh;
    background-color: rgb(32,34,56);
}
.ludo{
    width: 750px;
    height: 750px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    background-color: white;
   
}

.blue,.red,.yellow,.green{
    width: 300px;
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
   
   
}
/*******color***************/
.blue{
    background-color:royalblue;
}
.red{
    background-color:red;
}
.yellow{
    background-color:yellow;
}
.green{
    background-color:green;
}

/**************box inside*****************/
.box{
    background-color: white;
    width: 200px;
    height: 200px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;

}
.box .insidebox{
    width: 60px;
    height: 60px;
    margin:20px;
}


/***********color***************/
.blueFont{
    color: royalblue;
}
.redFont{
    color: red;
}
.yellowFont{
    color: yellow;
}
.greenFont{
    color: green;
}

.blueBackground{
    background-color: royalblue;
}
.redBackground{
    background-color: red;
}
.yellowBackground{
    background-color: yellow;
}
.greenBackground{
    background-color: green;
}








/***********square box****************/
.square{
    width: 48px;
    height: 48px;
    border:1px solid black;
    font-size: 30px;
    text-align: center;
}
.squareContainer{
    display: flex;
}
.row{
    width:750px;
    height:150px;
   
    display: flex;
    justify-content: space-between;
}
.row1{
    display: flex;
}


/******************ludoCenter***************/
.ludoCenter{
    font-size: 100px;
    color:#ffd700;
    position: absolute;
    background-color: rgb(32,34,56);
    width: 150px;
    height: 150px;
    display: flex;
    justify-content: center;
    align-items: center;

}