diff --git a/Public/Pixel-Art-Maker/README.md b/Public/Pixel-Art-Maker/README.md
new file mode 100644
index 00000000..01d448e6
--- /dev/null
+++ b/Public/Pixel-Art-Maker/README.md
@@ -0,0 +1,3 @@
+# Pixel-Art-Maker-Website
+Description
+A website for drawing pixel art on an adjustable size canvas, with the ability to extract drawings into PNG images too using only html, css and javascript.
\ No newline at end of file
diff --git a/Public/Pixel-Art-Maker/css/style.css b/Public/Pixel-Art-Maker/css/style.css
new file mode 100644
index 00000000..bdf7a8e5
--- /dev/null
+++ b/Public/Pixel-Art-Maker/css/style.css
@@ -0,0 +1,74 @@
+body{
+ font-family: 'Saira', sans-serif;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ margin:0;
+ padding: 0;
+ background-color: aqua;
+
+}
+h1{text-align: center;}
+
+.draw{
+ border:2px solid grey;
+ user-select: none;
+ display:flex;
+ flex-direction: column;
+ height: 500px;
+ width: 500px;
+ background-color: white ;
+}
+.buttonrow{
+ margin: 0.2%;
+ width: 100%;
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+
+ justify-content: center;
+}
+
+button{
+ margin: 1%;
+ width: 8%;
+ background-color: rgb(252, 252, 127);
+ border-color: grey;
+ border-radius: 15%;
+ font-size: medium;
+}
+#selectcol{
+
+ margin-right:1%;
+ border-radius: 30%;
+ border-width: 1px;
+ background-color: rgb(252, 252, 127);
+
+}
+#download{
+ width:20%;
+}
+
+input{
+
+ background-color: rgb(252, 252, 127);
+
+}
+
+@media only screen and (max-width: 500px){
+ .draw{
+ height: 300px;
+ width: 300px;
+ }
+ .buttonrow{
+ margin: 2%;
+
+
+ }
+ button{
+ width: 20%;
+ }
+ #download{
+ width:40%;
+ }
+}
diff --git a/Public/Pixel-Art-Maker/index.html b/Public/Pixel-Art-Maker/index.html
new file mode 100644
index 00000000..b21af21d
--- /dev/null
+++ b/Public/Pixel-Art-Maker/index.html
@@ -0,0 +1,34 @@
+
+
+
+
+
+
+
+ Pixel Art Drawing
+
+
+
+
+
+
+ Pixel Art Maker
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/Public/Pixel-Art-Maker/js/script.js b/Public/Pixel-Art-Maker/js/script.js
new file mode 100644
index 00000000..233f2c63
--- /dev/null
+++ b/Public/Pixel-Art-Maker/js/script.js
@@ -0,0 +1,146 @@
+
+const box=document.getElementsByClassName("draw")[0];
+
+let x=16; //Default Sizes
+let y=16;
+let boxsize=1/x*100;
+
+let selectedcolor="rgb(0,0,0)"; //Default Selected Color
+
+
+let mousedown = false //Help variable that informs if the left mouse button is pressed.
+document.body.onmousedown = () => (mousedown = true)
+document.body.onmouseup = () => (mousedown = false)
+
+
+
+
+function clearscr(){ //Function for clearing the canvas
+ const pixels = document.querySelectorAll('.pixel');
+ pixels.forEach((pixel) => {
+ pixel.style.backgroundColor='rgb(255,255,255)';});
+}
+
+function inpcolor(e){ //Function that changes the selected color.
+ selectedcolor = e.target.value;
+}
+
+function submitfun(){ //function that gets called when you press the submit button to change the canvas size.
+
+ sizeinp=document.getElementById('size');
+ textsize = sizeinp.value;
+ let textarray= textsize.split("x");
+ x=parseInt(textarray[0]);
+ y=parseInt(textarray[0]);
+ if(x>150){x=150;
+ y=150;}
+ boxsize=1/x*100;
+
+ removegridelements(box); //update canvas with new sizes.
+ CreateGrid();
+ clearscr();
+}
+
+function gridbuttonfun(e){ //function that turns the pixels grid on and off.s
+ if (e.target.innerHTML == "Grid:On"){
+ const pixels = document.querySelectorAll('.pixel');
+ pixels.forEach((pixel) => {
+ pixel.style.outline='none';
+ e.target.innerHTML = "Grid:Off"});}
+ else if (e.target.innerHTML=="Grid:Off"){
+ const pixels = document.querySelectorAll('.pixel');
+ pixels.forEach((pixel) => {
+ pixel.style.outline='1px solid grey';
+ e.target.innerHTML = "Grid:On"});
+ }
+}
+
+function createpng(){ //function that creates a png image of the canvas.
+
+ const pixelarray=document.getElementsByClassName("pixel");
+ var p = new PNGlib(x, x, 256);
+
+ for (var i = 0; i < x; i++){
+ for (var j = 0; j < x; j++){
+ var getpix = pixelarray[j*x+i];
+ var colorpix=getpix.style.backgroundColor.split('rgb(');
+ colorpix=colorpix[1];
+ var colorarray= (colorpix).split(',');
+ p.buffer[p.index(i, j)] = p.color(parseInt(colorarray[0]),parseInt(colorarray[1]),parseInt(colorarray[2]));}
+ }
+ document.write(' click to download ');
+}
+
+
+function fillbackground(){ //function that changes every pixel in the canvas into the selected color.
+ const pixels = document.querySelectorAll('.pixel');
+ pixels.forEach((pixel) => {
+ pixel.style.backgroundColor=selectedcolor;});
+}
+
+function removegridelements(e){ //function that removes all the pixels of the canvas.
+ while (e.firstChild) {
+ e.removeChild(e.firstChild);
+ }
+}
+
+
+function changeColor(e) { //function that changes the color of a pixel.
+
+ if (e.type === 'mouseover' && !mousedown) return
+
+ e.target.style.backgroundColor = selectedcolor;
+
+ }
+
+function CreateGrid(){ //function that creates the pixel in the canvas.
+
+for (let i=0;i