Ludo Game UI Design in HTML

Ludo Game UI Design in HTML
Techiio-author
Written by Shuvhojit DebJanuary 20, 2022
57 min read
HTML5
3 VIEWS 0 LIKES 0 DISLIKES SHARE
0 LIKES 0 DISLIKES 3 VIEWS SHARE
Techiio-author
Shuvhojit Deb

Full Stack Developer

In this blog, we will know the UI design of the Ludo Game both in HTML and CSS.

What is HTML

HTML is an acronym that stands for HyperText Markup Language which is used for creating web pages and web applications. Let's see what is meant by Hypertext Markup Language, and a Web page.

HyperText: HyperText simply means "Text within Text." A text that has a link within it, is a hypertext. Whenever you click on a link that brings you to a new webpage, you have clicked on a hypertext. HyperText is a way to link two or more web pages (HTML documents) with each other.

Markup language: A markup language is a computer language that is used to apply layout and formatting conventions to a text document. Markup language makes the text more interactive and dynamic. It can turn text into images, tables, links, etc.

Web Page: A web page is a document that is commonly written in HTML and translated by a web browser. A web page can be identified by entering an URL. A Web page can be of the static or dynamic type. With the help of HTML only, we can create static web pages.

Competitive questions on Structures in Hindi

Hence, HTML is a markup language that is used for creating attractive web pages with the help of styling, and which looks in a nice format on a web browser. An HTML document is made of many HTML tags and each HTML tag contains different content.

blogpost

UI Design in HTML

<div class="board" style="width:600px;margin: 0 auto;">
        <div style="clear: both;">
            <div class="red-maze" style="float: left;width: 55%; position: relative;">
                <div class="main-box">
                    <div class="row-circles">
                        <div class="circle red"></div>
                        <div class="circle red"></div>
                    </div>
                    <div class="row-circles">
                        <div class="circle red"></div>
                        <div class="circle red"></div>
                    </div>
                </div>
                <div class="ver-block">
                    <div class="block"></div>
                    <div class="block"></div>
                    <div class="block  star"></div>
                    <div class="block"></div>
                    <div class="block"></div>
                    <div class="block"></div>
                </div>
                <div class="ver-block">
                    <div class="block down-arrow"></div>
                    <div class="block green"></div>
                    <div class="block green"></div>
                    <div class="block green"></div>
                    <div class="block green"></div>
                    <div class="block green"></div>
                </div>
                <div class="ver-block">
                    <div class="block"></div>
                    <div class="block green star" style="color: #fff;"></div>
                    <div class="block"></div>
                    <div class="block"></div>
                    <div class="block"></div>
                    <div class="block"></div>
                </div>
                <div class="hor-block">
                    <div class="block"></div>
                    <div class="block red star" style="color: #fff;"></div>
                    <div class="block"></div>
                    <div class="block"></div>
                    <div class="block"></div>
                    <div class="block"></div>
                </div>
                <div class="hor-block">
                    <div class="block right-arrow"></div>
                    <div class="block red"></div>
                    <div class="block red"></div>
                    <div class="block red"></div>
                    <div class="block red"></div>
                    <div class="block red"></div>
                </div>
                <div class="hor-block">
                    <div class="block"></div>
                    <div class="block"></div>
                    <div class="block  star"></div>
                    <div class="block"></div>
                    <div class="block"></div>
                    <div class="block"></div>
                </div>
                <div class="middle">
                    <div class="top"></div>
                    <div class="left"></div>
                    <div class="right"></div>
                    <div class="bottom"></div>
                </div>
            </div>
            <div class="green-maze" style="float: left;width: 43%;    margin-left: -1px;">
                <div class="main-box" style="clear: none;">
                    <div class="row-circles">
                        <div class="circle green"></div>
                        <div class="circle green"></div>
                    </div>
                    <div class="row-circles">
                        <div class="circle green"></div>
                        <div class="circle green"></div>
                    </div>
                </div>
                <div class="hor-block">
                    <div class="block"></div>
                    <div class="block"></div>
                    <div class="block"></div>
                    <div class="block star"></div>
                    <div class="block"></div>
                    <div class="block"></div>
                </div>
                <div class="hor-block">
                    <div class="block yellow"></div>
                    <div class="block yellow"></div>
                    <div class="block yellow"></div>
                    <div class="block yellow"></div>
                    <div class="block yellow"></div>
                    <div class="block left-arrow"></div>
                </div>
                <div class="hor-block">
                    <div class="block"></div>
                    <div class="block "></div>
                    <div class="block"></div>
                    <div class="block"></div>
                    <div class="block yellow star" style="color: #fff;"></div>
                    <div class="block"></div>
                </div>
            </div>
        </div>
        <div style="clear: both;">
            <div class="blue-maze" style="float: left;width: 55%">
                <div class="main-box">
                    <div class="row-circles">
                        <div class="circle blue"></div>
                        <div class="circle blue"></div>
                    </div>
                    <div class="row-circles">
                        <div class="circle blue"></div>
                        <div class="circle blue"></div>
                    </div>
                </div>
                <div class="ver-block">
                    <div class="block"></div>
                    <div class="block "></div>
                    <div class="block"></div>
                    <div class="block"></div>
                    <div class="block blue star" style="color: #fff;"></div>
                    <div class="block"></div>
                </div>
                <div class="ver-block">
                    <div class="block blue"></div>
                    <div class="block blue"></div>
                    <div class="block blue"></div>
                    <div class="block blue"></div>
                    <div class="block blue"></div>
                    <div class="block up-arrow"></div>
                </div>
                <div class="ver-block">
                    <div class="block"></div>
                    <div class="block"></div>
                    <div class="block"></div>
                    <div class="block star"></div>
                    <div class="block"></div>
                    <div class="block"></div>
                </div>
            </div>
            <div class="yellow-maze" style="float: left;width: 43%;">
                <div style="float: left" ;>
                    <div class="main-box">
                        <div class="row-circles">
                            <div class="circle yellow"></div>
                            <div class="circle yellow"></div>
                        </div>
                        <div class="row-circles">
                            <div class="circle yellow"></div>
                            <div class="circle yellow"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

UI Design in CSS

body {
            background-color: black;
        }
        .main-box {
            clear: both;
            float: left;
            width: 160px;
            height: 160px;
            background-color: white;
        }
        .main-box .circle {
            width: 25px;
            height: 25px;
            border-radius: 50%;
            float: left;
            margin: 10px;
            padding: 10px;
        }
        .main-box .row-circles {
            clear: both;
            padding-left: 15px;
            padding-top: 8px;
        }
        .ver-block {
            float: left;
            width: 35px;
        }
        .hor-block {
            clear: both;
        }
        .block {
            border: 1px solid black;
            width: 35px;
            height: 35px;
            background-color: white;
        }
        .hor-block .block {
            float: left;
        }
        .star::before {
            content: "☆";
            font-size: 25px;
            position: relative;
            top: -1px;
            left: 4px;
        }
        .up-arrow::before {
            content: '\2191';
            font-size: 25px;
            padding-left: 10px;
            font-family: arial;
        }
        .down-arrow::before {
            content: '\2193';
            font-size: 25px;
            padding-left: 10px;
            font-family: arial;
        }
        .left-arrow::before {
            content: '\2190';
            font-size: 25px;
            padding-left: 4px;
            font-family: arial;
        }
        .right-arrow::before {
            content: '\2192';
            font-size: 25px;
            padding-left: 4px;
            font-family: arial;
        }
        .middle {
            position: absolute;
            top: 218px;
            left: 218px;
            height: 111px;
            width: 103px;
        }
        .right,
        .left,
        .top,
        .bottom {
            border-color: transparent;
            border-style: solid;
            border-width: 53px;
            display: block;
            padding: 0;
            width: 0;
            height: 0;
        }
        .right,
        .left {
            display: inline-block;
            margin: 0;
            vertical-align: middle;
        }
        .top,
        .bottom {
            margin: 0 auto;
        }
        .top {
            border-top-color: green;
            margin-bottom: -108px;
            margin-top: 3px;
            margin-left: 6px;
        }
        .right {
            border-right-color: yellow;
            margin-left: -55px;
            margin-right: 2px;
            margin-top: 5px;
            position: absolute;
        }
        .bottom {
            border-bottom-color: blue;
            margin-top: -99px;
            margin-right: -5px;
        }
        .left {
            border-left-color: red;
            margin-right: -51px;
            margin-left: 4px;
            margin-top: -2px;
        }
        .red {
            background-color: red;
            color: red;
        }
        .red-maze .main-box {
            border: 31px solid red;
        }
        .green {
            background-color: green;
            color: green;
        }
        .green-maze {
            width: 292px;
        }
        .green-maze .main-box {
            border: 31px solid green;
        }
        .yellow {
            background-color: yellow;
            color: yellow;
        }
        .yellow-maze {
            width: 292px;
        }
        .yellow-maze .main-box {
            border: 31px solid yellow;
        }
        .blue {
            background-color: blue;
            color: blue;
        }
        .blue-maze .main-box {
            border: 31px solid blue;
        }
        h1 {
            color: #ffc107;
        }
        .love {
            color: #1fc8db;
            font-size: 14px;
        }
        .author {
            color: #1fc8db;
            font-size: 14px;
        }
HTML5
CSS3
UI Design
3 VIEWS 0 LIKES 0 DISLIKES SHARE
0 LIKES 0 DISLIKES 3 VIEWS SHARE
Was this blog helpful?
techiio-price-plantechiio-price-plantechiio-price-plantechiio-price-plantechiio-price-plan
You must be Logged in to comment
Code Block
Techiio-author
Shuvhojit Deb
Full Stack Developer
Techiio-followerTechiio-follower
117 Blog Posts
0 Discussion Threads
Trending Technologies
15
Software91
DevOps48
Frontend Development24
Backend Development20
Server Administration17
Linux Administration28
Data Center24
Sentry24
Terraform23
Ansible83
Docker70
Penetration Testing16
Kubernetes21
NGINX20
JenkinsX17
Techiio-logo

Techiio is on the journey to build an ocean of technical knowledge, scouring the emerging stars in process and proffering them to the corporate world.

Follow us on:

Subscribe to get latest updates

You can unsubscribe anytime from getting updates from us
Developed and maintained by Wikiance
Developed and maintained by Wikiance