cr33pyb00m - Music

IMPORTANT ATTENTION!

Before you begin using SpaceHey Music, it is essential that you carefully read and follow all the provided setup instructions and guide.

Ensure you correctly copy the codes and fill in the information in the order indicated to guarantee that your profile displays and functions properly.

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*/
}
nav .links {
  margin-bottom: 40px;
}
main {
  position: relative;
}

/*Spacehey Music - 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;
}
.spacehey_music .logo {
  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: no-repeat;
  background-size: 100% 100%;
  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 "; /*personalized*/
  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;
}
.player_content_left .logo {
  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: "You Name'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: "Sounds Like";
}
.profile .table-section:not(:last-child) .details-table tr:nth-child(2) td:first-child p::after{
  content: "Influences";
}
.profile .table-section:not(:last-child) .details-table tr:nth-child(3) td:first-child p::after{
  content: "Record Label";
}
.profile .table-section:not(:last-child) .details-table tr:nth-child(4) td:first-child p::after{
  content: "Type of Label";
}
.profile .table-section:not(:last-child) .details-table tr:nth-child(5) td:first-child p::after{
  content: "Active Since";
}
.profile .table-section:not(:last-child) .details-table tr:nth-child(6) td:first-child p::after{
  content: "Members";
}

/*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;
}

/*Mini Banner*/

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

/*Upcoming-Shows*/

.profile .blurbs .Upcoming-Shows {
  position: absolute; 
  margin-top: -275px;
  margin-left: -7px;
  width: 466px;
  border: 2px solid var(--lighter-blue);
}
.profile .blurbs .Upcoming-Shows .heading {
  background: #60A5FA;
  background: var(--lighter-blue);
  padding: 2px 7px;
}
.profile .blurbs .Upcoming-Shows .heading h4 {
  color: white;
  margin: 0;
  display: inline-block;
}
.profile .blurbs .Upcoming-Shows .inner {
  padding: 0px;
}
.profile .blurbs .Upcoming-Shows .details-table td p {
  margin: 0;
  overflow-wrap: break-word;
  word-break: break-word;
}

/*Blurbs*/

.profile .blurbs {
  margin-top: 235px;
}
.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: 100% 100%;
  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; 
}

/*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://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; 
}

/*Upcoming-Shows*/

.profile .blurbs .Upcoming-Shows {
  margin-left: -7px;
  width: 391.70px;
}

/*Bottom Banner*/

main:after {
  height: 100px;
}

</style>

<div class="spacehey_music">
  <a href="https://spacehey.com/topmusic" class="logo"></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="logo"></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 About me

<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>