WEBLEB
Home
AI Editor
Login
Pro
English
English
Français
Español
seccon home with colorful background
491
sergioarmijo30
Open In Editor
Publish Your Code
0
Recommended
15 August 2025
HTML Drawing Tablet Code with Javascript
8 November 2023
404 Page Not Found with CSS
19 January 2026
Flickr Letter Art Generator (Spell with Photos)
HTML
Copy
Sxrgxx
User Login
Username
Password
Sign in
Forgot password?
CSS
Copy
@import url("https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap"); :root { --space-root: 1rem; --space-xs: calc(var(--space-root) / 2); --space-s: calc(var(--space-root) / 1.5); --space-m: var(--space-root); --space-l: calc(var(--space-root) * 1.5); --space-xl: calc(var(--space-root) * 2); --color-primary: rgba(229, 122, 55, 0.408); --color-secondary: rgb(216, 244, 59); --color-tertiary: rgba(117, 131, 126, 0.219); --base-border-radius: 0.25rem; --ease: cubic-bezier(0.075, 0.82, 0.165, 1); --duration: 350ms; --font-family: "Roboto", sans-serif; --font-size: 1.25rem; } * { box-sizing: border-box; } body { display: grid; place-items: center; margin: 0; height: 100vh; padding: var(--space-m); font-size: var(--font-size); font-family: var(--font-family); line-height: 1.2; background: linear-gradient( 135deg, #b0a196, #d4bbb0, #9d8e7b, #6b8e23 ); background-size: 400% 400%; animation: fondoOtono 12s ease infinite; } a { color: var(--color-primary); } a:focus { color: var(--color-secondary); } h2 { font-weight: 700; font-size: calc(var(--font-size) * 1.5); } @keyframes fondoOtono { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .form { position: relative; width: 100%; max-width: 450px; margin: 0 auto; transform: skewY(-5deg) translateY(10%) scale(0.94); transition: box-shadow var(--duration) var(--ease), transform var(--duration) var(--ease); } .form:before, .form:after { content: ""; position: absolute; pointer-events: none; background: linear-gradient( 120deg, #f1923f, #87aa41, #3b78868d, #a64e73, #5e4896, #2f71a3, #ffaebd ); background-size: 300% 300%; animation: coloresLineas 5s linear infinite; width: 25%; height: 100%; transition: transform var(--duration) var(--ease); } .form:before { top: 0; right: calc(100% - 1px); transform-origin: 100% 100%; transform: skewY(-35deg) scaleX(-1); z-index: -1; } .form:after { top: 0; left: calc(100% - 1px); transform-origin: 0 0; transform: skewY(-35deg) scaleX(-1); z-index: 2; } .form:hover, .form:focus-within { transform: scale(1.0001); box-shadow: 0 1rem 3rem rgba(255, 255, 255, 0.1); } .form:hover:before, .form:hover:after, .form:focus-within:before, .form:focus-within:after { transform: skewY(0); } .form:hover:before, .form:hover:after, .form:focus-within:before, .form:focus-within:after { background-color: rgba(18, 18, 18, 0.478); transform: skewY(0); } .form-inner { padding: var(--space-xl); background: linear-gradient( 120deg, #ff0080, #530658, #40e0d0, #8a2be2 ); background-size: 300% 300%; animation: colores 6s ease infinite; transition: background var(--duration) var(--ease); z-index: 1; } .form-inner > * + * { margin-top: var(--space-xl); } .input-wrapper:focus-within label { color: var(--color-secondary); } .input-wrapper:focus-within .icon { background-color: var(--color-secondary); } .input-wrapper:focus-within input { border-color: var(--color-secondary); } .input-wrapper + .input-wrapper { margin-top: var(--space-l); } .input-group { position: relative; } .input-group input { border-radius: var(--base-border-radius); padding-left: calc(var(--space-s) + 60px); } .input-group .icon { position: absolute; top: 0; left: 0; height: 100%; border-top-left-radius: var(--base-border-radius); border-bottom-left-radius: var(--base-border-radius); pointer-events: none; } label { font-size: calc(var(--font-size) / 1.65); font-weight: 700; text-transform: uppercase; letter-spacing: 0.065rem; display: block; margin-bottom: var(--space-xs); color: var(--color-primary); } .icon { display: flex; align-items: center; flex: 0 1 auto; padding: var(--space-m); background-color: var(--color-primary); } .icon svg { width: 1.25em; height: 1.25em; fill: white; pointer-events: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; transition: transform var(--duration) var(--ease); } input { flex: 1 1 0; width: 100%; outline: none; padding: var(--space-m); font-size: var(--font-size); font-family: var(--font-family); color: var(--color-secondary); border: 2px solid var(--color-primary); } input:focus { color: var(--color-primary); } .btn-group { display: flex; align-items: center; justify-content: space-between; } .btn-group > * + * { margin-left: var(--space-s); } .btn { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; outline: none; padding: var(--space-m) var(--space-l); cursor: pointer; border: 2px solid transparent; border-radius: var(--base-border-radius); } .btn--primary { font-size: calc(var(--font-size) / 1.65); font-weight: 700; text-transform: uppercase; letter-spacing: 0.065rem; background-color: var(--color-primary); border-color: var(--color-primary); color: white; } .btn--primary:focus { background-color: var(--color-secondary); border-color: var(--color-secondary); } .btn--text { font-size: calc(var(--font-size) / 1.5); padding: 0; } @keyframes colores { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .form:hover .form-inner, .form:focus-within .form-inner { background: rgba(18, 18, 18, 0.48); animation: none; } @keyframes coloresLineas { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */