← Back to Layouts
musicals!

Name: FriendRewind
Author: FriendRewind
Author: 𝔈𝔩𝔩𝔦𝔢𝔗𝔥𝔢𝔐𝔲𝔰𝔦𝔠𝔞𝔩
Category: Music
Created: October 28, 2026
Comments (0)

No comments yet. Be the first!
You must log in to comment.
CSS Code

<style id="fr-vb2">
/* VB2_STATE:{"cursorUrl":"","overlayUrl":"","overlayOpacity":0.2,"avatarAnimation":"monitor","pageFont":"","useLiveProfile":true,"previewUrl":"/profile?id=4","pageBgImage":"","pageBgMode":"cover","heroImageUrl":"https://file.garden/ajLIkdQpd3Qn0iYc/Green%20and%20White%20Simple%20Abstract%20Banner%20Landscape.png","profileRowBgImage":"","profileRowBgMode":"cover","navBgColor":"#2b333f","navBgImage":"","navBgMode":"cover","navLinkColor":"#ffffff","navLinkHover":"#66aaff","boxBgColor":"#ffffff","boxOpacity":1,"boxRadius":8,"contactHeaderBg":"#4169E1","contactHeaderText":"#ffffff","contactContentBg":"#ffffff","contactBorderColor":"#4169E1","contactBorderWidth":1,"contactBorderRadius":5,"contactBoxAnimation":"wiggle","interestsHeaderBg":"#DAA520","interestsHeaderText":"#ffffff","interestsContentBg":"#ffffff","interestsBorderColor":"#DAA520","interestsBorderWidth":1,"interestsBorderRadius":5,"contentBoxAnimation":"","textBody":"#000000","textHeading":"#000000","textLink":"#0066cc","headingShadowColor":"#000000","headingShadowBlur":2,"headingShadowEnable":false,"moduleImages":{"contact":"","urlInfo":"","tableSection":"","tunes":"","blogPreview":"","blurbs":"","friends":"","Comments Background":"","comments":""}} */
/* Generated by FriendRewind.com Visual Builder */

.profile-pic{position:relative;width:180px;height:180px;display:inline-block;overflow:hidden;}
.profile-pic img{position:absolute;top:9.0%!important;left:7.6%!important;width:84%!important;height:85%!important;object-fit:cover;z-index:1;clip-path:inset(2.2% 2.6% 3.2% 2% round 16% 20% 22% 16%)!important;}
.profile-pic::after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background-image:url('https://friendrewind.com/uploads/gallery/1/img_68e46a2e779929.30369018.png');background-size:100% 100%;background-repeat:no-repeat;background-position:center;pointer-events:none;z-index:2;}

@keyframes boxWiggle{0%,100%{transform:rotate(0deg);}25%{transform:rotate(1deg);}75%{transform:rotate(-1deg);}} .contact{animation:boxWiggle 2s infinite ease-in-out;}

main::before {
    content: "" !important;
    display: block !important;
    width: 100% !important;
    height: 300px !important;
    background-image: url('https://file.garden/ajLIkdQpd3Qn0iYc/Green%20and%20White%20Simple%20Abstract%20Banner%20Landscape.png') !important;
    background-size: cover !important;
    background-position: center center !important;
  }
</style><style>


/* FR_MANUAL_EXTRAS */
</style><div class="broadway">
  
    <p class="eyebrow">THE SHOW MUST GO ON</p>
    <h1>ALL THAT JAZZ.</h1>
    <p>wicked · six · hamilton · heathers</p>
    <div class="stars">✦ ★ ✦ ★ ✦</div>
  

  
    <a href="#about">ABOUT</a>
    <a href="#shows">FAV SHOWS</a>
    <a href="#music">PLAYLIST</a>
    <a href="#friends">CAST LIST</a>
  

  
    
      <h2>✦ THE LEAD ✦</h2>
      <p>just a mentally unstable musical lover </p>
      <p>currently obsessed with:</p>
      <p> wicked </p>
      <p> six </p>
      <p> hamilton </p>
      <p> heathers </p>
    

    
      <h2>✦ THE PLAYBILL ✦</h2>
      <div class="show wicked">01 / WICKED</div>
      <div class="show six">02 / SIX</div>
      <div class="show hamilton">03 / HAMILTON</div>
      <div class="show heathers">04 / HEATHERS</div>
    

    
      <h2>✦ ORCHESTRA PIT ✦</h2>
      <p>currently listening to...</p>
      <p>♫ No One Mourns The Wicked</p>
      <p>♫ Meant to Be Yours</p>
      <p>♫ You'll Be Back</p>
    

    
     
    
  

  
    CURTAIN CALL ✦ THANKS FOR COMING TO MY SHOW
  
</div><style>
.broadway {
  --pink: #ff4e9b;
  --purple: #a76bff;
  --green: #55e6a5;
  background: #100b18;
  color: #f9eafa;
  padding: 14px;
  border: 2px solid var(--pink);
  font-family: Georgia, serif;
}
.broadway .hero {
  text-align: center;
  padding: 30px 10px;
  border: 1px solid var(--purple);
  background: linear-gradient(135deg, #251032, #10131f, #301020);
}
.broadway h1 {
  color: var(--pink);
  font-size: 36px;
  letter-spacing: 4px;
  text-shadow: 2px 2px #54285c;
}
.broadway .eyebrow {
  color: var(--green);
  letter-spacing: 4px;
}
.broadway .stars { color: var(--green); }
.broadway .menu {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  padding: 16px 0;
}
.broadway a {
  color: var(--pink);
  text-decoration: none;
  font-size: 12px;
  letter-spacing: 2px;
}
.broadway .columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.broadway .panel {
  padding: 14px;
  border: 1px dashed #8c5d9d;
  background: #191120;
  overflow-wrap: anywhere;
}
.broadway h2 {
  font-size: 15px;
  color: var(--purple);
  letter-spacing: 2px;
  border-bottom: 1px solid #49304f;
  padding-bottom: 8px;
}
.broadway .show {
  padding: 10px 6px;
  margin: 7px 0;
  background: #24182b;
  letter-spacing: 2px;
  font-size: 12px;
}
.broadway .wicked { border-left: 3px solid var(--green); }
.broadway .six { border-left: 3px solid #ff70c8; }
.broadway .hamilton { border-left: 3px solid #e9c779; }
.broadway .heathers { border-left: 3px solid #f05268; }
.broadway footer {
  margin-top: 14px;
  padding: 15px 4px;
  text-align: center;
  color: var(--pink);
  font-size: 11px;
  letter-spacing: 2px;
}
@media (max-width: 480px) {
  .broadway .columns { grid-template-columns: 1fr; }
  .broadway h1 { font-size: 27px; }
}
</style>