← Back to Blog Layouts
Layout Preview

my first blog ever 2nd ever blog ever

Author: Ziggly McSnorp (Laptop)
Category: Bands
Created: September 25, 2026
Downloads: 2
Log in to Apply

Live Preview

Comments (0)

No comments yet. Be the first!

Log in to leave a comment.

Layout CSS

<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: #ffffff !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;
  }
}

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

.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;
}

.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; }

/* Blog Layout Grid */
.blog-layout-container {
  display: flex;
  flex-direction: row;
  gap: 20px;
  max-width: 1000px;
  margin: 20px auto;
  font-family: 'Righteous', sans-serif;
}

.blog-main-content {
  flex: 2;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.blog-sidebar {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Blog Post Cards */
.fr-blog-post {
  background: rgba(0, 0, 0, 0.85);
  border: 1px solid #171716;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
}

.fr-blog-header {
  background-color: #171716;
  color: #e60505;
  padding: 10px 15px;
  border-bottom: 1px solid #ee0204;
}

.fr-blog-title {
  font-size: 20px;
  margin: 0;
  color: #ff0000;
}

.fr-blog-date {
  font-size: 12px;
  color: #888888;
  margin-top: 4px;
}

.fr-blog-body {
  padding: 15px;
  color: #dcdcdc;
  font-size: 14px;
  line-height: 1.5;
}

/* Profile Picture & Sticker */
.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; }

.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;
}

/* Tour Table Styling */
.tour-section {
  width: 100%;
  background-color: #1c1c1c;
  border: 1px solid #333333;
  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-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 a { color: #ffffff; text-decoration: none; font-weight: bold; }
.tour-table td a:hover { text-decoration: underline; color: #ff5252; }

/* Albums Stack */
#disc-collection * { all: unset; }
#disc-collection {
  all: initial !important;
  width: 100% !important;
  height: 220px !important;
  margin: 10px 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: 140px !important; }

#disc-collection img {
  all: unset !important;
  transition: transform 0.5s, width 0.5s, height 0.5s, margin-top 0.5s !important;
  width: 130px !important;
  height: 130px !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: 11px;
}

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

/* Sidebar Box Wrapper */
.sidebar-box {
  background: rgba(0, 0, 0, 0.85);
  border: 1px solid #171716;
  border-radius: 6px;
  padding: 12px;
}

.sidebar-box h4 {
  color: #e60505 !important;
  margin-top: 0;
  margin-bottom: 10px;
  border-bottom: 1px solid #333;
  padding-bottom: 5px;
}
</style>

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

<!-- Main Blog Layout Container -->
<div class="blog-layout-container">

  <!-- Left Main Column (Blog Entries) -->
  <div class="blog-main-content">

    <!-- Blog Post 1: Latest Update -->
    <div class="fr-blog-post">
      <div class="fr-blog-header">
        <h3 class="fr-blog-title">Welcome to the Official Ziggly McSnorp Blog!</h3>
        <div class="fr-blog-date">Posted on MM/DD/20XX at 12:00 PM</div>
      </div>
      <div class="fr-blog-body">
        <p>Check out our latest news, member cards, upcoming tour dates, and discography updates right here. Make sure to give our SoundCloud a listen by clicking the main header banner above!</p>
        <img src="/proxy/image.php?url=https%3A%2F%2Fmedia.base44.com%2Fimages%2Fpublic%2F6a3d58b54cdd5a26139a0b9a%2F665481a4c_3443.jpg" style="width:100%; display:block; margin:15px 0 0 0; border-radius:4px;">
      </div>
    </div>

    <!-- Blog Post 2: Tour Dates -->
    <div class="fr-blog-post">
      <div class="fr-blog-header">
        <h3 class="fr-blog-title">Upcoming Tour Dates & Shows</h3>
        <div class="fr-blog-date">Posted on MM/DD/20XX at 03:30 PM</div>
      </div>
      <div class="fr-blog-body">
        <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>
            </tbody>
          </table>
        </div>
      </div>
    </div>

  </div>

  <!-- Right Sidebar Column -->
  <div class="blog-sidebar">

    <!-- Member Cards Section -->
    <div class="sidebar-box">
      <h4>Band Members</h4>
      <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%; display:block; margin-bottom:10px; 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.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7ImhlaWdodCI6Ijw9MTg6MCIsInBhdGgiOiIvZi9jZjc1YTNjZi0wNjAxLTQxODAtOTdmZS1hOTIyYmJiZjI2OWYvZG12aXVkbi0xYTU1NmFjMi0yOTM4LTQyOGYtODIwOC03ZDI2ZWMwOGI3NDEucG5nIiwid2lkdGgiOiI8PTEyODAifV1dLCJhdWQiOlsidXJuOnNlcnZpY2U6aW1hZ2Uub3BlcmF0aW9ucyJdfQ.2vSxPQbtLDyVCZc6_Z9ta92wL0OQ6lCG-5wodJzFskE" style="width:100%; display:block; margin-bottom:10px; 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%; display:block; margin-bottom:10px; 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%; display:block; border:2px solid #EE0204;">
    </div>

    <!-- Discography Section -->
    <div class="sidebar-box">
      <h4>Discography</h4>
      <div id="disc-collection">
        <div class="disc">
          <img src="https://content.myspacecdn.com/images03/3/6d6868a8d1f349c58c7d6ea81c3e2485/300x300.jpg">
        </div>
        <div class="title">Unreleased</div>

        <div class="disc">
          <img src="https://f4.bcbits.com/img/a1347554072_2.jpg">
        </div>
        <div class="title">a long term of since...</div>

        <div class="disc">
          <img src="https://friendrewind.com/media/artist_covers/15965_1784464268_c17e54.webp">
        </div>
        <div class="title">Blue is the Color...</div>

        <div class="disc">
          <img src="https://friendrewind.com/media/artist_covers/15965_1789498650_1a0f6a.webp">
        </div>
        <div class="title">The Prequel of the Plague...</div>
      </div>
    </div>

  </div>

</div>