diff --git a/index.html b/index.html
index 5aa1c90..c5e6297 100755
--- a/index.html
+++ b/index.html
@@ -10,18 +10,44 @@
             position: absolute;
             right: 0;
             top: 0;
-            width: 63%;
+            width: 67.1%;
             height:50%;
             font-size: 16px;
-        }
+            margin-left:32.4%;
+            margin-top:4%;
+          background-color:black; 
+
+           
+            
+        } 
+        p{ 
+    text-align: justify;
+    margin:5px 22px 0;
+}
+
         #submit {
-            margin-right: 19%;
+            margin-right: 27.1%; 
             position:absolute;
-            bottom:50%;
+            bottom:5%;
             right: 0;
+            margin-bottom: 39.9%;
+            
+            
+            
+            
         }
+        
+        #reset {
+         margin-right: 66.3%; 
+            position:absolute;
+            bottom:5%;
+            right: 0;
+            margin-bottom:39.9%;
+           }
+        
+        
         body {
-            background: grey none repeat scroll 0 0;
+            background: black none repeat scroll 0 0;
             bottom: 0;
             left: 0;
             position: absolute;
@@ -30,53 +56,378 @@
         }
         #filler{}
         #container{bottom: 0;
-            height: 100%;
+            height: 150%;
             left: 0;
-            position: relative;
+            position: fixed;
             right: 0;
             top: 0;
-            width: 100%;
-        }
-        #explanation{
-            width: 63%;
-            height: 30%;
-            margin: 0 auto;
-            background:white;
-            margin-bottom:2%;
-        }
-        header{
-            display: block;
-            margin: 2%;
-            text-align: center;
+            width: 70%;
+            margin-left:2%;
+            margin-top:6%;
+           
         }
 
+        
+        #hinstruction{
+            margin-left: 0%;
+            
+            
+/* 	margin: 1em 0 0.5em 0; */
+	font-weight: 600;
+	font-family: 'Titillium Web', sans-serif;
+	position: relative;  
+	font-size: 10px;
+	line-height: 40px;
+	padding: 15px 15px 15px 15%;
+	color: #355681;
+	box-shadow: 
+		inset 0 0 0 1px rgba(53,86,129, 0.4), 
+		inset 0 0 5px rgba(53,86,129, 0.5),
+		inset -285px 0 35px white;
+	border-radius: 0 0px 0 0px;
+	background: #fff url(../images/bartoszkosowski.jpg) no-repeat center left ;
+	width:257px;
+	text-shadow: 0px 2px 0px rgba(0, 0, 0, 0.3); 
+	
+	
+}
+        
+            }
+        
+        #houtput{
+            margin-left: 35%;
+            }
+            
+        #button {
+/*            background-color:#a8c4c0;  */
+background-color: "purple";
+         background: -moz-linear-gradient(top,  #a8c4c0 0%, #7aa5a2 100%); 
+     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a8c4c0), color-stop(100%,#7aa5a2)); 
+    background: -o-linear-gradient(top,  #a8c4c0 0%,#7aa5a2 100%); 
+     background: -ms-linear-gradient(top,  #a8c4c0 0%,#7aa5a2 100%); 
+     background: linear-gradient(top,  #a8c4c0 0%,#7aa5a2 100%);
+          border-top: 2px solid #5f6c4d;
+  border-right: 2px solid #000000;
+  border-bottom: 2px solid #000000;
+  border-left: 2px solid #5f6c4d;
+  width:120px; height: 35px;
+  font-size:0.9em;
+  font-weight: bold;
+                
+  cursor:pointer;
+  border-radius: 0px 0px 0px 0px;
+  margin: 50px 0 0 50px;
+/*  text-shadow: 0px 2px 0px rgba(0, 0, 0, 0.3);  */
+/*  background-image: url("picture/bluecurves.jpg");   */
+
+  
+ 
+}   
+ 
+        
+       #button:hover {
+  background-color:#89c403;
+  margin-top: 52px;
+     /*Shadow*/
+  -webkit-box-shadow: 0px 4px 0px rgba(0, 0, 0, 0.8);
+  -moz-box-shadow: 0px 4px 0px rgba(0, 0, 0, 0.8);
+  box-shadow: 0px 4px 0px rgba(0, 0, 0, 0.8);
+   
+  /*Gradient*/
+  background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4));
+  background-image: -moz-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4));
+  background-image: -o-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4));
+  background-image: -ms-linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4));
+  background-image: linear-gradient(bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4));
+}
+
+#header {
+background-image: url("picture/tt.jpg"); 
+   background-color:#404040 ;  
+    height:12.5%;
+    margin-top:-0.6%;
+    margin-left:-0.6%;
+    margin-right:-0.6%;
+    margin-bottom:-4.4%;
+    border-radius: 0px 0px 0px 0px;
+    font-size:50px;
+    text-shadow: 0px 2px 0px rgba(0, 0, 0, 0.3); 
+    
+}
+
+#footer {
+    background-color:#404040 ;  
+    height:7.9%;
+    margin-top:39.1%;
+    margin-left:-0.6%;
+    margin-right:-0.6%;
+    margin-bottom:0%;
+    border-radius: 0px 0px 0px 0px;
+    font-size:50px;
+    text-shadow: 0px 2px 0px rgba(0, 0, 0, 0.3); 
+    background-image: url("picture/tt.jpg"); 
+    
+}
+
+#sheader {
+     background-color:blue;
+        width:30%;
+    height:5%;
+    margin-left:33%;
+    margin-top:4.3%;
+    background-image: url("picture/bl.jpg");
+}
+#unittesting {
+    margin-left:15%;
+    margin-top:0%;
+}
+ #oheader {
+         margin-top:;
+    margin-bottom:;
+    margin-right:-50%;
+    margin-left:50%;
+    
+    }
+    
+ 
+
+
+
+.wrap {
+    width:324px;
+    height:49.4%;
+    margin:20px auto;
+    padding:20px;
+    border:1px solid #c2c0b8;
+    background-color:#fff;
+    -webkit-box-shadow:0 0 60px 10px rgba(0, 0, 0, .1) inset, 0 5px 0 -4px #fff, 0 5px 0 -3px #c2c0b8, 0 11px 0 -8px #fff, 0 11px 0 -7px #c2c0b8, 0 17px 0 -12px #fff, 0 17px 0 -11px #c2c0b8;
+    -moz-box-shadow:0 0 60px 10px rgba(0, 0, 0, .1) inset, 0 5px 0 -4px #fff, 0 5px 0 -3px #c2c0b8, 0 11px 0 -8px #fff, 0 11px 0 -7px #c2c0b8, 0 17px 0 -12px #fff, 0 17px 0 -11px #c2c0b8;
+   /* box-shadow:0 0 60px 10px rgba(0, 0, 0, .1) inset, 0 5px 0 -4px #fff, 0 5px 0 -3px #c2c0b8, 0 11px 0 -8px #fff, 0 11px 0 -7px #c2c0b8, 0 17px 0 -12px #fff, 0 17px 0 -11px #c2c0b8;*/
+     margin-bottom:5%;
+     margin-left: 99.5%;
+     margin-top:-60.7%;
+}
+
+h4 {  
+    background: #a8c4c0;
+    background: -moz-linear-gradient(top,  #a8c4c0 0%, #7aa5a2 100%);
+    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a8c4c0), color-stop(100%,#7aa5a2));
+    background: -webkit-linear-gradient(top,  #a8c4c0 0%,#7aa5a2 100%);
+    background: -o-linear-gradient(top,  #a8c4c0 0%,#7aa5a2 100%);
+    background: -ms-linear-gradient(top,  #a8c4c0 0%,#7aa5a2 100%);
+    background: linear-gradient(top,  #a8c4c0 0%,#7aa5a2 100%);
+    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a8c4c0', endColorstr='#7aa5a2',GradientType=0 );
+    
+    font-size: 20px;
+    font-weight: bold;
+    text-shadow: 1px 1px 3px rgba(0,0,0,0.3);
+    padding: 0 20px;  
+    line-height: 50px;
+    height: 50px;
+     
+    margin-left: 99.5%; 
+    margin-top: -61.5% ; 
+    position: relative;  
+    width: 340px;  
+    
+    box-shadow: 0px 3px 4px 0px rgba(0,0,0,0.3);
+    -moz-box-shadow: 0px 3px 4px 0px rgba(0,0,0,0.3);
+    -webkit-box-shadow: 0px 3px 4px 0px rgba(0,0,0,0.3);
+  
+    color: #3b3a3b;  
+    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
+    
+}  
+  
+h4:after {  
+    position: absolute; 
+    content: '';
+    width: 0; height: 0;  
+    line-height: 0;  
+    border-right: 15px solid transparent;  
+    border-top: 10px solid #729c9a;  
+    bottom: -10px;  
+    left: 0;  
+    margin-left:96%;
+    z-index: -1;
+}  
+
+h4:before {
+    content: '';
+   position: absolute;
+    top: 5px;
+    height: 39px;
+    border-top: 1px solid rgba(255,255,255,0.5);
+    border-bottom: 1px solid rgba(255,255,255,0.5);
+    width: 100%;
+    left: 0;
+}
+
+
+
+
+
+
+
+
+
+
+
+ 
+ .inst {  
+/*    background: #dad3cb;    */
+    margin: 20px auto;
+    display: block;
+    
+    min-height: 310px;
+    padding:20px;
+    font-size: 11px;
+    font-family: 'Open Sans', sans-serif;
+    color: #4A4A4A ;
+    text-align: center;
+    margin-bottom:2%;
+/*     margin-right:100%; */
+    margin-left:-2%;
+    margin-top:0.3%;
+    width: 30%;
+    height: 49.4%;
+    background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAIElEQVQYV2NkIAK8ffv2PyMR6hhGFeINJXDwgAhiwhIAIyslx2i5iywAAAAASUVORK5CYII=) repeat #fff;
+    
+    
+} 
+
+
+  
+h1 {  
+    background: #a8c4c0;
+    background: -moz-linear-gradient(top,  #a8c4c0 0%, #7aa5a2 100%);
+    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a8c4c0), color-stop(100%,#7aa5a2));
+    background: -webkit-linear-gradient(top,  #a8c4c0 0%,#7aa5a2 100%);
+    background: -o-linear-gradient(top,  #a8c4c0 0%,#7aa5a2 100%);
+    background: -ms-linear-gradient(top,  #a8c4c0 0%,#7aa5a2 100%);
+    background: linear-gradient(top,  #a8c4c0 0%,#7aa5a2 100%);
+    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a8c4c0', endColorstr='#7aa5a2',GradientType=0 );
+    
+    font-size: 20px;
+    font-weight: bold;
+    text-shadow: 1px 1px 3px rgba(0,0,0,0.3);
+    padding: 0 20px;  
+    line-height: 50px;
+    height: 50px;
+    margin-top: -1% ; 
+    margin-left: -35px;   
+    position: relative;  
+    width: 290px;  
+    
+    box-shadow: 0px 3px 4px 0px rgba(0,0,0,0.3);
+    -moz-box-shadow: 0px 3px 4px 0px rgba(0,0,0,0.3);
+    -webkit-box-shadow: 0px 3px 4px 0px rgba(0,0,0,0.3);
+  
+    color: #3b3a3b;  
+    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);  
+}  
+  
+h1:after {  
+    position: absolute; 
+    content: '';
+    width: 0; height: 0;  
+    line-height: 0;  
+    border-left: 15px solid transparent;  
+    border-top: 10px solid #729c9a;  
+    bottom: -10px;  
+    left: 0;  
+   
+    z-index: -1;
+}  
+
+h1:before {
+    content: '';
+   position: absolute;
+    top: 5px;
+    height: 39px;
+    border-top: 1px solid rgba(255,255,255,0.5);
+    border-bottom: 1px solid rgba(255,255,255,0.5);
+    width: 100%;
+    left: 0;
+}
+
+#sout {
+ margin-left : 40%;
+}
+
+
+ 
+ 
+ 
+ 
+ 
+ 
+          
+
+  
+       
     </style>
 </head>
 <body>
-<header>SuperAwesome unit testing thingy</header>
 
-<div id="explanation">Here will be the explanation</div>
 
+<div id="header">
+<img src="picture/logo.png">
+</div>
+
+<!--<img src="picture/hack2.png" style="width:200px; height:80px;" align="middle">-->
+<div id="sheader"><div id="unittesting"> <font color="white">Super awsome unit testing thingy</font></div></div>
+<div id="footer"></div>
 <div id="container">
+
 <div id="editor">public function sanitize($user_input) {
   $x = htmlspecialchars(trim($user_input));
   return "&lt;span title='".$x."'&gt;User input added as span title &lt;/span&gt;";
 }
 
     </div>
+    
+    <div class="inst">
+    <h1>Instructions</h1> 
+   <ul>
+   <li></li>
+   <li></li>
+   <li></li>
+   <li></li>
+   </ul>
+    
 
-    <div id="submit">
-        <input type="submit" value="Submit" onclick="execute()"
-               style="background-color: #bcc6ae;
-  border-top: 2px solid #5f6c4d;
-  border-right: 2px solid #000000;
-  border-bottom: 2px solid #000000;
-  border-left: 2px solid #5f6c4d;
-  width: 80px; height: 24px;
-  font-weight: bold;" />
-    </div>
 </div>
 
+   <div class="holder"> 
+
+    <div class="line_one"></div>
+    <div class="line_two"></div>
+
+</div>
+
+
+<div class="wrap">
+          
+       
+</div>
+<h4><div id="sout">Output</div></h4>
+</div>
+
+<div id="submit">
+    
+       <input type="submit" value=" Save & Submit" id="button" onclick="execute()"/>
+    
+`    </div>
+    
+    <div id="reset">
+    
+        <a href="index.html" style="text-decoration:none" > <input type="reset" id="button" value="Reset"  onclick="editor/index.html"/></a>
+
+  
+    </div>
+    
+
 <script src="ace-builds/src-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
 <script>
     var editor = ace.edit("editor");
diff --git a/index.html~ b/index.html~
new file mode 100755
index 0000000..a344546
--- /dev/null
+++ b/index.html~
@@ -0,0 +1,181 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title>ACE in Action</title>
+    <style type="text/css" media="screen">
+        #editor {
+            bottom: 0;
+            left: 0;
+            margin: 0 auto;
+            position: absolute;
+            right: 0;
+            top: 0;
+            width: 63%;
+            height:50%;
+            font-size: 16px;
+            margin-left:33%;
+            
+        }
+        #submit {
+            margin-right: 31%; 
+            position:absolute;
+            bottom:6%;
+            right: 0;
+            
+            
+            
+        }
+        
+        #reset {
+         margin-right: 40%; 
+            position:absolute;
+            bottom:6%;
+            right: 0;
+           }
+        
+        
+        body {
+            background: black none repeat scroll 0 0;
+            bottom: 0;
+            left: 0;
+            position: absolute;
+            right: 0;
+            top: 0;
+        }
+        #filler{}
+        #container{bottom: 0;
+            height: 150%;
+            left: 0;
+            position: fixed;
+            right: 0;
+            top: 0;
+            width: 70%;
+            margin-left:2%;
+            margin-top:6%;
+           
+        }
+        #explanation{
+            width: 30%;
+            height: 50%;
+            margin: 0 auto;
+            background:white;
+            margin-bottom:2%;
+            margin-right:2%;
+            margin-left:69%;
+             margin-top:4%;
+            
+            border-radius: 0px 0px 0px 0px;
+            
+            
+        }
+        
+        #instruction{
+            width: 32%;
+            height: 50%;
+            margin: 0 auto;
+            background:white;
+            margin-bottom:2%;
+            margin-right:2%;
+            margin-left:1%;
+            filter: blur(strength=50);
+            border-radius: 0px 0px 0px 0px; 
+            
+        }
+        
+        #hinstruction{
+            margin-left: 20%;
+            }
+        
+        #houtput{
+            margin-left: 35%;
+            }
+        
+       
+    </style>
+</head>
+<body>
+
+
+
+*****<img src="picture/hack2.png" style="width:200px; height:80px;" align="middle">
+
+<div id="container">
+
+<div id="editor">public function sanitize($user_input) {
+  $x = htmlspecialchars(trim($user_input));
+  return "&lt;span title='".$x."'&gt;User input added as span title &lt;/span&gt;";
+}
+
+    </div>
+
+   
+   <div id="instruction"><div id="hinstruction"><strong><font size=5px">Instructions</font><strong></div></div> 
+</div>
+ 
+<div id="explanation"><div id="houtput"><strong><font size=5px">Output</font><strong></div></div>
+
+<div id="submit">
+        <input type="submit" value="Submit"  onclick="execute()"
+               style="background-color:#5B74A8;
+               
+  border-top: 2px solid #5f6c4d;
+  border-right: 2px solid #000000;
+  border-bottom: 2px solid #000000;
+  border-left: 2px solid #5f6c4d;
+  width: 90px; height: 30px;
+  font-size:0.9em;
+  font-weight: bold;
+  cursor:pointer;
+  border-radius: 0px 0px 0px 0px;" />
+  
+    </div>
+    
+    <div id="reset">
+        <a href="index.html" > <input type="reset" value="Reset"  onclick="editor/index.html"
+               style="background-color:#5B74A8;
+               
+  border-top: 2px solid #5f6c4d;
+  border-right: 2px solid #000000;
+  border-bottom: 2px solid #000000;
+  border-left: 2px solid #5f6c4d;
+  width: 90px; height: 30px;
+  font-size:0.9em;
+  font-weight: bold;
+  cursor:pointer;
+  border-radius: 0px 0px 0px 0px;" /></a>
+
+  
+    </div>
+    
+
+<script src="ace-builds/src-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
+<script>
+    var editor = ace.edit("editor");
+    editor.setTheme("ace/theme/monokai");
+    editor.getSession().setMode("ace/mode/javascript");
+    editor.getSession().setUseWrapMode(true);
+    editor.setHighlightActiveLine(true);
+    editor.getSession().setTabSize(4);
+    document.getElementById('editor').style.fontSize='16px';
+    editor.resize();
+
+    function execute() {
+        var http = new XMLHttpRequest();
+        var response = '';
+        http.open("POST", "test.php", true);
+        http.responseType = "text";
+        http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
+        http.onreadystatechange = function() {
+            if (http.readyState == 4 && http.status == 200) {
+                response = http.responseText;
+                document.getElementById("explanation").innerHTML = response;
+
+            }
+        };
+        http.send("function="+ editor.getValue());
+    }
+
+</script>
+
+</body>
+</html>
diff --git a/picture/bb.png b/picture/bb.png
new file mode 100644
index 0000000..556be0d
Binary files /dev/null and b/picture/bb.png differ
diff --git a/picture/bbr.jpg b/picture/bbr.jpg
new file mode 100644
index 0000000..d88b573
Binary files /dev/null and b/picture/bbr.jpg differ
diff --git a/picture/bl.jpg b/picture/bl.jpg
new file mode 100644
index 0000000..eeb6005
Binary files /dev/null and b/picture/bl.jpg differ
diff --git a/picture/bluecurves.jpg b/picture/bluecurves.jpg
new file mode 100644
index 0000000..cae5ac6
Binary files /dev/null and b/picture/bluecurves.jpg differ
diff --git a/picture/gt.jpg b/picture/gt.jpg
new file mode 100644
index 0000000..e732733
Binary files /dev/null and b/picture/gt.jpg differ
diff --git a/picture/ind.jpeg b/picture/ind.jpeg
new file mode 100644
index 0000000..b6fac82
Binary files /dev/null and b/picture/ind.jpeg differ
diff --git a/picture/logo.png b/picture/logo.png
new file mode 100644
index 0000000..2de0eec
Binary files /dev/null and b/picture/logo.png differ
diff --git a/picture/tt.jpg b/picture/tt.jpg
new file mode 100644
index 0000000..d1538ad
Binary files /dev/null and b/picture/tt.jpg differ
diff --git a/picture/vf.jpg b/picture/vf.jpg
new file mode 100644
index 0000000..058aa41
Binary files /dev/null and b/picture/vf.jpg differ