Create change password page

pages/Change-Password.vue

 <template>
-  <div class="container">
-    <label for="old-password">Old password</label>
-    <input id="old-password" type="text">
-    <label for="new-password">New password</label>
-    <input id="new-password" type="text">
-    <label for="repeat-password">Repeat new password</label>
-    <input id="repeat-password" type="text">
-  </div>
+  <section class="password-section">
+    <div class="container">
+      <NuxtLink to="/" class="link-back">Change password</NuxtLink>
+      <label for="old-password">Old password</label>
+      <input id="old-password" type="password">
+      <label for="new-password">New password</label>
+      <input id="new-password" type="password">
+      <label for="repeat-password">Repeat new password</label>
+      <input id="repeat-password" type="password">
+      <button class="button">confirm</button>
+    </div>
+  </section>
 </template>
 
 <script>
-
+export default {
+  layout: 'settingLayout'
+}
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
+.password-section {
+  width: auto;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-shadow: 0 4px 7px #333;
 
+  input {
+    font-size: 1.2rem;
+    border: .5vh solid white;
+    border-radius: 3.5vh;
+    box-shadow: 0 5px 7px rgba(0, 0, 0, .4) inset,
+    0 3px 5px #555;
+    padding: .2vh 1.5vh .2vh 1.5vh;
+    background: transparent;
+    color: #004377;
+    width: min(300px, 75vw);
+  }
+  label {
+    width: min(270px, 66vw);
+    font-size: 1rem;
+    margin-top: 6%;
+    text-align: left;
+  }
+  button{
+    width: min(300px, 75vw);
+    height: 39px;
+    margin-top:10vh;
+  }
+}
 </style>