Conecte-se

1095 kevekıbhack

Abrir no Editor Publique Seu Código

Recomendado

27 November 2024

Controle deslizante de imagem responsivo

25 August 2024

11 September 2025

Modelo de site HTML da Starbucks

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>

Conecte-se

Recomendado

Controle deslizante de imagem responsivo

Modelo de site HTML da Starbucks

HTML

CSS

JS

Recomendado

Controle deslizante de imagem responsivo

Modelo de site HTML da Starbucks

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS