| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Dark Masonry Grid UI</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
| <style> |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap'); |
| |
| body { |
| font-family: 'Inter', sans-serif; |
| background-color: #000; |
| } |
| |
| .masonry-grid { |
| column-count: 2; |
| column-gap: 16px; |
| padding: 16px; |
| } |
| |
| .masonry-item { |
| break-inside: avoid; |
| margin-bottom: 16px; |
| border-radius: 16px; |
| overflow: hidden; |
| box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); |
| position: relative; |
| } |
| |
| .card-image { |
| width: 100%; |
| height: auto; |
| display: block; |
| } |
| |
| .card-title { |
| position: absolute; |
| bottom: 12px; |
| left: 12px; |
| color: white; |
| font-weight: 700; |
| font-size: 14px; |
| text-transform: uppercase; |
| text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8); |
| } |
| |
| .badge { |
| position: absolute; |
| top: 12px; |
| padding: 4px 8px; |
| border-radius: 9999px; |
| font-size: 10px; |
| font-weight: 600; |
| text-transform: uppercase; |
| } |
| |
| .badge-left { |
| left: 12px; |
| } |
| |
| .badge-right { |
| right: 12px; |
| } |
| |
| .badge-purple { |
| background-color: rgba(124, 58, 237, 0.9); |
| color: white; |
| } |
| |
| .badge-white { |
| background-color: rgba(255, 255, 255, 0.9); |
| color: black; |
| } |
| |
| .button-container { |
| display: flex; |
| justify-content: space-between; |
| padding: 16px; |
| position: fixed; |
| bottom: 0; |
| left: 0; |
| right: 0; |
| background-color: rgba(0, 0, 0, 0.8); |
| } |
| |
| .button-dark { |
| background-color: rgba(30, 30, 30, 0.9); |
| color: white; |
| border-radius: 8px; |
| padding: 12px 16px; |
| display: flex; |
| align-items: center; |
| gap: 8px; |
| font-weight: 500; |
| } |
| |
| .button-light { |
| background-color: rgba(255, 255, 255, 0.9); |
| color: black; |
| border-radius: 8px; |
| padding: 12px 16px; |
| display: flex; |
| align-items: center; |
| gap: 8px; |
| font-weight: 500; |
| } |
| |
| |
| .item-1 { height: 220px; } |
| .item-2 { height: 180px; } |
| .item-3 { height: 240px; } |
| .item-4 { height: 200px; } |
| .item-5 { height: 260px; } |
| .item-6 { height: 190px; } |
| .item-7 { height: 230px; } |
| .item-8 { height: 210px; } |
| </style> |
| </head> |
| <body> |
| <div class="masonry-grid"> |
| |
| <div class="masonry-item item-1"> |
| <img src="https://source.unsplash.com/random/300x400/?cyberpunk" alt="Cyberpunk" class="card-image"> |
| <div class="badge badge-left badge-white"> |
| <i class="fas fa-crown"></i> TOP CHOICE |
| </div> |
| <div class="card-title">CYBERPUNK</div> |
| </div> |
| |
| |
| <div class="masonry-item item-2"> |
| <img src="https://source.unsplash.com/random/300x300/?glitch" alt="Glitch" class="card-image"> |
| <div class="badge badge-right badge-purple"> |
| MIXED |
| </div> |
| <div class="card-title">GLITCH</div> |
| </div> |
| |
| |
| <div class="masonry-item item-3"> |
| <img src="https://source.unsplash.com/random/300x450/?neon" alt="Neon Dreams" class="card-image"> |
| <div class="badge badge-right badge-white"> |
| NEW |
| </div> |
| <div class="card-title">NEON DREAMS</div> |
| </div> |
| |
| |
| <div class="masonry-item item-4"> |
| <img src="https://source.unsplash.com/random/300x350/?synthwave" alt="Synthwave" class="card-image"> |
| <div class="badge badge-left badge-white"> |
| COLLECTION |
| </div> |
| <div class="card-title">SYNTHWAVE</div> |
| </div> |
| |
| |
| <div class="masonry-item item-5"> |
| <img src="https://source.unsplash.com/random/300x500/?hologram" alt="Hologram" class="card-image"> |
| <div class="badge badge-right badge-white"> |
| NEW |
| </div> |
| <div class="card-title">HOLOGRAM</div> |
| </div> |
| |
| |
| <div class="masonry-item item-6"> |
| <img src="https://source.unsplash.com/random/300x320/?retro" alt="Retro" class="card-image"> |
| <div class="badge badge-left badge-purple"> |
| MIXED |
| </div> |
| <div class="card-title">RETRO FUTURE</div> |
| </div> |
| |
| |
| <div class="masonry-item item-7"> |
| <img src="https://source.unsplash.com/random/300x470/?vaporwave" alt="Vaporwave" class="card-image"> |
| <div class="badge badge-left badge-white"> |
| TOP CHOICE |
| </div> |
| <div class="card-title">VAPORWAVE</div> |
| </div> |
| |
| |
| <div class="masonry-item item-8"> |
| <img src="https://source.unsplash.com/random/300x380/?outrun" alt="Outrun" class="card-image"> |
| <div class="badge badge-right badge-white"> |
| COLLECTION |
| </div> |
| <div class="card-title">OUTRUN</div> |
| </div> |
| </div> |
| |
| <div class="button-container"> |
| <button class="button-dark"> |
| <i class="fas fa-camera"></i> Hide preview |
| </button> |
| <button class="button-light"> |
| <i class="fas fa-sync-alt"></i> Refresh Preview |
| </button> |
| </div> |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Marv12/oooop" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
