Se connecter

774 kevekıbhack

Ouvrir dans l'éditeur Publiez votre code

Recommandé

14 January 2025

Exemple de page Web de portfolio

29 November 2024

Un code par efficientapp58

14 July 2025

GESTION SCHOOL

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é

Exemple de page Web de portfolio

Un code par efficientapp58

GESTION SCHOOL

HTML

CSS

JS

Recommandé

Exemple de page Web de portfolio

Un code par efficientapp58

GESTION SCHOOL

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS