Layout Preview | FriendRewind

Name: FriendRewind
Author: FriendRewind
FriendRewind
← Back to Layouts
kinda glitchy layout

Author: Heidi.mp3
Category: >:[
Created: May 3, 2026
lowk ahh
Comments (0)

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

<style>
<style>

/* =========================
   🌸 RESET / SAFETY FIX (fixes “sudden wide layout” bug)
========================= */

* {
  box-sizing: border-box;
}

body {
  overflow-x: hidden !important;
}

/* =========================
   🌸 GLOBAL SETTINGS
========================= */

body, body.profile-page {
  background-image: url(https://i.pinimg.com/736x/da/8b/eb/da8beb9594ab9dfcf90e1f357976b2b5.jpg) !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important;
  background-position: center center !important;
  font-family: 'Playfair Display', sans-serif !important;
  color: #e75480 !important;
}

/* ALL TEXT */
body, p, span, div, li, a,
h1, h2, h3, h4, h5, h6,
.status, .mood, .status-text, .mood-text {
  color: #e75480 !important;
  text-shadow:
    0 0 4px rgba(255,255,255,0.7),
    0 0 6px rgba(255,255,255,0.45) !important;
}

/* NO GLOW ON MEDIA */
audio, audio *, iframe, iframe * {
  text-shadow: none !important;
}


/* =========================
   🧍 PROFILE PIC + ✨ SPARKLES
========================= */

.profile-pic {
  position: relative;
  width: 180px;
  height: 180px;
  display: inline-block;
  overflow: hidden;
}

/* IMAGE */
.profile-pic img {
  position: absolute;
  top: 9% !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;
}

/* REMOVE STICKER */
.profile-pic::after {
  display: none !important;
}

/* ✨ PINK FLOATING SPARKLES */
.profile-pic::before {
  content: "✦ ✦ ✦ ✦ ✦ ✦ ✦ ✦";
  position: absolute;
  top: -20px;
  left: -20px;
  right: -20px;
  bottom: -20px;
  color: #ff6f91;
  font-size: 18px;
  letter-spacing: 10px;
  opacity: 0.8;
  z-index: 5;
  animation: sparkleFloat 6s linear infinite;
  pointer-events: none;
}

/* sparkle animation */
@keyframes sparkleFloat {
  0% {
    transform: rotate(0deg) translateY(0px);
  }
  50% {
    transform: rotate(10deg) translateY(-6px);
  }
  100% {
    transform: rotate(0deg) translateY(0px);
  }
}


/* =========================
   🖼️ HEADER
========================= */

main::before {
  content: "" !important;
  display: block !important;
  width: 100% !important;
  height: 300px !important;
  background-image: url(https://i.pinimg.com/736x/30/c4/44/30c444bf76871e58eb21c89f1da75af2.jpg) !important;
  background-size: cover !important;
  background-position: center center !important;
}


/* =========================
   👤 PROFILE BACKGROUND
========================= */

.profile {
  background-image: url(https://i.pinimg.com/1200x/52/de/1f/52de1f3c54db096b98f577157b990c94.jpg) !important;
  background-size: cover !important;
  background-position: top center !important;
}


/* =========================
   👯 FRIENDS BOX
========================= */

.friends {
  background-image: url(https://i.pinimg.com/736x/de/75/dd/de75ddc2663e793dca2c51c8f8cdf6eb.jpg) !important;
  background-size: cover !important;
  background-position: center !important;
}

.friends,
.friends * {
  color: #ff6f91 !important;
  text-shadow:
    0 0 3px rgba(255,255,255,0.9),
    0 0 6px rgba(255,255,255,0.6) !important;
}


/* =========================
   📤 SHARE PROFILE
========================= */

.share,
.share-profile,
.shareProfile,
.share-this-profile {
  color: #e75480 !important;
  text-shadow: 0 0 4px rgba(0,0,0,0.45) !important;
}


/* =========================
   🔗 LINKS
========================= */

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


/* =========================
   ✉️ CONTACT BOX
========================= */

.contact {
  border: 1px solid #e75480 !important;
  border-radius: 5px !important;
  background-image: url(https://i.pinimg.com/736x/ec/18/04/ec1804dc399b3d24b5d799349dfbe64d.jpg) !important;
  background-size: cover !important;
  background-position: center !important;
}


/* =========================
   💬 COMMENTS BOX
========================= */

#comments,
.comments-table td {
  background-image: url(https://i.pinimg.com/736x/bf/72/73/bf727384320f169fa0d0a383ff3feeca.jpg) !important;
  background-size: cover !important;
  background-position: center !important;
}


/* =========================
   📦 BOXES
========================= */

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


/* HEADINGS */
.table-section .heading,
.friends .heading,
.blurbs .heading,
.section .heading,
.module .heading,
.profileInfo .heading {
  background-color: #ffffff !important;
  color: #de3163 !important;
}

.contact .heading {
  background-color: #ffffff !important;
  color: #e75480 !important;
}


/* =========================
   🎨 OTHER BACKGROUNDS
========================= */

.url-info {
  background-image: url(https://i.pinimg.com/736x/e6/27/a6/e627a6f1ec5b5953e92ba0108c9a629b.jpg) !important;
}

.table-section {
  background-image: url(https://i.pinimg.com/736x/a5/0a/51/a50a5199197c40d0fc6987d779f2380a.jpg) !important;
}

.tunes {
  background-image: url("https://i.pinimg.com/1200x/f9/6d/dc/f96ddc960ffcfe6120a169174b42e53c.jpg") !important;
}

.blog-preview {
  background-image: url(https://i.pinimg.com/736x/da/8b/eb/da8beb9594ab9dfcf90e1f357976b2b5.jpg) !important;
}

.blurbs {
  background-image: url(https://i.pinimg.com/736x/3c/c4/96/3cc4963452ee3225da4def6d5a502338.jpg) !important;
}


/* =========================
   🧭 NAV
========================= */

.myspace-header .top-nav,
.myspace-header .main-nav-wrapper {
  background-size: cover !important;
  background-position: center !important;
}

.myspace-header .top-nav {
  background-image: url(https://i.pinimg.com/736x/c9/3d/5f/c93d5fa894869df8b5c6dc42b429493b.jpg) !important;
}

.myspace-header .main-nav-wrapper {
  background-image: url(https://i.pinimg.com/736x/0c/67/71/0c6771d63807a5bff4eca800c6b89986.jpg) !important;
}

</style></style>