Webleb - HTML UI Elements - Um código de Mete

HTML

<!DOCTYPE html>

<head>

<title>Webleb - Giriş Yap</title>

<style>

body {

margin: 0;

padding: 0;

font-family: 'Roboto', sans-serif;

background: linear-gradient(to right, #2980b9, #2c3e50);

color: #ecf0f1;

display: flex;

justify-content: center;

align-items: center;

height: 100vh;

}

.login-container {

background-color: #34495e;

padding: 50px;

border-radius: 15px;

box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);

text-align: center;

width: 100%;

max-width: 400px;

}

.login-container h1 {

margin-bottom: 30px;

font-size: 28px;

color: #ecf0f1;

}

.input-group {

margin-bottom: 30px;

position: relative;

}

.input-group input {

width: 100%;

padding: 15px 10px;

background: #2c3e50;

border: none;

border-radius: 5px;

color: #ecf0f1;

font-size: 16px;

outline: none;

box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);

}

.input-group label {

position: absolute;

top: 50%;

left: 15px;

transform: translateY(-50%);

font-size: 16px;

color: #bdc3c7;

transition: 0.3s;

pointer-events: none;

}

.input-group input:focus ~ label,

.input-group input:not(:placeholder-shown) ~ label {

top: -10px;

left: 10px;

background-color: #34495e;

padding: 0 5px;

font-size: 14px;

color: #3498db;

}

.login-btn {

display: inline-block;

width: 100%;

padding: 15px;

margin-top: 20px;

background-color: #3498db;

border: none;

border-radius: 5px;

color: #fff;

font-size: 16px;

cursor: pointer;

transition: background-color 0.3s;

}

.login-btn:hover {

background-color: #2980b9;

}

.forgot-password {

display: block;

margin-top: 20px;

font-size: 14px;

color: #bdc3c7;

text-decoration: none;

transition: color 0.3s;

}

.forgot-password:hover {

color: #3498db;

}

</style>

</head>

<body>

<h1>Giriş Yap</h1>

<form>

<label for="username">Kullanıcı Adı</label>

</div>

<label for="password">Şifre</label>

</div>

<button class="login-btn" type="submit">Giriş Yap</button>

<a href="#" class="forgot-password">Şifremi Unuttum?</a>

</form>

</div>

</body>

</html>

CSS

/* HTML elemanının yüksekliği tam ekran olacak şekilde ayarlanır */

html {

min-height: 100%;

}

/* Body (gövde) için temel stil ayarları */

body {

margin: 0; /* Kenar boşlukları kaldırılır */

padding: 0; /* Dolgu boşlukları kaldırılır */

font-family: 'Open Sans', sans-serif; /* Yazı tipi Open Sans olarak ayarlanır */

background: radial-gradient(circle at top, #4b134f, #c94b4b); /* Dairesel arka plan geçişi */

display: flex; /* Flexbox kullanılarak içeriğin ortalanması sağlanır */

justify-content: center; /* Yatayda ortalanır */

align-items: center; /* Dikeyde ortalanır */

height: 100vh; /* Tam ekran yüksekliği */

}

/* Giriş kutusu için stil */

.login-container {

background: rgba(255, 255, 255, 0.1); /* Yarı saydam beyaz arka plan */

padding: 50px; /* İçerik boşlukları */

border-radius: 15px; /* Kenar köşeleri yuvarlatılır */

box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7); /* Derinlik efekti için gölge */

backdrop-filter: blur(10px); /* Arka plan bulanıklaştırılır */

text-align: center; /* Metin ortalanır */

width: 100%; /* Genişlik tam genişlikte */

max-width: 350px; /* Maksimum genişlik 350 piksel */

}

/* Giriş kutusunun başlığı */

.login-container h1 {

margin-bottom: 20px; /* Başlık ile içerik arası boşluk */

color: #ffffff; /* Yazı rengi beyaz */

font-size: 26px; /* Yazı boyutu */

text-transform: uppercase; /* Tüm metin büyük harfe çevrilir */

letter-spacing: 2px; /* Harf aralıkları genişletilir */

}

/* Kullanıcı giriş alanları için stil */

.input-wrapper {

position: relative; /* İlgili konumlandırma */

margin-bottom: 25px; /* Alt boşluk */

}

/* Kullanıcı giriş kutusunun stil ayarları */

.input-wrapper input {

width: 100%; /* Genişlik tam genişlikte */

padding: 12px; /* İçerik boşlukları */

background: transparent; /* Arka plan şeffaf */

border: 2px solid #ffffff; /* Beyaz kenar çizgisi */

border-radius: 5px; /* Kenar köşeleri yuvarlatılır */

color: #ffffff; /* Yazı rengi beyaz */

font-size: 16px; /* Yazı boyutu */

transition: border-color 0.3s ease; /* Kenar rengi geçiş efekti */

}

/* Giriş kutusu üzerine odaklanıldığında kenar rengi değişir */

.input-wrapper input:focus {

border-color: #c94b4b; /* Kırmızımsı kenar rengi */

outline: none; /* Varsayılan odak stilini kaldır */

}

/* Kullanıcı giriş kutusu etiketi için stil */

.input-wrapper label {

position: absolute; /* Mutlak konumlandırma */

top: -20px; /* Yukarıda yer alır */

left: 10px; /* Solda yer alır */

background-color: #4b134f; /* Etiket arka plan rengi */

padding: 0 5px; /* İçerik boşlukları */

color: #ffffff; /* Yazı rengi beyaz */

font-size: 14px; /* Yazı boyutu */

}

/* Giriş düğmesi için stil */

.login-button {

display: inline-block; /* Satır içi blok düzeyi */

width: 100%; /* Genişlik tam genişlikte */

padding: 12px; /* İçerik boşlukları */

background-color: #c94b4b; /* Düğme arka plan rengi */

border: none; /* Kenar çizgisi kaldırılır */

border-radius: 5px; /* Kenar köşeleri yuvarlatılır */

color: #ffffff; /* Yazı rengi beyaz */

font-size: 16px; /* Yazı boyutu */

cursor: pointer; /* Fare işaretçisi değişir */

text-transform: uppercase; /* Metin büyük harfe çevrilir */

transition: background-color 0.3s ease; /* Arka plan rengi geçiş efekti */

}

/* Giriş düğmesi üzerine gelindiğinde arka plan rengi değişir */

.login-button:hover {

background-color: #4b134f; /* Koyu mor arka plan rengi */

}

JS

// Kullanıcıya kopyalanacak içerik olmadığını bildiren fonksiyon

function içerikBulunamadı() {

// Dil seçeneklerine göre mesajlar

const mesajlar = {

tr: "Kopyalanacak içerik bulunamadı. Lütfen geçerli bir içerik olduğundan emin olun.",

en: "No content found to copy. Please ensure there is valid content.",

es: "No se encontró contenido para copiar. Asegúrate de que haya contenido válido.",

de: "Kein Inhalt zum Kopieren gefunden. Bitte stellen Sie sicher, dass gültiger Inhalt vorhanden ist."

};

// Kullanıcı dilini tespit et

const kullaniciDili = navigator.language.slice(0, 2); // Tarayıcı dilini alır, örneğin 'tr'

// Uygun mesajı seç

let mesaj = mesajlar[kullaniciDili] || mesajlar["en"]; // Dil desteklenmiyorsa varsayılan İngilizce mesaj

// Konsola mesajı yazdır

console.warn(mesaj); // Uyarı mesajı sarı olarak vurgulanır

// Ekranda bildirim göstermek için

let bildirim = document.createElement("div");

bildirim.style.position = "fixed";

bildirim.style.bottom = "20px";

bildirim.style.right = "20px";

bildirim.style.padding = "15px 30px";

bildirim.style.backgroundColor = "#f44336";

bildirim.style.color = "#fff";

bildirim.style.fontSize = "14px";

bildirim.style.borderRadius = "5px";

bildirim.style.boxShadow = "0 0 10px rgba(0, 0, 0, 0.1)";

bildirim.textContent = mesaj;

// Bildirimi body'ye ekle

document.body.appendChild(bildirim);

// 5 saniye sonra bildirimi kaldır

setTimeout(() => {

bildirim.style.opacity = "0";

setTimeout(() => {

document.body.removeChild(bildirim);

}, 600);

}, 5000);

}

// Fonksiyonu çalıştır

içerikBulunamadı();

Um código de Mete

Recomendado

Um código por pan4o

AQUI ESTÁ LISA

forma por

HTML

CSS

JS

Recomendado

Um código por pan4o

AQUI ESTÁ LISA

forma por

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS