my fisrt blog layout

Layout CSS

<div style="text-align:left; font-size:42px; font-weight:bold; color:#ffffff; text-shadow:2px 2px 0 #000000;"></div>

<!-- Main Banner -->
<img src="/proxy/image.php?url=https%3A%2F%2Fmedia.base44.com%2Fimages%2Fpublic%2F6a3d58b54cdd5a26139a0b9a%2F665481a4c_3443.jpg" style="width:100%; max-width:700px; display:block; margin:0 0 15px 0;">

<!-- Member Cards (Aligned Left) -->
<img src="/proxy/image.php?url=https%3A%2F%2Fimages-wixmp-ed30a86b8c4ca887773594c2.wixmp.com%2Ff%2Fcf75a3cf-0601-4180-97fe-a922bbbf269f%2Fdmvii2t-2c6b609d-2ee9-4d7d-98d1-74b18299962a.png%2Fv1%2Ffit%2Fw_828%2Ch_1164%2Cq_70%2Cstrp%2Fmember1_reyson_updated_member_card_by_zigglymcmyspace_dmvii2t-414w-2x.jpg%3Ftoken%3DeyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7ImhlaWdodCI6Ijw9MTgwMCIsInBhdGgiOiIvZi9jZjc1YTNjZi0wNjAxLTQxODAtOTdmZS1hOTIyYmJiZjI2OWYvZG12aWkydC0yYzZiNjA5ZC0yZWU5LTRkN2QtOThkMS03NGIxODI5OTk2MmEucG5nIiwid2lkdGgiOiI8PTEyODAifV1dLCJhdWQiOlsidXJuOnNlcnZpY2U6aW1hZ2Uub3BlcmF0aW9ucyJdfQ.2Z09cCweXdhUHTSIay9CLrVY9BHbH79dNdJXhymetjo" style="width:100%; max-width:250px; display:block; margin:0 0 10px 0; border:2px solid #EE0204;">

<img src="/proxy/image.php?url=https%3A%2F%2Fimages-wixmp-ed30a86b8c4ca887773594c2.wixmp.com%2Ff%2Fcf75a3cf-0601-4180-97fe-a922bbbf269f%2Fdmviudn-1a556ac2-2934-428f-8208-7d26ec08b741.png%2Fv1%2Ffit%2Fw_828%2Ch_1204%2Cq_70%2Cstrp%2Fmember2_by_zigglymcmyspace_dmviudn-414w-2x.jpg%3Ftoken%3DeyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7ImhlaWdodCI6Ijw9MTg2MCIsInBhdGgiOiIvZi9jZjc1YTNjZi0wNjAxLTQxODAtOTdmZS1hOTIyYmJiZjI2OWYvZG12aXVkbi0xYTU1NmFjMi0yOTM0LTQyOGYtODIwOC03ZDI2ZWMwOGI3NDEucG5nIiwid2lkdGgiOiI8PTEyODAifV1dLCJhdWQiOlsidXJuOnNlcnZpY2U6aW1hZ2Uub3BlcmF0aW9ucyJdfQ.2vSxPQbtLDyVCZc6_Z9ta92wL0OQ6lCG-5wodJzFskE" style="width:100%; max-width:250px; display:block; margin:0 0 10px 0; border:2px solid #EE0204;">

<img src="/proxy/image.php?url=https://media.base44.com/images/public/6a3d58b54cdd5a26139a0b9a/f46ed9248_Screenshot2026-07-24170128.png" style="width:100%; max-width:250px; display:block; margin:0 0 10px 0; border:2px solid #EE0204;">

<img src="/proxy/image.php?url=https://media.base44.com/images/public/6a3d58b54cdd5a26139a0b9a/0475a19bb_Screenshot2026-07-24170009.png" style="width:100%; max-width:250px; display:block; margin:0 0 15px 0; border:2px solid #EE0204;">

<img src="/proxy/image.php?url=https%3A%2F%2Fmedia.base44.com%2Fimages%2Fpublic%2F6a3d58b54cdd5a26139a0b9a%2Ff5c3cbb11_Screenshot2026-07-24184034.png" style="width:100%; max-width:700px; display:block; margin:0 0 15px 0;">

<!-- ALBUMS SECTION -->
<div id="disc-collection">
  <div class="disc">
    <img src="https://content.myspacecdn.com/images03/3/6d6868a8d1f349c58c7d6ea81c3e2485/300x300.jpg">
  </div>
  <div class="title">Ziggly McSnorp - Unreleased</div>

  <div class="disc">
    <img src="https://f4.bcbits.com/img/a1347554072_2.jpg">
  </div>
  <div class="title">Ziggly McSnorp - a long term of since and death (DEMO)</div>

  <div class="disc">
    <img src="https://friendrewind.com/media/artist_covers/15965_1784464268_c17e54.webp">
  </div>
  <div class="title">Ziggly McSnorp - Blue is the Color of your Funeral!</div>

  <div class="disc">
    <img src="https://friendrewind.com/media/artist_covers/15965_1789498650_1a0f6a.webp">
  </div>
  <div class="title">Ziggly McSnorp - The Prequel of the Plague A Funeral for the Living and We Were Born Beneath It Before the World Died</div>
</div>

<!-- UPCOMING SHOWS / TOUR DATES SECTION -->
<div class="tour-section">
  <div class="tour-header">
    <span>Upcoming Shows</span>
    <span class="buy-tickets">( buy tickets )</span>
  </div>
  <table class="tour-table" cellspacing="0" cellpadding="0">
    <tbody>
      <tr>
        <td>MM/DD/20XX</td>
        <td>12:00 PM</td>
        <td><a href="#">Generic Concert Venue</a></td>
        <td>City, ST</td>
      </tr>
      <tr>
        <td>MM/DD/20XX</td>
        <td>07:00 PM</td>
        <td><a href="#">Generic Concert Venue</a></td>
        <td>City, ST</td>
      </tr>
      <tr>
        <td>MM/DD/20XX</td>
        <td>07:00 PM</td>
        <td><a href="#">Generic Concert Venue</a></td>
        <td>City, ST</td>
      </tr>
      <tr>
        <td>MM/DD/20XX</td>
        <td>07:00 PM</td>
        <td><a href="#">Generic Concert Venue</a></td>
        <td>City, ST</td>
      </tr>
      <tr>
        <td>MM/DD/20XX</td>
        <td>07:00 PM</td>
        <td><a href="#">Generic Concert Venue</a></td>
        <td>City, ST</td>
      </tr>
      <tr>
        <td>MM/DD/20XX</td>
        <td>07:00 PM</td>
        <td><a href="#">Generic Concert Venue</a></td>
        <td>City, ST</td>
      </tr>
    </tbody>
  </table>
</div>

<a class="ziggly-soundcloud-link" href="https://soundcloud.com/zigglymcsnorp" target="_blank" rel="noopener noreferrer" aria-label="Listen on SoundCloud"></a>

<style id="fr-vb2">
@import url('https://fonts.googleapis.com/css2?family=Righteous:wght@400;700&display=swap');

body, body.profile-page {
  background-image: url(https://www.shutterstock.com/image-vector/seamless-pattern-blood-stains-halloween-600nw-328148543.jpg) !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-attachment: scroll !important;
  background-position: center center !important;
  color: #621313 !important;
  font-family: 'Righteous', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', 'Noto Sans', Arial, sans-serif !important;
}

@media (min-width: 769px) and (pointer: fine) {
  body, body.profile-page {
    background-attachment: fixed !important;
  }
}

.profile-pic { position:relative; width:180px; height:180px; display:inline-block; overflow:visible !important; }
.profile-pic img { position:absolute; top:8%!important; left:8%!important; width:84%!important; height:84%!important; object-fit:cover; z-index:1; border-radius:12px!important; }

/* Decorative Profile Picture Sticker */
.profile-pic::after {
  content: "" !important;
  position: absolute !important;
  right: -12px !important;
  bottom: -10px !important;
  width: 48px !important;
  height: 48px !important;
  background-image: url("https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/cf75a3cf-0601-4180-97fe-a922bbbf269f/dmtyisu-28d95369-fb2e-4e44-815f-1a3da76a938c.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiIvZi9jZjc1YTNjZi0wNjAxLTQxODAtOTdmZS1hOTIyYmJiZjI2OWYvZG10eWlzdS0yOGQ5NTM2OS1mYjJlLTRlNDQtODE1Zi0xYTNkYTc2YTkzOGMucG5nIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0._xcSTrwySDgBAVbpBM4RnpLVz5J2Q9jRSotpw78VvoA") !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  z-index: 999 !important;
  pointer-events: none !important;
  transition: transform 0.25s ease !important;
}

.profile-pic:hover::after {
  transform: rotate(12deg) scale(1.15) !important;
}

main {
  position: relative !important;
}

main::before {
  content: "" !important;
  display: block !important;
  width: 100% !important;
  height: 300px !important;
  background-image: url("https://yt3.ggpht.com/_fmHocEaXTvTlvunGQ6oPjId_OkgFGUsZX2Li5mE8PORTJvvwurqFNQUPOrIELcgH1VIyV8-EXzy7w=s640-rw-nd-v1") !important;
  background-size: cover !important;
  background-position: center center !important;
}

/* Clickable link sitting over banner (no pulse animation) */
.ziggly-soundcloud-link {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 300px !important;
  display: block !important;
  z-index: 9999 !important;
  cursor: pointer !important;
  background: transparent !important;
}

.myspace-header .nav-logo {
  content: url('https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/cf75a3cf-0601-4180-97fe-a922bbbf269f/dmtyhd3-80a5ec06-d078-41db-b1cb-f8b3280b6c4c.png/v1/fill/w_1092,h_252/custome_friendrewind_header_for_my_band_by_zigglymcmyspace_dmtyhd3-fullview.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7ImhlaWdodCI6Ijw9MjUyIiwicGF0aCI6Ii9mL2NmNzVhM2NmLTA2MDEtNDE4MC05N2ZlLWE5MjJiYmJmMjY5Zi9kbXR5aGQzLTgwYTVlYzA2LWQwNzgtNDFkYi1iMWNiLWY4YjMyODBiNmM0Yy5wbmciLCJ3aWR0aCI6Ijw9MTA5MiJ9XV0sImF1ZCI6WyJ1cm46c2VydmljZTppbWFnZS5vcGVyYXRpb25zIl19.r4nnYfWjcYlm_qZdbZ9dpkXO1pCgoiSppPe-QE2seXA');
  width: 284px;
  height: auto;
}

.profile {
  background-image: url(https://i.pinimg.com/200x150/85/78/3c/85783caf591abe6790817fdaab5fe799.jpg) !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-position: top center !important;
}

.myspace-header .top-nav {
  background: #b4040c;
}

.myspace-header .main-nav-wrapper {
  background: #b4040c;
  background-image: url(https://www.bing.com/th/id/OIP.neMa67f7Jna7_wtt5OLDZwHaE8?w=193&h=135&c=8&rs=1&qlt=90&o=6&pid=ImgAns&rm=2);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.myspace-header .main-nav li a { color: #973030; }
.myspace-header .main-nav li a:hover { color: #800800; }

.contact {
  border: 1px solid #000000 !important;
  border-radius: 5px !important;
}

.contact .heading {
  background-color: #000000 !important;
  color: #ff0000 !important;
}

.table-section, .friends, .blurbs, .module, .profileInfo {
  border: 1px solid #171716 !important;
  border-radius: 5px !important;
}

.table-section .heading, .friends .heading, .blurbs .heading, .section .heading, .module .heading, .profileInfo .heading {
  background-color: #171716 !important;
  color: #e60505 !important;
}

.profile, .table-section, .module, .blurbs, .section, .profileInfo, .friend-space, .badges-section, .url-info, .contact, .interests {
  color: #621313 !important;
}

h1, h2, h3, h4, h5, h6, .table-section h4, .module h4, .blurbs h4, .section h4 {
  color: #7c0909 !important;
}

a, .profile a, .table-section a, .module a { color: #FFFFFF !important; }

.blog-preview {
  background-image: url(https://www.bing.com/th/id/OIP.H_LPdINGr0TuXpWDHGxw4wHaEK?w=193&h=135&c=8&rs=1&qlt=90&o=6&pid=ImgAns&rm=2) !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

.blurbs {
  background-image: url(https://th.bing.com/th/id/R.729a4dada6ead96c7c41db14c41d9384?rik=MLNK7CPAcmTLtA&pid=ImgRaw&r=0) !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

.friends {
  background-image: url(https://tse3.mm.bing.net/th/id/OIP.zwiTyIHiqV1gwk0hnC57LAHaHa?r=0&rs=1&pid=ImgDetMain&o=7&rm=3) !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

#comments {
  background-image: url("https://friendrewind.com/uploads/gallery/23851/img_6a7faf299a9715.03818256.webp") !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

.comments-table td {
  background-image: url("https://friendrewind.com/uploads/gallery/23851/img_6a7faf28f050b1.62890773.webp") !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

.url-info { display:none !important; }
.mood p { display: none !important; }
.blurbs .heading { display:none !important; }

/* ALBUMS STYLING */
#disc-collection * { all: unset; }
#disc-collection {
  all: initial !important;
  width: 100% !important;
  height: 220px !important;
  margin: 20px 0 !important;
  display: flex !important;
  flex-direction: row !important;
  position: relative !important;
}

#disc-collection .disc {
  all: unset !important;
  perspective: 500px !important;
  width: 25px !important;
  transition: width 0.5s !important;
  cursor: pointer;
}

#disc-collection .disc:hover { width: 180px !important; }

#disc-collection img {
  all: unset !important;
  transition: transform 0.5s, width 0.5s, height 0.5s, margin-top 0.5s !important;
  width: 170px !important;
  height: 170px !important;
  transform: rotateX(0deg) rotateY(5deg) !important;
  transform-style: preserve-3d !important;
  border-radius: 4px !important;
  border: 2px solid rgba(0, 0, 0, 0.2) !important;
  object-fit: cover !important;
}

#disc-collection .disc:hover img {
  transform: rotateX(0deg) rotateY(1deg) !important;
  margin-top: -10px !important;
}

#disc-collection .title {
  color: #ffffff;
  display: block;
  visibility: hidden;
  position: absolute;
  bottom: 0px;
  text-align: left;
  width: 100%;
  font-weight: bold;
  font-size: 13px;
}

#disc-collection .disc:nth-child(n):hover + .title {
  visibility: visible;
}

/* TOUR / VENUES SECTION STYLING */
.tour-section {
  width: 100%;
  max-width: 700px;
  background-color: #1c1c1c;
  border: 1px solid #333333;
  margin: 20px 0;
  font-family: Arial, sans-serif;
  color: #ffffff;
}

.tour-header {
  background-color: #d32f2f;
  color: #ffffff;
  padding: 8px 12px;
  font-weight: bold;
  font-size: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.tour-header .buy-tickets {
  font-size: 12px;
  font-weight: normal;
}

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

.tour-table td {
  padding: 10px 12px;
  font-size: 13px;
  border-bottom: 1px solid #2a2a2a;
}

.tour-table tr:nth-child(even) {
  background-color: #181818;
}

.tour-table tr:hover {
  background-color: #252525;
}

.tour-table td font, .tour-table td a {
  color: #ffffff;
  text-decoration: none;
  font-weight: bold;
}

.tour-table td a:hover {
  text-decoration: underline;
  color: #ff5252;
}

/* WIDE SQUARE PROFILE TUNES */
div#profile-playlist-container {
  width: 125%!important;
  display: block;
  max-width: 500%!important;
} 

.profile-playlist-widget {
  background: #fff!important;
  border: 1px solid #000!important;
  backdrop-filter: blur(10px) saturate(160%);
  -webkit-backdrop-filter: blur(10px) saturate(160%);
  color: #000!important;
  box-shadow: 0 4px 18px rgba(0,0,0,0.4);
  max-width: 500%!important;
  font-size: 13px;
  border-radius: 0px!important;
  padding: 5px!important;
  margin: 5px 0!important;
  position: relative;
  z-index: 1;
  overflow: hidden;
  user-select: none;
}

.profile-playlist-widget h3 {
  margin: 0;
  font-size: 15px;
  color: #000!important;
  flex: 1;
}

.profile-playlist-widget .song-info {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 12px;
  font-weight: 1000;
  margin: 0px;
  line-height: 1;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0)!important;
}

.profile-playlist-widget .song-artist {
  font-weight: 800;
  color: #000!important;
  font-size: 11px;
}

.profile-playlist-widget .pp-drag {
  width: 19px;
  min-width: 8px;
  height: 0px;
  margin-right: 6px;
  color: #000!important;
  cursor: grab;
  user-select: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  touch-action: none;
  border-radius: 0px!important;
  transition: all 0.15s ease;
}

.profile-playlist-widget button {
  background: none;
  border: none;
  color: #000!important;
  cursor: pointer;
  font-size: 14px;
  padding: 2px 4px;
  border-radius: 0px!important;
  transition: all 0.2s;
  margin-left: auto;
}

.profile-playlist-widget li.current .song-info { color: #fff !important; }
.profile-playlist-widget li.current { color: #fff !important; background: black!important; }
.profile-playlist-widget li.current .song-artist { color: #fff !important; }
.profile-playlist-widget li.profile-playlist-item:hover { color: #fff !important; background: #6E6E6E!important; border: 1px solid #fff; }
.profile-playlist-widget li.profile-playlist-item { border-radius: 0px!important; }
li.profile-playlist-empty { border-radius: 0px!important; color: #000!important; }

.pp-equalizer {
  display: none;
  align-items: flex-end;
  gap: 0px;
  height: 32px!important;
  margin-right: auto;
  content: url('https://www.iconsdb.com/icons/download/white/musical-note-512.png');
}
</style>