Vintage Search Bar - MeggiTools
Run
Toggle Theme
Share Link
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Vintage Search Bar</title> <style> body { display: flex; justify-content: center; align-items: center; height: 100vh; background: linear-gradient(135deg, #f4e2d8, #ba5370); font-family: 'Georgia', serif; } .search-container { width: 400px; } .search-input { width: 100%; padding: 15px 20px; border: 2px solid #333; border-radius: 5px; background-color: #fff; font-size: 18px; outline: none; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); } </style> </head> <body> <div class="search-container"> <input type="text" class="search-input" placeholder="Vintage Search..."> </div> <script> document.querySelector('.search-input').addEventListener('keypress', (e) => { if (e.key === 'Enter') { alert(`Searching for: ${document.querySelector('.search-input').value}`); } }); </script> </body> </html>