Overshot — find the TikToks breaking out, and what they're selling

On-screen text

web-leb.com/en/code/1987 Login Username Enter your username Password Enter your password LOGIN Forgot Password? Sign Up Animated Neumorphism Login Screen 169 Neumorphism Open in Editor Recommended 14 May 2025 Gradient Login Form HTML CSS 9 September 2024 Animated Delete Button 26 February 2024 HTML CSS Login Form HTML Copy /* Leave empty if not needed */ --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Animated Neumorphism Login</title> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap" rel="stylesheet"> <style> /* Base Colors & Variables for Neumorphism */ :root { --bg-color: #e8e8e8; --card-color: #f0f0f0; --text-color: #333; --button-color: #8a2be2; --button-text-color: #fff; --shadow-dark: 10px 10px 20px #c5c5c5, -10px -10px 20px #ffffff; --shadow-light: inset 5px 5px 10px #c5c5c5, inset -5px -5px 10px #ffffff; } body { font-family: 'Poppins', sans-serif; background-color: var(--bg-color); display: flex; justify-content: center; align-items: center; min-height: 100vh; margin: 0; } .login-container { background-color: var(--card-color); padding: 40px; border-radius: 20px; box-shadow: var(--shadow-dark); text-align: center; width: 350px; } h1 { color: var(--text-color); margin-bottom: 30px; font-weight: 600; } .input-group { margin-bottom: 20px; text-align: left; } .input-group label { display: block; margin-bottom: 8px; color: var(--text-color); font-weight: 400; } .input-group input { width: calc(100% - 20px); padding: 15px; border: none; border-radius: 10px; background-color: var(--card-color); box-shadow: var(--shadow-light); color: var(--text-color); font-size: 16px; outline: none; } .input-group input::placeholder { color: #aaa; } button { width: 100%; padding: 15px; border: none; border-radius: 10px; background-color: var(--button-color); color: var(--button-text-color); font-size: 18px; font-weight: 600; cursor: pointer; box-shadow: var(--shadow-dark); transition: all 0.3s ease; } button:hover { box-shadow: inset var(--shadow-dark); } .options { margin-top: 20px; display: flex; justify-content: space-between; font-size: 14px; } .options a { color: var(--text-color); text-decoration: none; transition: color 0.3s ease; } .options a:hover { color: var(--button-color); } .options a.signup { font-weight: 600; } </style> </head> <body> <div class="login-container"> <h1>Login</h1> <div class="input-group"> <label for="username">Username</label> <input type="text" id="username" placeholder="Enter your username"> </div> <div class="input-group"> <label for="password">Password</label> <input type="password" id="password" placeholder="Enter your password"> </div> <button>LOGIN</button> <div class="options"> <a href="#">Forgot Password?</a> <a href="#" class="signup">Sign Up</a> </div> </div> </body> </html> CSS Copy /* Replace with your CSS Code (Leave empty if not needed) */ JS Copy /* Replace with your JS Code (Leave empty if not needed) */

Login

Selling · Other Product

Why it worked

Summary

Structure

Product placement

Original caption

More from @web_leb

On-screen text