Webleb - fragmentos de código - Un código de Mete

HTML

<!DOCTYPE html>

<head>

<title>Small Bear Login Form</title>

<style>

* {

padding: 0;

margin: 0;

box-sizing: border-box;

font-family: sans-serif;

}

body {

background-color: #d8c2ef; /* Pastel mor arka plan */

height: 100vh;

display: flex;

align-items: center;

justify-content: center;

}

.container {

background-color: #ffffff;

position: relative;

width: 18em; /* Küçültüldü: 22em -> 18em */

height: 24em; /* Küçültüldü: 30em -> 24em */

border-radius: 0.8em;

box-shadow: 0 0.5em 2em rgba(0, 0, 0, 0.3);

display: flex;

align-items: center;

justify-content: center;

}

form {

position: absolute;

z-index: 2;

width: 15em; /* Küçültüldü: 18em -> 15em */

margin-top: 7em; /* Küçültüldü: 10em -> 7em */

}

label {

font-size: 0.85em; /* Küçültüldü: 0.9em -> 0.85em */

color: #544c4c;

font-weight: 600;

}

input {

width: 100%;

font-size: 0.85em; /* Küçültüldü: 0.9em -> 0.85em */

padding: 0.4em; /* Küçültüldü: 0.5em -> 0.4em */

border: none;

border-bottom: 2px solid #b4ac95;

margin-bottom: 0.8em; /* Küçültüldü: 1em -> 0.8em */

outline: none;

}

button {

width: 100%;

font-size: 0.9em; /* Küçültüldü: 1em -> 0.9em */

background-color: #663d17;

color: #ffffff;

border: none;

padding: 0.7em 0; /* Küçültüldü: 0.8em -> 0.7em */

border-radius: 0.3em;

margin-top: 0.8em; /* Küçültüldü: 1em -> 0.8em */

cursor: pointer;

}

button:hover {

background-color: #8b5a2b;

}

/* Bear Ears */

.ear-l,

.ear-r {

background-color: #8b5a2b;

height: 4em; /* Küçültüldü: 5em -> 4em */

width: 4em; /* Küçültüldü: 5em -> 4em */

border-radius: 50%;

position: absolute;

top: -1.2em; /* Küçültüldü: -1.5em -> -1.2em */

}

.ear-l {

left: 1.8em; /* Küçültüldü: 2em -> 1.8em */

}

.ear-r {

right: 1.8em; /* Küçültüldü: 2em -> 1.8em */

}

.ear-l:before,

.ear-r:before {

position: absolute;

content: "";

height: 2.4em; /* Küçültüldü: 3em -> 2.4em */

width: 2.4em; /* Küçültüldü: 3em -> 2.4em */

background-color: #d8b596;

border-radius: 50%;

top: 0.8em; /* Küçültüldü: 1em -> 0.8em */

}

.ear-l:before {

left: 0.8em; /* Küçültüldü: 1em -> 0.8em */

}

.ear-r:before {

right: 0.8em; /* Küçültüldü: 1em -> 0.8em */

}

/* Bear Face */

.bear-face {

position: absolute;

background-color: #8b5a2b;

height: 9.5em; /* Küçültüldü: 12em -> 9.5em */

width: 11em; /* Küçültüldü: 14em -> 11em */

border-radius: 50%;

top: -1.2em; /* Küçültüldü: -1.5em -> -1.2em */

display: flex;

flex-direction: column;

align-items: center;

justify-content: center;

}

/* Eyes */

.eye-l,

.eye-r {

background-color: #ffffff;

height: 2em; /* Küçültüldü: 2.5em -> 2em */

width: 1.8em; /* Küçültüldü: 2.3em -> 1.8em */

border-radius: 50%;

position: absolute;

top: 2em; /* Küçültüldü: 2.5em -> 2em */

}

.eye-l {

left: 2.4em; /* Küçültüldü: 3em -> 2.4em */

}

.eye-r {

right: 2.4em; /* Küçültüldü: 3em -> 2.4em */

}

.eyeball-l,

.eyeball-r {

background-color: #000000;

height: 0.8em; /* Küçültüldü: 1em -> 0.8em */

width: 0.8em; /* Küçültüldü: 1em -> 0.8em */

border-radius: 50%;

position: absolute;

top: 0.4em; /* Küçültüldü: 0.5em -> 0.4em */

}

.eyeball-l {

left: 0.4em; /* Küçültüldü: 0.5em -> 0.4em */

}

.eyeball-r {

right: 0.4em; /* Küçültüldü: 0.5em -> 0.4em */

}

/* Blush */

.blush-l,

.blush-r {

background-color: #e5a190;

height: 1em; /* Küçültüldü: 1.3em -> 1em */

width: 1em; /* Küçültüldü: 1.3em -> 1em */

border-radius: 50%;

position: absolute;

top: 4.5em; /* Küçültüldü: 6em -> 4.5em */

opacity: 0.7;

}

.blush-l {

left: 1.6em; /* Küçültüldü: 2em -> 1.6em */

}

.blush-r {

right: 1.6em; /* Küçültüldü: 2em -> 1.6em */

}

/* Snout */

.snout {

position: absolute;

background-color: #d8b596;

height: 4em; /* Küçültüldü: 5em -> 4em */

width: 5.5em; /* Küçültüldü: 7em -> 5.5em */

border-radius: 50%;

top: 4em; /* Küçültüldü: 5em -> 4em */

display: flex;

flex-direction: column;

align-items: center;

justify-content: center;

}

/* Nose */

.nose {

background-color: #000000;

height: 1em; /* Küçültüldü: 1.2em -> 1em */

width: 1.2em; /* Küçültüldü: 1.5em -> 1.2em */

border-radius: 50%;

position: relative;

top: 0.2em;

}

/* Mouth */

.mouth {

height: 0.6em; /* Küçültüldü: 0.8em -> 0.6em */

width: 1em; /* Küçültüldü: 1.3em -> 1em */

border-bottom: 0.25em solid #000000; /* Küçültüldü: 0.3em -> 0.25em */

border-radius: 50%;

position: relative;

top: 0.6em; /* Küçültüldü: 0.8em -> 0.6em */

}

/* Hands */

.hand-l,

.hand-r {

background-color: #8b5a2b;

height: 2.5em; /* Küçültüldü: 3em -> 2.5em */

width: 2.5em; /* Küçültüldü: 3em -> 2.5em */

border-radius: 50%;

position: absolute;

bottom: 3.5em; /* Küçültüldü: 4.5em -> 3.5em */

}

.hand-l {

left: -0.8em; /* Küçültüldü: -1em -> -0.8em */

transform: rotate(-35deg);

}

.hand-r {

right: -0.8em; /* Küçültüldü: -1em -> -0.8em */

transform: rotate(35deg);

}

/* Paws */

.paw-l,

.paw-r {

background-color: #8b5a2b;

height: 2.8em; /* Küçültüldü: 3.5em -> 2.8em */

width: 3.2em; /* Küçültüldü: 4em -> 3.2em */

border-radius: 50%;

position: absolute;

bottom: -0.8em; /* Küçültüldü: -1em -> -0.8em */

}

.paw-l {

left: 2.4em; /* Küçültüldü: 3em -> 2.4em */

}

.paw-r {

right: 2.4em; /* Küçültüldü: 3em -> 2.4em */

}

.paw-l:before,

.paw-r:before {

position: absolute;

content: "";

height: 1.6em; /* Küçültüldü: 2em -> 1.6em */

width: 1.6em; /* Küçültüldü: 2em -> 1.6em */

background-color: #d8b596;

border-radius: 50%;

bottom: 0.4em; /* Küçültüldü: 0.5em -> 0.4em */

}

.paw-l:before {

left: 0.8em; /* Küçültüldü: 1em -> 0.8em */

}

.paw-r:before {

right: 0.8em; /* Küçültüldü: 1em -> 0.8em */

}

/* Paw Fingers */

.paw-l:after,

.paw-r:after {

position: absolute;

content: "";

height: 0.25em; /* Küçültüldü: 0.3em -> 0.25em */

width: 1.6em; /* Küçültüldü: 2em -> 1.6em */

background-color: #000000;

border-radius: 0.1em;

bottom: 1em; /* Küçültüldü: 1.3em -> 1em */

}

.paw-l:after {

left: 0.8em; /* Küçültüldü: 1em -> 0.8em */

}

.paw-r:after {

right: 0.8em; /* Küçültüldü: 1em -> 0.8em */

}

</style>

</head>

<body>

<form>

<label for="username">Username:</label>

<label for="password">Password:</label>

<button>Login</button>

</form>

</div>

</div>

</div>

</div>

document.addEventListener("DOMContentLoaded", function() {

// Göz hareketlerini izleme

const container = document.querySelector(".container");

const eyeballL = document.querySelector(".eyeball-l");

const eyeballR = document.querySelector(".eyeball-r");

container.addEventListener("mousemove", (e) => {

const x = e.clientX;

const y = e.clientY;

const rect = container.getBoundingClientRect();

const centerX = rect.left + rect.width / 2;

const centerY = rect.top + rect.height / 2;

const angleX = (x - centerX) / 30;

const angleY = (y - centerY) / 30;

// Göz bebeklerinin hareketini sınırla

const maxMove = 0.4; // Küçültüldü: 0.5 -> 0.4

const moveX = Math.max(-maxMove, Math.min(maxMove, angleX));

const moveY = Math.max(-maxMove, Math.min(maxMove, angleY));

eyeballL.style.transform = `translate(${moveX}em, ${moveY}em)`;

eyeballR.style.transform = `translate(${moveX}em, ${moveY}em)`;

});

// Giriş butonu animasyonu

const loginButton = document.querySelector("button");

loginButton.addEventListener("mousedown", () => {

const handL = document.querySelector(".hand-l");

const handR = document.querySelector(".hand-r");

handL.style.transition = "all 0.3s ease";

handR.style.transition = "all 0.3s ease";

handL.style.transform = "rotate(-15deg) translateY(-0.8em)"; // Küçültüldü: -1em -> -0.8em

handR.style.transform = "rotate(15deg) translateY(-0.8em)"; // Küçültüldü: -1em -> -0.8em

setTimeout(() => {

handL.style.transform = "rotate(-35deg)";

handR.style.transform = "rotate(35deg)";

handL.style.transition = "all 0.5s ease";

handR.style.transition = "all 0.5s ease";

}, 300);

});

// Form gönderme olayını engelle (örnek amaçlı)

const form = document.querySelector("form");

form.addEventListener("submit", (e) => {

e.preventDefault();

const username = document.getElementById("username").value;

const password = document.getElementById("password").value;

if (username && password) {

alert("Giriş başarılı! (Bu sadece bir demo)");

} else {

alert("Lütfen kullanıcı adı ve şifre girin!");

}

});

</script>

</body>

</html>

Un código de Mete

Recomendado

Sitio web

Formulario de inicio de sesión HTML con estilo CSS neón

Error de contraseña rebotante

HTML

CSS

JS

Recomendado

Sitio web

Formulario de inicio de sesión HTML con estilo CSS neón

Error de contraseña rebotante

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS