|
|
<!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> |
