Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Momentize ✨ - Capture Your Inspiration</title> | |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| 'pinterest-red': '#E60023', | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| .masonry-grid { | |
| column-count: 7; | |
| column-gap: 1rem; | |
| } | |
| .masonry-item { | |
| break-inside: avoid; | |
| margin-bottom: 1rem; | |
| } | |
| @media (max-width: 1536px) { | |
| .masonry-grid { column-count: 6; } | |
| } | |
| @media (max-width: 1280px) { | |
| .masonry-grid { column-count: 5; } | |
| } | |
| @media (max-width: 1024px) { | |
| .masonry-grid { column-count: 4; } | |
| } | |
| @media (max-width: 768px) { | |
| .masonry-grid { column-count: 3; } | |
| } | |
| @media (max-width: 640px) { | |
| .masonry-grid { column-count: 2; } | |
| } | |
| .pin-hover { | |
| transition: transform 0.2s ease; | |
| } | |
| .pin-hover:hover { | |
| transform: scale(1.02); | |
| } | |
| .search-input:focus { | |
| outline: none; | |
| box-shadow: 0 0 0 3px rgba(230, 0, 35, 0.1); | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-white text-black font-sans"> | |
| <!-- Navigation --> | |
| <nav class="fixed top-0 w-full bg-white z-50 shadow-sm"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex justify-between items-center h-16"> | |
| <div class="flex items-center"> | |
| <a href="#" class="flex-shrink-0"> | |
| <span class="text-pinterest-red font-bold text-2xl">P</span> | |
| </a> | |
| </div> | |
| <div class="hidden md:block flex-1 mx-8"> | |
| <div class="relative"> | |
| <input type="text" placeholder="Search" class="w-full bg-gray-100 rounded-full py-2 px-4 pl-10 search-input"> | |
| <i data-feather="search" class="absolute left-3 top-2.5 text-gray-500 w-5 h-5"></i> | |
| </div> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <a href="#" class="text-black hover:text-pinterest-red font-medium">Explore</a> | |
| <a href="#" class="text-black hover:text-pinterest-red font-medium">Shop</a> | |
| <a href="#" class="text-black hover:text-pinterest-red font-medium">About</a> | |
| <a href="#" class="text-black hover:text-pinterest-red font-medium">Business</a> | |
| <a href="#" class="bg-pinterest-red text-white px-4 py-2 rounded-full font-medium hover:bg-red-700">Create</a> | |
| <a href="#" class="text-black hover:text-pinterest-red font-medium">Log in</a> | |
| <a href="#" class="bg-gray-200 text-black px-4 py-2 rounded-full font-medium hover:bg-gray-300">Sign up</a> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section class="pt-20 pb-16 bg-gradient-to-b from-white to-gray-50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center"> | |
| <h1 class="text-5xl md:text-6xl font-bold mb-6">Pinspiration Paradise</h1> | |
| <p class="text-2xl md:text-3xl text-gray-700 mb-8">Get your next</p> | |
| <div class="flex flex-wrap justify-center gap-4 mb-12"> | |
| <span class="bg-gray-100 rounded-full px-6 py-3 text-lg font-medium">weeknight dinner idea</span> | |
| <span class="bg-gray-100 rounded-full px-6 py-3 text-lg font-medium">home decor idea</span> | |
| <span class="bg-gray-100 rounded-full px-6 py-3 text-lg font-medium">new look outfit</span> | |
| <span class="bg-gray-100 rounded-full px-6 py-3 text-lg font-medium">green thumb idea</span> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Masonry Grid --> | |
| <section class="py-8 px-4 sm:px-6 lg:px-8"> | |
| <div class="masonry-grid"> | |
| <!-- Generated pins from the provided images --> | |
| <div class="masonry-item pin-hover"> | |
| <img src="https://i.pinimg.com/236x/e3/41/4b/e3414b2fcf00375a199ba6964be551af.jpg" alt="Inspiration" class="w-full rounded-lg shadow-md"> | |
| </div> | |
| <div class="masonry-item pin-hover"> | |
| <img src="https://i.pinimg.com/236x/78/6e/00/786e00eab219eca59803d118fbe0feb3.jpg" alt="Inspiration" class="w-full rounded-lg shadow-md"> | |
| </div> | |
| <div class="masonry-item pin-hover"> | |
| <img src="https://i.pinimg.com/236x/3b/42/b0/3b42b02bf047097582b26401df90cdb3.jpg" alt="Inspiration" class="w-full rounded-lg shadow-md"> | |
| </div> | |
| <div class="masonry-item pin-hover"> | |
| <img src="https://i.pinimg.com/236x/de/13/6b/de136b极fa0037d3453a430895d8a5c27.jpg" alt="Inspiration" class="w-full rounded-lg shadow-md"> | |
| </div> | |
| <div class="masonry-item pin-hover"> | |
| <img src="https://i.pinimg.com/236x/15/bf/41/15bf41a80a0ffb41cc9d0fd98abed34b.jpg" alt="Inspiration" class="w-full rounded-lg shadow-md"> | |
| </div> | |
| <div class="masonry-item pin-hover"> | |
| <img src="https://i.pinimg.com/236x/c4/57/b极/c457bd9496170bfa3845b7cee775df65.jpg" alt="Inspiration" class="w-full rounded-lg shadow-md"> | |
| </div> | |
| <!-- Continue with all the provided images (repeating pattern for demonstration) --> | |
| <div class="masonry-item pin-hover"> | |
| <img src="https://i.pinimg.com/236x/05/65/20/05652045e57af33599557db9f23188c0.jpg" alt="Inspiration" class="w-full rounded-lg shadow-md"> | |
| </div> | |
| <div class="masonry-item pin极hover"> | |
| <img src="https://i.pinimg.com/236x/c5/83/53/c58353e15f32f3cbfc7cdcbcf0dc2f34--mango-coulis-m-sorry.jpg" alt="Inspiration" class="w-full rounded-lg shadow-md"> | |
| </div> | |
| <div class="masonry-item pin-hover"> | |
| <img src="https://i.pinimg.com/564x/94/43/b9/9443b93bd8773f极c91bc1837e8424e8e.jpg" alt="Inspiration" class="w-full rounded-lg shadow-md"> | |
| </div> | |
| <!-- Additional images would continue here in the same pattern --> | |
| </div> | |
| </section> | |
| <!-- Features Section --> | |
| <section class="py-16 bg-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4">Here's how it works</h2> | |
| <p class="text-xl text-gray-600 max-w-3xl mx-auto">Pinterest provides you with inspiration through a collage of images and videos from around the world to help bring your idea to life</p> | |
| </div> | |
| <div class="grid md:grid-cols-3 gap-12"> | |
| <div class="text-center"> | |
| <div class="mb-6"> | |
| <img src="https://s.pinimg.com/webapp/search-by-skin-tone-1x-8df69517.png" alt="Search by skin tone" class="mx-auto h-48 object-contain"> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-3">Search by skin tone</h3> | |
| <p class="text-gray-600 mb-4">Search with skin tone ranges for beauty ideas that represent you</p> | |
| <a href="#" class="text-pinterest-red font-medium hover:underline">Try now</a> | |
| </div> | |
| <div class="text-center"> | |
| <div class="mb-6"> | |
| <img src="https://s.pinimg.com/webapp/group-boards-1px-8b1a9ead.png" alt="Group boards" class="mx-auto h-48 object-contain"> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-3">Collaborate with group boards</h3> | |
| <p class="text-gray-600 mb-4">Visualize your ideas with others, using a Pinterest account</p> | |
| <a href="#" class="text-pinterest-red font-medium hover:underline">See an example</a> | |
| </div> | |
| <div class="text-center"> | |
| <div class="mb-6"> | |
| <img src="https://s.pinimg.com/webapp/visual-search-1px-9cc05cec.png" alt="Visual search" class="mx-auto h-48 object-contain"> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-3">Search visually with images</h3> | |
| <p class="text-gray-600 mb-4">Search objects within an image to find more styles you'll love</p> | |
| <a href="#" class="text-pinterest-red font-medium hover:underline">Learn more</a> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Sign Up Section --> | |
| <section class="py-16 bg-gray-50"> | |
| <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-6">Sign up to get your ideas</h2> | |
| <h3 class="text-2xl text-gray-700 mb-8">Welcome to Pinterest</h3> | |
| <p class="text-lg text-gray-600 mb-12">Find new ideas to try</p> | |
| <div class="bg-white rounded-xl shadow-lg p-8 max-w-md mx-auto"> | |
| <form class="space-y-6"> | |
| <div> | |
| <label for="email" class="block text-sm font-medium text-gray-700 mb-1">Email</label> | |
| <input type="email" id="email" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-pinterest-red focus:border-pinterest-red"> | |
| </div> | |
| <div> | |
| <label for="password" class="block text-sm font-medium text-gray-700 mb-1">Password</label> | |
| <input type="password" id="password" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-pinterest-red focus:border-pinterest-red"> | |
| <p class="text-xs text-gray-500 mt-1">Use 8 or more letters, numbers and symbols</p> | |
| </div> | |
| <div> | |
| <label for="birthdate" class="block text-sm font-medium text-gray-700 mb-1">Birthdate</label> | |
| <input type="date" id="birthdate" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-pinterest-red focus:border-pinterest-red"> | |
| </div> | |
| <button type="submit" class="w-full bg-pinterest-red text-white py-3 rounded-full font-medium hover:bg-red-700">Continue</button> | |
| <p class="text-xs text-gray-500 text-center"> | |
| By continuing, you agree to Pinterest's <a href="#" class="text-pinterest-red hover:underline">Terms of Service</a> and acknowledge you've read our <a href="#" class="text-pinterest-red hover:underline">Privacy Policy</a>. | |
| </p> | |
| <div class="pt-6 border-t border-gray-200"> | |
| <p class="text-sm text-gray-600">Already a member? <a href="#" class="text-pinterest-red font-medium hover:underline">Log in</a></p> | |
| </div> | |
| </form> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-white border-t border-gray-200 py-12"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> | |
| <div> | |
| <span class="text-pinterest-red font-bold text-2xl">P</span> | |
| <p class="text-gray-600 mt-2">Get the app</p> | |
| <div class="flex space-x-2 mt-4"> | |
| <a href="#" class="text-gray-600 hover:text-pinterest-red"> | |
| <i data-feather="smartphone" class="w-6 h-6"></i> iOS | |
| </a> | |
| <a href="#" class="text-gray-600 hover:text-pinterest-red"> | |
| <i data-feather="smartphone" class="w-6 h-6"></i> Android | |
| </a> | |
| </div> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold mb-4">Quick links</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-600 hover:text-pinterest-red">Explore</a></li> | |
| <li><a href="#" class="text-gray-600 hover:text-pinterest-red">Shop</a></li> | |
| <li><a href="#" class="text-gray-600 hover:text-pinterest-red">Users</a></li> | |
| <li><a href="#" class="text-gray-600 hover:text-pinterest-red">Collections</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold mb-4">Shopping</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-600 hover:text-pinterest-red">Help Center</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold mb-4">Policies</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-600 hover:text-pinterest-red">Terms of service</a></li> | |
| <li><a href="#" class="text-gray-极600 hover:text-pinterest-red">Privacy policy</a></li> | |
| <li><a href="#" class="text-gray-600 hover:text-pinterest-red">Non-user notice</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-200 mt-8 pt-8 text-center"> | |
| <p class="text-gray-600">© 2025 Momentize</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| feather.replace(); | |
| // Simple animation for the hero text | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const heroText = document.querySelector('h1'); | |
| heroText.style.opacity = '0'; | |
| heroText.style.transform = 'translateY(20px)'; | |
| setTimeout(() => { | |
| heroText.style.transition = 'opacity 1s ease, transform 1s ease'; | |
| heroText.style.opacity = '1'; | |
| heroText.style.transform = 'translateY(0)'; | |
| }, 100); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |