login_image

public/css/Login.css

+@import url('https://fonts.googleapis.com/css2?family=Sarabun:wght@500&display=swap');
+
+
+.split {
+    height: 100%;
+    width: 50%;
+    position: fixed;
+    z-index: 1;
+    top: 0;
+    overflow-x: hidden;
+    padding-top: 0px;
+  }
+
+  /* Control the left side */
+  .left {
+    left: 0;
+    background-color: #a3a2ff;
+  }
+
+  /* Control the right side */
+  .right {
+    right: 0;
+    background-color: rgb(255, 255, 255);
+  }
+
+  /* If you want the content centered horizontally and vertically */
+  .centered {
+    position: absolute;
+    top: 30%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    text-align: center;
+  }
+
+  /* Style the image inside the centered container, if needed */
+  .centered img {
+    width: 150px;
+    border-radius: 50%;
+  }
+  .img{
+    overflow:hidden;
+    width: 100%;
+    height: 100%;
+    max-height: 100%;
+    position: absolute;
+  }
+
+  .font{
+    font-family: 'Sarabun', sans-serif;
+    font-size: 15px;
+    padding: 10px;
+    text-align: left;
+  }
+  .login-position{
+    position: absolute;
+    top: 40%;
+    left: 50%;
+    text-align: center;
+    transform: translate(-50%);
+
+  }
+
+.div-between > * {
+    padding: 10px;
+}
+.button-register{
+    float:inherit;
+    font-family: 'Sarabun', serif;
+    color : #ffffff;
+    background-color: #3D7EFC;
+    border: none;
+    appearance: none;
+    border-radius: 6px;
+    box-shadow: rgba(27, 31, 35, 0.04) 0 1px 0, rgba(255, 255, 255, 0.25) 0 1px 0 inset;
+    box-sizing: border-box;
+    cursor: pointer;
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 20px;
+    list-style: none;
+    padding: 6px 16px;
+    position: relative;
+    transition: background-color 0.2s cubic-bezier(0.3, 0, 0.5, 1);
+    user-select: none;
+    -webkit-user-select: none;
+    touch-action: manipulation;
+    vertical-align: middle;
+    white-space: nowrap;
+    word-wrap: break-word;
+    width: 100%;
+    height: 100%;
+}
+.font:hover{
+    font-weight: #0B57A5;
+}
+.button-register:hover {
+    background-color: #89b0ff;
+}
+.button-register2:hover {
+    background-color: #3D7EFC;
+    color : #ffffff;
+}
+.button-resize{
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    padding: 10px 180px;
+    gap: 10px;
+
+    position: relative;
+    width: 10%;
+    height: 10%;
+
+background: #0B57A5;
+}
+.input-resize{
+    background-color: #EBEBEB;
+    border-radius: 5px;
+    border-color: #EBEBEB;
+    }