Naat Website Script 2024

Copy Text

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Music Player</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>

<header>
  <div class="container">
    <h1 class="logo">Asad Raza Attari Naat</h1>
  </div>
</header>

<main>
  <div class="container">
    <div id="music-player" class="music-player hidden">
      <audio id="audioPlayer" controls>
        Your browser does not support the audio element.
      </audio>
    </div>

<div id="music-list" class="music-list">
      <h2>Music List</h2>
      <table>
        <thead>
          <tr>
            <th>Title</th>
            <th>Artist</th>
            <th>Duration</th>
            <th>Action</th>
          </tr>
        </thead>
        <tbody>
          
          <tr>
            <td>Sallallahu Alaa Muhammad</td>
            <td>Asad Raza Attari</td>
            <td>4:20</td>
            <td><button onclick="playMusic('https://www.naatsharif.com/download-mp3/asad-raza-attari/sallallahu-alaa-muhammad.mp3')">Play</button></td>
          </tr>
 
          
        </tbody>
      </table>
    </div>
  </div>
</main>

<footer>
  <div class="container">
    <p>© 2024 My Naat Website</p>
  </div>
</footer>

.container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

header, footer {
  background-color: #333;
  color: #fff;
  text-align: center;
  padding: 10px 0;
}

.logo {
  margin: 0;
  padding: 0;
  font-size: 24px;
}

main {
  padding: 20px 0;
}

.music-player {
  text-align: center;
}

.music-player.hidden {
  display: none;
}

.music-list table {
  width: 100%;
  border-collapse: collapse;
}

.music-list th, .music-list td {
  padding: 10px;
  text-align: left;
  border-bottom: 1px solid #ccc;
}

.music-list th {
  background-color: #f2f2f2;
}

.music-list tbody tr:hover {
  background-color: #f9f9f9;
}

.music-list td button {
  padding: 5px 10px;
  background-color: #007bff;
  color: #fff;
  border: none;
  cursor: pointer;
}

.music-list td button:hover {
  background-color: #0056b3;
}
</style>
<script>
function playMusic(filename) {
  var audioPlayer = document.getElementById('audioPlayer');
  var musicPlayer = document.getElementById('music-player');
  
  audioPlayer.src = filename;
  audioPlayer.play();
  
  musicPlayer.classList.remove('hidden');
}
</script>

Dipankar Gamer 2

Advertisement

Ad code

Naat Website Script 2024

Posted by PicLinks

Post a Comment

0 Comments

Comments

Most Popular

Urdu Poetry Theme

Keyword Generator Tool Website Script Free Download

how to add admob ads in mit app inventor

Random Posts

Subscribe Us

Facebook

Tags

Menu Footer Widget

Contact form

Dipankar Gamer 2

Advertisement

Ad code

Naat Website Script 2024

Posted by PicLinks

You may like these posts

Post a Comment

0 Comments

Comments

Social Plugin

Most Popular

Urdu Poetry Theme

Keyword Generator Tool Website Script Free Download

how to add admob ads in mit app inventor

Random Posts

Subscribe Us

Facebook

Tags

Menu Footer Widget

Contact form