Login

Forgot Password

Dont have an account? Register

/* Genel stil ayarları */ * { margin: 0 auto; /* Tüm öğelerin dış kenar boşluğunu ortalar */ padding: 0; /* Tüm öğelerin iç kenar boşluğunu sıfırlar */ list-style: none; /* Liste öğelerinin işaretlerini kaldırır */ text-decoration: none; /* Metin bağlantılarındaki alt çizgiyi kaldırır */ box-sizing: border-box; /* Kutunun içeriğini, kenarlığını ve dolgusunu, toplam genişlik ve yüksekliği hesaplar */ font-family: "Google Sans Regular"; /* Metin fontunu belirler */ scroll-behavior: smooth; /* Sayfada yumuşak kaydırma efekti sağlar */ } /* Body stil ayarları */ body { display: flex; /* İçeriği yatay hizalar */ justify-content: center; /* İçeriği yatay eksende ortalar */ align-items: center; /* İçeriği dikey eksende ortalar */ min-height: 100vh; /* Minimum yükseklik belirler, tam pencere yüksekliği kadar genişler */ background: url("background.jpg") no-repeat; /* Arka plan resmi ekler ve tekrar etmesini engeller */ background-size: cover; /* Arka plan resminin ekran boyutuna uygun şekilde ölçeklenmesini sağlar */ background-position: center; /* Arka plan resminin ortalanmasını sağlar */ } /* Header stil ayarları */ header { position: fixed; /* Sayfa kaydırıldığında sabit durmasını sağlar */ top: 0; /* Sayfanın üst kısmına yaslanır */ left: 0; /* Sayfanın sol kısmına yaslanır */ width: 100%; /* Tam genişlik alır */ height: 80px; /* Yükseklik belirler */ display: flex; /* İçeriği yatay hizalar */ align-items: center; /* İçeriği dikey eksende ortalar */ justify-content: space-between; /* Öğeler arasında boşluk bırakır */ padding: 0 100px; /* Sol ve sağ kenar boşluğunu belirler */ } /* Logo stil ayarları */ .logo { font-size: 1.8em; /* Yazı tipi boyutu */ color: white; /* Metin rengi */ font-weight: bold; /* Metnin kalınlığını belirler */ user-select: none; /* Kullanıcı seçimini engeller */ } /* Navigasyon menüsü stil ayarları */ .nav-bar ul { display: flex; /* Liste öğelerini yatay hizalar */ } .nav-bar ul li a { position: relative; /* Göreceli konumlandırma sağlar */ border-radius: 50px; /* Kenar yuvarlanmasını sağlar */ display: block; /* Blok öğe olarak görüntüler */ font-size: 1.3em; /* Yazı tipi boyutu */ color: white; /* Metin rengi */ text-decoration: none; /* Metin bağlantılarının alt çizgisini kaldırır */ font-weight: 500; /* Metnin kalınlığını belirler */ margin-left: 20px; /* Sol kenar boşluğunu belirler */ padding: 0.5em; /* Dolgu miktarını belirler */ transition: 0.2s; /* Geçiş efekti süresini belirler */ } .nav-bar ul li a::after { content: ''; /* Ek içerik ekler */ position: absolute; /* Mutlak konumlandırma sağlar */ left: 0; /* Sol kenara yaslanır */ bottom: -6px; /* Alt kenara yakın konumlandırılır */ width: 100%; /* Tam genişlik alır */ height: 3px; /* Yükseklik belirler */ background: white; /* Arkaplan rengi */ border-radius: 5px; /* Kenar yuvarlanmasını sağlar */ transform-origin: right; /* Dönüşün kaynağını belirler */ transform: scaleX(0); /* Ölçeklendirme işlemi uygular */ transition: transform .5s; /* Geçiş efekti süresini belirler */ } .nav-bar ul li a:hover::after { transform: scaleX(1); /* Ölçeklendirme işlemi uygular */ transform-origin: left; /* Dönüşün kaynağını belirler */ } /* Giriş butonu stil ayarları */ .nav-bar .btn-login { color: #333; /* Metin rengi */ background: white; /* Arkaplan rengi */ } .nav-bar .btn-login { background: white; /* Arkaplan rengi */ color: #162938; /* Metin rengi */ } .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; } https://www.imghippo.com/i/pepiv1710222110.jpg