Promotion Platform #12
Description
<title>Chrisson Dill - Music Promotion</title>
<style>
/* Global Styles */
body {
margin: 0;
font-family: Arial, sans-serif;
background-color: #000;
color: #fff;
display: flex;
}
header {
background-color: #222;
padding: 10px;
position: fixed;
top: 0;
left: 250px;
right: 0;
z-index: 1000;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 2px solid #FFD700;
}
header img {
height: 50px;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
}
nav ul li {
margin-left: 20px;
}
nav ul li a {
text-decoration: none;
color: #fff;
font-weight: bold;
}
.sidebar {
width: 250px;
background-color: #111;
height: 100vh;
position: fixed;
top: 0;
left: 0;
padding-top: 20px;
border-right: 2px solid #FFD700;
}
.sidebar ul {
list-style: none;
padding: 0;
}
.sidebar ul li {
padding: 15px 20px;
}
.sidebar ul li a {
text-decoration: none;
color: #fff;
font-weight: bold;
display: block;
}
.sidebar ul li a:hover {
background-color: #FFD700;
color: #000;
}
main {
margin-left: 250px;
padding: 60px 20px 20px;
flex: 1;
}
.section-title {
text-align: center;
font-size: 2rem;
margin-bottom: 20px;
}
.artist-tracks {
margin: 40px 0;
}
.track {
display: flex;
align-items: center;
margin: 10px 0;
padding: 10px;
background-color: #222;
border-radius: 5px;
}
.track img {
width: 50px;
height: 50px;
margin-right: 20px;
border-radius: 5px;
}
.track-info {
flex: 1;
}
.comments {
margin-top: 40px;
padding: 20px;
background-color: #111;
border-radius: 5px;
}
.comment-box {
margin-bottom: 20px;
}
.comment-box input, .comment-box textarea {
width: 100%;
margin: 10px 0;
padding: 10px;
border: 1px solid #FFD700;
border-radius: 5px;
background: #000;
color: #fff;
}
.comment-box button {
background-color: #FFD700;
color: #000;
border: none;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
font-weight: bold;
}
.comment-box button:hover {
background-color: #e5c100;
}
.comment-list {
margin-top: 20px;
}
.comment-list .comment {
padding: 10px;
margin-bottom: 10px;
border-bottom: 1px solid #333;
}
</style>
<main>
<header>
<img src="logo.png" alt="Chrisson Dill Logo">
<nav>
<ul>
<li><a href="#search">Search</a></li>
<li><a href="#profile">Profile</a></li>
</ul>
</nav>
</header>
<section class="artist-tracks" id="artist-tracks">
<div class="section-title">Artist Tracks</div>
<div class="track">
<img src="https://via.placeholder.com/50" alt="Track 1">
<div class="track-info">
<h3>Track Name 1</h3>
<p>Genre: Pop | Duration: 3:45</p>
</div>
</div>
<div class="track">
<img src="https://via.placeholder.com/50" alt="Track 2">
<div class="track-info">
<h3>Track Name 2</h3>
<p>Genre: Hip-Hop | Duration: 4:12</p>
</div>
</div>
</section>
<section class="comments" id="comments">
<div class="section-title">Comments & Reactions</div>
<div class="comment-box">
<textarea placeholder="Write your comment here..." rows="3"></textarea>
<button type="submit">Post Comment</button>
</div>
<div class="comment-list">
<div class="comment">
<strong>User1:</strong> This track is amazing!
</div>
<div class="comment">
<strong>User2:</strong> Can't stop listening to this!
</div>
</div>
</section>
</main>