<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Inter', -apple-system, sans-serif;
background: #0a0a0a;
color: #ffffff;
text-transform: lowercase;
padding: 40px 20px;
}
.container {
max-width: 1400px;
margin: 0 auto;
}
.search-header {
background: linear-gradient(135deg, rgba(156, 39, 176, 0.1) 0%, rgba(74, 20, 140, 0.05) 100%);
border: 1px solid rgba(156, 39, 176, 0.1);
border-radius: 16px;
padding: 48px;
margin-bottom: 32px;
text-align: center;
}
.search-title {
font-size: 32px;
font-weight: 600;
margin-bottom: 12px;
letter-spacing: -0.8px;
}
.search-subtitle {
font-size: 16px;
color: rgba(255, 255, 255, 0.6);
margin-bottom: 32px;
}
.search-input {
width: 100%;
max-width: 600px;
padding: 16px 24px;
font-size: 16px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 12px;
color: white;
outline: none;
}
.search-input:focus {
border-color: #9c27b0;
background: rgba(255, 255, 255, 0.08);
}
.filters-bar {
display: flex;
gap: 12px;
margin-bottom: 32px;
flex-wrap: wrap;
}
.filter-chip {
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
color: rgba(255, 255, 255, 0.8);
padding: 8px 16px;
border-radius: 24px;
font-size: 13px;
cursor: pointer;
transition: all 0.2s ease;
}
.filter-chip:hover, .filter-chip.active {
background: #9c27b0;
border-color: #9c27b0;
color: white;
}
.tracks-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 24px;
}
.track-card {
background: rgba(255, 255, 255, 0.02);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 12px;
overflow: hidden;
transition: all 0.3s ease;
cursor: pointer;
}
.track-card:hover {
transform: translateY(-2px);
border-color: rgba(156, 39, 176, 0.3);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}
.track-artwork {
height: 200px;
background: linear-gradient(135deg, #9c27b0 0%, #4a148c 100%);
display: flex;
align-items: center;
justify-content: center;
position: relative;
font-size: 48px;
}
.play-button {
position: absolute;
width: 56px;
height: 56px;
background: rgba(255, 255, 255, 0.95);
border: none;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
opacity: 0;
transition: all 0.3s ease;
color: #9c27b0;
font-size: 18px;
}
.track-card:hover .play-button {
opacity: 1;
}
.add-to-cart {
position: absolute;
bottom: 20px;
left: 20px;
right: 20px;
background: rgba(0, 0, 0, 0.9);
backdrop-filter: blur(10px);
border: 1px solid rgba(156, 39, 176, 0.3);
color: #9c27b0;
padding: 12px 20px;
border-radius: 8px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
opacity: 0;
transition: all 0.2s ease;
}
.track-card:hover .add-to-cart {
opacity: 1;
}
.add-to-cart:hover {
background: #9c27b0;
color: white;
}
.track-info {
padding: 20px;
}
.track-header {
display: flex;
justify-content: space-between;
margin-bottom: 8px;
}
.track-title {
font-size: 16px;
font-weight: 600;
}
.track-duration {
color: rgba(255, 255, 255, 0.5);
font-size: 13px;
}
.track-meta {
display: flex;
gap: 16px;
margin-bottom: 12px;
font-size: 13px;
}
.track-genre {
color: #9c27b0;
font-weight: 500;
}
.track-bpm {
color: rgba(255, 255, 255, 0.5);
}
.track-tags {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.tag {
background: rgba(255, 255, 255, 0.06);
color: rgba(255, 255, 255, 0.7);
padding: 4px 10px;
border-radius: 12px;
font-size: 11px;
}
</style>
</head>
<body>
<div class="container">
<!-- Search Header -->
<div class="search-header">
<h1 class="search-title">find your sound</h1>
<p class="search-subtitle">discover high-quality music for your creative projects</p>
<input type="text" class="search-input" placeholder="search by mood, genre, instrument, or keyword...">
</div>
<!-- Filters -->
<div class="filters-bar">
<div class="filter-chip active">all genres</div>
<div class="filter-chip">ambient</div>
<div class="filter-chip">electronic</div>
<div class="filter-chip">corporate</div>
<div class="filter-chip">hip-hop</div>
<div class="filter-chip">cinematic</div>
</div>
<!-- Track Grid -->
<div class="tracks-grid">
<!-- Track 1 -->
<div class="track-card">
<div class="track-artwork">
🎵
<button class="play-button">▶</button>
<button class="add-to-cart">add to cart</button>
</div>
<div class="track-info">
<div class="track-header">
<h3 class="track-title">ambient dreams</h3>
<span class="track-duration">3:24</span>
</div>
<div class="track-meta">
<span class="track-genre">ambient</span>
<span class="track-bpm">72 bpm</span>
</div>
<div class="track-tags">
<span class="tag">calm</span>
<span class="tag">ethereal</span>
<span class="tag">meditative</span>
</div>
</div>
</div>
<!-- Track 2 -->
<div class="track-card">
<div class="track-artwork">
🌙
<button class="play-button">▶</button>
<button class="add-to-cart">add to cart</button>
</div>
<div class="track-info">
<div class="track-header">
<h3 class="track-title">midnight reflections</h3>
<span class="track-duration">4:12</span>
</div>
<div class="track-meta">
<span class="track-genre">ambient</span>
<span class="track-bpm">65 bpm</span>
</div>
<div class="track-tags">
<span class="tag">dark</span>
<span class="tag">mysterious</span>
</div>
</div>
</div>
<!-- Track 3 -->
<div class="track-card">
<div class="track-artwork">
✨
<button class="play-button">▶</button>
<button class="add-to-cart">add to cart</button>
</div>
<div class="track-info">
<div class="track-header">
<h3 class="track-title">cosmic journey</h3>
<span class="track-duration">5:18</span>
</div>
<div class="track-meta">
<span class="track-genre">ambient</span>
<span class="track-bpm">68 bpm</span>
</div>
<div class="track-tags">
<span class="tag">spacey</span>
<span class="tag">cinematic</span>
</div>
</div>
</div>
<!-- Track 4 -->
<div class="track-card">
<div class="track-artwork">
🎸
<button class="play-button">▶</button>
<button class="add-to-cart">add to cart</button>
</div>
<div class="track-info">
<div class="track-header">
<h3 class="track-title">corporate energy</h3>
<span class="track-duration">2:45</span>
</div>
<div class="track-meta">
<span class="track-genre">corporate</span>
<span class="track-bpm">120 bpm</span>
</div>
<div class="track-tags">
<span class="tag">motivational</span>
<span class="tag">professional</span>
</div>
</div>
</div>
<!-- Track 5 -->
<div class="track-card">
<div class="track-artwork">
🥁
<button class="play-button">▶</button>
<button class="add-to-cart">add to cart</button>
</div>
<div class="track-info">
<div class="track-header">
<h3 class="track-title">urban beats</h3>
<span class="track-duration">2:18</span>
</div>
<div class="track-meta">
<span class="track-genre">hip-hop</span>
<span class="track-bpm">95 bpm</span>
</div>
<div class="track-tags">
<span class="tag">street</span>
<span class="tag">rhythmic</span>
</div>
</div>
</div>
<!-- Track 6 -->
<div class="track-card">
<div class="track-artwork">
🌊
<button class="play-button">▶</button>
<button class="add-to-cart">add to cart</button>
</div>
<div class="track-info">
<div class="track-header">
<h3 class="track-title">ocean waves</h3>
<span class="track-duration">2:45</span>
</div>
<div class="track-meta">
<span class="track-genre">ambient</span>
<span class="track-bpm">60 bpm</span>
</div>
<div class="track-tags">
<span class="tag">natural</span>
<span class="tag">peaceful</span>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
find your sound
discover high-quality music for your creative projects
ambient dreams
3:24midnight reflections
4:12cosmic journey
5:18corporate energy
2:45urban beats
2:18ocean waves
2:45your cart
review and checkout your selected tracks
your cart is empty
add tracks from the browse tab to get started
your playlist
organize tracks for your projects
your playlist is empty
add tracks to create your custom collection