WEBLEB
Home
AI Editor
Login
Pro
English
English
Français
Español
Português
Deutsch
Italiano
हिंदी
seccon home with colorful background
158
sergioarmijo30
Open In Editor
Video
Publish Your Code
0
Recommended
16 July 2025
CSS Stage with Light Strings and Stairs
14 September 2024
Portfolio Carousel with Synchronized Sliders
12 December 2025
Retro Ping Pong Game JavaScript with Special Rounds
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) */