Skip to content

Instantly share code, notes, and snippets.

@rajkumar060301

rajkumar060301/chess-board.markdown

Created May 19, 2022 13:27
Show Gist options
  • Save rajkumar060301/cc750537504d8d892e15e3d7eb6e95f4 to your computer and use it in GitHub Desktop.
Save rajkumar060301/cc750537504d8d892e15e3d7eb6e95f4 to your computer and use it in GitHub Desktop.
Download ZIP
Chess-Board
Raw
index.html
<html>
<head>
<title>Welcome To Site CSS</title>
</head>
<body id="mainbody">
<div id="a1"></div>
<div id="a2"></div>
<div id="a3"></div>
<div id="a4"></div>
<div id="a5"></div>
<div id="a6"></div>
<div id="a7"></div>
<div id="a8"></div>
<div id="b1"></div>
<div id="b2"></div>
<div id="b3"></div>
<div id="b4"></div>
<div id="b5"></div>
<div id="b6"></div>
<div id="b7"></div>
<div id="b8"></div>
<div id="c1"></div>
<div id="c2"></div>
<div id="c3"></div>
<div id="c4"></div>
<div id="c5"></div>
<div id="c6"></div>
<div id="c7"></div>
<div id="c8"></div>
<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
<div id="d4"></div>
<div id="d5"></div>
<div id="d6"></div>
<div id="d7"></div>
<div id="d8"></div>
<div id="e1"></div>
<div id="e2"></div>
<div id="e3"></div>
<div id="e4"></div>
<div id="e5"></div>
<div id="e6"></div>
<div id="e7"></div>
<div id="e8"></div>
<div id="f1"></div>
<div id="f2"></div>
<div id="f3"></div>
<div id="f4"></div>
<div id="f5"></div>
<div id="f6"></div>
<div id="f7"></div>
<div id="f8"></div>
<div id="g1"></div>
<div id="g2"></div>
<div id="g3"></div>
<div id="g4"></div>
<div id="g5"></div>
<div id="g6"></div>
<div id="g7"></div>
<div id="g8"></div>
<div id="h1"></div>
<div id="h2"></div>
<div id="h3"></div>
<div id="h4"></div>
<div id="h5"></div>
<div id="h6"></div>
<div id="h7"></div>
<div id="h8"></div>
</body>
</html>
Raw
script.js
document.getElementsByTagName("h1")[0].style.fontSize = "6vw";
Raw
style.css
#mainbody
{
background-color:yellow;
}
#a1
{
width:100px; height:100px; background-color:red; position:absolute;
left:0px;
top:0px;
}
#a2
{
width:100px; height:100px; background-color:black; position:absolute;
left:100px;
top:0px;
}
#a3
{
width:100px; height:100px; background-color:red; position:absolute;
left:200px;
top:0px;
}
#a4
{
width:100px; height:100px; background-color:black; position:absolute;
left:300px;
top:0px;
}
#a5
{
width:100px; height:100px; background-color:red; position:absolute;
left:400px;
top:0px;
}
#a6
{
width:100px; height:100px; background-color:black; position:absolute;
left:500px;
top:0px;
}
#a7
{
width:100px; height:100px; background-color:red; position:absolute;
left:600px;
top:0px;
}
#a8
{
width:100px; height:100px; background-color:black; position:absolute;
left:700px;
top:0px;
}
#b1
{
width:100px; height:100px; background-color:black; position:absolute;
left:0px;
top:100px;
}
#b2
{
width:100px; height:100px; background-color:red; position:absolute;
left:100px;
top:100px;
}
#b3
{
width:100px; height:100px; background-color:black; position:absolute;
left:200px;
top:100px;
}
#b4
{
width:100px; height:100px; background-color:red; position:absolute;
left:300px;
top:100px;
}
#b5
{
width:100px; height:100px; background-color:black; position:absolute;
left:400px;
top:100px;
}
#b6
{
width:100px; height:100px; background-color:red; position:absolute;
left:500px;
top:100px;
}
#b7
{
width:100px; height:100px; background-color:black; position:absolute;
left:600px;
top:100px;
}
#b8
{
width:100px; height:100px; background-color:red; position:absolute;
left:700px;
top:100px;
}
#c1
{
width:100px; height:100px; background-color:red; position:absolute;
left:0px;
top:200px;
}
#c2
{
width:100px; height:100px; background-color:black; position:absolute;
left:100px;
top:200px;
}
#c3
{
width:100px; height:100px; background-color:red; position:absolute;
left:200px;
top:200px;
}
#c4
{
width:100px; height:100px; background-color:black; position:absolute;
left:300px;
top:200px;
}
#c5
{
width:100px; height:100px; background-color:red; position:absolute;
left:400px;
top:200px;
}
#c6
{
width:100px; height:100px; background-color:black; position:absolute;
left:500px;
top:200px;
}
#c7
{
width:100px; height:100px; background-color:red; position:absolute;
left:600px;
top:200px;
}
#c8
{
width:100px; height:100px; background-color:black; position:absolute;
left:700px;
top:200px;
}
#d1
{
width:100px; height:100px; background-color:black; position:absolute;
left:0px;
top:300px;
}
#d2
{
width:100px; height:100px; background-color:red; position:absolute;
left:100px;
top:300px;
}
#d3
{
width:100px; height:100px; background-color:black; position:absolute;
left:200px;
top:300px;
}
#d4
{
width:100px; height:100px; background-color:red; position:absolute;
left:300px;
top:300px;
}
#d5
{
width:100px; height:100px; background-color:black; position:absolute;
left:400px;
top:300px;
}
#d6
{
width:100px; height:100px; background-color:red; position:absolute;
left:500px;
top:300px;
}
#d7
{
width:100px; height:100px; background-color:black; position:absolute;
left:600px;
top:300px;
}
#d8
{
width:100px; height:100px; background-color:red; position:absolute;
left:700px;
top:300px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment