HTML comment Box

[kgfkevat7-code]

cartoon-music-website/
│── index.html
│── style.css
│── script.js
│── music.mp3 (आप कोई भी mp3 रख सकते हैं)

<title>Cartoon Music World</title>

🎵 Cartoon Music World 🎵

Enjoy Music with Fun

<div class="player">
    <img src="https://i.imgur.com/6XbK4GQ.png" alt="Cartoon DJ">
    <audio id="music" src="music.mp3"></audio>

    <div class="buttons">
        <button onclick="playMusic()">▶ Play</button>
        <button onclick="pauseMusic()">⏸ Pause</button>
    </div>
</div>

<div class="social">
    <a href="#" class="yt">YouTube</a>
    <a href="#" class="ig">Instagram</a>
    <a href="#" class="fb">Facebook</a>
    <a href="#" class="wa">WhatsApp</a>
</div>

<script src="script.js"></script> body { margin: 0; font-family: 'Comic Sans MS', cursive; background: linear-gradient(135deg, #ffeb3b, #ff9800); text-align: center; }

.container {
padding: 20px;
}

h1 {
color: #ff1744;
font-size: 40px;
}

.player {
background: white;
border-radius: 20px;
padding: 20px;
display: inline-block;
box-shadow: 0 10px 20px rgba(0,0,0,0.3);
}

.player img {
width: 150px;
animation: bounce 2s infinite;
}

@Keyframes bounce {
0%,100% {transform: translateY(0);}
50% {transform: translateY(-15px);}
}

.buttons button {
padding: 10px 20px;
margin: 10px;
border: none;
border-radius: 20px;
font-size: 18px;
cursor: pointer;
background: #4caf50;
color: white;
}

.buttons button:hover {
background: #388e3c;
}

.social {
margin-top: 20px;
}

.social a {
display: inline-block;
margin: 8px;
padding: 10px 15px;
border-radius: 20px;
color: white;
text-decoration: none;
}

.yt { background: red; }
.ig { background: purple; }
.fb { background: blue; }
.wa { background: green; }const music = document.getElementById("music");

function playMusic() {
music.play();
}

function pauseMusic() {
music.pause();
}

[Decentketan01]

try this buddy u i'll love it.
music-player.zip