diff --git a/index.html b/index.html
new file mode 100644
index 0000000..843633a
--- /dev/null
+++ b/index.html
@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>Passwort Sicherheits Check</title>
+        <link rel="stylesheet" type="text/css" href="style.css">
+    </head>
+    <body>
+        <div class="container">
+            <h2>Passwort Sicherheits Check</h2>
+                <div class="inputBox">
+                    <input type="password" placeholder="password"
+                    id="myPassword">
+                    <div class="show"></div>
+                </div>
+                <div class="strengthMeter"></div>
+        </div>
+
+        <script>
+            function Strength(password){
+                let i = 0;
+                if(password.length > 6){
+                    i++;
+                }
+                if(password.length >= 10){
+                    i++;
+                }
+                if(/[A-Z]/.test(password)){
+                    i++;
+                }
+                if(/[0-9]/.test(password)){
+                    i++;
+                }
+                if(/[A-Za-z0-8]/.test(password)){
+                    i++;
+                }
+                return i;
+            }
+
+            let container = document.querySelector('.container');
+            document.addEventListener("keyup", function(e){
+                let password = document.querySelector
+                ('#myPassword').value;
+
+                let strength = Strength(password);
+                if(strength <= 2){
+                    container.classList.add('weak');
+                    container.classList.remove('medium');
+                    container.classList.remove('strong');
+                } else if(strength >= 2 && strength <= 4){
+                    container.classList.remove('weak');
+                    container.classList.add('medium');
+                    container.classList.remove('strong');
+                } else {
+                    container.classList.remove('weak');
+                    container.classList.remove('medium');
+                    container.classList.add('strong');
+                }
+            })
+
+            let pswrd = document.querySelector('#myPassword');
+            let show = document.querySelector('.show');
+            show.onclick = function(){
+                if (pswrd.type === 'password'){
+                   pswrd.setAttribute('type', 'text');
+                   show.classList.add('hide');
+                }
+                else {
+                    pswrd.setAttribute('type', 'password');
+                    show.classList.remove('hide')
+                }
+            }
+        </script>
+    </body>
+</html>
\ No newline at end of file
diff --git a/pswd-1.PNG b/pswd-1.PNG
new file mode 100644
index 0000000..b8be5b3
Binary files /dev/null and b/pswd-1.PNG differ
diff --git a/pswd-2.PNG b/pswd-2.PNG
new file mode 100644
index 0000000..f2a9f16
Binary files /dev/null and b/pswd-2.PNG differ
diff --git a/pswd-3.PNG b/pswd-3.PNG
new file mode 100644
index 0000000..2209e07
Binary files /dev/null and b/pswd-3.PNG differ
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..369540a
--- /dev/null
+++ b/style.css
@@ -0,0 +1,139 @@
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap');
+*
+{
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: 'Poppins', sans-serif;
+}
+body
+{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 100vh;
+    background: #222;
+}
+.container
+{
+   position: relative;
+   width: 400px;
+   padding: 30px;
+   background: #333;
+   display: flex;
+   justify-content: center;
+   flex-direction: column;
+   border: 1px solid #111;
+   gap: 10px;
+   padding-bottom: 70px;
+   -webkit-box-reflect: below 1px linear-gradient(transparent,transparent, #0005);
+}
+.container h2
+{
+   color: #666;
+   font-weight: 500; 
+}
+.container .inputBox
+{
+    position: relative;
+    width: 100%;
+}
+.container .inputBox input
+{
+    position: relative;
+    width: 100%;
+    background: #222;
+    border: none;
+    outline: none;
+    padding: 10px;
+    color: #fff;
+    font-size: 1.1em;
+}
+.container .strengthMeter
+{
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 3px;
+    background: #222;
+}
+.container .strengthMeter::before
+{
+    content: '';
+    position: absolute;
+    width: 0%;
+    height: 100%;
+    transition: 0.5s;
+    background: #f00;
+}
+.container.weak .strengthMeter::before
+{
+    width: 10%;
+    background: #f00;
+    filter: drop-shadow(0 0 5px #f00) drop-shadow(0 0 10px #f00) drop-shadow(0 0 20px #f00);
+}
+.container.medium .strengthMeter::before
+{
+    width: 60.66%;
+    background: #ffa500;
+    filter: drop-shadow(0 0 5px #ffa500) drop-shadow(0 0 10px #ffa500) drop-shadow(0 0 20px #ffa500);
+}
+.container.strong .strengthMeter::before
+{
+    width: 100%;
+    background: #0f0;
+    filter: drop-shadow(0 0 5px #0f0) drop-shadow(0 0 10px #0f0) drop-shadow(0 0 20px #0f0);
+}
+.container .strengthMeter::after
+{
+    position: absolute;
+    top: -45px;
+    left: 30px;
+    color: #fff;
+    transition: 0.5s;
+}
+.container.weak .strengthMeter::after
+{
+    content: 'Das Passwort ist Schwach';
+    color: #f00;
+    filter: drop-shadow(0 0 5px #f00);
+}
+.container.medium .strengthMeter::after
+{
+    content: 'Das Passwort ist Gut';
+    color: #ffa500;
+    filter: drop-shadow(0 0 5px #ffa500);
+}
+.container.strong .strengthMeter::after
+{
+    content: 'Das Passwort ist Sicher';
+    color: #0f0;
+    filter: drop-shadow(0 0 5px #0f0);
+}
+.show
+{
+    position: absolute;
+    top: 0;
+    right: 0;
+    width: 60px;
+    height: 100%;
+    background: #333;
+    border: 6px solid #222;
+    cursor: pointer;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+.show::before
+{
+    content: 'show';
+    font-size: 0.6em;
+    color: #fff;
+    letter-spacing: 0.15em;
+    text-transform: uppercase;
+}
+.show.hide::before
+{
+    content: 'Hide';
+}
\ No newline at end of file
