← Back to Layouts
Early 2000s

Name: FriendRewind
Author: FriendRewind
Author: ♥•.¸¸.ஐ Ewok0517 ஐ.¸¸.•♥
Category: :D
Created: August 2, 2026
Comments (0)

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

<style>
<style>

/* =========================================================
   EWOK0517 PURPLE GLITTER ZEBRA SCENE LAYOUT
   DELETE ALL OLD CSS BEFORE PASTING THIS
========================================================= */

/* ---------- RESET ---------- */

* {
  box-sizing: border-box !important;
}

html {
  min-height: 100% !important;
  background: #09000d !important;
}

body {
  min-height: 100vh !important;
  margin: 0 !important;
  color: #ffffff !important;
  font-family: Verdana, Arial, sans-serif !important;

  /* TRUE PURPLE ZEBRA-STYLE BACKGROUND */
  background-color: #100015 !important;

  background-image:

    /* glitter dust */
    radial-gradient(circle at 10% 15%,
      rgba(255,255,255,.95) 0 1px,
      transparent 2px),

    radial-gradient(circle at 75% 30%,
      rgba(255,126,255,.9) 0 1px,
      transparent 2px),

    radial-gradient(circle at 30% 78%,
      rgba(204,102,255,.85) 0 1.5px,
      transparent 3px),

    radial-gradient(circle at 90% 82%,
      rgba(255,255,255,.75) 0 1px,
      transparent 2px),

    /* zebra pattern */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='700' height='500' viewBox='0 0 700 500'%3E%3Cdefs%3E%3ClinearGradient id='p' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%237900ad'/%3E%3Cstop offset='.45' stop-color='%23d52bff'/%3E%3Cstop offset='1' stop-color='%23400069'/%3E%3C/linearGradient%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='2' seed='8'/%3E%3CfeColorMatrix values='1 0 0 0 .55 0 1 0 0 .05 0 0 1 0 .8 0 0 0 .55 0'/%3E%3CfeBlend mode='screen' in2='SourceGraphic'/%3E%3C/filter%3E%3C/defs%3E%3Crect width='700' height='500' fill='%2307000b'/%3E%3Cg fill='url(%23p)' filter='url(%23g)'%3E%3Cpath d='M-20 22 C90 5 150 58 260 35 C370 12 445 62 720 14 L720 63 C535 88 420 40 305 74 C185 108 90 55 -20 82Z'/%3E%3Cpath d='M-30 112 C85 78 145 145 242 109 C342 72 450 134 730 92 L730 139 C500 178 420 112 308 151 C190 192 95 130 -30 172Z'/%3E%3Cpath d='M-40 213 C75 169 155 242 250 203 C370 153 460 237 740 181 L740 231 C530 280 438 207 310 252 C180 297 72 227 -40 281Z'/%3E%3Cpath d='M-35 322 C80 275 150 358 262 311 C365 268 478 348 735 292 L735 343 C510 394 430 321 305 366 C173 414 70 339 -35 399Z'/%3E%3Cpath d='M-30 431 C100 383 162 466 273 417 C380 371 482 450 730 399 L730 455 C510 501 428 431 300 476 C194 514 80 460 -30 498Z'/%3E%3C/g%3E%3C/svg%3E") !important;

  background-size:
    45px 45px,
    73px 73px,
    105px 105px,
    145px 145px,
    700px 500px !important;

  background-attachment: fixed !important;
  animation: zebraBackgroundMove 24s linear infinite !important;
}

@keyframes zebraBackgroundMove {
  0% {
    background-position:
      0 0,
      10px 20px,
      30px 5px,
      15px 40px,
      0 0;
  }

  50% {
    background-position:
      30px 45px,
      -25px 60px,
      65px -20px,
      -40px 10px,
      55px 20px;
  }

  100% {
    background-position:
      45px 90px,
      -63px 93px,
      105px -45px,
      -85px -20px,
      110px 40px;
  }
}

/* ---------- ANIMATED GLITTER LAYERS ---------- */

body::before,
body::after {
  content: "" !important;
  position: fixed !important;
  inset: 0 !important;
  pointer-events: none !important;
  z-index: 9998 !important;
}

body::before {
  opacity: .75 !important;

  background-image:
    radial-gradient(circle,
      rgba(255,255,255,1) 0 1px,
      rgba(255,255,255,.2) 2px,
      transparent 4px),

    radial-gradient(circle,
      rgba(255,72,242,.95) 0 1.5px,
      transparent 4px),

    radial-gradient(circle,
      rgba(185,98,255,.9) 0 1px,
      transparent 3px) !important;

  background-size:
    90px 90px,
    137px 137px,
    193px 193px !important;

  background-position:
    4px 12px,
    43px 61px,
    78px 17px !important;

  animation: glitterDrift 16s linear infinite !important;
}

body::after {
  opacity: .55 !important;

  background-image:
    radial-gradient(ellipse at center,
      rgba(255,255,255,.95) 0 1px,
      rgba(255,255,255,.4) 2px,
      transparent 5px),

    radial-gradient(ellipse at center,
      rgba(238,138,255,.95) 0 2px,
      transparent 6px) !important;

  background-size:
    160px 160px,
    225px 225px !important;

  animation: glitterBlink 2.8s ease-in-out infinite alternate !important;
}

@keyframes glitterDrift {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(-90px, 90px, 0);
  }
}

@keyframes glitterBlink {
  0% {
    opacity: .18;
    filter: brightness(.8);
  }

  45% {
    opacity: .7;
    filter: brightness(1.7);
  }

  100% {
    opacity: .3;
    filter: brightness(1.1);
  }
}

/* ---------- MAIN PAGE AREA ---------- */

main,
#container,
#content,
.container,
.profile,
.profile-container,
main.container {
  position: relative !important;
  z-index: 1 !important;
  width: min(94%, 1450px) !important;
  max-width: 1450px !important;
  margin-left: auto !important;
  margin-right: auto !important;

  background:
    linear-gradient(
      rgba(8,0,13,.88),
      rgba(20,0,29,.91)
    ) !important;

  border-left: 3px solid #d32cff !important;
  border-right: 3px solid #d32cff !important;

  box-shadow:
    0 0 8px #ff72ff,
    0 0 25px rgba(204,43,255,.75),
    0 0 50px rgba(122,0,180,.55) !important;
}

/* ---------- KEEP COLUMNS FROM BREAKING ---------- */

.profile .left,
.profile .right,
.profile .left-column,
.profile .right-column,
.profile .col,
.profile .column,
.profile > div {
  min-width: 0 !important;
}

table {
  max-width: 100% !important;
}

td {
  min-width: 0 !important;
  overflow-wrap: anywhere !important;
}

/* ---------- TOP NAVIGATION ---------- */

nav,
.navbar,
.topnav,
#navigation,
.navigation,
header nav {
  position: relative !important;
  z-index: 10 !important;

  background:
    repeating-linear-gradient(
      135deg,
      #21002e 0,
      #21002e 8px,
      #75009a 8px,
      #75009a 15px,
      #bd24dd 15px,
      #bd24dd 18px
    ) !important;

  border-top: 2px solid #ff9cff !important;
  border-bottom: 3px solid #e22eff !important;

  box-shadow:
    0 0 8px #ff70ff,
    0 0 19px #8d00c5 !important;
}

nav a,
.navbar a,
.topnav a,
#navigation a,
.navigation a {
  display: inline-block !important;
  color: #ffffff !important;
  font-weight: 900 !important;
  text-transform: none !important;
  text-shadow:
    1px 1px 1px #000000,
    0 0 6px #ff72ff !important;

  border-right: 1px solid rgba(255,255,255,.25) !important;
}

nav a:hover,
.navbar a:hover,
.topnav a:hover,
#navigation a:hover,
.navigation a:hover {
  color: #ffffff !important;
  background:
    linear-gradient(
      #ff65ea,
      #8c00a8
    ) !important;

  box-shadow:
    inset 0 0 12px #ffffff,
    0 0 12px #ff5cff !important;
}

/* ---------- MAKE BLOG BUTTON IMPOSSIBLE TO MISS ---------- */

nav a[href*="blog"],
.navbar a[href*="blog"],
.topnav a[href*="blog"],
#navigation a[href*="blog"],
.navigation a[href*="blog"] {
  position: relative !important;
  z-index: 12 !important;

  color: #ffffff !important;
  font-size: 1.08em !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;

  background:
    repeating-linear-gradient(
      135deg,
      #ff35d3 0,
      #ff35d3 7px,
      #8e00bd 7px,
      #8e00bd 14px
    ) !important;

  border: 2px solid #ffffff !important;
  border-radius: 10px !important;

  box-shadow:
    0 0 7px #ffffff,
    0 0 15px #ff48e4,
    0 0 28px #a800e0 !important;

  animation: blogPulse 1.6s ease-in-out infinite alternate !important;
}

nav a[href*="blog"]::after,
.navbar a[href*="blog"]::after,
.topnav a[href*="blog"]::after,
#navigation a[href*="blog"]::after,
.navigation a[href*="blog"]::after {
  content: " ✦" !important;
}

@keyframes blogPulse {
  from {
    filter: brightness(1);
    transform: translateY(0);
  }

  to {
    filter: brightness(1.35);
    transform: translateY(-2px);
  }
}

/* ---------- PROFILE NAME ---------- */

h1,
.profile h1,
.profile-name,
.display-name {
  color: #ffffff !important;
  text-align: center !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-weight: bold !important;
  letter-spacing: 2px !important;

  text-shadow:
    2px 2px 0 #400050,
    0 0 7px #ffffff,
    0 0 15px #ff5df1,
    0 0 28px #8d00d4 !important;
}

/* ---------- ALL MODULE BOXES ---------- */

section,
.box,
.card,
.module,
.profile .contact,
.profile .blurbs,
.profile .friends,
.profile .table-section,
.profile .details-table,
.profile .url-info,
.profile .blog-preview,
.profile .music,
.profile .photos,
.profile .videos,
.profile .comments,
.profile .profile-info,
.profile .friend-space,
.profile .latest-blog,
.profile .bio {
  overflow: hidden !important;

  background:
    linear-gradient(
      145deg,
      rgba(10,0,15,.97),
      rgba(34,0,44,.96)
    ) !important;

  color: #ffffff !important;

  border: 2px solid #e46cff !important;
  border-radius: 9px !important;

  box-shadow:
    0 0 4px #ffffff,
    0 0 11px #bd35e8,
    inset 0 0 18px rgba(117,0,160,.45) !important;

  margin-bottom: 18px !important;
}

/* ---------- SCENE/ZEBRA BOX HEADINGS ---------- */

.heading,
.profile .heading,
section h2,
section h3,
.box-title,
.module-title,
.card-header,
.profile .friends .heading,
.profile .contact .heading,
.profile .blurbs .heading,
.profile .table-section .heading,
.profile .photos .heading,
.profile .videos .heading {
  display: block !important;
  width: 100% !important;
  padding: 10px 14px !important;

  color: #ffffff !important;
  font-weight: 900 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;

  background:
    repeating-linear-gradient(
      135deg,
      #180020 0,
      #180020 9px,
      #780098 9px,
      #780098 18px,
      #d73fec 18px,
      #d73fec 21px
    ) !important;

  border-bottom: 2px solid #ff9dff !important;

  text-shadow:
    1px 1px 1px #000000,
    0 0 5px #ffffff,
    0 0 10px #ff61ef !important;

  box-shadow:
    inset 0 0 12px rgba(255,255,255,.24),
    0 0 9px #b61cdd !important;
}

/* ---------- LATEST BLOG SPOTLIGHT ---------- */

.profile .latest-blog,
.profile .blog-preview,
.latest-blog,
.blog-preview,
[class*="latest-blog"],
[class*="blog-preview"] {
  border: 3px solid #ff66ed !important;

  background:
    linear-gradient(
      145deg,
      rgba(40,0,52,.98),
      rgba(9,0,15,.98)
    ) !important;

  box-shadow:
    0 0 8px #ffffff,
    0 0 18px #ff4be1,
    0 0 36px rgba(179,0,225,.8),
    inset 0 0 18px rgba(251,58,255,.22) !important;

  animation: blogBoxGlow 2.5s ease-in-out infinite alternate !important;
}

.profile .latest-blog::before,
.profile .blog-preview::before,
.latest-blog::before,
.blog-preview::before {
  content: "★ READ MY LATEST BLOGS ★" !important;
  display: block !important;
  padding: 11px !important;

  color: #ffffff !important;
  text-align: center !important;
  font-size: 18px !important;
  font-weight: 900 !important;
  letter-spacing: 1px !important;

  background:
    repeating-linear-gradient(
      -45deg,
      #ff43d7 0,
      #ff43d7 7px,
      #650090 7px,
      #650090 14px
    ) !important;

  border-bottom: 2px solid #ffffff !important;

  text-shadow:
    1px 1px #000000,
    0 0 7px #ffffff !important;
}

@keyframes blogBoxGlow {
  from {
    box-shadow:
      0 0 6px #ffffff,
      0 0 14px #ff4be1,
      0 0 25px rgba(179,0,225,.65);
  }

  to {
    box-shadow:
      0 0 10px #ffffff,
      0 0 25px #ff4be1,
      0 0 48px rgba(179,0,225,.95);
  }
}

/* ---------- TEXT READABILITY ---------- */

p,
span,
div,
td,
th,
li,
label,
small,
strong,
em,
b,
.profile-info,
.details-table,
.blurbs,
.comments,
.friend-space {
  color: #ffffff !important;
}

p,
td,
li,
.profile-info,
.details-table,
.blurbs,
.comments {
  line-height: 1.35 !important;
  text-shadow:
    1px 1px 2px #000000 !important;
}

h2,
h3,
h4,
h5 {
  color: #ffb5fa !important;
  text-shadow:
    1px 1px 1px #000000,
    0 0 7px #d94bff !important;
}

a {
  color: #f58cff !important;
  font-weight: bold !important;

  text-shadow:
    1px 1px 1px #000000,
    0 0 5px #9f17cf !important;
}

a:hover {
  color: #ffffff !important;
  text-shadow:
    0 0 5px #ffffff,
    0 0 11px #ff4be5 !important;
}

/* ---------- TABLES ---------- */

table,
tbody,
tr,
td {
  color: #ffffff !important;
  border-color: #9e37c1 !important;
}

table {
  background: rgba(12,0,18,.94) !important;
}

td {
  background: rgba(18,0,25,.92) !important;
}

.details-table td:first-child,
table td:first-child {
  color: #ffffff !important;
}

/* ---------- PROFILE PHOTO ---------- */

.profile-pic,
.profile-photo {
  max-width: 100% !important;
}

.profile-pic img,
.profile-photo img,
.profile img.avatar {
  display: block !important;
  max-width: 100% !important;
  height: auto !important;

  border: 3px solid #ff8ff6 !important;
  border-radius: 5px !important;

  box-shadow:
    0 0 6px #ffffff,
    0 0 14px #dc39f2,
    0 0 27px rgba(137,0,202,.8) !important;
}

/* ---------- NEVER SQUISH PHOTOS ---------- */

.photos img,
.friend-grid img,
.friends img,
.photo-grid img,
.profile .photos img,
.profile .friends img {
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
  object-fit: cover !important;

  border: 2px solid #e75cf2 !important;
  border-radius: 4px !important;

  box-shadow:
    0 0 5px #ffffff,
    0 0 10px #b325dc !important;
}

.photos table img,
.friends table img {
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;
}

.photos td,
.friends td {
  padding: 5px !important;
  vertical-align: top !important;
}

/* ---------- VIDEOS ---------- */

.videos img,
.video-grid img {
  width: 100% !important;
  height: auto !important;
  object-fit: cover !important;
}

.videos td,
.video-grid > div {
  padding: 4px !important;
}

/* ---------- MUSIC PLAYER ---------- */

.music,
.profile-music,
.music-player,
.profile .music {
  background:
    linear-gradient(
      145deg,
      rgba(8,0,12,.98),
      rgba(36,0,48,.98)
    ) !important;

  color: #ffffff !important;
}

audio {
  max-width: 100% !important;
}

/* ---------- COMMENTS: EASY TO READ ---------- */

.comments,
.comment-section,
.comments-table,
.comments table,
.profile .comments {
  background: rgba(10,0,15,.98) !important;
  color: #ffffff !important;
}

.comments tr,
.comment-section tr,
.comments-table tr {
  background: rgba(20,0,29,.97) !important;
}

.comments td,
.comment-section td,
.comments-table td,
.profile .comments td {
  color: #ffffff !important;
  background: rgba(25,0,36,.98) !important;

  border:
    1px solid #a742cd !important;

  padding: 12px !important;

  text-shadow:
    1px 1px 2px #000000 !important;
}

.comments td:first-child,
.comment-section td:first-child,
.comments-table td:first-child {
  background:
    repeating-linear-gradient(
      135deg,
      #280033 0,
      #280033 10px,
      #55006c 10px,
      #55006c 20px
    ) !important;

  color: #ffffff !important;
}

.comments a,
.comment-section a,
.comments-table a {
  color: #ff9cf4 !important;
}

.comments img,
.comment-section img {
  max-width: 120px !important;
  width: auto !important;
  height: auto !important;

  border: 2px solid #ff73ec !important;
}

/* ---------- COMMENT TEXTAREA ---------- */

textarea,
.comment-box textarea,
.comments textarea {
  display: block !important;
  width: 96% !important;
  max-width: 96% !important;
  min-height: 100px !important;
  height: 100px !important;

  margin: 10px auto !important;
  padding: 10px !important;

  background: #100016 !important;
  color: #ffffff !important;

  border: 2px solid #e24be6 !important;
  border-radius: 7px !important;

  box-shadow:
    inset 0 0 12px #430057,
    0 0 8px #b72ed4 !important;
}

/* ---------- BUTTONS ---------- */

button,
input[type="submit"],
input[type="button"],
.btn,
.button {
  color: #ffffff !important;
  font-weight: 900 !important;

  background:
    repeating-linear-gradient(
      135deg,
      #9d16c3 0,
      #9d16c3 7px,
      #420058 7px,
      #420058 14px
    ) !important;

  border: 2px solid #f29bff !important;
  border-radius: 6px !important;

  box-shadow:
    0 0 5px #ffffff,
    0 0 9px #c239e8 !important;
}

button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
.btn:hover,
.button:hover {
  background:
    linear-gradient(
      #ff57df,
      #72009b
    ) !important;

  box-shadow:
    0 0 7px #ffffff,
    0 0 16px #ff4be4 !important;
}

/* ---------- INPUTS ---------- */

input,
select {
  max-width: 100% !important;

  background: #110019 !important;
  color: #ffffff !important;

  border: 2px solid #bc3ddb !important;
  border-radius: 5px !important;
}

/* ---------- FUN DECORATIVE DIVIDERS ---------- */

hr {
  height: 14px !important;
  border: 0 !important;

  background:
    repeating-linear-gradient(
      135deg,
      transparent 0,
      transparent 5px,
      #df38ef 5px,
      #df38ef 8px,
      transparent 8px,
      transparent 13px
    ) !important;

  filter: drop-shadow(0 0 4px #ff7cff) !important;
}

/* ---------- SCROLLBAR ---------- */

::-webkit-scrollbar {
  width: 14px !important;
}

::-webkit-scrollbar-track {
  background: #09000d !important;
  border-left: 1px solid #631078 !important;
}

::-webkit-scrollbar-thumb {
  background:
    repeating-linear-gradient(
      135deg,
      #dd42e9 0,
      #dd42e9 7px,
      #52006c 7px,
      #52006c 14px
    ) !important;

  border: 2px solid #f39cff !important;
  border-radius: 8px !important;
}

/* ---------- TEXT SELECTION ---------- */

::selection {
  color: #ffffff !important;
  background: #d62adf !important;
}

/* ---------- MOBILE ---------- */

@media screen and (max-width: 800px) {

  main,
  #container,
  #content,
  .container,
  .profile,
  .profile-container,
  main.container {
    width: 98% !important;
    border-left-width: 1px !important;
    border-right-width: 1px !important;
  }

  nav a,
  .navbar a,
  .topnav a,
  #navigation a,
  .navigation a {
    font-size: 12px !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  .profile .left,
  .profile .right,
  .profile .left-column,
  .profile .right-column {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
  }

  .photos table img,
  .friends table img {
    min-height: 80px !important;
  }
}

</style>

<div style="
margin:18px auto;
max-width:900px;
padding:14px;
text-align:center;
color:#fff;
font-weight:bold;
font-size:18px;
letter-spacing:1px;
background:
repeating-linear-gradient(
135deg,
#130019 0,
#130019 10px,
#760098 10px,
#760098 20px,
#df3ce9 20px,
#df3ce9 23px
);
border:3px double #ff9cff;
box-shadow:
0 0 7px #fff,
0 0 15px #ff4fe3,
0 0 30px #8c00c5;
text-shadow:
1px 1px #000,
0 0 7px #fff;
">
✦ ♥ xXx ♥ =^.^= ♥ xXx ♥ ✦<br>
<span style="font-size:25px;">WELCOME TO THE PURPLE SIDE</span><br>
<span style="font-size:14px;">
elder emo • cat mom • Star Wars obsessed • forever stuck in 2006
</span><br>
✦ ♫ rawr xD ♫ ✦
</div>

<div style="
margin:18px auto;
max-width:900px;
padding:18px;
text-align:center;
background:rgba(12,0,18,.96);
border:3px solid #ff5ce3;
border-radius:10px;
box-shadow:
0 0 7px #fff,
0 0 18px #ed45ed,
inset 0 0 20px rgba(151,0,194,.55);
color:#fff;
">
<div style="
font-size:23px;
font-weight:bold;
color:#fff;
text-shadow:
0 0 6px #fff,
0 0 13px #ff53e5;
">
★ NEW HERE? READ MY BLOG ★
</div>

<div style="
margin-top:8px;
font-size:15px;
line-height:1.5;
">
I post about my life, recovery, animals, memories, adventures,
Star Wars, nostalgia, and whatever is currently living rent-free in my brain.
</div>

<div style="margin-top:14px;">
<a href="/blogs.php" style="
display:inline-block;
padding:10px 22px;
color:#fff !important;
font-size:17px;
font-weight:bold;
text-decoration:none;
letter-spacing:1px;
background:
repeating-linear-gradient(
135deg,
#ff3bd3 0,
#ff3bd3 8px,
#750098 8px,
#750098 16px
);
border:2px solid #fff;
border-radius:9px;
box-shadow:
0 0 7px #fff,
0 0 16px #ff43df;
">
✦ ENTER MY BLOG ✦
</a>
</div>
</div></style>