APT di sicurezza

608 nantaphong200197

Apri nell'Editor Pubblica il Tuo Codice

Consigliato

10 May 2025

<!DOCTYPE html>
<html lang="th">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>หน้าเข้าสู่ระบบ</title>
    <link
      href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="./style.css" />
    <div id="credits">สร้างโดย pan4o</div>
  </head>
  <body>
    <div class="container">
      <form action="">
        <h1>เข้าสู่ระบบ</h1>

<div class="remember-forgot">
          <label><input type="checkbox" /> จำฉันไว้</label>
          <a href="#">ลืมรหัสผ่าน?</a>
        </div>

<div class="register-link">
          <p>ยังไม่มีบัญชี? <a href="#">สมัครสมาชิกที่นี่!</a></p>
        </div>
      </form>
    </div>
  </body>
</html>

CSS

/* ตั้งค่าพื้นฐาน */
* {
  font-family: sans-serif;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: url('https://www.example.com/background.jpg') no-repeat center center fixed; /* ใส่ URL รูปพื้นหลังที่คุณต้องการ */
  background-size: cover;
}

#credits {
  position: fixed;
  bottom: 10px;
  right: 10px;
  color: rgb(255, 255, 255);
  font-size: 12px;
  font-family: Arial, sans-serif;
}

/* สไตล์สำหรับคอนเทนเนอร์ */
.container {
  width: 420px;
  background: rgba(0, 0, 0, 0.6); /* พื้นหลังโปร่งใส */
  border: 2px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(18px);
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
  color: #fff;
  border-radius: 10px;
  padding: 30px 40px;
}

.container h1 {
  font-size: 36px;
  text-align: center;
  margin-bottom: 20px;
}

/* สไตล์สำหรับกล่องอินพุต */
.container .input-box {
  position: relative;
  width: 100%;
  height: 50px;
  margin: 30px 0px;
}

.input-box input {
  width: 100%;
  height: 100%;
  background: transparent;
  border: none;
  outline: none;
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: 5px;
  font-size: 16px;
  color: #fff;
  padding: 20px 45px 20px 20px;
}

.input-box input::placeholder {
  color: #fff;
}

/* สไตล์สำหรับไอคอนในอินพุต */
.input-box i {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 20px;
}

/* สไตล์สำหรับส่วนจำการเข้าสู่ระบบและลืมรหัส */
.container .remember-forgot {
  display: flex;
  justify-content: space-between;
  font-size: 14.5px;
  margin: -15px 0px 15px;
}

.remember-forgot label input {
  color: #fff;
  margin-right: 3px;
}

.remember-forgot a {
  color: #fff;
  text-decoration: none;
}

.remember-forgot a:hover {
  text-decoration: underline;
}

/* ปุ่มเข้าสู่ระบบ */
.container .btn {
  width: 100%;
  height: 45px;
  background: #fff;
  border: none;
  outline: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

/* สไตล์สำหรับการสมัครสมาชิก */
.container .register-link {
  font-size: 14.5px;
  text-align: center;
  margin: 20px 0px 15px;
}

.register-link p a {
  color: #fff;
  text-decoration: none;
  font-weight: 600;
}

.register-link p a:hover {
  text-decoration: underline;
}

APT di sicurezza

Consigliato

Un codice di jrj332790

Un codice di Mete

Pulsante Home di CodePen

HTML

CSS

JS

Consigliato

Un codice di jrj332790

Un codice di Mete

Pulsante Home di CodePen

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS