diff --git a/assets/images/hole.png b/assets/images/hole.png
new file mode 100644
index 0000000..9488020
Binary files /dev/null and b/assets/images/hole.png differ
diff --git a/assets/main.css b/assets/main.css
index 0485960..f8969b0 100644
--- a/assets/main.css
+++ b/assets/main.css
@@ -45,14 +45,21 @@ body{
    flex-grow: 3;
 }
 .hole{
-    height: 10vh;
-    width: 12vw;
-    background-color: maroon;
-    display: flex;
-    flex-direction: column-reverse;
-    align-self: center;
+    height: 100px;
+    width: 200px;
+    background-color: darkgreen;
+   background: url("/assets/images/hole.png") no-repeat  0 100px ;
+    animation-name: testmove;
+    animation-duration: 1s;
+    animation-iteration-count: 1;
+    animation-fill-mode: forwards;
+}
+@keyframes testmove {
+    from{
+        background-position: 0 100px;
+    }
+    to{
+        background-position: 0 0;
+    }
+
 }
-.hole-line{
-    height: 1vh;
-    background-color: gray;
-}
\ No newline at end of file
diff --git a/js/index.js b/js/index.js
index 82a33f9..80b2950 100644
--- a/js/index.js
+++ b/js/index.js
@@ -1,20 +1,10 @@
-const holeHeight = 12;
-const holeWidth = 10;
-const holeLineShift = 0.2;
 const startButton = document.querySelector('.btn-start');
 startButton.addEventListener('click', (e) =>{
     let holeObject = document.querySelector('.hole');
     fillHole(holeObject);
 })
 function fillHole(holeObject) {
-    let lineWidth = holeWidth;
-    for (let i = holeHeight; i > 0; i--) {
-        const line = document.createElement('span');
-        line.setAttribute('class', 'hole-line');
-        line.setAttribute('style', `width: ${lineWidth}vw`);
-        lineWidth -= holeLineShift;
-        holeObject.appendChild(line);
-    }
+
 }
 
 function test() {
diff --git a/remembers.txt b/remembers.txt
new file mode 100644
index 0000000..b59ad32
--- /dev/null
+++ b/remembers.txt
@@ -0,0 +1,2 @@
+create new branch from current.
+git checkout -b name-new-branch
\ No newline at end of file