cr33pyb00m - Music

What is Spacehey Music?

Spacehey Music is a set of **custom HTML and CSS code** specifically designed to **enhance the profiles of musical artists and bands on Spacehey**.

This code transforms the standard profile into a more complete and functional page, focused on music promotion. By implementing it, artists can add elements such as:

Key Features

Additional Navigation Bar: An extra bar with quick, specific links for music. It includes options such as:

"My music": To link to external platforms like Spotify or the site where the artist uploads their music.
"Music Videos": This is where the artist can place the direct link to their **YouTube channel or the site where they upload their music videos**.
"Featured Playlists": A space where users **will find music codes** from other Spacehey artists to listen to their songs.
"More Artists": A link to a **list of more Spacehey artists** for fans to discover new music.
"Shows":** To include the ticket sales link for concerts.
"Group": Quick access to the Spacehey Music group.
"Forums": Faster access to the Spacehey Music forums.

"General Info" Table: This table **replaces the original interests table** on the profile and allows the addition of data relevant to a band or artist, such as: Members, Website, Influences, Similar Sounds, Record Label, and Label Type.

"Upcoming Concerts" Table: With up to eight boxes to detail information about live shows, including **date, venue, and how to get tickets or attend.**

Automatic Music Player: Allows integration of a player that displays the **song title and its cover art** while playing automatically.

Important for Artists

This code makes **significant modifications** to the base Spacehey profile. It is essential to understand that:

**The interests table transforms** into the "General Info" table.
The **"Blurbs" section is also modified**: the **"Who I'd like to meet" section is removed**. This space becomes available for the artist to place **all the additional codes** they need, including the Spacehey Music code itself.

Artists are encouraged to **fill in all the table fields and provide the necessary links** (music, videos, tickets) to offer the most complete information possible to their followers and to be included in the Spacehey artists list.

Spacehey Music

Code :

Copy and paste to Who I'd like to meet

<style>

@import url('https://fonts.googleapis.com/css2?family=Anton&family=Orbitron:wght@900&display=swap');

:root {
  --Alternative_Logo: url("https://i.postimg.cc/bw9yTgfh/Logo-SHM.png"); /*personalized*/
  --Album_Cover: url("https://i.postimg.cc/8PFN2D84/Album.png"); /*personalized*/
  --Banner1_image: url("https://images2.imgbox.com/24/6e/yngqs0eR_o.png"); /*personalized*/
  --Banner2_image: url("https://images2.imgbox.com/e5/50/59sFPBPh_o.png"); /*personalized*/
  --Banner3_image: url("https://images2.imgbox.com/24/6e/yngqs0eR_o.png"); /*personalized*/
}
.edit-link {
  display:none;
}
main {
  position: relative;
}
nav .links {
  margin-bottom: 40px;
}

/*Nav*/

.spacehey_music {
  position: absolute; 
  top: -40px; 
  left: 0px; 
  width: 810px;
  height: 40px;
  background: linear-gradient(#f6f6f6 13%, #CFCFCF);
  border-bottom: 1px solid black;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.SHM_1 {
  height: 32px;
  width: 104px;
  background-image: var(--Alternative_Logo);
  background-repeat: no-repeat; 
  background-size: 104px;
  overflow: hidden;
}
.spacehey_music .links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
}
.spacehey_music .links li {
  border-right: 1px solid #999;
  padding-right: 5px;
  margin-right: 5px;
}
.spacehey_music .links li:last-child {
  border-right: none;
}
.spacehey_music .links a {
  color: Navy;
  font-size: 11px;
  font-weight: normal;
  font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
}

/*Top Banner*/

main:before {
  content: ""; 
  width: auto;
  height: 250px;
  background-color: #1D4ED7;
  background-image: var(--Banner1_image);
  background-position: center;
  background-repeat: repeat;
  background-size: 300px;
  border: 2px solid #000000;
  display: block;
}

/*Genre List*/

.profile h1 {
  inline-size: 190px;
  width: auto;
}
.profile h1::after {
  font-size: 8pt;
  font-weight: bolder;
  content: "\A Genre 1 / Genre 2 / Genre 3 ";
  white-space: pre;
}

/*Player*/

.spacehey_music_player {
  position: absolute;
  width: 304px;
  background: linear-gradient(#f6f6f6 13%, #cfcfcf);
  border: 2px solid #000;
  margin-top: -182px;
  margin-left: -107px;
  display: flex;
}
.spacehey_music_player a {
  color: #000;
  font-family: 'Orbitron', sans-serif;
  font-size: 8px;
}
.spacehey_music_player a:hover {
  color: #000;
}
.player_content_left {
  width: 93px;
  flex-direction: column;
  margin-left: 5px; 
  display: flex;
}
.SHM_2 {
  width: 90px;
  height: 30px; 
  background-image: var(--Alternative_Logo);
  background-repeat: no-repeat; 
  background-position: left center;;
  background-size: 80px;
}
.album_cover {
  width: 90px;
  height: 90px;
  background-color: #000;
  background-image: var(--Album_Cover);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 90px;
  border: 0.5px solid #000;
  cursor: pointer;
}
.buy_album {
  width: 90px;
  height: 15px;
  color: #000;
  font-family: 'Orbitron', sans-serif;
  font-size: 8px;
  text-align: left;
  margin-top: 3px;
  margin-bottom: 3px;
  display: flex;
  align-items: center;
}
.buy_album:before {
  content: "";
  display: inline-block;
  width: 15px;
  height: 15px;
  background-image: url("https://i.postimg.cc/x1LpbRZC/Boton-5.png"); 
  background-repeat: no-repeat;
  background-position: center;
  background-size: 15px;
  margin-right: 5px;
}
.player_content_right {
  position: relative;
  height: 60px;
  flex-direction: column;
  flex-grow: 1;
  background: linear-gradient(#000 13%, #77767b);
  margin-top: 45px; 
  display: flex;
}
.player_content_right:before {
  content: "";
  height: 20px;
  background-image: url("https://i.postimg.cc/mDgmJGgz/Boton-7.png"); 
  background-repeat: no-repeat;
  background-position: right center;
  background-size: 60px;
  display: block; 
}
.player_content_right:after {
  content: " ";
  position: absolute;
  top: 67px; 
  left: 37px;
  width: 125px; 
  height: 8px;
  background-image: url("https://i.postimg.cc/TPG7jb8c/Player-1.png"); 
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 125px;
  display: block; 
}
.top_bar {
  position: absolute;
  top: -35px;
  right: 5px;
  display: flex;
  align-items: center;
}
.top_bar span {
  height: 15px;
  color: #000;
  font-family: 'Orbitron', sans-serif;
  font-size: 8px;
  display: flex;
  align-items: center;
}
.top_bar span:after {
  content: "";
  display: inline-block;
  width: 15px;
  height: 15px;
  background-image: url("https://i.postimg.cc/65k13SYg/Boton-6.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 15px;
  margin-left: 5px;
}
.controls {
  justify-content: left;
  align-items: left;
  margin-top: -35px;
  margin-left: 5px;
  display: flex;
}
.button.prev {
  width: 35px;
  height: 35px;
  background-color: #77767b;
  background-image: url("https://i.postimg.cc/bJmBwwB9/Boton-1.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 35px;
  border: 4px solid #77767b;
  border-radius: 50%;
  cursor: pointer;
  filter: grayscale(100%);
}
.button.play {
  width: 45px;
  height: 45px;
  background-color: #77767b;
  background-image: url("https://i.postimg.cc/pr7cK1x9/Boton-2.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 45px;
  border: 4px solid #77767b;
  border-radius: 50%;
  cursor: pointer;
  margin: 0 2px;
}
.button.play:hover {
  background-image: url("https://i.postimg.cc/6qT12NsJ/Boton-3.png");
}
.button.play iframe {
  position: absolute;
  top: -15px;
  left: 42px;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  opacity: 0.0;
}
.button.next {
  width: 35px;
  height: 35px;
  background-color: #77767b;
  background-image: url("https://i.postimg.cc/RV6Dv9Qw/Boton-4.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 35px;
  border: 4px solid #77767b;
  border-radius: 50%;
  cursor: pointer;
  filter: grayscale(100%);
}
.button.prev:hover,
.button.next:hover {
  filter: grayscale(0%);
}
.track_info {
  width: 200px;
  justify-content: space-between;
  padding: 0 5px;
  display: flex;
}
.track_info {
  margin-top: 5px;
  flex-direction: column;
}
.track_info span {
  color: #fff;
  font-family: 'Orbitron', sans-serif;
  font-size: 8px;
}
.time_info {
  position: absolute;
  top: 67px; 
  left: 0px;
  width: 200px;
  justify-content: space-between;
  padding: 0 5px;
  display: flex;
}
.time_info span {
  color: #000;
  font-family: 'Orbitron', sans-serif;
  font-size: 8px;
}
.current_time {
  float: left;
}
.total_time {
  float: right;
}
.add_to_profile {
  position: absolute;
  top: 81px;
  left: 105px;
  width: 90px;
  height: 10px;
  color: #000;
  font-family: 'Orbitron', sans-serif;
  font-size: 8px;
  text-align: right;
}

/*General-Info*/

.profile .table-section {
  margin-top: 164px;
}
.profile .table-section .heading h4 {
  font-size: 0px;
}
.profile .table-section .heading h4:before {
  content: "Spacehey Music's General Info";
  font-size: .8rem;
}
.profile .table-section:not(:last-child) .details-table tr td:first-child p {
  font-size: 0px;
}
.profile .table-section .details-table tr td:first-child p::after{
  font-size: 12px;
}
.profile .table-section:not(:last-child) .details-table tr:nth-child(1) td:first-child p::after{
  content: "Members";
}
.profile .table-section:not(:last-child) .details-table tr:nth-child(2) td:first-child p::after{
  content: "Website";
}
.profile .table-section:not(:last-child) .details-table tr:nth-child(3) td:first-child p::after{
  content: "Influences";
}
.profile .table-section:not(:last-child) .details-table tr:nth-child(4) td:first-child p::after{
  content: "Sounds Like";
}
.profile .table-section:not(:last-child) .details-table tr:nth-child(5) td:first-child p::after{
  content: "Record Label";
}
.profile .table-section:not(:last-child) .details-table tr:nth-child(6) td:first-child p::after{
  content: "Type of Label";
}

/*Links*/

.profile .table-section+.table-section {
  margin-top: 0px;
}
.profile .table-section+.table-section .heading h4 {
  font-size: .8rem;
}
.profile .table-section+.table-section .heading h4:before {
  content: "";
  font-size: 0px;
}
.profile .table-section+.table-section:not(:last-child) .details-table tr td:first-child p {
  font-size: 12px;
}
.profile .table-section+.table-section .details-table tr td:first-child p::after{
  font-size: 0px;
}

/*Mini Banner*/

main .right:before {
 content: ""; 
 width: auto;
 height: 92px;
 background-color: #1D4ED7;
 background-image: var(--Banner2_image);
 background-position: center;
 background-repeat: repeat;
 background-size: 300px;
 border: 2px solid #000000;
 margin-bottom: 0px;
 display: block;
}

/*Info*/

.profile-info {
  margin-top: 235px;
}

/*Upcoming-Shows*/

.profile .Upcoming-Shows {
  position: absolute; 
  top: 375px; 
  left: 333.80px;
  width:467px;
}
.profile .Upcoming-Shows {
  border: 2px solid #60A5FA;
  border: 2px solid var(--lighter-blue);
}
.profile .Upcoming-Shows .heading h4 {
  font-size: .8rem;
}
.profile .Upcoming-Shows .heading h4:before {
  content: "";
  font-size: 0px;
}
.profile .Upcoming-Shows:not(:last-child) .details-table tr td:first-child p {
  font-size: 12px;
}
.profile .Upcoming-Shows .details-table tr td:first-child p::after{
  font-size: 0px;
}

/* Blurbs */

.profile .blurbs .section:nth-child(2) h4 {
  display: none;
}
.profile .blurbs .section:nth-child(1) .edit-link {
  display: none;
}

/*Bottom Banner*/

main:after {
  content: ""; 
  width: auto;
  height: 150px;
  background-color: #1D4ED7;
  background-image: var(--Banner3_image);
  background-position: center;
  background-repeat: repeat;
  background-size: 300px;
  border: 2px solid #000000;
  display: block;
}

/*mobile version settings*/

@media (max-width: 600px) {

/*Nav*/

.spacehey_music {
  width: 100%;
  max-width: 810px;
}
.SHM_1 {
  flex-shrink: 0;
}
.spacehey_music .links {
 width: 290px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none; 
}
.spacehey_music .links::-webkit-scrollbar {
  display: none;
}
.spacehey_music .links li {
  flex-shrink: 0;
}
.spacehey_music .links li:last-child {
  border-right: none;
}

/*Top Banner*/

main:before {
  height: 180px; 
  background-size: 300px;
}

/*Player*/

.spacehey_music_player {
  width: 391.70px;
  margin-left: -135.40px;
}
.track_info {
  width: 250px;
}
.player_content_right:after {
  width: 215px; 
  background-image: url("https://external-media.spacehey.net/media/sUo4Ev8lX5ATc7DtoW2AAUFJxyM5f61n311gaE6hVLg8=/https://i.postimg.cc/zfjdxf8Y/Player-2.png"); 
  background-repeat: repeat;
  background-position: left center;
  background-size: 215px;
}
.time_info {
  width: 295px;
}
.add_to_profile {
  left: 195px;
}

/*Mini Banner*/

main .right:before {
  height: 80px; 
  background-size: 300px
}

/*Upcoming-Shows*/

.profile .Upcoming-Shows {
  top: 1144px; 
  left: 10px;
  width: 391.70px;
  display: none;
}

/*Info*/

.profile-info {
  margin-top: 10px;
}

/*Bottom Banner*/

main:after {
  height: 100px;
  background-size: 300px;
}

</style>

<div class="spacehey_music">
  <a href="https://spacehey.com/topmusic" class="SHM_1"></a>
  <ul class="links">
    <li><a href="youlink">my music</a></li>
    <li><a href="youlink">music videos</a></li>
    <li><a href="https://blog.spacehey.com/entry?id=1625864">featured playlists</a></li>
    <li><a href="https://blog.spacehey.com/entry?id=1626142">more artists</a></li>
    <li><a href="youlink">shows</a></li>
    <li><a href="https://groups.spacehey.com/myspacemusic">group</a></li>
    <li><a href="https://groups.spacehey.com/forum?id=36451">forums</a></li>
  </ul>
</div>

Copy and paste to General

<div class="spacehey_music_player">
  <div class="player_content_left">
    <a href="https://spacehey.com/topmusic" class="SHM_2"></a>
    <div class="album_cover"></div>
    <a href="https://www.amazon.com" class="buy_album">Buy Album</a>
  </div>
  <div class="player_content_right">
    <div class="top_bar">
      <span>Pop Out Player</span>
    </div>
    <div class="controls">
     <a href="https://www.youtube.com/watch?v=hiRacdl02w4" class="button prev"></a>
      <div class="button play">

</div>
      <a href="https://www.youtube.com/watch?v=hiRacdl02w4" class="button next"></a>
    </div>
    <div class="track_info">
      <span class="song">[SONG]</span>
      <span class="artist">[ARTIST]</span>
    </div>
    <div class="time_info">
      <span class="current_time">00:00</span>
      <span class="total_time">00:00</span>
    </div>
    <a href="https://cr33pyb00m.neocities.org/Layouts/Autoplay" class="add_to_profile">Add To Profile</a>
  </div>
</div>

Copy and paste to Music

<div class="Upcoming-Shows">
 <div class="heading">
 <h4>Upcoming Shows</h4>
 </div>
  <div class="inner">
  <table class="details-table" cellspacing="3" cellpadding="3">
  <tbody>

<tr>
   <td><p>MM/DD/20XX</p></td>
   <td><p>00:00</p></td>
   <td><p><a href="you-link">Generic Concert Venue</a></p></td>
   <td><p>City, ST</p></td>
   </tr>

<tr>
   <td><p>MM/DD/20XX</p></td>
   <td><p>00:00</p></td>
   <td><p><a href="you-link">Generic Concert Venue</a></p></td>
   <td><p>City, ST</p></td>
   </tr>

<tr>
   <td><p>MM/DD/20XX</p></td>
   <td><p>00:00</p></td>
   <td><p><a href="you-link">Generic Concert Venue</a></p></td>
   <td><p>City, ST</p></td>
   </tr>

<tr>
   <td><p>MM/DD/20XX</p></td>
   <td><p>00:00</p></td>
   <td><p><a href="you-link">Generic Concert Venue</a></p></td>
   <td><p>City, ST</p></td>
   </tr>

<tr>
   <td><p>MM/DD/20XX</p></td>
   <td><p>00:00</p></td>
   <td><p><a href="you-link">Generic Concert Venue</a></p></td>
   <td><p>City, ST</p></td>
   </tr>

<tr>
   <td><p>MM/DD/20XX</p></td>
   <td><p>00:00</p></td>
   <td><p><a href="you-link">Generic Concert Venue</a></p></td>
   <td><p>City, ST</p></td>
   </tr>

<tr>
   <td><p>MM/DD/20XX</p></td>
   <td><p>00:00</p></td>
   <td><p><a href="you-link">Generic Concert Venue</a></p></td>
   <td><p>City, ST</p></td>
   </tr>

</tbody>
   </table>
  </div>
</div>