Login

Forgot Password

Dont have an account? Register

* { margin: 0 auto; padding: 0; list-style: none; text-decoration: none; box-sizing: border-box; font-family: "Google Sans Regular"; scroll-behavior: smooth; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background: url("background.jpg") no-repeat; background-size: cover; background-position: center; } header { position: fixed; top: 0; left: 0; width: 100%; height: 80px; display: flex; align-items: center; justify-content: space-between; padding: 0 100px; } .logo { font-size: 1.8em; color: white; font-weight: bold; user-select: none; } .nav-bar ul { display: flex; } .nav-bar ul li a { position: relative; border-radius: 50px; display: block; font-size: 1.3em; color: white; text-decoration: none; font-weight: 500; margin-left: 20px; padding: 0.5em; transition: 0.2s; } .nav-bar ul li a::after { content: ''; position: absolute; left: 0; bottom: -6px; width: 100%; height: 3px; background: white; border-radius: 5px; transform-origin: right; transform: scaleX(0); transition: transform .5s; } .nav-bar ul li a:hover::after { transform: scaleX(1); transform-origin: left; } .nav-bar .btn-login { color: #333; background: white; } .nav-bar .btn-login { background: white; color: #162938; } .wrapper{ width: 420px; background: transparent; border: 2px solid rgba(255, 255, 255, .2); backdrop-filter: blur(9px); color: #fff; border-radius: 12px; padding: 30px 40px; } .wrapper h1{ font-size: 36px; text-align: center; } .wrapper .input-box{ position: relative; width: 100%; height: 50px; margin: 30px 0; } .input-box input{ width: 100%; height: 100%; background: transparent; border: none; outline: none; border: 2px solid rgba(255, 255, 255, .2); border-radius: 40px; font-size: 16px; color: #fff; padding: 20px 45px 20px 20px; } .input-box input::placeholder{ color: #fff; } .input-box i{ position: absolute; right: 20px; top: 30%; transform: translate(-50%); font-size: 20px; } .wrapper .remember-forgot{ display: flex; justify-content: space-between; font-size: 14.5px; margin: -15px 0 15px; } .remember-forgot label input{ accent-color: #fff; margin-right: 3px; } .remember-forgot a{ color: #fff; text-decoration: none; } .remember-forgot a:hover{ text-decoration: underline; } .wrapper .btn{ width: 100%; height: 45px; background: #fff; border: none; outline: none; border-radius: 40px; box-shadow: 0 0 10px rgba(0, 0, 0, .1); cursor: pointer; font-size: 16px; color: #333; font-weight: 600; } .wrapper .register-link{ font-size: 14.5px; text-align: center; margin: 20px 0 15px; } .register-link p a{ color: #fff; text-decoration: none; font-weight: 600; } .register-link p a:hover{ text-decoration: underline; } var kAd="admin"; var sifre="123"; function girisKontrolu(gelenKad,gelenSifre) { if (gelenKad === kAd && gelenSifre === sifre) { alert("Giriş Basarili"); return true; } else if (gelenKad !== kAd && gelenSifre === sifre){ alert("Kullanici adi yanliş"); } else if (gelenKad === kAd && gelenSifre !== sifre){ alert("Sifre yanliş"); } else{ alert("Kullanici adi ve sifre yanliş!"); } return false; }