← Back to Layouts
Apples

Name: FriendRewind
Author: FriendRewind
Author: toxin
Category: Twee!
Created: June 26, 2026
Cute apple layout with fixed profile that scrolls, custom music bar, custom online icon, custom cursor, animated username, and cute apple graphics.
Comments (0)

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

<style>
<style>
@import url('https://fonts.googleapis.com/css2?family=Mountains+of+Christmas:wght@400;700&display=swap');
  
:root {


    /* Main colors */
    --color-black: #2f2118;
    --color-black-soft: #4a3527;
    --color-panel: rgba(92, 73, 42, 0.94);
    --color-panel-alt: rgba(132, 111, 58, 0.94);
    --color-purple-dark: #6f5a2d;
    --color-purple: #a8b94c;
    --color-purple-bright: #d9df78;
    --color-lilac: #fff3c4;
    --color-pastel-pink: #d94a35;
    --color-pastel-pink-glow: rgba(217, 74, 53, 0.42);
    --color-text: #fff8dc;
    --color-text-muted: #e3d5a8;
    --color-white: #fffdf3;
    --color-transparent: transparent;

    /* Effects */
    --color-shadow: rgba(47, 33, 24, 0.9);
    --color-purple-glow: rgba(168, 185, 76, 0.45);
    --color-scroll-track: #4a3527;
    --color-scroll-thumb: #a8b94c;
    --color-scroll-thumb-hover: #d9df78;
    --color-border-brown: #6b4328;


}


html,
body {
    margin: 0 !important;
    min-height: 100% !important;
}

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

body,
body * {
    color: var(--color-text) !important;
    font-family: Arial, Helvetica, sans-serif !important;
    cursor: url('https://gloomy-poison.neocities.org/twee_graphics/applecursor.gif'), auto !important;
}

a,
button,
input,
textarea,
select {
    cursor: url('https://gloomy-poison.neocities.org/twee_graphics/applecursor.gif'), pointer !important;
}

body {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
    padding: 20px 0 !important;
    background-color: var(--color-black) !important;
    background-image: url('https://i8.glitter-graphics.org/pub/2216/2216288p9dl5ik0dg.jpg') !important;
    background-repeat: repeat !important;
    font-size: 12px !important;
    line-height: 1.25 !important;
}


.master-container {
    position: relative !important;
    isolation: isolate !important;
    width: 800px !important;
    min-width: 800px !important;
    max-width: 800px !important;
    height: 800px !important;
    max-height: 800px !important;
    margin: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    background-color: var(--color-panel) !important;
    border: 2px dotted var(--color-pastel-pink) !important;
    border-radius: 14px !important;
    box-shadow:
        0 0 10px var(--color-pastel-pink-glow),
        0 0 24px var(--color-pastel-pink-glow) !important;
    scrollbar-color: var(--color-scroll-thumb) var(--color-scroll-track) !important;
    scrollbar-width: thin !important;
}


.master-container::before {
    content: '' !important;
    position: sticky !important;
    top: 0 !important;
    left: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 800px !important;
    margin-bottom: -800px !important;
    background-color: var(--color-panel) !important;
    background-image: url('https://dl.glitter-graphics.com/pub/3107/3107850bkssnumjpv.gif') !important;
    background-repeat: repeat !important;
    background-position: top left !important;
    border-radius: 6px !important;
    pointer-events: none !important;
    z-index: -1 !important;
}

.master-container::-webkit-scrollbar {
    width: 12px !important;
}

.master-container::-webkit-scrollbar-track {
    background: var(--color-scroll-track) !important;
    border-left: 2px dotted var(--color-pastel-pink) !important;
}

.master-container::-webkit-scrollbar-thumb {
    background-color: var(--color-scroll-thumb) !important;
    background-image: url('https://dl.glitter-graphics.com/pub/3107/3107850bkssnumjpv.giff') !important;
    border: 2px dotted var(--color-pastel-pink) !important;
}

.master-container::-webkit-scrollbar-thumb:hover {
    background-color: var(--color-scroll-thumb-hover) !important;
}


main,
.profile,
.profile-body,
.profile-content,
.left-column,
.right-column {
    gap: 8px !important;
}

main,
.profile,
.profile-body,
.profile-content {
    margin: 0 !important;
    padding: 0 !important;
}

.left-column,
.right-column {
    margin: 0 !important;
    padding: 0 !important;
}


.contact,
.url-info,
.table-section,
.tunes,
.blog-preview,
.blurbs,
.friends,
.photos-preview,
#comments,
.profile-playlist-widget {
    margin: 0 0 8px 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: var(--color-panel-alt) !important;
    border: 2px dotted var(--color-pastel-pink) !important;
    border-radius: 10px !important;
    box-shadow: 0 0 8px var(--color-pastel-pink-glow) !important;
}


.contact .heading,
.url-info .heading,
.table-section .heading,
.tunes .heading,
.blog-preview h4,
.blurbs .heading,
.friends .heading,
.photos-preview .heading,
#comments .heading,
.heading h4,
.pp-header {
    min-height: 25px !important;
    height: 25px !important;
    margin: 0 !important;
    padding: 0 7px !important;
    background-color: var(--color-purple-dark) !important;
    background-image: url('https://dl.glitter-graphics.com/pub/3771/3771729ojzd3t83c5.gif') !important;
    background-position: top left !important;
    background-repeat: repeat !important;
    border: 0 !important;
    border-bottom: 2px dotted  var(--color-pastel-pink) !important;
    color: var(--color-white) !important;
  font-family: "Mountains of Christmas", serif !important;
    font-size: 17px !important;
    font-weight: normal !important;
    line-height: 23px !important;
    letter-spacing: 0.5px !important;
    text-align: left !important;
    text-shadow:
        1px 1px 0 var(--color-black),
        0 0 4px var(--color-black) !important;
}


.contact .inner,
.url-info .inner,
.table-section .inner,
.tunes .inner,
.blog-preview .inner,
.blurbs .inner,
.friends .inner,
.photos-preview .inner,
#comments .inner,
.profile-playlist-widget ul {
    padding: 6px !important;
    margin: 0 !important;
}

p,
ul,
ol,
blockquote {
    margin-top: 4px !important;
    margin-bottom: 4px !important;
}

ul,
ol {
    padding-left: 18px !important;
}

h1 {
    margin: 2px 0 5px !important;
    color: var(--color-lilac) !important;
  font-family: "Mountains of Christmas", serif !important;
    font-size: 25px !important;
    line-height: 1.05 !important;
    letter-spacing: 1px !important;
    text-shadow:
        2px 2px 0 var(--color-black),
        0 0 8px var(--color-purple-bright) !important;
}

h2,
h3,
h4,
h5,
h6 {
    margin: 4px 0 !important;
    color: var(--color-lilac) !important;
  font-family: "Mountains of Christmas", serif !important;
}


a {
    color: var(--color-purple-bright) !important;
    font-weight: bold !important;
    text-decoration: none !important;
}

a:hover {
    color: var(--color-white) !important;
    text-shadow: 0 0 5px var(--color-purple-bright) !important;
}


.main-header,
.myspace-header,
.top-nav,
.main-nav-wrapper,
.main-nav-container,
.main-nav,
.main-nav li {
    margin: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    background: var(--color-transparent) !important;
    border: 0 !important;
    box-shadow: none !important;
}

#site-logo-link {
    padding: 0 0 4px !important;
}

#logo {
    max-height: 55px !important;
    width: auto !important;
}

.main-nav {
    min-height: 25px !important;
    margin-bottom: 7px !important;
    background-color: var(--color-purple-dark) !important;
    background-image: url('https://dl.glitter-graphics.com/pub/3771/3771729ojzd3t83c5.gif') !important;
    border: 2px dotted  var(--color-pastel-pink) !important;
    border-radius: 10px !important;
    box-shadow: 0 0 8px var(--color-pastel-pink-glow) !important;
}

.main-nav a,
.nav a,
.main-nav .dropdown > a {
    display: inline-block !important;
    padding: 4px 7px !important;
    color: var(--color-white) !important;
    font-size: 11px !important;
    line-height: 16px !important;
    text-shadow: 1px 1px 0 var(--color-black) !important;
}

.main-nav a:hover {
    background: var(--color-black-soft) !important;
    color: var(--color-lilac) !important;
}


.profile-pic {
    width: 100% !important;
    max-width: 180px !important;
    aspect-ratio: 1 / 1 !important;
    overflow: hidden !important;
    border-radius: 8px !important;
}

.profile-pic img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
    object-position: center !important;
}


.person img,
.profile-pic img,
.friends-grid img,
img.cb-pfp-img,
.person img.pfp-fallback {
    border: 2px dotted var(--color-pastel-pink) !important;
    border-radius: 8px !important;
    box-shadow: 0 0 7px var(--color-pastel-pink-glow) !important;
    background: var(--color-black) !important;
}

.friends-grid {
    gap: 5px !important;
}

.friends-grid .person {
    margin: 0 !important;
    padding: 2px !important;
}


.details-table,
.comments-table {
    width: 100% !important;
    margin: 0 !important;
    border-collapse: collapse !important;
    background: var(--color-black-soft) !important;
    border: 2px dotted  var(--color-pastel-pink) !important;
}

.details-table th,
.details-table td,
.comments-table th,
.comments-table td {
    padding: 3px 5px !important;
    border: 1px solid var(--color-pastel-pink) !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
}

.details-table th {
    width: 30% !important;
    background: var(--color-purple-dark) !important;
    color: var(--color-lilac) !important;
  font-family: "Mountains of Christmas", serif !important;
    font-size: 14px !important;
}

.cb-author-cell {
    width: 120px !important;
    background: var(--color-purple-dark) !important;
    border-right: 2px dotted var(--color-pastel-pink) !important;
}

.cb-content-cell {
    background: var(--color-black-soft) !important;
}


button,
input,
textarea,
select,
.cb-actions a,
.cb-reply-form input[type='submit'],
.pp-help-btn,
.bar-btn {
    padding: 3px 6px !important;
    background: var(--color-black-soft) !important;
    border: 2px dotted  var(--color-pastel-pink) !important;
    border-radius: 7px !important;
    color: var(--color-lilac) !important;
    font-size: 11px !important;
}

button:hover,
input[type='submit']:hover,
.cb-actions a:hover,
.pp-help-btn:hover,
.bar-btn:hover {
    background: var(--color-purple-dark) !important;
    color: var(--color-white) !important;
    box-shadow: 0 0 6px var(--color-purple-glow) !important;
}


.profile-playlist-widget {
    background: var(--color-panel-alt) !important;
}

.pp-header h3 {
    margin: 0 !important;
    color: var(--color-white) !important;
  font-family: "Mountains of Christmas", serif !important;
    font-size: 17px !important;
    line-height: 23px !important;
}

.profile-playlist-widget ul {
    border: 0 !important;
    background: var(--color-transparent) !important;
}


#footer-music-bar,
.music-bar {
    min-height: 38px !important;
    background: var(--color-black-soft) !important;
    border-top: 2px dotted  var(--color-pastel-pink) !important;
    box-shadow: 0 -3px 10px var(--color-purple-glow) !important;
}

#bar-title {
    color: var(--color-lilac) !important;
  font-family: "Mountains of Christmas", serif !important;
    font-size: 14px !important;
    text-shadow: 1px 1px 0 var(--color-black) !important;
}

.bar-progress-container,
.bar-playlist-container,
.bar-volume {
    background: var(--color-black) !important;
    border: 2px dotted var(--color-pastel-pink) !important;
}

.bar-btn svg {
    fill: var(--color-lilac) !important;
}

.bar-btn:hover svg {
    fill: var(--color-white) !important;
}


footer[role='contentinfo'] {
    margin: 8px 0 0 !important;
    padding: 7px !important;
    background: var(--color-black-soft) !important;
    border: 2px dotted var(--color-pastel-pink) !important;
    border-radius: 10px !important;
    box-shadow: 0 0 8px var(--color-pastel-pink-glow) !important;
    font-size: 10px !important;
    text-align: center !important;
}

footer nav ul.links {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 5px 10px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

footer p.copyright {
    margin: 3px 0 0 !important;
    font-size: 10px !important;
}


img,
video,
iframe,
table {
    max-width: 100% !important;
}


.skull-rain,
body::after,
.mood::after,
.profile-mood::after,
.profile .mood::after,
.photos-preview::after,
.blog-preview::after,
.blurbs::after,
.friends::after {
    display: none !important;
    content: none !important;
}
  
  


.master-container::after {
    content: '' !important;
    position: sticky !important;
    bottom: 0 !important;
    display: block !important;
    width: 220px !important;
    height: 220px !important;
    margin-top: -220px !important;
    margin-left: auto !important;
    margin-right: -10px !important;
    background-image: url('https://gloomy-poison.neocities.org/twee_graphics/1076178orj4w022qr.gif') !important;
    background-repeat: no-repeat !important;
    background-position: bottom right !important;
    background-size: contain !important;
    pointer-events: none !important;
    z-index: 9999 !important;
}


.contact::after,
.url-info::after,
.table-section::after,
.tunes::after,
.blog-preview::after,
.blurbs::after,
.friends::after,
.photos-preview::after,
#comments::after,
.profile-playlist-widget::after {
    content: '' !important;
    display: block !important;
    width: 100% !important;
    height: 28px !important;
    margin: 4px 0 0 !important;
    background-image: url('https://64.media.tumblr.com/8650ec0f01dcf8f8e6bee029b0dc3150/f71abaa2dda21587-2c/s640x960/824cc070883ce2350648458978a124d31ff4b2fc.pnj') !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
    pointer-events: none !important;
}

  .online img {
  height: 1.5em !important;
  width: auto !important;
  margin-right: 5px !important;
  content: url('https://64.media.tumblr.com/79c6a06010337392a1026b54aa6d6cb9/73c559e13fc9d5c7-9f/s75x75_c1/642884ee01fbae02b644e99892d56f5f1e8c4424.gifv') !important;
  animation: none !important;
}
  
  .myspace-header .nav-logo {
  content: url('https://64.media.tumblr.com/563ab890beb5719fdee0438417dd454b/0a5eebe6c662da28-79/s75x75_c1/e32a9e660f086e9387fe331caf5ae55875332e13.gifv') !important;
  height: 45px !important;
  width: auto !important;
  margin: 0 10px !important;
  position: relative !important;
  top: 2px !important;
}
  
  
.profile-name-text {
  color: red !important;
  font-family: "Mountains of Christmas", serif !important;
  display: inline-block !important;
  animation: profileNameWiggle 0.9s ease-in-out infinite !important;
  transform-origin: center !important;
  font-size: 50px;
}

@keyframes profileNameWiggle {
  0% {
    transform: rotate(0deg) translateY(0);
  }

  20% {
    transform: rotate(-2deg) translateY(-1px);
  }

  40% {
    transform: rotate(2deg) translateY(1px);
  }

  60% {
    transform: rotate(-1.5deg) translateY(-1px);
  }

  80% {
    transform: rotate(1.5deg) translateY(1px);
  }

  100% {
    transform: rotate(0deg) translateY(0);
  }
}
  
  .profile-mood::after {
  content: "" !important;
  display: block !important;
  width: 100% !important;
  height: 28px !important;
  margin-top: 6px !important;
  background-image: url('https://64.media.tumblr.com/64190bd4262aacd7ab930a62cc62c190/97ed1761032496eb-57/s250x400/468fdc99c216302d117c728eb8fe854673c78b3f.gifv') !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
}
  .music-bar::before {
  content: none !important;
  background: none !important;
  display: none !important;
}
  
  
  #footer-music-bar,
.music-bar {
  background-color: var(--color-panel) !important;
  background-image: url('https://i3.glitter-graphics.org/pub/2517/2517883wcj2onw5px.jpg') !important;
  background-repeat: repeat !important;
  background-position: top left !important;
  background-size: auto !important;
}
</style></style>