<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>DJ Cousin - Coming Soon</title>
<style>
/*
DJ COUSIN - Coming Soon
Minimal Neon + Glitch Effects + Audio Toggle
*/
html, body {
margin: 0;
padding: 0;
font-family: "Lucida Console", monospace;
background: #141414;
color: #f0f0f0;
overflow-x: hidden;
height: 100%;
}
/*
Background Animation: Slow color shift in a radial gradient
*/
body {
animation: colorShift 10s ease-in-out infinite alternate;
}
@keyframes colorShift {
0% {
background: radial-gradient(circle at 50% 50%, rgba(228, 0, 255, 0.2) 0%, rgba(20, 20, 20, 1) 70%);
}
100% {
background: radial-gradient(circle at 50% 50%, rgba(0, 255, 217, 0.2) 0%, rgba(20, 20, 20, 1) 70%);
}
}
.hero {
height: 100vh;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
position: relative;
overflow: hidden;
}
/* Main Title with Glitch Animation */
h1 {
font-size: 4rem;
text-transform: uppercase;
letter-spacing: 2px;
animation: glitch 2s infinite;
margin: 0;
}
@keyframes glitch {
0% { text-shadow: 2px 2px #00fff0; }
20% { text-shadow: -2px -2px #ff0099; }
40% { text-shadow: 2px -2px #00fff0; }
60% { text-shadow: -2px 2px #ff0099; }
80% { text-shadow: 2px 2px #00fff0; }
100% { text-shadow: 0px 0px #ff0099; }
}
/* Neon Pulse for the Subheading */
h2 {
font-size: 1.2rem;
letter-spacing: 1px;
color: #ff0099;
margin: 10px 0 20px;
animation: neonPulse 2s ease-in-out infinite alternate, flicker 3s infinite;
}
@keyframes neonPulse {
0% {
text-shadow: 0 0 4px #ff0099, 0 0 8px #ff0099, 0 0 12px #ff0099;
}
100% {
text-shadow: 0 0 10px #ff0099, 0 0 20px #ff0099, 0 0 30px #ff0099;
}
}
/* Flicker effect to simulate a slight stutter in neon lights */
@keyframes flicker {
0% {opacity: 1;}
5% {opacity: 0.8;}
10% {opacity: 0.4;}
15% {opacity: 0.1;}
20% {opacity: 0.8;}
25% {opacity: 1;}
30% {opacity: 0.3;}
35% {opacity: 0.8;}
40% {opacity: 1;}
100% {opacity: 1;}
}
/* Neon-Style Button for Play/Pause */
.play-btn {
position: relative;
display: inline-block;
padding: 0.75rem 1.5rem;
font-size: 1rem;
color: #ff0099;
background: none;
border: 2px solid #ff0099;
cursor: pointer;
text-transform: uppercase;
letter-spacing: 1px;
outline: none;
transition: 0.3s;
animation: flicker 5s infinite; /* subtle flicker for the button text too */
}
.play-btn:hover {
background: #ff0099;
color: #141414;
box-shadow: 0 0 8px #ff0099;
transition: 0.3s;
}
/* Footer */
.footer {
position: absolute;
bottom: 20px;
width: 100%;
text-align: center;
font-size: 0.8rem;
color: #999;
}
@media (max-width: 768px) {
h1 { font-size: 2.5rem; }
h2 { font-size: 1rem; }
}
</style>
</head>
<body>
<section class="hero">
<!-- MAIN TITLES -->
<h1>DJ Cousin</h1>
<h2>Coming Soon</h2>
<!-- CUSTOM AUDIO PLAYER (PLAY/PAUSE BUTTON) -->
<button class="play-btn" onclick="toggleAudio()">Play / Pause</button>
<audio id="djCousinTrack" src="https://www.dropbox.com/scl/fi/nh2ikszofq36tosmwf7qu/dj-cousin.mp3?rlkey=q7xhrsi3724rront5kqhq2ggb&st=tvj719iz&dl=0" preload="auto"></audio>
<!-- FOOTER -->
<div class="footer">© 2025 SoundBeamRecords</div>
</section>
<!-- SCRIPT TO TOGGLE AUDIO -->
<script>
const audioElem = document.getElementById('djCousinTrack');
function toggleAudio() {
// Attempt to play or pause the audio
if (audioElem.paused) {
audioElem.play().catch(error => console.log(error));
} else {
audioElem.pause();
}
}
</script>
</body>
</html>