diff --git a/index.html b/index.html
index ecd6b124..79ad2358 100644
--- a/index.html
+++ b/index.html
@@ -524,7 +524,13 @@ <h3 class="card__heading">Astromania</h3>
           <h3 class="card__heading">Netflix Clone</h3>
         </div>
       </a>
-      
+    <a class="card" href="projects/Chess/index.html">
+        <div class="card__background" style="background-image: url(projects/Chess/image/Screenshot 2023-08-09 200006.png); background-size: cover;"></div>
+        <div class="card__content">
+          <p class="card__category">GAME</p>
+          <h3 class="card__heading">Chess Game</h3>
+        </div>
+      </a>
     </div>
   </section>
 
diff --git a/projects/Chess/Bbishop.png b/projects/Chess/Bbishop.png
new file mode 100644
index 00000000..9b8e567f
Binary files /dev/null and b/projects/Chess/Bbishop.png differ
diff --git a/projects/Chess/Bking.png b/projects/Chess/Bking.png
new file mode 100644
index 00000000..bffda3c9
Binary files /dev/null and b/projects/Chess/Bking.png differ
diff --git a/projects/Chess/Bknight.png b/projects/Chess/Bknight.png
new file mode 100644
index 00000000..30e7b847
Binary files /dev/null and b/projects/Chess/Bknight.png differ
diff --git a/projects/Chess/Bpawn.png b/projects/Chess/Bpawn.png
new file mode 100644
index 00000000..a7c115ca
Binary files /dev/null and b/projects/Chess/Bpawn.png differ
diff --git a/projects/Chess/Bqueen.png b/projects/Chess/Bqueen.png
new file mode 100644
index 00000000..8cb48796
Binary files /dev/null and b/projects/Chess/Bqueen.png differ
diff --git a/projects/Chess/Brook.png b/projects/Chess/Brook.png
new file mode 100644
index 00000000..915dd33e
Binary files /dev/null and b/projects/Chess/Brook.png differ
diff --git a/projects/Chess/Chess.css b/projects/Chess/Chess.css
new file mode 100644
index 00000000..082e9b77
--- /dev/null
+++ b/projects/Chess/Chess.css
@@ -0,0 +1,80 @@
+* {
+    margin: 0;
+    padding: 0;
+}
+
+body {
+    display: grid;
+    place-items: center;
+    overflow-x: hidden;
+}
+
+h1 {
+    margin: 10px;
+}
+
+ul {
+    display: grid;
+    grid-template-columns: 1fr;
+}
+
+.divv {
+    display: flex;
+}
+
+li {
+    list-style: none;
+    display: grid;
+    place-items: center;
+    font-size: 0px;
+}
+
+.box {
+    margin: .5px;
+    width: 75px;
+    height: 75px;
+}
+
+#tog {
+    margin: 10px 0px;
+}
+
+
+
+.allimg {
+    width: 45px;
+    position: relative;
+    bottom: 5px;
+}
+
+.allpawn {
+    transform: scale(.7);
+}
+
+.authcont {
+    width: 100vw;
+}
+
+.author {
+    float: right;
+    margin-right: 50px;
+
+}
+
+
+@media (max-width:650px){
+
+    #tog {
+        margin-bottom: 70px;
+
+    }
+
+    .box {
+        width: 11vw;
+        height: 11vw;
+    }
+
+    .allimg {
+        width: 7vw;
+    }
+}
\ No newline at end of file
diff --git a/projects/Chess/Chess.js b/projects/Chess/Chess.js
new file mode 100644
index 00000000..3a3acf62
--- /dev/null
+++ b/projects/Chess/Chess.js
@@ -0,0 +1,574 @@
+// Inserting the Images
+function insertImage() {
+
+    document.querySelectorAll('.box').forEach(image => {
+
+        if (image.innerText.length !== 0) {
+            if (image.innerText == 'Wpawn' || image.innerText == 'Bpawn') {
+                image.innerHTML = `${image.innerText} <img class='allimg allpawn' src="${image.innerText}.png" alt="">`
+                image.style.cursor = 'pointer'
+
+            }
+
+            else {
+
+                image.innerHTML = `${image.innerText} <img class='allimg' src="${image.innerText}.png" alt="">`
+                image.style.cursor = 'pointer'
+            }
+        }
+    })
+}
+insertImage()
+
+
+
+//Coloring
+
+function coloring() {
+    const color = document.querySelectorAll('.box')
+
+    color.forEach(color => {
+
+        getId = color.id
+        arr = Array.from(getId)
+        arr.shift()
+        aside = eval(arr.pop())
+        aup = eval(arr.shift())
+        a = aside + aup
+
+        if (a % 2 == 0) {
+            color.style.backgroundColor = 'rgb(240, 201, 150)'
+        }
+        if (a % 2 !== 0) {
+            color.style.backgroundColor = 'rgb(100, 75, 43)'
+        }
+
+    })
+}
+coloring()
+
+
+
+
+//function to not remove the same team element
+
+function reddish() {
+    document.querySelectorAll('.box').forEach(i1 => {
+        if (i1.style.backgroundColor == 'pink') {
+
+            document.querySelectorAll('.box').forEach(i2 => {
+
+                if (i2.style.backgroundColor == 'green' && i2.innerText.length !== 0) {
+
+
+                    greenText = i2.innerText
+
+                    pinkText = i1.innerText
+
+                    pinkColor = ((Array.from(pinkText)).shift()).toString()
+                    greenColor = ((Array.from(greenText)).shift()).toString()
+
+                    getId = i2.id
+                    arr = Array.from(getId)
+                    arr.shift()
+                    aside = eval(arr.pop())
+                    aup = eval(arr.shift())
+                    a = aside + aup
+            
+                    if (a % 2 == 0 && pinkColor == greenColor) {
+                        i2.style.backgroundColor = 'rgb(240, 201, 150)'
+                    }
+                    if (a % 2 !== 0 && pinkColor == greenColor) {
+                        i2.style.backgroundColor = 'rgb(100, 75, 43)'
+                    }
+
+                    // if (pinkColor == greenColor) {
+                    //     i2.style.backgroundColor = 'rgb(253, 60, 60)'
+                    // }
+                }
+            })
+        }
+    })
+}
+
+
+
+
+
+
+
+
+
+
+tog = 1
+
+document.querySelectorAll('.box').forEach(item => {
+
+
+
+    item.addEventListener('click', function () {
+
+        // To delete the opposite element
+
+        if (item.style.backgroundColor == 'green' && item.innerText.length == 0) {
+            tog = tog + 1
+        }
+
+        else if (item.style.backgroundColor == 'green' && item.innerText.length !== 0) {
+
+            document.querySelectorAll('.box').forEach(i => {
+                if (i.style.backgroundColor == 'pink') {
+                    pinkId = i.id
+                    pinkText = i.innerText
+
+                    document.getElementById(pinkId).innerText = ''
+                    item.innerText = pinkText
+                    coloring()
+                    insertImage()
+                    tog = tog + 1
+                    
+                }
+            })
+        }
+
+
+
+        getId = item.id
+        arr = Array.from(getId)
+        arr.shift()
+        aside = eval(arr.pop())
+        arr.push('0')
+        aup = eval(arr.join(''))
+        a = aside + aup
+
+
+
+        // Function to display the available paths for all pieces
+
+        function whosTurn(toggle) {
+
+            // PAWN
+
+            if (item.innerText == `${toggle}pawn`) {
+                item.style.backgroundColor = 'pink'
+
+                if (tog % 2 !== 0 && aup < 800) {
+
+                    if (document.getElementById(`b${a + 100}`).innerText.length == 0) {
+                        document.getElementById(`b${a + 100}`).style.backgroundColor = 'green'
+                    }
+
+                    if (aside < 8 && document.getElementById(`b${a + 100 + 1}`).innerText.length !== 0) {
+                        document.getElementById(`b${a + 100 + 1}`).style.backgroundColor = 'green'
+                    }
+
+                    if (aside > 1 && document.getElementById(`b${a + 100 - 1}`).innerText.length !== 0) {
+                        document.getElementById(`b${a + 100 - 1}`).style.backgroundColor = 'green'
+
+                    }
+                }
+
+                if (tog % 2 == 0 && aup > 100) {
+
+                    if (document.getElementById(`b${a - 100}`).innerText.length == 0) {
+                        document.getElementById(`b${a - 100}`).style.backgroundColor = 'green'
+                    }
+                    if (aside < 8 && document.getElementById(`b${a - 100 + 1}`).innerText.length !== 0) {
+                        document.getElementById(`b${a - 100 + 1}`).style.backgroundColor = 'green'
+                    }
+                    if (aside > 1 && document.getElementById(`b${a - 100 - 1}`).innerText.length !== 0) {
+                        document.getElementById(`b${a - 100 - 1}`).style.backgroundColor = 'green'
+
+                    }
+                }
+
+
+            }
+
+            // KING
+
+            if (item.innerText == `${toggle}king`) {
+
+
+                if (aside < 8) {
+                    document.getElementById(`b${a + 1}`).style.backgroundColor = 'green'
+
+                }
+                if (aside > 1) {
+
+                    document.getElementById(`b${a - 1}`).style.backgroundColor = 'green'
+                }
+                if (aup < 800) {
+
+                    document.getElementById(`b${a + 100}`).style.backgroundColor = 'green'
+                }
+                if (aup > 100) {
+
+                    document.getElementById(`b${a - 100}`).style.backgroundColor = 'green'
+                }
+
+                if (aup > 100 && aside < 8) {
+
+                    document.getElementById(`b${a - 100 + 1}`).style.backgroundColor = 'green'
+                }
+                if (aup > 100 && aside > 1) {
+
+                    document.getElementById(`b${a - 100 - 1}`).style.backgroundColor = 'green'
+                }
+                if (aup < 800 && aside < 8) {
+
+                    document.getElementById(`b${a + 100 + 1}`).style.backgroundColor = 'green'
+                }
+                if (aup < 800 && aside > 1) {
+
+                    document.getElementById(`b${a + 100 - 1}`).style.backgroundColor = 'green'
+                }
+
+                item.style.backgroundColor = 'pink'
+
+            }
+
+
+            // ROOK
+
+            if (item.innerText == `${toggle}rook`) {
+
+                for (let i = 1; i < 9; i++) {
+
+                    if ((a + i * 100) < 900 && document.getElementById(`b${a + i * 100}`).innerText == 0) {
+                        document.getElementById(`b${a + i * 100}`).style.backgroundColor = 'green'
+                    }
+                    else if ((a + i * 100) < 900 && document.getElementById(`b${a + i * 100}`).innerText !== 0) {
+                        document.getElementById(`b${a + i * 100}`).style.backgroundColor = 'green'
+                        break
+                    }
+                }
+
+                for (let i = 1; i < 9; i++) {
+
+                    if ((a - i * 100) > 100 && document.getElementById(`b${a - i * 100}`).innerText == 0) {
+                        document.getElementById(`b${a - i * 100}`).style.backgroundColor = 'green'
+                    }
+                    else if ((a - i * 100) > 100 && document.getElementById(`b${a - i * 100}`).innerText !== 0) {
+                        document.getElementById(`b${a - i * 100}`).style.backgroundColor = 'green'
+                        break
+                    }
+                }
+
+                for (let i = 1; i < 9; i++) {
+
+                    if ((a + i) < (aup + 9) && document.getElementById(`b${a + i}`).innerText == 0) {
+                        document.getElementById(`b${a + i}`).style.backgroundColor = 'green'
+                    }
+                    else if ((a + i) < (aup + 9) && document.getElementById(`b${a + i}`).innerText !== 0) {
+                        document.getElementById(`b${a + i}`).style.backgroundColor = 'green'
+                        break
+                    }
+                }
+
+                for (let i = 1; i < 9; i++) {
+
+                    if ((a - i) > (aup) && document.getElementById(`b${a - i}`).innerText == 0) {
+                        document.getElementById(`b${a - i}`).style.backgroundColor = 'green'
+                    }
+                    else if ((a - i) > (aup) && document.getElementById(`b${a - i}`).innerText !== 0) {
+                        document.getElementById(`b${a - i}`).style.backgroundColor = 'green'
+                        break
+                    }
+                }
+
+                item.style.backgroundColor = 'pink'
+            }
+
+
+
+            // BISHOP
+
+            if (item.innerText == `${toggle}bishop`) {
+
+
+                for (let i = 1; i < 9; i++) {
+                    if (i < (900 - aup) / 100 && i < 9 - aside && document.getElementById(`b${a + i * 100 + i}`).innerText.length == 0) {
+                        document.getElementById(`b${a + i * 100 + i}`).style.backgroundColor = 'green'
+                    }
+                    else if (i < (900 - aup) / 100 && i < 9 - aside && document.getElementById(`b${a + i * 100 + i}`).innerText.length !== 0) {
+                        document.getElementById(`b${a + i * 100 + i}`).style.backgroundColor = 'green'
+                        break
+                    }
+                }
+
+
+                for (let i = 1; i < 9; i++) {
+                    if (i < aup / 100 && i < 9 - aside && document.getElementById(`b${a - i * 100 + i}`).innerText.length == 0) {
+                        document.getElementById(`b${a - i * 100 + i}`).style.backgroundColor = 'green'
+                    }
+                    else if (i < aup / 100 && i < 9 - aside && document.getElementById(`b${a - i * 100 + i}`).innerText.length !== 0) {
+                        document.getElementById(`b${a - i * 100 + i}`).style.backgroundColor = 'green'
+                        break
+                    }
+                }
+
+
+                for (let i = 1; i < 9; i++) {
+                    if (i < (900 - aup) / 100 && i < aside && document.getElementById(`b${a + i * 100 - i}`).innerText.length == 0) {
+                        document.getElementById(`b${a + i * 100 - i}`).style.backgroundColor = 'green'
+                    }
+                    else if (i < (900 - aup) / 100 && i < aside && document.getElementById(`b${a + i * 100 - i}`).innerText.length !== 0) {
+                        document.getElementById(`b${a + i * 100 - i}`).style.backgroundColor = 'green'
+                        break
+                    }
+
+                }
+
+
+                for (let i = 1; i < 9; i++) {
+                    if (i < aup / 100 && i < aside && document.getElementById(`b${a - i * 100 - i}`).innerText.length == 0) {
+                        document.getElementById(`b${a - i * 100 - i}`).style.backgroundColor = 'green'
+                    }
+                    else if (i < aup / 100 && i < aside && document.getElementById(`b${a - i * 100 - i}`).innerText.length !== 0) {
+                        document.getElementById(`b${a - i * 100 - i}`).style.backgroundColor = 'green'
+                        break
+                    }
+                }
+
+
+
+                item.style.backgroundColor = 'pink'
+
+            }
+
+
+
+            // QUEEN
+
+            if (item.innerText == `${toggle}queen`) {
+
+
+                for (let i = 1; i < 9; i++) {
+
+                    if ((a + i * 100) < 900 && document.getElementById(`b${a + i * 100}`).innerText == 0) {
+                        document.getElementById(`b${a + i * 100}`).style.backgroundColor = 'green'
+                    }
+                    else if ((a + i * 100) < 900 && document.getElementById(`b${a + i * 100}`).innerText !== 0) {
+                        document.getElementById(`b${a + i * 100}`).style.backgroundColor = 'green'
+                        break
+                    }
+                }
+
+                for (let i = 1; i < 9; i++) {
+
+                    if ((a - i * 100) > 100 && document.getElementById(`b${a - i * 100}`).innerText == 0) {
+                        document.getElementById(`b${a - i * 100}`).style.backgroundColor = 'green'
+                    }
+                    else if ((a - i * 100) > 100 && document.getElementById(`b${a - i * 100}`).innerText !== 0) {
+                        document.getElementById(`b${a - i * 100}`).style.backgroundColor = 'green'
+                        break
+                    }
+                }
+
+                for (let i = 1; i < 9; i++) {
+
+                    if ((a + i) < (aup + 9) && document.getElementById(`b${a + i}`).innerText == 0) {
+                        document.getElementById(`b${a + i}`).style.backgroundColor = 'green'
+                    }
+                    else if ((a + i) < (aup + 9) && document.getElementById(`b${a + i}`).innerText !== 0) {
+                        document.getElementById(`b${a + i}`).style.backgroundColor = 'green'
+                        break
+                    }
+                }
+
+                for (let i = 1; i < 9; i++) {
+
+                    if ((a - i) > (aup) && document.getElementById(`b${a - i}`).innerText == 0) {
+                        document.getElementById(`b${a - i}`).style.backgroundColor = 'green'
+                    }
+                    else if ((a - i) > (aup) && document.getElementById(`b${a - i}`).innerText !== 0) {
+                        document.getElementById(`b${a - i}`).style.backgroundColor = 'green'
+                        break
+                    }
+                }
+
+
+
+                for (let i = 1; i < 9; i++) {
+                    if (i < (900 - aup) / 100 && i < 9 - aside && document.getElementById(`b${a + i * 100 + i}`).innerText.length == 0) {
+                        document.getElementById(`b${a + i * 100 + i}`).style.backgroundColor = 'green'
+                    }
+                    else if (i < (900 - aup) / 100 && i < 9 - aside && document.getElementById(`b${a + i * 100 + i}`).innerText.length !== 0) {
+                        document.getElementById(`b${a + i * 100 + i}`).style.backgroundColor = 'green'
+                        break
+                    }
+                }
+
+
+                for (let i = 1; i < 9; i++) {
+                    if (i < aup / 100 && i < 9 - aside && document.getElementById(`b${a - i * 100 + i}`).innerText.length == 0) {
+                        document.getElementById(`b${a - i * 100 + i}`).style.backgroundColor = 'green'
+                    }
+                    else if (i < aup / 100 && i < 9 - aside && document.getElementById(`b${a - i * 100 + i}`).innerText.length !== 0) {
+                        document.getElementById(`b${a - i * 100 + i}`).style.backgroundColor = 'green'
+                        break
+                    }
+                }
+
+
+                for (let i = 1; i < 9; i++) {
+                    if (i < (900 - aup) / 100 && i < aside && document.getElementById(`b${a + i * 100 - i}`).innerText.length == 0) {
+                        document.getElementById(`b${a + i * 100 - i}`).style.backgroundColor = 'green'
+                    }
+                    else if (i < (900 - aup) / 100 && i < aside && document.getElementById(`b${a + i * 100 - i}`).innerText.length !== 0) {
+                        document.getElementById(`b${a + i * 100 - i}`).style.backgroundColor = 'green'
+                        break
+                    }
+
+                }
+
+
+                for (let i = 1; i < 9; i++) {
+                    if (i < aup / 100 && i < aside && document.getElementById(`b${a - i * 100 - i}`).innerText.length == 0) {
+                        document.getElementById(`b${a - i * 100 - i}`).style.backgroundColor = 'green'
+                    }
+                    else if (i < aup / 100 && i < aside && document.getElementById(`b${a - i * 100 - i}`).innerText.length !== 0) {
+                        document.getElementById(`b${a - i * 100 - i}`).style.backgroundColor = 'green'
+                        break
+                    }
+                }
+
+
+
+                item.style.backgroundColor = 'pink'
+
+            }
+
+            // KNIGHT
+
+            if (item.innerText == `${toggle}knight`) {
+
+
+                if (aside < 7 && aup < 800) {
+                    document.getElementById(`b${a + 100 + 2}`).style.backgroundColor = 'green'
+                }
+                if (aside < 7 && aup > 200) {
+                    document.getElementById(`b${a - 100 + 2}`).style.backgroundColor = 'green'
+                }
+                if (aside < 8 && aup < 700) {
+                    document.getElementById(`b${a + 200 + 1}`).style.backgroundColor = 'green'
+                }
+                if (aside > 1 && aup < 700) {
+                    document.getElementById(`b${a + 200 - 1}`).style.backgroundColor = 'green'
+                }
+                if (aside > 2 && aup < 800) {
+                    document.getElementById(`b${a - 2 + 100}`).style.backgroundColor = 'green'
+                }
+                if (aside > 2 && aup > 100) {
+                    document.getElementById(`b${a - 2 - 100}`).style.backgroundColor = 'green'
+                }
+                if (aside < 8 && aup > 200) {
+                    document.getElementById(`b${a - 200 + 1}`).style.backgroundColor = 'green'
+                }
+                if (aside > 1 && aup > 200) {
+                    document.getElementById(`b${a - 200 - 1}`).style.backgroundColor = 'green'
+                }
+
+                item.style.backgroundColor = 'pink'
+
+            }
+        }
+
+
+        // Toggling the turn
+
+        if (tog % 2 !== 0) {
+            document.getElementById('tog').innerText = "White's Turn"
+            whosTurn('W')
+        }
+        if (tog % 2 == 0) {
+            document.getElementById('tog').innerText = "Black's Turn"
+            whosTurn('B')
+        }
+
+        reddish()
+
+
+
+        // winning()
+
+        numOfKings = 0
+
+
+        document.querySelectorAll('.box').forEach(win => {
+            if (win.innerText == 'Wking' || win.innerText == 'Bking') {
+                numOfKings += 1
+            }
+
+        })
+
+        if (numOfKings == 1) {
+            setTimeout(() => {
+                // console.log(`${toggle}`) 
+                if (tog % 2 == 0) {
+                    alert('White Wins !!')
+                    location.reload()
+                }
+                else if (tog % 2 !== 0) {
+                    alert('Black Wins !!')
+                    location.reload()
+                }
+            }, 100)
+        }
+
+
+
+    })
+
+})
+
+
+
+
+
+// Moving the element
+document.querySelectorAll('.box').forEach(hathiTest => {
+
+    hathiTest.addEventListener('click', function () {
+
+        if (hathiTest.style.backgroundColor == 'pink') {
+
+            pinkId = hathiTest.id
+            pinkText = hathiTest.innerText
+
+            document.querySelectorAll('.box').forEach(hathiTest2 => {
+
+                hathiTest2.addEventListener('click', function () {
+                    if (hathiTest2.style.backgroundColor == 'green' && hathiTest2.innerText.length == 0) {
+                        document.getElementById(pinkId).innerText = ''
+                        hathiTest2.innerText = pinkText
+                        coloring()
+                        insertImage()
+
+                    }
+
+                })
+            })
+
+        }
+
+    })
+
+})
+
+
+
+
+
+
+// Prvents from selecting multiple elements
+z = 0
+document.querySelectorAll('.box').forEach(ee => {
+    ee.addEventListener('click', function () {
+        z = z + 1
+        if (z % 2 == 0 && ee.style.backgroundColor !== 'green') {
+            coloring()
+        }
+    })
+})
\ No newline at end of file
diff --git a/projects/Chess/Screenshot 2023-08-09 200006.png b/projects/Chess/Screenshot 2023-08-09 200006.png
new file mode 100644
index 00000000..c2fa6f4f
Binary files /dev/null and b/projects/Chess/Screenshot 2023-08-09 200006.png differ
diff --git a/projects/Chess/Wbishop.png b/projects/Chess/Wbishop.png
new file mode 100644
index 00000000..ef377220
Binary files /dev/null and b/projects/Chess/Wbishop.png differ
diff --git a/projects/Chess/Wking.png b/projects/Chess/Wking.png
new file mode 100644
index 00000000..7d067221
Binary files /dev/null and b/projects/Chess/Wking.png differ
diff --git a/projects/Chess/Wknight.png b/projects/Chess/Wknight.png
new file mode 100644
index 00000000..8b97b7fb
Binary files /dev/null and b/projects/Chess/Wknight.png differ
diff --git a/projects/Chess/Wpawn.png b/projects/Chess/Wpawn.png
new file mode 100644
index 00000000..eab2a53c
Binary files /dev/null and b/projects/Chess/Wpawn.png differ
diff --git a/projects/Chess/Wqueen.png b/projects/Chess/Wqueen.png
new file mode 100644
index 00000000..2de60cbc
Binary files /dev/null and b/projects/Chess/Wqueen.png differ
diff --git a/projects/Chess/Wrook.png b/projects/Chess/Wrook.png
new file mode 100644
index 00000000..8648b95c
Binary files /dev/null and b/projects/Chess/Wrook.png differ
diff --git a/projects/Chess/index.html b/projects/Chess/index.html
new file mode 100644
index 00000000..3c4b4651
--- /dev/null
+++ b/projects/Chess/index.html
@@ -0,0 +1,116 @@
+<!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">
+    <link rel="stylesheet" href="Chess.css">
+    
+    <title>Chess</title>
+</head>
+
+
+<body>
+
+    <!-- <h1>Chess <h4>(Made by : Jahid Khan)</h4></h1> -->
+    <h1>Chess</h1>
+    <h2 id="tog">White's Turn</h2>
+
+
+    
+    <ul>
+
+        <div class="divv" id="row8">
+            <li class="box" id="b801">Brook</li>
+            <li class="box" id="b802">Bknight</li>
+            <li class="box" id="b803">Bbishop</li>
+            <li class="box" id="b804">Bqueen</li>
+            <li class="box" id="b805">Bking</li>
+            <li class="box" id="b806">Bbishop</li>
+            <li class="box" id="b807">Bknight</li>
+            <li class="box" id="b808">Brook</li>
+        </div>
+        <div class="divv" id="row7">
+            <li class="box" id="b701">Bpawn</li>
+            <li class="box" id="b702">Bpawn</li>
+            <li class="box" id="b703">Bpawn</li>
+            <li class="box" id="b704">Bpawn</li>
+            <li class="box" id="b705">Bpawn</li>
+            <li class="box" id="b706">Bpawn</li>
+            <li class="box" id="b707">Bpawn</li>
+            <li class="box" id="b708">Bpawn</li>
+        </div>
+        <div class="divv" id="row6">
+            <li class="box" id="b601"></li>
+            <li class="box" id="b602"></li>
+            <li class="box" id="b603"></li>
+            <li class="box" id="b604"></li>
+            <li class="box" id="b605"></li>
+            <li class="box" id="b606"></li>
+            <li class="box" id="b607"></li>
+            <li class="box" id="b608"></li>
+        </div>
+        <div class="divv" id="row5">
+            <li class="box" id="b501"></li>
+            <li class="box" id="b502"></li>
+            <li class="box" id="b503"></li>
+            <li class="box" id="b504"></li>
+            <li class="box" id="b505"></li>
+            <li class="box" id="b506"></li>
+            <li class="box" id="b507"></li>
+            <li class="box" id="b508"></li>
+        </div>
+        <div class="divv" id="row4">
+            <li class="box" id="b401"></li>
+            <li class="box" id="b402"></li>
+            <li class="box" id="b403"></li>
+            <li class="box" id="b404"></li>
+            <li class="box" id="b405"></li>
+            <li class="box" id="b406"></li>
+            <li class="box" id="b407"></li>
+            <li class="box" id="b408"></li>
+        </div>
+        <div class="divv" id="row3">
+            <li class="box" id="b301"></li>
+            <li class="box" id="b302"></li>
+            <li class="box" id="b303"></li>
+            <li class="box" id="b304"></li>
+            <li class="box" id="b305"></li>
+            <li class="box" id="b306"></li>
+            <li class="box" id="b307"></li>
+            <li class="box" id="b308"></li>
+        </div>
+
+        <div class="divv" id="row2">
+            <li class="box Wpawn" id="b201">Wpawn</li>
+            <li class="box Wpawn" id="b202">Wpawn</li>
+            <li class="box Wpawn" id="b203">Wpawn</li>
+            <li class="box Wpawn" id="b204">Wpawn</li>
+            <li class="box Wpawn" id="b205">Wpawn</li>
+            <li class="box Wpawn" id="b206">Wpawn</li>
+            <li class="box Wpawn" id="b207">Wpawn</li>
+            <li class="box Wpawn" id="b208">Wpawn</li>
+        </div>
+        <div class="divv" id="row1">
+            <li class="box" id="b101">Wrook</li>
+            <li class="box" id="b102">Wknight</li>
+            <li class="box" id="b103">Wbishop</li>
+            <li class="box" id="b104">Wqueen</li>
+            <li class="box" id="b105">Wking</li>
+            <li class="box" id="b106">Wbishop</li>
+            <li class="box" id="b107">Wknight</li>
+            <li class="box" id="b108">Wrook</li>
+        </div>
+
+    </ul>
+    <script src="Chess.js"></script>
+</body>
+
+<script>
+
+
+   
+</script>
+
+</html>
\ No newline at end of file