Se connecter

1258 kevekıbhack

Ouvrir dans l'éditeur Video Publiez votre code

Recommandé

21 August 2024

Modèle de portfolio HTML créatif

24 February 2025

Un code par securearray494

18 June 2023

Formulaire de connexion simple

HTML

<!DOCTYPE html>

<head>

<title>Legend Master Floating Login</title>

<style>

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@500;700&display=swap');

body {

margin: 0;

padding: 0;

background: radial-gradient(circle at center, #0f0f0f 0%, #000000 100%);

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

display: flex;

justify-content: center;

align-items: center;

height: 100vh;

overflow: hidden;

perspective: 1000px;

}

.floating {

animation: float 6s ease-in-out infinite;

}

@keyframes float {

0% {

transform: translateY(0px) rotateY(10deg) rotateX(5deg);

}

50% {

transform: translateY(-15px) rotateY(0deg) rotateX(0deg);

}

100% {

transform: translateY(0px) rotateY(10deg) rotateX(5deg);

}

.login-container {

background: rgba(255, 255, 255, 0.05);

border: 1px solid rgba(255, 255, 255, 0.2);

box-shadow:

0 0 30px #0ff,

0 0 60px #0ff inset,

0 20px 50px rgba(0, 255, 255, 0.3);

backdrop-filter: blur(15px);

border-radius: 20px;

padding: 40px;

width: 350px;

transform-style: preserve-3d;

transition: transform 0.6s ease;

}

.login-container:hover {

transform: scale(1.05);

box-shadow:

0 0 40px #0ff,

0 0 80px #0ff inset,

0 25px 60px rgba(0, 255, 255, 0.5);

}

.login-container legend {

font-size: 2.4em;

font-weight: 700;

color: #0ff;

text-align: center;

margin-bottom: 25px;

text-shadow: 0 0 10px #0ff, 0 0 20px #0ff;

}

.login-container input {

width: 100%;

padding: 15px;

margin: 12px 0;

border: none;

border-radius: 10px;

background: rgba(0, 0, 0, 0.7);

color: #0ff;

font-size: 1em;

box-shadow: inset 0 0 8px #0ff;

transition: box-shadow 0.3s ease, background 0.3s ease;

}

.login-container input:focus {

outline: none;

box-shadow: inset 0 0 15px #0ff, 0 0 10px #0ff;

background: rgba(0, 0, 0, 0.9);

}

.login-container button {

width: 100%;

padding: 15px;

border: none;

border-radius: 10px;

background: #0ff;

color: #000;

font-weight: 700;

font-size: 1.1em;

cursor: pointer;

transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;

box-shadow: 0 0 15px #0ff, 0 0 25px #0ff;

}

.login-container button:hover {

background: #00e6e6;

transform: scale(1.05);

box-shadow: 0 0 25px #0ff, 0 0 40px #0ff;

}

</style>

</head>

<body>

<legend>Legend Master Login</legend>

<button type="submit">Enter the Realm</button>

</fieldset>

</form>

</body>

</html>

Se connecter

Recommandé

Modèle de portfolio HTML créatif

Un code par securearray494

Formulaire de connexion simple

HTML

CSS

JS

Recommandé

Modèle de portfolio HTML créatif

Un code par securearray494

Formulaire de connexion simple

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS