diff --git a/Tic_tac_toe/bubbles.js b/Tic_tac_toe/bubbles.js
new file mode 100644
index 0000000..0400e63
--- /dev/null
+++ b/Tic_tac_toe/bubbles.js
@@ -0,0 +1,97 @@
+var canvas = document.getElementById("screen");
+var c=canvas.getContext("2d");
+canvas.height=window.innerHeight;
+canvas.width=window.innerWidth;
+
+function Circle(x,y,radius,dx,dy){
+  this.x=x;
+  this.y=y;
+  this.dx=dx;
+  this.dy=dy;
+  this.radius=radius;
+  this.minradius=radius;
+  this.color=colors[Math.floor(Math.random()*colors.length)];
+  this.draw = function(){
+    c.beginPath();
+    c.arc(this.x,this.y,this.radius,0,Math.PI * 2,false);
+    c.fillStyle=this.color;
+    c.fill();
+
+  }
+  this.move=function(){
+    if (this.x>(innerWidth-this.radius) || this.x<this.radius){this.dx=-this.dx}
+    if (this.y>(innerHeight-this.radius)|| this.y<this.radius){this.dy=-this.dy}
+    this.x+=this.dx;
+      this.y+=this.dy;
+      if(Math.abs(mouse.x-this.x)<50 && this.radius<30){
+        this.radius+=1;
+      }
+      else if(this.radius>this.minradius){
+        this.radius-=1;
+      }
+      if(Math.abs(mouse.y-this.y)<50 && this.radius<30){
+        this.radius+=1;
+      }
+      else if(this.radius>this.minradius){
+        this.radius-=1;
+      }
+      this.draw();
+  }
+
+}
+var colors=[
+  "#133046",
+  "#15959F",
+  "#F1E4B3",
+  "#F4A090",
+  "#F26144"
+]
+var mouse={
+  x : undefined,
+  y : undefined
+}
+
+window.addEventListener('mousemove',function(event){
+  mouse.x=event.x;
+  mouse.y=event.y;
+
+})
+var array=[];
+for(var i=0;i<600;i++){
+  var x=Math.random() * innerWidth;
+  var y=Math.random() * innerHeight;
+
+  var radius = (Math.random()*2)+2;
+  var dx=(Math.random()-0.5)*2;
+  var dy=(Math.random()-0.5)*2;
+  var circle = new Circle(x,y,radius,dx,dy) ;
+  array.push(circle);
+}
+
+function animate(){
+  requestAnimationFrame(animate);
+  c.clearRect(0,0,innerWidth,innerHeight);
+  for(var i=0;i<array.length;i++){
+    array[i].move();
+  }
+
+
+
+}
+animate();
+// var i;
+// for(i=0;i<50;i++){
+// 	var x=Math.random()*window.innerWidth;
+// 	var y =Math.random()*window.innerHeight;
+// 	var r=Math.random() * 255;
+// 	var g=Math.random() * 255;
+// 	var b=Math.random() * 255;
+
+// 	console.log("x=",x,"y=",y);
+// 	c.beginPath();
+// 	c.arc(x,y,50,0,Math.PI *2,false);
+// 	c.fillStyle="rgb("+r+","+g+","+b+")";
+// 	c.fill();
+
+
+// }
diff --git a/Tic_tac_toe/code.js b/Tic_tac_toe/code.js
new file mode 100644
index 0000000..e18039f
--- /dev/null
+++ b/Tic_tac_toe/code.js
@@ -0,0 +1,86 @@
+document.getElementById("btn").addEventListener('click',function(){
+  clear();
+});
+
+function clear(){
+  var board=document.getElementById("board");
+  for(var i=0;i<board.childElementCount;i++){
+    
+    var p = document.getElementsByClassName("box")[i];
+    var h = p.childNodes[0];
+    if (p.childElementCount>0){
+      p.removeChild(h);
+    }
+  }
+}
+
+var pcount=0;
+
+var arr=[0,1,2,3,4,5,6,7,8];
+var pos=[0,1,2,3,4,5,6,7,8];
+
+
+var boxes = document.getElementsByClassName("box");
+
+
+function put(i){
+  if(boxes[i].childElementCount==0){
+    var h=document.createElement("h1");
+    var text=document.createTextNode("O");
+    h.innerHTML="O"; 
+    boxes[i].appendChild(h);
+    arr[i]="O";
+    pos.splice(pos.indexOf(i),1);
+
+  }
+  if(check()){
+    setTimeout(function(){alert("YOU WON ! ");},100)
+    setTimeout(function(){clear()},500)
+    pcount+=10;
+
+    var p1=document.getElementById("p1");
+    var score = parseInt(p1.value);
+    score+=10;
+    p1.value=score;
+    arr=[0,1,2,3,4,5,6,7,8];
+    pos=[0,1,2,3,4,5,6,7,8];
+
+
+    
+  }
+  
+  
+  var pc=Math.floor(Math.random() * pos.length);
+  if(boxes[pos[pc]].childElementCount==0){
+    var h=document.createElement("h1");
+    var text=document.createTextNode("O");
+    h.innerHTML="X"; 
+    boxes[pos[pc]].appendChild(h);
+    arr[pos[pc]]="X";
+    pos.splice(pc,1);
+
+   }
+}
+function a(n){
+  var m = parseInt(n);
+  return(boxes[m].children[0].innerHTML)
+}
+
+
+function check(){
+
+  if(arr[0]=="O" &&  arr[1]=="O" && arr[2]=="O"){return true;}
+  else if(arr[3]=="O" &&  arr[4]=="O" && arr[5]=="O"){return true;}
+  else if(arr[6]=="O" &&  arr[7]=="O" && arr[8]=="O"){return true;}
+  else if(arr[0]=="O" &&  arr[3]=="O" && arr[6]=="O"){return true;}
+  else if(arr[1]=="O" &&  arr[4]=="O" && arr[7]=="O"){return true;}
+  else if(arr[2]=="O" &&  arr[5]=="O" && arr[8]=="O"){return true;}
+  else if(arr[0]=="O" &&  arr[4]=="O" && arr[8]=="O"){return true;}
+  else if(arr[2]=="O" &&  arr[4]=="O" && arr[6]=="O"){return true;}
+  
+
+}
+
+
+
+
diff --git a/Tic_tac_toe/home.html b/Tic_tac_toe/home.html
new file mode 100644
index 0000000..1db1451
--- /dev/null
+++ b/Tic_tac_toe/home.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<title>TIC TAC toe</title>
+	<link rel="stylesheet" href="style.css">
+</head>
+<body>
+
+	<canvas id="screen"></canvas>
+
+
+	<div id="header">
+    	<h1 align="center">TIC TAC TOE</h1>
+  	</div>
+
+    <div id="btn" onclick="clear()" >
+  		<h2 align="center">RETRY</h2>
+	</div>
+
+	<div id="board">
+	    <div class="box" onmousedown="put(0)"></div>
+	    <div class="box" onmousedown="put(1)"></div>
+	    <div class="box" onmousedown="put(2)"></div>
+	    <div class="box" onmousedown="put(3)"></div>
+	    <div class="box" onmousedown="put(4)"></div>
+	    <div class="box" onmousedown="put(5)"></div>
+	    <div class="box" onmousedown="put(6)"></div>
+	    <div class="box" onmousedown="put(7)"></div>
+	    <div class="box" onmousedown="put(8)"></div>
+  	</div>
+
+    <div class = "p1">
+  		<h1 >PLAYER</h1>
+ 		 <textarea id="p1" rows="2" cols="5" disabled >0</textarea>
+	</div>
+	<div class = "pc">
+ 		<h1>COMPUTER</h1>
+  		<textarea rows="2" cols="5" disabled >0</textarea>
+	</div>
+
+<script type="text/javascript" src="code.js"></script>
+<script type="text/javascript" src="bubbles.js"></script>
+</body>
+</html>
diff --git a/Tic_tac_toe/readme.md b/Tic_tac_toe/readme.md
new file mode 100644
index 0000000..004b5f2
--- /dev/null
+++ b/Tic_tac_toe/readme.md
@@ -0,0 +1,3 @@
+TIC TAC TOE Game made using HTML5 Canvas and Javascript.
+
+--->NO INTELLIGENCE FROM COMPUTER(i.e. random moves from pc)
diff --git a/Tic_tac_toe/style.css b/Tic_tac_toe/style.css
new file mode 100644
index 0000000..effe29d
--- /dev/null
+++ b/Tic_tac_toe/style.css
@@ -0,0 +1,96 @@
+
+body{
+  margin:0px;
+  border-top:6px solid purple;
+}
+canvas{
+  position: fixed;
+  z-index: -1;
+}
+#header{
+  padding:10px 20px;
+  margin:0px auto;
+  background-color:purple;
+  color:white;
+  width:300px;
+  height:60px;
+}
+textarea{resize: none}
+.p1{
+  position : absolute;
+  left:40px;
+  top:50%;
+}
+.pc{
+  position :absolute;
+  right:40px;
+  top:50%;
+}
+#btn{
+  margin:1.2em auto;
+  width:150px;
+  background-color:#0a48ad;
+  color:white;
+  /*display:inline-block;*/
+  padding:2.5px 10px;
+
+}
+#btn:hover{
+  background-color:#000651;
+
+}
+
+
+
+
+
+#board{
+  outline:2px solid red;
+  height:500px;
+  width:500px;
+  background-color:green;
+  margin:1.5em auto;
+  padding:0;
+}
+.box{
+  position:relative;
+  height:30.4%;
+  width:30.4%;
+  background-color:#26c9e2;
+  display:inline-block;
+  margin:1%;
+
+}
+.box:hover{
+  background-color:white;
+}
+.box h1{position:absolute;font-size:108px;margin:10px 30px;}
+
+
+
+
+@media screen and (max-width: 550px){
+
+  #board{
+    position: relative;
+    max-height: 500px;
+    max-width: 500px;
+    width:95%;
+    height:;
+    margin:auto;
+    background-color: red;
+  }
+
+}
+
+@media screen and (max-width: 980px) {
+  .p1 , .pc{
+    position: relative;
+    top:0;
+    left:0;
+    background-color:orange;
+    width:80%;
+    margin:2.5em 10%;
+  }
+
+}
diff --git a/index-style.css b/index-style.css
new file mode 100644
index 0000000..ee51d20
--- /dev/null
+++ b/index-style.css
@@ -0,0 +1,94 @@
+body {
+  padding: 0;
+  margin: 0;
+  font-size: 12px;
+}
+
+/*========================|   BACKGROUND STYLES   |========================*/
+
+#background-1{
+  position: fixed;
+  height:100%;
+  width: 100%;
+  clip-path: polygon(87% 0, 100% 0, 100% 98%, 0 100%, 54% 75%);
+  background-color:#042d70;
+}
+#background-2{
+  position: fixed;
+  height:100%;
+  width: 100%;
+  clip-path: polygon(67% 80%, 100% 0, 100% 100%, 0% 100%);
+  background-color:#0d47a5;
+}
+#background-3{
+  position: fixed;
+  height:100%;
+  width: 100%;
+clip-path: polygon(0 0, 26% 0, 19% 20%, 0 27%);
+  background-color:#042d70;
+}
+#background-4{
+  position: fixed;
+  height:100%;
+  width: 100%;
+  clip-path: polygon(0 0, 21% 0, 18% 19%, 0 26%);
+  background-color:#0d47a5;
+}
+
+
+/*=========================|   List Style And Positioning   |=========================*/
+
+
+ol{
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top:50%;
+  transform: translateY(-50%);
+}
+ol li{
+  position: absolute;
+  list-style-type: none;
+  display: inline-block;
+  text-align: center;
+  padding:2.5em 1em;
+  margin:auto 2.5%;
+  width:25%;
+  letter-spacing: 8px;
+  transform: translate(-50%,-50%);
+  background-image:linear-gradient(to bottom,#3c7ee8,#95BEB6);
+  border:2px solid #8eb2ed;
+
+  border-radius: 25px;
+  transition: all .5s;
+}
+
+ol li a{
+  text-decoration: none;
+  font-weight:bold;
+  padding: 1.3em;
+  font-size: 24px;
+  color: #dedfe0;
+}
+
+ol li:nth-child(1){
+  top:10%;
+  left:70%;
+
+}
+ol li:nth-child(2){
+  top:35%;
+  left:50%;
+
+}
+ol li:nth-child(3){
+  top:60%;
+  left:30%;
+}
+ol li:nth-child(4){
+  top:85%;
+  left:15%;
+}
+ol li:hover{
+  transform:translate(-50%,-50%) scale(1.2,1.2);
+}
diff --git a/index.html b/index.html
index 3ad4f84..b7226ff 100644
--- a/index.html
+++ b/index.html
@@ -1,10 +1,18 @@
 <html>
   <head>
     <title>Web Development</title>
+      <link rel="stylesheet" href="index-style.css">
   </head>
   <body>
+
+  	<div id="background-1"></div>
+  	<div id="background-2"></div>
+  	<div id="background-3"></div>
+  	<div id="background-4"></div>
+
     <ol>
       <li><a href= "Snake_FOoDie/Welcome.html" target="_blank">Snake Game</a></li>
+      <li><a href= "Tic_tac_toe/home.html" target="_blank">Tic Tac Toe</a></li>
       <li><a href= "orderTrack/index.html" target="_blank">Assignments</a></li>
       <li><a href= "UI_Design/index.html" target="_blank">Design_Style</a></li>
     </ol>