WEBLEB
Home
Editor
Login
Pro
English
English
Français
Español
Português
Deutsch
Italiano
हिंदी
HTML
CSS
JS
Andev Web
Andev
web
Inciar
@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@300&family=Poppins:wght@300&display=swap'); :root { --background: #1a1a2e; --color: #ffffff; --primary-color: #0f3460; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: "Poppins", sans-serif; background: var(--background); color: var(--color); letter-spacing: 1px; transition: background 0.2s ease; } a { text-decoration: none; color: var(--color); } h1 { font-size: 2.5rem; } .container { display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100vh; } .login-container { position: relative; width: 22.2rem; } .form-container { border: 1px solid hsla(0, 0%, 65%, 0.158); box-shadow: 0 0 36px 1px rgba(0, 0, 0, 0.2); border-radius: 10px; backdrop-filter: blur(20px); z-index: 99; padding: 2rem; } .login-container form input { display: block; padding: 14.5px; width: 100%; margin: 2rem 0; color: var(--color); outline: none; background-color: #9191911f; border: none; border-radius: 5px; font-weight: 500; letter-spacing: 0.8px; font-size: 15px; backdrop-filter: blur(15px); } .login-container form input:focus { box-shadow: 0 0 16px 1px rgba(0, 0, 0, 0.2); animation: wobble 0.3s ease-in; } .login-container form button { background-color: var(--primary-color); color: var(--color); display: block; padding: 13px; border-radius: 5px; outline: none; font-size: 18px; letter-spacing: 1.5px; font-weight: bold; width: 100%; cursor: pointer; margin-bottom: 2rem; transition: all 0.1s ease-in-out; border: none; } .login-container form button:hover { box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.15); transform: scale(1.02); } .circle { width: 8rem; height: 8rem; background: var(--primary-color); border-radius: 50%; position: absolute; } .illustration { position: absolute; top: -14%; right: -2px; width: 90%; } .circle-one { top: 0; left: 0; z-index: -1; transform: translate(-45%, -45%); } .circle-two { bottom: 0; right: 0; z-index: -1; transform: translate(45%, 45%); } .register-forget { margin: 1rem 0; display: flex; justify-content: space-between; } .opacity { opacity: 0.6; } .theme-btn-container { display: flex; justify-content: center; align-items: center; margin-top: 2rem; padding: 1rem; background: #fff; border-radius: 10px; box-shadow: 0 0 36px 1px rgba(0, 0, 0, 0.1); } .theme-btn { cursor: pointer; transition: all 0.3s ease-in; margin: 0 5px; width: 25px; height: 25px; border-radius: 50%; } .theme-btn:hover { width: 40px !important; } @keyframes wobble { 0% { transform: scale(1.025); } 25% { transform: scale(1); } 75% { transform: scale(1.025); } 100% { transform: scale(1); } }
const themes = [ { background: "#1A1A2E", color: "#FFFFFF", primaryColor: "#0F3460" }, { background: "#461220", color: "#FFFFFF", primaryColor: "#E94560" }, { background: "#192A51", color: "#FFFFFF", primaryColor: "#967AA1" }, { background: "#F7B267", color: "#000000", primaryColor: "#F4845F" }, { background: "#F25F5C", color: "#000000", primaryColor: "#642B36" }, { background: "#231F20", color: "#FFF", primaryColor: "#BB4430" } ]; const setTheme = (theme) => { const root = document.querySelector(":root"); root.style.setProperty("--background", theme.background); root.style.setProperty("--color", theme.color); root.style.setProperty("--primary-color", theme.primaryColor); root.style.setProperty("--glass-color", theme.glassColor); }; const displayThemeButtons = () => { const btnContainer = document.querySelector(".theme-btn-container"); themes.forEach((theme) => { const div = document.createElement("div"); div.className = "theme-btn"; div.style.cssText = `background: ${theme.background}; width: 25px; height: 25px`; btnContainer.appendChild(div); div.addEventListener("click", () => setTheme(theme)); }); }; displayThemeButtons();
Validating your code, please wait...
HTML
CSS
JS
Andev Web
Andev
web
Inciar
@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@300&family=Poppins:wght@300&display=swap'); :root { --background: #1a1a2e; --color: #ffffff; --primary-color: #0f3460; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: "Poppins", sans-serif; background: var(--background); color: var(--color); letter-spacing: 1px; transition: background 0.2s ease; } a { text-decoration: none; color: var(--color); } h1 { font-size: 2.5rem; } .container { display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100vh; } .login-container { position: relative; width: 22.2rem; } .form-container { border: 1px solid hsla(0, 0%, 65%, 0.158); box-shadow: 0 0 36px 1px rgba(0, 0, 0, 0.2); border-radius: 10px; backdrop-filter: blur(20px); z-index: 99; padding: 2rem; } .login-container form input { display: block; padding: 14.5px; width: 100%; margin: 2rem 0; color: var(--color); outline: none; background-color: #9191911f; border: none; border-radius: 5px; font-weight: 500; letter-spacing: 0.8px; font-size: 15px; backdrop-filter: blur(15px); } .login-container form input:focus { box-shadow: 0 0 16px 1px rgba(0, 0, 0, 0.2); animation: wobble 0.3s ease-in; } .login-container form button { background-color: var(--primary-color); color: var(--color); display: block; padding: 13px; border-radius: 5px; outline: none; font-size: 18px; letter-spacing: 1.5px; font-weight: bold; width: 100%; cursor: pointer; margin-bottom: 2rem; transition: all 0.1s ease-in-out; border: none; } .login-container form button:hover { box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.15); transform: scale(1.02); } .circle { width: 8rem; height: 8rem; background: var(--primary-color); border-radius: 50%; position: absolute; } .illustration { position: absolute; top: -14%; right: -2px; width: 90%; } .circle-one { top: 0; left: 0; z-index: -1; transform: translate(-45%, -45%); } .circle-two { bottom: 0; right: 0; z-index: -1; transform: translate(45%, 45%); } .register-forget { margin: 1rem 0; display: flex; justify-content: space-between; } .opacity { opacity: 0.6; } .theme-btn-container { display: flex; justify-content: center; align-items: center; margin-top: 2rem; padding: 1rem; background: #fff; border-radius: 10px; box-shadow: 0 0 36px 1px rgba(0, 0, 0, 0.1); } .theme-btn { cursor: pointer; transition: all 0.3s ease-in; margin: 0 5px; width: 25px; height: 25px; border-radius: 50%; } .theme-btn:hover { width: 40px !important; } @keyframes wobble { 0% { transform: scale(1.025); } 25% { transform: scale(1); } 75% { transform: scale(1.025); } 100% { transform: scale(1); } }
const themes = [ { background: "#1A1A2E", color: "#FFFFFF", primaryColor: "#0F3460" }, { background: "#461220", color: "#FFFFFF", primaryColor: "#E94560" }, { background: "#192A51", color: "#FFFFFF", primaryColor: "#967AA1" }, { background: "#F7B267", color: "#000000", primaryColor: "#F4845F" }, { background: "#F25F5C", color: "#000000", primaryColor: "#642B36" }, { background: "#231F20", color: "#FFF", primaryColor: "#BB4430" } ]; const setTheme = (theme) => { const root = document.querySelector(":root"); root.style.setProperty("--background", theme.background); root.style.setProperty("--color", theme.color); root.style.setProperty("--primary-color", theme.primaryColor); root.style.setProperty("--glass-color", theme.glassColor); }; const displayThemeButtons = () => { const btnContainer = document.querySelector(".theme-btn-container"); themes.forEach((theme) => { const div = document.createElement("div"); div.className = "theme-btn"; div.style.cssText = `background: ${theme.background}; width: 25px; height: 25px`; btnContainer.appendChild(div); div.addEventListener("click", () => setTheme(theme)); }); }; displayThemeButtons();