@@ -0,0 +1,57 @@
+body{
+    height: 100vh;
+}
+.start-btn{
+    margin-top: -100px;
+    margin-bottom: 10px;
+    width: 80%;
+    padding: 10px;
+    font-size: 22px;
+}
+img{
+    width: 100%;
+    height: 100%;
+}
+.container, .row, .col-md-3{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+.container{
+    height: 100%;
+    flex-direction: column;
+}
+.row{
+    width: 100%;
+}
+.col-md-3{
+    color: aliceblue;
+    height: 450px;
+    font-size: 80px;
+    background-color: rgb(129, 137, 193);
+    margin: 15px;
+}
+.col-md-3:hover{
+    border: 5px solid rgb(93, 103, 184);
+}
+
+@keyframes swap1 {
+    100%{
+        transform:translate(-310px, 0px);
+    }
+}
+@keyframes swap2 {
+    100%{
+        transform:translate(310px, 0px);
+    }
+}
+@keyframes swap3 {
+    100%{
+        transform:translate(-620px, 0px);
+    }
+}
+@keyframes swap4 {
+    100%{
+        transform:translate(620px, 0px);
+    }
+}
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <link rel="stylesheet" href="css/bootstrap.min.css">
+        <link rel="stylesheet" href="css/all.min.css">
+        <link rel="stylesheet" href="css/main.css">
+    </head>
+    <body>
+        
+        <div class="container">
+            <div class="row">
+                <button class="btn btn-success start-btn" onclick="start()">Start</button>
+            </div>
+            <div class="row " id="cont">
+                <div id="div1" class="col-md-3">
+                    ?
+                </div>
+                <div id="div2" class="col-md-3">
+                    ?
+                </div>
+                <div id="div3" class="col-md-3">
+                    ?
+                </div>
+            </div>
+        </div>
+
+        <script src="js/jquery-3.5.1.slim.min.js"></script>
+        <script src="js/popper.min.js"></script>
+        <script src="js/bootstrap.min.js"></script>
+        <script src="js/main.js"></script>
+    </body>
+</html>
@@ -0,0 +1,103 @@
+var rand = Math.floor(Math.random() * 3)+1;
+var swap = rand;
+function start(){
+    document.getElementById(`div${rand}`).innerHTML = `<img class="w-100" src="./images/img.jpg">`;
+    setTimeout(() => {
+        document.getElementById(`div${rand}`).innerHTML = '?';
+        var i = 0;
+        myInterval = setInterval(() => {
+            setTimeout(() => {
+                do{
+                    swap = Math.floor(Math.random()*3)+1;
+                }while(rand == swap);
+                console.log(i);
+            }, 800);
+            setTimeout(() => {
+                if((rand == 1 && swap == 2) || (rand == 2 && swap == 1))
+                {
+                    document.getElementById('div2').style = "animation-name: swap1;animation-duration: 0.8s;"
+                    document.getElementById('div1').style = "animation-name: swap2;animation-duration: 0.8s;"
+                    rand = swap;
+                    console.log(rand, swap);
+                }
+                else if((rand == 2 && swap == 3) || (rand == 3 && swap == 2))
+                {
+                    document.getElementById('div3').style = "animation-name: swap1;animation-duration: 0.8s;"
+                    document.getElementById('div2').style = "animation-name: swap2;animation-duration: 0.8s;"
+                    rand = swap;
+                    console.log(rand, swap);
+                }
+                else if((rand == 1 && swap == 3) || (rand == 3 && swap == 1))
+                {
+                    document.getElementById('div3').style = "animation-name: swap3;animation-duration: 0.8s;"
+                    document.getElementById('div1').style = "animation-name: swap4;animation-duration: 0.8s;"
+                    rand = swap;
+                    console.log(rand, swap);
+                }
+            }, 900);
+            setTimeout(() => {
+                document.getElementById('div1').style ="ainmation:none";
+                document.getElementById('div2').style = "ainmation:none";
+                document.getElementById('div3').style = "ainmation:none";
+            }, 1500);
+            i++;
+            if(i>14)
+            clearInterval(myInterval);
+        }, 1600);
+        document.getElementById('div1').addEventListener('click', ()=>{
+            if(rand == 1)
+            {
+                document.getElementById('div1').innerHTML = `<img class="w-100" src="./images/img.jpg">`;
+                setTimeout(() => {
+                    alert('You Win');
+                    setTimeout(()=>{location.reload();}, 500)
+                }, 1000);
+            }
+            else{
+                document.getElementById('div1').innerHTML = `X`;
+                document.getElementById('div1').style = 'font-size:300px; color: red; font-weight: bold';
+                setTimeout(() => {
+                    alert('You Lose');
+                    setTimeout(()=>{location.reload();}, 500)
+                }, 1000);
+            }
+        })
+        document.getElementById('div2').addEventListener('click', ()=>{
+            if(rand == 2)
+            {
+                document.getElementById('div2').innerHTML = `<img class="w-100" src="./images/img.jpg">`;
+                setTimeout(() => {
+                    alert('You Win');
+                    setTimeout(()=>{location.reload();}, 500)
+                }, 1000);
+            }
+            else{
+                document.getElementById('div2').innerHTML = `X`;
+                document.getElementById('div2').style = 'font-size:300px; color: red; font-weight: bold';
+                setTimeout(() => {
+                    alert('You Lose');
+                    setTimeout(()=>{location.reload();}, 500)
+                }, 1000);
+            }
+        })
+        document.getElementById('div3').addEventListener('click', ()=>{
+            if(rand == 3)
+            {
+                document.getElementById('div3').innerHTML = `<img class="w-100" src="./images/img.jpg">`;
+                setTimeout(() => {
+                    alert('You Win');
+                    setTimeout(()=>{location.reload();}, 500)
+                }, 1000);
+            }
+            else{
+                document.getElementById('div3').innerHTML = `X`;
+                document.getElementById('div3').style = 'font-size:300px; color: red; font-weight: bold';
+                setTimeout(() => {
+                    alert('You Lose');
+                    setTimeout(()=>{location.reload();}, 500)
+                }, 1000);
+            }
+        })
+        
+    }, 1000);
+}