792 lines
26 KiB
HTML
792 lines
26 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>DAS - Music & Vibes ✨</title>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Nunito:wght@400;600;700;800&display=swap" rel="stylesheet">
|
|
<style>
|
|
:root {
|
|
--pink: #FF69B4;
|
|
--hot-pink: #FF1493;
|
|
--lavender: #DDA0DD;
|
|
--light-lavender: #E6E6FA;
|
|
--baby-blue: #89CFF0;
|
|
--coral: #FF7F7F;
|
|
--gold: #FFD700;
|
|
--cream: #FFF5EE;
|
|
--soft-pink: #FFD6E8;
|
|
--mint: #98FB98;
|
|
}
|
|
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html {
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
body {
|
|
font-family: 'Nunito', sans-serif;
|
|
background: linear-gradient(180deg, var(--light-lavender) 0%, var(--soft-pink) 30%, var(--baby-blue) 70%, var(--soft-pink) 100%);
|
|
background-attachment: fixed;
|
|
min-height: 100vh;
|
|
overflow-x: hidden;
|
|
color: #4a3f55;
|
|
}
|
|
|
|
.pixel-text {
|
|
font-family: 'Press Start 2P', cursive;
|
|
}
|
|
|
|
/* Pixel Clouds - Fixed floating */
|
|
.cloud {
|
|
position: fixed;
|
|
opacity: 0.85;
|
|
z-index: 1;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.cloud-1 { top: 8%; left: 3%; animation: floatCloud 25s ease-in-out infinite; }
|
|
.cloud-2 { top: 15%; right: 5%; animation: floatCloud 30s ease-in-out infinite reverse; }
|
|
.cloud-3 { top: 45%; left: 2%; animation: floatCloud 22s ease-in-out infinite 5s; }
|
|
.cloud-4 { top: 65%; right: 3%; animation: floatCloud 28s ease-in-out infinite 10s; }
|
|
.cloud-5 { top: 30%; right: 8%; animation: floatCloud 35s ease-in-out infinite 3s; }
|
|
.cloud-6 { top: 80%; left: 5%; animation: floatCloud 32s ease-in-out infinite 7s; }
|
|
|
|
@keyframes floatCloud {
|
|
0%, 100% { transform: translateX(0) translateY(0); }
|
|
25% { transform: translateX(20px) translateY(-10px); }
|
|
50% { transform: translateX(40px) translateY(0); }
|
|
75% { transform: translateX(20px) translateY(10px); }
|
|
}
|
|
|
|
/* Sparkles */
|
|
.sparkle {
|
|
position: fixed;
|
|
pointer-events: none;
|
|
z-index: 2;
|
|
}
|
|
|
|
.sparkle-1 { top: 12%; left: 25%; animation: twinkle 2s ease-in-out infinite; }
|
|
.sparkle-2 { top: 25%; right: 20%; animation: twinkle 2.5s ease-in-out infinite 0.5s; }
|
|
.sparkle-3 { top: 55%; left: 12%; animation: twinkle 1.8s ease-in-out infinite 1s; }
|
|
.sparkle-4 { top: 70%; right: 15%; animation: twinkle 2.2s ease-in-out infinite 1.5s; }
|
|
.sparkle-5 { top: 40%; left: 20%; animation: twinkle 3s ease-in-out infinite 0.3s; }
|
|
.sparkle-6 { top: 85%; right: 25%; animation: twinkle 2.8s ease-in-out infinite 0.8s; }
|
|
|
|
@keyframes twinkle {
|
|
0%, 100% { opacity: 0.3; transform: scale(0.8) rotate(0deg); }
|
|
50% { opacity: 1; transform: scale(1.2) rotate(180deg); }
|
|
}
|
|
|
|
/* Container */
|
|
.container {
|
|
max-width: 1100px;
|
|
margin: 0 auto;
|
|
padding: 20px;
|
|
position: relative;
|
|
z-index: 10;
|
|
}
|
|
|
|
/* Hero */
|
|
.hero {
|
|
text-align: center;
|
|
padding: 50px 20px 30px;
|
|
position: relative;
|
|
}
|
|
|
|
.hero-title {
|
|
font-size: 6rem;
|
|
font-weight: 800;
|
|
color: var(--hot-pink);
|
|
text-shadow:
|
|
4px 4px 0 var(--lavender),
|
|
8px 8px 0 rgba(221, 160, 221, 0.4),
|
|
0 0 60px rgba(255, 105, 180, 0.4);
|
|
letter-spacing: 12px;
|
|
margin-bottom: 5px;
|
|
animation: titleFloat 4s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes titleFloat {
|
|
0%, 100% { transform: translateY(0); }
|
|
50% { transform: translateY(-12px); }
|
|
}
|
|
|
|
.hero-tagline {
|
|
font-size: 0.9rem;
|
|
color: var(--lavender);
|
|
letter-spacing: 8px;
|
|
text-transform: uppercase;
|
|
margin-bottom: 25px;
|
|
}
|
|
|
|
/* Pixel Character */
|
|
.pixel-character {
|
|
margin: 15px auto 25px;
|
|
animation: bounce 1.2s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes bounce {
|
|
0%, 100% { transform: translateY(0); }
|
|
50% { transform: translateY(-18px); }
|
|
}
|
|
|
|
/* Navigation */
|
|
.nav-buttons {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 12px;
|
|
flex-wrap: wrap;
|
|
margin: 25px 0;
|
|
}
|
|
|
|
.nav-btn {
|
|
background: linear-gradient(180deg, #fff 0%, var(--soft-pink) 100%);
|
|
border: 4px solid var(--hot-pink);
|
|
border-radius: 16px;
|
|
padding: 14px 28px;
|
|
font-family: 'Press Start 2P', cursive;
|
|
font-size: 0.65rem;
|
|
color: var(--hot-pink);
|
|
cursor: pointer;
|
|
transition: all 0.15s;
|
|
box-shadow:
|
|
0 5px 0 var(--lavender),
|
|
0 8px 20px rgba(0,0,0,0.08);
|
|
text-decoration: none;
|
|
}
|
|
|
|
.nav-btn:hover {
|
|
transform: translateY(-3px);
|
|
box-shadow:
|
|
0 8px 0 var(--lavender),
|
|
0 12px 25px rgba(0,0,0,0.12);
|
|
}
|
|
|
|
.nav-btn:active {
|
|
transform: translateY(2px);
|
|
box-shadow: 0 2px 0 var(--lavender);
|
|
}
|
|
|
|
/* Game Panels */
|
|
.game-panel {
|
|
background: linear-gradient(180deg, rgba(255,255,255,0.97) 0%, rgba(255,250,250,0.97) 100%);
|
|
border: 5px solid var(--hot-pink);
|
|
border-radius: 25px;
|
|
padding: 35px;
|
|
margin: 35px 0;
|
|
position: relative;
|
|
box-shadow:
|
|
0 8px 0 var(--lavender),
|
|
0 12px 40px rgba(255,105,180,0.15),
|
|
inset 0 2px 0 rgba(255,255,255,0.9);
|
|
}
|
|
|
|
.game-panel::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: -5px;
|
|
left: 25px;
|
|
right: 25px;
|
|
height: 5px;
|
|
background: linear-gradient(90deg, var(--gold), var(--coral), var(--gold));
|
|
border-radius: 3px 3px 0 0;
|
|
}
|
|
|
|
.panel-title {
|
|
font-family: 'Press Start 2P', cursive;
|
|
font-size: 1rem;
|
|
color: var(--hot-pink);
|
|
text-align: center;
|
|
margin-bottom: 25px;
|
|
text-shadow: 2px 2px 0 var(--light-lavender);
|
|
line-height: 1.6;
|
|
}
|
|
|
|
/* Music Section */
|
|
.music-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
|
|
gap: 20px;
|
|
}
|
|
|
|
.track-card {
|
|
background: linear-gradient(145deg, var(--soft-pink) 0%, var(--light-lavender) 100%);
|
|
border: 4px solid var(--lavender);
|
|
border-radius: 18px;
|
|
padding: 22px;
|
|
text-align: center;
|
|
transition: all 0.25s;
|
|
cursor: pointer;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.track-card::after {
|
|
content: '▶';
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%) scale(0);
|
|
font-size: 2rem;
|
|
color: white;
|
|
background: var(--hot-pink);
|
|
width: 50px;
|
|
height: 50px;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
opacity: 0;
|
|
transition: all 0.3s;
|
|
padding-left: 4px;
|
|
}
|
|
|
|
.track-card:hover {
|
|
transform: translateY(-8px) scale(1.02);
|
|
box-shadow: 0 15px 35px rgba(255,105,180,0.25);
|
|
border-color: var(--hot-pink);
|
|
}
|
|
|
|
.track-card:hover::after {
|
|
transform: translate(-50%, -50%) scale(1);
|
|
opacity: 0.9;
|
|
}
|
|
|
|
.track-icon {
|
|
width: 70px;
|
|
height: 70px;
|
|
background: linear-gradient(135deg, var(--coral) 0%, var(--pink) 100%);
|
|
border-radius: 50%;
|
|
margin: 0 auto 12px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 1.6rem;
|
|
box-shadow:
|
|
0 4px 0 var(--hot-pink),
|
|
inset 0 -3px 0 rgba(0,0,0,0.1);
|
|
}
|
|
|
|
.track-title {
|
|
font-weight: 800;
|
|
font-size: 1rem;
|
|
color: var(--hot-pink);
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.track-album {
|
|
font-size: 0.7rem;
|
|
color: #888;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.track-type {
|
|
font-size: 0.65rem;
|
|
color: var(--lavender);
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
letter-spacing: 1px;
|
|
margin-top: 5px;
|
|
}
|
|
|
|
/* Streaming Buttons */
|
|
.stream-section {
|
|
margin-top: 30px;
|
|
text-align: center;
|
|
}
|
|
|
|
.stream-title {
|
|
font-family: 'Press Start 2P', cursive;
|
|
font-size: 0.7rem;
|
|
color: var(--lavender);
|
|
margin-bottom: 18px;
|
|
}
|
|
|
|
.stream-links {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 15px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.stream-btn {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
background: white;
|
|
border: 3px solid;
|
|
border-radius: 50px;
|
|
padding: 12px 22px;
|
|
font-weight: 700;
|
|
font-size: 0.9rem;
|
|
color: #333;
|
|
text-decoration: none;
|
|
transition: all 0.2s;
|
|
box-shadow: 0 4px 0 var(--lavender);
|
|
}
|
|
|
|
.stream-btn.spotify { border-color: #1DB954; }
|
|
.stream-btn.soundcloud { border-color: #FF5500; }
|
|
.stream-btn.apple { border-color: #FA243C; }
|
|
|
|
.stream-btn:hover {
|
|
transform: translateY(-3px);
|
|
box-shadow: 0 7px 0 var(--lavender);
|
|
}
|
|
|
|
.stream-btn:hover.spotify { background: #1DB954; color: white; }
|
|
.stream-btn:hover.soundcloud { background: #FF5500; color: white; }
|
|
.stream-btn:hover.apple { background: #FA243C; color: white; }
|
|
|
|
/* About Section */
|
|
.about-content {
|
|
display: grid;
|
|
grid-template-columns: 200px 1fr;
|
|
gap: 35px;
|
|
align-items: center;
|
|
}
|
|
|
|
@media (max-width: 700px) {
|
|
.about-content {
|
|
grid-template-columns: 1fr;
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
.about-avatar {
|
|
width: 180px;
|
|
height: 180px;
|
|
background: linear-gradient(135deg, var(--baby-blue) 0%, var(--lavender) 100%);
|
|
border: 5px solid var(--hot-pink);
|
|
border-radius: 25px;
|
|
margin: 0 auto;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
box-shadow:
|
|
0 6px 0 var(--lavender),
|
|
inset 0 3px 0 rgba(255,255,255,0.4);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.about-text {
|
|
font-size: 1.05rem;
|
|
line-height: 1.85;
|
|
color: #5a4a6a;
|
|
}
|
|
|
|
.about-text strong {
|
|
color: var(--hot-pink);
|
|
}
|
|
|
|
.about-text .highlight {
|
|
background: linear-gradient(180deg, transparent 60%, var(--soft-pink) 60%);
|
|
padding: 0 4px;
|
|
}
|
|
|
|
/* Discography */
|
|
.disco-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|
gap: 20px;
|
|
}
|
|
|
|
.album-card {
|
|
background: linear-gradient(180deg, white 0%, var(--cream) 100%);
|
|
border: 4px solid var(--baby-blue);
|
|
border-radius: 18px;
|
|
padding: 20px;
|
|
text-align: center;
|
|
transition: all 0.25s;
|
|
}
|
|
|
|
.album-card:hover {
|
|
transform: translateY(-5px);
|
|
border-color: var(--hot-pink);
|
|
box-shadow: 0 10px 25px rgba(255,105,180,0.2);
|
|
}
|
|
|
|
.album-cover {
|
|
width: 120px;
|
|
height: 120px;
|
|
background: linear-gradient(135deg, var(--soft-pink), var(--lavender), var(--baby-blue));
|
|
border-radius: 12px;
|
|
margin: 0 auto 12px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 2.5rem;
|
|
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
|
|
}
|
|
|
|
.album-title {
|
|
font-weight: 800;
|
|
color: var(--hot-pink);
|
|
margin-bottom: 3px;
|
|
}
|
|
|
|
.album-year {
|
|
font-size: 0.8rem;
|
|
color: #888;
|
|
}
|
|
|
|
/* Social Section */
|
|
.social-section {
|
|
text-align: center;
|
|
}
|
|
|
|
.social-links {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 18px;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.social-btn {
|
|
width: 55px;
|
|
height: 55px;
|
|
background: linear-gradient(135deg, var(--soft-pink) 0%, white 100%);
|
|
border: 4px solid var(--lavender);
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 1.4rem;
|
|
text-decoration: none;
|
|
transition: all 0.25s;
|
|
box-shadow: 0 4px 0 var(--hot-pink);
|
|
}
|
|
|
|
.social-btn:hover {
|
|
transform: translateY(-5px) rotate(15deg);
|
|
box-shadow: 0 8px 0 var(--hot-pink);
|
|
border-color: var(--hot-pink);
|
|
background: var(--hot-pink);
|
|
}
|
|
|
|
/* Footer */
|
|
footer {
|
|
text-align: center;
|
|
padding: 40px 20px 30px;
|
|
color: var(--lavender);
|
|
}
|
|
|
|
footer .pixel-text {
|
|
font-size: 0.55rem;
|
|
color: var(--hot-pink);
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
/* Responsive */
|
|
@media (max-width: 600px) {
|
|
.hero-title {
|
|
font-size: 3.5rem;
|
|
letter-spacing: 6px;
|
|
}
|
|
|
|
.nav-btn {
|
|
font-size: 0.55rem;
|
|
padding: 11px 18px;
|
|
}
|
|
|
|
.game-panel {
|
|
padding: 25px 18px;
|
|
margin: 25px 10px;
|
|
}
|
|
|
|
.panel-title {
|
|
font-size: 0.85rem;
|
|
}
|
|
|
|
.cloud { display: none; }
|
|
}
|
|
|
|
/* Click sparkle */
|
|
.click-sparkle {
|
|
position: fixed;
|
|
pointer-events: none;
|
|
z-index: 9999;
|
|
font-size: 20px;
|
|
animation: popSparkle 0.6s ease-out forwards;
|
|
}
|
|
|
|
@keyframes popSparkle {
|
|
0% { opacity: 1; transform: scale(1) translateY(0); }
|
|
100% { opacity: 0; transform: scale(0.5) translateY(-30px); }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<!-- Pixel Clouds -->
|
|
<svg class="cloud cloud-1" width="100" height="60" viewBox="0 0 50 30" style="image-rendering: pixelated;">
|
|
<rect x="10" y="15" width="5" height="5" fill="white"/><rect x="15" y="10" width="5" height="5" fill="white"/>
|
|
<rect x="20" y="5" width="5" height="5" fill="white"/><rect x="25" y="5" width="5" height="5" fill="white"/>
|
|
<rect x="30" y="10" width="5" height="5" fill="white"/><rect x="35" y="15" width="5" height="5" fill="white"/>
|
|
<rect x="15" y="15" width="20" height="10" fill="white"/><rect x="5" y="20" width="5" height="5" fill="white"/>
|
|
<rect x="40" y="20" width="5" height="5" fill="white"/><rect x="20" y="10" width="10" height="5" fill="#f8f8f8"/>
|
|
</svg>
|
|
<svg class="cloud cloud-2" width="120" height="72" viewBox="0 0 50 30" style="image-rendering: pixelated;">
|
|
<rect x="10" y="15" width="5" height="5" fill="white"/><rect x="15" y="10" width="5" height="5" fill="white"/>
|
|
<rect x="20" y="5" width="5" height="5" fill="white"/><rect x="25" y="5" width="5" height="5" fill="white"/>
|
|
<rect x="30" y="10" width="5" height="5" fill="white"/><rect x="35" y="15" width="5" height="5" fill="white"/>
|
|
<rect x="15" y="15" width="20" height="10" fill="white"/><rect x="5" y="20" width="5" height="5" fill="white"/>
|
|
<rect x="40" y="20" width="5" height="5" fill="white"/>
|
|
</svg>
|
|
<svg class="cloud cloud-3" width="80" height="48" viewBox="0 0 50 30" style="image-rendering: pixelated;">
|
|
<rect x="15" y="10" width="5" height="5" fill="white"/><rect x="20" y="5" width="10" height="5" fill="white"/>
|
|
<rect x="30" y="10" width="5" height="5" fill="white"/><rect x="15" y="15" width="20" height="10" fill="white"/>
|
|
</svg>
|
|
<svg class="cloud cloud-4" width="90" height="54" viewBox="0 0 50 30" style="image-rendering: pixelated;">
|
|
<rect x="10" y="15" width="5" height="5" fill="white"/><rect x="15" y="10" width="5" height="5" fill="white"/>
|
|
<rect x="20" y="5" width="5" height="5" fill="white"/><rect x="25" y="5" width="5" height="5" fill="white"/>
|
|
<rect x="30" y="10" width="5" height="5" fill="white"/><rect x="35" y="15" width="5" height="5" fill="white"/>
|
|
<rect x="15" y="15" width="20" height="10" fill="white"/>
|
|
</svg>
|
|
<svg class="cloud cloud-5" width="70" height="42" viewBox="0 0 50 30" style="image-rendering: pixelated;">
|
|
<rect x="15" y="12" width="5" height="5" fill="white"/><rect x="20" y="7" width="10" height="5" fill="white"/>
|
|
<rect x="30" y="12" width="5" height="5" fill="white"/><rect x="15" y="17" width="20" height="8" fill="white"/>
|
|
</svg>
|
|
<svg class="cloud cloud-6" width="85" height="51" viewBox="0 0 50 30" style="image-rendering: pixelated;">
|
|
<rect x="10" y="15" width="5" height="5" fill="white"/><rect x="15" y="10" width="5" height="5" fill="white"/>
|
|
<rect x="20" y="5" width="5" height="5" fill="white"/><rect x="25" y="5" width="5" height="5" fill="white"/>
|
|
<rect x="30" y="10" width="5" height="5" fill="white"/><rect x="15" y="15" width="20" height="10" fill="white"/>
|
|
</svg>
|
|
|
|
<!-- Sparkles -->
|
|
<svg class="sparkle sparkle-1" width="24" height="24" viewBox="0 0 24 24" fill="#FFD700">
|
|
<path d="M12 0L14 10L24 12L14 14L12 24L10 14L0 12L10 10Z"/>
|
|
</svg>
|
|
<svg class="sparkle sparkle-2" width="20" height="20" viewBox="0 0 24 24" fill="#FF69B4">
|
|
<path d="M12 0L14 10L24 12L14 14L12 24L10 14L0 12L10 10Z"/>
|
|
</svg>
|
|
<svg class="sparkle sparkle-3" width="18" height="18" viewBox="0 0 24 24" fill="#FFD700">
|
|
<path d="M12 0L14 10L24 12L14 14L12 24L10 14L0 12L10 10Z"/>
|
|
</svg>
|
|
<svg class="sparkle sparkle-4" width="22" height="22" viewBox="0 0 24 24" fill="#89CFF0">
|
|
<path d="M12 0L14 10L24 12L14 14L12 24L10 14L0 12L10 10Z"/>
|
|
</svg>
|
|
<svg class="sparkle sparkle-5" width="16" height="16" viewBox="0 0 24 24" fill="#DDA0DD">
|
|
<path d="M12 0L14 10L24 12L14 14L12 24L10 14L0 12L10 10Z"/>
|
|
</svg>
|
|
<svg class="sparkle sparkle-6" width="20" height="20" viewBox="0 0 24 24" fill="#FF69B4">
|
|
<path d="M12 0L14 10L24 12L14 14L12 24L10 14L0 12L10 10Z"/>
|
|
</svg>
|
|
|
|
<div class="container">
|
|
<!-- Hero -->
|
|
<header class="hero">
|
|
<h1 class="hero-title">DAS</h1>
|
|
<p class="hero-tagline pixel-text">✧ beats for your soul ✧</p>
|
|
|
|
<!-- Pixel Das Character -->
|
|
<svg class="pixel-character" width="100" height="100" viewBox="0 0 32 32" style="image-rendering: pixelated;">
|
|
<rect x="10" y="14" width="12" height="12" fill="#FF69B4"/>
|
|
<rect x="10" y="14" width="12" height="2" fill="#FF85C1"/>
|
|
<rect x="8" y="4" width="16" height="12" fill="#FFE4C4"/>
|
|
<rect x="8" y="4" width="16" height="2" fill="#FFF0DC"/>
|
|
<rect x="6" y="2" width="20" height="6" fill="#4a3728"/>
|
|
<rect x="8" y="0" width="16" height="4" fill="#4a3728"/>
|
|
<rect x="6" y="6" width="2" height="4" fill="#4a3728"/>
|
|
<rect x="24" y="6" width="2" height="4" fill="#4a3728"/>
|
|
<rect x="11" y="8" width="3" height="3" fill="#333"/>
|
|
<rect x="18" y="8" width="3" height="3" fill="#333"/>
|
|
<rect x="12" y="9" width="1" height="1" fill="white"/>
|
|
<rect x="19" y="9" width="1" height="1" fill="white"/>
|
|
<rect x="9" y="11" width="2" height="1" fill="#FFB6C1"/>
|
|
<rect x="21" y="11" width="2" height="1" fill="#FFB6C1"/>
|
|
<rect x="13" y="12" width="6" height="1" fill="#FF6B6B"/>
|
|
<rect x="4" y="6" width="4" height="6" fill="#89CFF0"/>
|
|
<rect x="24" y="6" width="4" height="6" fill="#89CFF0"/>
|
|
<rect x="6" y="2" width="20" height="2" fill="#89CFF0"/>
|
|
<rect x="5" y="7" width="2" height="4" fill="#6BB8E0"/>
|
|
<rect x="25" y="7" width="2" height="4" fill="#6BB8E0"/>
|
|
<rect x="11" y="26" width="4" height="6" fill="#DDA0DD"/>
|
|
<rect x="17" y="26" width="4" height="6" fill="#DDA0DD"/>
|
|
</svg>
|
|
|
|
<nav class="nav-buttons">
|
|
<a href="#music" class="nav-btn">♪ MUSIC</a>
|
|
<a href="#discography" class="nav-btn">💿 RELEASES</a>
|
|
<a href="#about" class="nav-btn">★ ABOUT</a>
|
|
<a href="#connect" class="nav-btn">♥ CONNECT</a>
|
|
</nav>
|
|
</header>
|
|
|
|
<!-- Latest Tracks -->
|
|
<section id="music" class="game-panel">
|
|
<h2 class="panel-title">♪ LATEST TRACKS ♪</h2>
|
|
|
|
<div class="music-grid">
|
|
<div class="track-card" onclick="window.open('https://open.spotify.com/artist/2cwrDjkkqPWi6WiLzPnWid', '_blank')">
|
|
<div class="track-icon">🎵</div>
|
|
<div class="track-title">Wingz</div>
|
|
<div class="track-album">Beats For Your Soul, Vol. 10</div>
|
|
<div class="track-type">instrumental</div>
|
|
</div>
|
|
|
|
<div class="track-card" onclick="window.open('https://open.spotify.com/artist/2cwrDjkkqPWi6WiLzPnWid', '_blank')">
|
|
<div class="track-icon">🎹</div>
|
|
<div class="track-title">Non-Starters</div>
|
|
<div class="track-album">Beats For Your Soul, Vol. 10</div>
|
|
<div class="track-type">instrumental</div>
|
|
</div>
|
|
|
|
<div class="track-card" onclick="window.open('https://open.spotify.com/artist/2cwrDjkkqPWi6WiLzPnWid', '_blank')">
|
|
<div class="track-icon">🌡️</div>
|
|
<div class="track-title">Thermometer</div>
|
|
<div class="track-album">Beats For Your Soul, Vol. 10</div>
|
|
<div class="track-type">instrumental</div>
|
|
</div>
|
|
|
|
<div class="track-card" onclick="window.open('https://open.spotify.com/artist/2cwrDjkkqPWi6WiLzPnWid', '_blank')">
|
|
<div class="track-icon">🦠</div>
|
|
<div class="track-title">ViRUS</div>
|
|
<div class="track-album">Beats For Your Soul, Vol. 9</div>
|
|
<div class="track-type">instrumental</div>
|
|
</div>
|
|
|
|
<div class="track-card" onclick="window.open('https://open.spotify.com/track/4VkvnOMc9VE7BUbhWIOXfa', '_blank')">
|
|
<div class="track-icon">💊</div>
|
|
<div class="track-title">Codeine & Cambria</div>
|
|
<div class="track-album">Beats For Your Soul, Vol. 5</div>
|
|
<div class="track-type">instrumental</div>
|
|
</div>
|
|
|
|
<div class="track-card" onclick="window.open('https://open.spotify.com/artist/2cwrDjkkqPWi6WiLzPnWid', '_blank')">
|
|
<div class="track-icon">🎧</div>
|
|
<div class="track-title">+ More</div>
|
|
<div class="track-album">View full catalog</div>
|
|
<div class="track-type">on streaming</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="stream-section">
|
|
<p class="stream-title">LISTEN EVERYWHERE</p>
|
|
<div class="stream-links">
|
|
<a href="https://open.spotify.com/artist/2cwrDjkkqPWi6WiLzPnWid" target="_blank" class="stream-btn spotify">
|
|
<span>🟢</span> Spotify
|
|
</a>
|
|
<a href="https://soundcloud.com/das-wav" target="_blank" class="stream-btn soundcloud">
|
|
<span>🟠</span> SoundCloud
|
|
</a>
|
|
<a href="https://music.apple.com/us/artist/das/1516553153" target="_blank" class="stream-btn apple">
|
|
<span>🔴</span> Apple Music
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Discography -->
|
|
<section id="discography" class="game-panel">
|
|
<h2 class="panel-title">💿 DISCOGRAPHY 💿</h2>
|
|
|
|
<div class="disco-grid">
|
|
<div class="album-card">
|
|
<div class="album-cover">🎵</div>
|
|
<div class="album-title">Beats For Your Soul, Vol. 10</div>
|
|
<div class="album-year">2025</div>
|
|
</div>
|
|
<div class="album-card">
|
|
<div class="album-cover">🎶</div>
|
|
<div class="album-title">Beats For Your Soul, Vol. 9</div>
|
|
<div class="album-year">2025</div>
|
|
</div>
|
|
<div class="album-card">
|
|
<div class="album-cover">🎹</div>
|
|
<div class="album-title">Beats For Your Soul, Vol. 5</div>
|
|
<div class="album-year">2021</div>
|
|
</div>
|
|
<div class="album-card">
|
|
<div class="album-cover">💿</div>
|
|
<div class="album-title">Earlier Volumes</div>
|
|
<div class="album-year">2019-2024</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- About -->
|
|
<section id="about" class="game-panel">
|
|
<h2 class="panel-title">★ ABOUT DAS ★</h2>
|
|
|
|
<div class="about-content">
|
|
<div class="about-avatar">
|
|
<svg viewBox="0 0 64 64" width="100%" height="100%" style="image-rendering: pixelated;">
|
|
<rect width="64" height="64" fill="#89CFF0"/>
|
|
<rect x="22" y="12" width="20" height="16" fill="#FFE4C4"/>
|
|
<rect x="20" y="8" width="24" height="8" fill="#4a3728"/>
|
|
<rect x="24" y="16" width="4" height="4" fill="#333"/>
|
|
<rect x="36" y="16" width="4" height="4" fill="#333"/>
|
|
<rect x="28" y="24" width="8" height="2" fill="#FF6B6B"/>
|
|
<rect x="20" y="28" width="24" height="20" fill="#FF69B4"/>
|
|
<rect x="16" y="12" width="6" height="10" fill="#89CFF0"/>
|
|
<rect x="42" y="12" width="6" height="10" fill="#89CFF0"/>
|
|
<rect x="18" y="8" width="28" height="4" fill="#89CFF0"/>
|
|
<rect x="22" y="48" width="8" height="12" fill="#DDA0DD"/>
|
|
<rect x="34" y="48" width="8" height="12" fill="#DDA0DD"/>
|
|
<rect x="50" y="8" width="4" height="4" fill="#FFD700"/>
|
|
<rect x="8" y="20" width="3" height="3" fill="#FFD700"/>
|
|
<rect x="52" y="40" width="3" height="3" fill="#FF69B4"/>
|
|
</svg>
|
|
</div>
|
|
|
|
<div class="about-text">
|
|
<p>
|
|
<strong>DAS</strong> creates soulful instrumentals and beats that hit different. ✨
|
|
</p>
|
|
<br>
|
|
<p>
|
|
From the <span class="highlight">Beats For Your Soul</span> series, each track is crafted with that perfect blend of chill vibes and infectious grooves — perfect for late-night sessions, creative flows, or just vibing out.
|
|
</p>
|
|
<br>
|
|
<p>
|
|
Released through <strong>Cassette Kingdom Records</strong>, bringing you that authentic sound. 💖
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Connect -->
|
|
<section id="connect" class="game-panel social-section">
|
|
<h2 class="panel-title">♥ CONNECT ♥</h2>
|
|
<p style="margin-bottom: 15px; color: #888;">follow the journey</p>
|
|
|
|
<div class="social-links">
|
|
<a href="https://soundcloud.com/das-wav" target="_blank" class="social-btn" title="SoundCloud">☁️</a>
|
|
<a href="https://open.spotify.com/artist/2cwrDjkkqPWi6WiLzPnWid" target="_blank" class="social-btn" title="Spotify">🎧</a>
|
|
<a href="https://music.apple.com/us/artist/das/1516553153" target="_blank" class="social-btn" title="Apple Music">🍎</a>
|
|
<a href="#" class="social-btn" title="Instagram">📸</a>
|
|
<a href="#" class="social-btn" title="Twitter">🐦</a>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Footer -->
|
|
<footer>
|
|
<p class="pixel-text">✧ made with ♥ ✧</p>
|
|
<p style="margin-top: 8px; font-size: 0.85rem;">© 2026 DAS • Cassette Kingdom Records</p>
|
|
</footer>
|
|
</div>
|
|
|
|
<script>
|
|
// Click sparkles
|
|
document.addEventListener('click', (e) => {
|
|
const emojis = ['✨', '💖', '⭐', '🌟', '💫'];
|
|
const sparkle = document.createElement('div');
|
|
sparkle.textContent = emojis[Math.floor(Math.random() * emojis.length)];
|
|
sparkle.className = 'click-sparkle';
|
|
sparkle.style.left = e.clientX + 'px';
|
|
sparkle.style.top = e.clientY + 'px';
|
|
document.body.appendChild(sparkle);
|
|
setTimeout(() => sparkle.remove(), 600);
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|