diff --git a/ageselect.html b/ageselect.html
new file mode 100644
index 0000000..80eb7ce
--- /dev/null
+++ b/ageselect.html
@@ -0,0 +1,92 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Enter your age</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
+      rel="stylesheet"
+    />
+    <style>
+      * {
+        font-family: "Roboto", sans-serif;
+        box-sizing: border-box;
+      }
+      body,
+      html {
+        padding: 0;
+        margin: 0;
+        background-color: black;
+        height: 100%;
+      }
+
+      body {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      .main {
+        background-color: #222;
+        width: fit-content;
+        border-radius: 10px;
+        padding: 10px;
+        text-align: center;
+      }
+
+      h1,
+      h2 {
+        padding: 0;
+        margin: 0;
+        margin-bottom: 10px;
+        color: white;
+      }
+      input,
+      button {
+        width: 500px;
+        padding: 10px;
+        font-size: 20px;
+        border-radius: 10px;
+        outline: 0;
+        border: 0;
+        background-color: #333;
+        color: white;
+        transition-duration: 100ms;
+      }
+    </style>
+  </head>
+
+  <body>
+    <div class="main">
+      <h1>Select your age</h1>
+      <h2>0</h2>
+      <input
+        type="range"
+        name="age"
+        id="age"
+        value="0"
+        min="-1"
+        max="6969"
+        step="1"
+        oninput="document.querySelector('h2').innerHTML=(this.value)"
+      />
+      <br />
+      <button onclick="document.querySelector('input').style.width = '2000px'">
+        Make slider big
+      </button>
+      <br />
+      <br />
+      <button onclick="document.querySelector('input').style.width = '10px'">
+        Make slider small
+      </button>
+      <br />
+      <br />
+      <button onclick="document.querySelector('input').style.width = '500px'">
+        Reset
+      </button>
+    </div>
+  </body>
+</html>
diff --git a/cancelsubscription.html b/cancelsubscription.html
new file mode 100644
index 0000000..3cf8f49
--- /dev/null
+++ b/cancelsubscription.html
@@ -0,0 +1,85 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Your Subscription</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
+      rel="stylesheet"
+    />
+    <style>
+      * {
+        font-family: "Roboto", sans-serif;
+      }
+      body,
+      html {
+        padding: 0;
+        margin: 0;
+        background-color: black;
+        height: 100%;
+      }
+
+      body {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      .main {
+        background-color: #222;
+        width: 400px;
+        border-radius: 10px;
+        padding: 10px;
+      }
+
+      h1,
+      h2 {
+        padding: 0;
+        margin: 0;
+        margin-bottom: 10px;
+        color: white;
+      }
+      button {
+        width: 100%;
+        padding: 10px;
+        font-size: 20px;
+        border-radius: 10px;
+        outline: 0;
+        border: 0;
+        background-color: #333;
+        color: white;
+      }
+    </style>
+  </head>
+
+  <body>
+    <div class="main">
+      <h1>Premium plus pro</h1>
+      <h1>$6900000/month</h1>
+      <h2>Subscribed</h2>
+      <button onclick="cancel()">Cancel Subscription</button>
+    </div>
+  </body>
+  <script>
+    function cancel() {
+      document.querySelector(".main").innerHTML = `
+      <h1>Are you sure you would like to cancel your subscription</h1>
+      <button onclick="cancelcancel()" style="margin-bottom: 10px">Cancel</button>
+      <button onclick="cancelcancel()">Continue</button>
+      `;
+    }
+
+    function cancelcancel() {
+      document.querySelector(".main").innerHTML = `
+            <h1>Premium plus pro</h1>
+            <h1>$6900000/month</h1>
+            <h2>Subscribed</h2>
+            <button onclick="cancel()">Cancel Subscription</button>
+
+        `;
+    }
+  </script>
+</html>
diff --git a/cardnumber.html b/cardnumber.html
new file mode 100644
index 0000000..771cc86
--- /dev/null
+++ b/cardnumber.html
@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Enter card number</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
+      rel="stylesheet"
+    />
+    <style>
+      * {
+        font-family: "Roboto", sans-serif;
+        box-sizing: border-box;
+      }
+      body,
+      html {
+        padding: 0;
+        margin: 0;
+        background-color: black;
+        height: 100%;
+      }
+
+      body {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      .main {
+        background-color: #222;
+        width: fit-content;
+        border-radius: 10px;
+        padding: 10px;
+        text-align: center;
+      }
+
+      h1,
+      h2 {
+        padding: 0;
+        margin: 0;
+        margin-bottom: 10px;
+        color: white;
+      }
+      input,
+      button {
+        width: 500px;
+        padding: 10px;
+        font-size: 20px;
+        border-radius: 10px;
+        outline: 0;
+        border: 0;
+        background-color: #333;
+        color: white;
+        transition-duration: 100ms;
+      }
+    </style>
+  </head>
+
+  <body>
+    <div class="main">
+      <h1>To buy enter your card number</h1>
+      <h2>0</h2>
+      <input
+        type="range"
+        name="age"
+        id="age"
+        value="0"
+        min="0"
+        max="9999999999999999"
+        step="1"
+        oninput="document.querySelector('h2').innerHTML=(this.value)"
+      />
+
+  </body>
+</html>
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..8b13789
--- /dev/null
+++ b/index.html
@@ -0,0 +1 @@
+
diff --git a/yob.html b/yob.html
new file mode 100644
index 0000000..d9cc006
--- /dev/null
+++ b/yob.html
@@ -0,0 +1,80 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Enter your year of birth</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
+      rel="stylesheet"
+    />
+    <style>
+      * {
+        font-family: "Roboto", sans-serif;
+        box-sizing: border-box;
+      }
+      body,
+      html {
+        padding: 0;
+        margin: 0;
+        background-color: black;
+        height: 100%;
+      }
+
+      body {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+
+      .main {
+        background-color: #222;
+        width: fit-content;
+        border-radius: 10px;
+        padding: 10px;
+        text-align: center;
+      }
+
+      h1,
+      h2 {
+        padding: 0;
+        margin: 0;
+        margin-bottom: 10px;
+        color: white;
+      }
+      input,
+      button {
+        width: 500px;
+        padding: 10px;
+        font-size: 20px;
+        border-radius: 10px;
+        outline: 0;
+        border: 0;
+        background-color: #333;
+        color: white;
+        transition-duration: 100ms;
+      }
+    </style>
+  </head>
+
+  <body>
+    <div class="main">
+      <h1>Enter your year of birth</h1>
+      <select name="card" id="card"></select>
+    </div>
+    <script>
+      const shuffle = (array) => {
+        return array.sort(() => Math.random() - 0.5);
+      };
+      shuffle([...Array(3000).keys()]).forEach((element) => {
+        document.querySelector("select").innerHTML =
+          document.querySelector("select").innerHTML +
+          "<option>" +
+          element +
+          "</option>";
+      });
+    </script>
+  </body>
+</html>
