/* Basic styling for header */
header {
  display: flex;
  justify-content: space-between;
  background-color: #009688;
  padding: 10px;
  color: white;
}

nav ul {
  display: flex;
  list-style: none;
}

nav ul li {
  margin-right: 20px;
}

/* Music Player Styling */
.music-player {
  background-color: #00695c;
  color: white;
  padding: 20px;
  text-align: center;
}

.music-player img {
  width: 200px;
  height: auto;
}

/* Footer Styling */
footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  background-color: #004d40;
  color: white;
  padding: 10px;
  text-align: center;
}



<header>
  <div class="logo">Zen Radio</div>
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Channels</a></li>
      <li><a href="#">Apps</a></li>
    </ul>
  </nav>
  <div class="user-profile">
    <button>Try Premium</button>
    <div class="profile-dropdown">Uğur Papatya</div>
  </div>
</header>

<main>
  <div class="music-player">
    <img src="album-art.jpg" alt="Album Art">
    <div class="track-info">
      <h2>Christopher Lloyd Clarke - Earth's Embrace</h2>
      <div class="controls">
        <button>Like</button>
        <button>Dislike</button>
        <button>Skip</button>
      </div>
    </div>
  </div>

  <div class="previous-tracks">
    <h3>Previous Tracks</h3>
    <p>You will see your recently played Relaxation tracks here.</p>
  </div>
</main>

<footer>
  <div class="small-player">
    <p>Relaxation | 0:06 / 8:46</p>
    <div class="volume-control">Volume</div>
  </div>
</footer>