← Back to Layouts
MARCEL

Name: FriendRewind
Author: FriendRewind
Author: DarthVeiderPro2006
Category: Classic
Created: November 2, 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":"","pageFont":"","useLiveProfile":true,"previewUrl":"/profile?id=4","pageBgImage":"","pageBgMode":"cover","heroImageUrl":"","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":"","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 */
</style><style>


/* FR_MANUAL_EXTRAS */
</style>
<style>


:root {
  --aqua: #bceefa;
  --sky: #8bd6ef;
  --blue: #58b5d7;
  --deep-blue: #347d9e;
  --silver: #e8f1f5;
  --white: #ffffff;
  --ink: #526c80;
  --dark: #344b62;
  --glass: rgba(255,255,255,0.55);
  --glass-border: rgba(255,255,255,0.9);
  --shadow: rgba(67,139,169,0.18);
}

/* =================================
   02. MAIN BACKGROUND
================================= */

body {
  background-color: #d8f2fa;

  background-image:
    radial-gradient(
      ellipse at 15% 15%,
      rgba(255,255,255,0.95),
      transparent 45%
    ),
    radial-gradient(
      ellipse at 85% 35%,
      rgba(123,208,239,0.35),
      transparent 45%
    ),
    radial-gradient(
      ellipse at 50% 100%,
      rgba(255,255,255,0.9),
      transparent 50%
    ),
    linear-gradient(
      145deg,
      #dff8ff,
      #a9e3f5 50%,
      #eafaff
    );

  background-attachment: fixed;
  color: var(--ink);
  font-family: Georgia, serif;
}

/* Geometric arabesque texture */

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;

  opacity: 0.12;

  background-image:
    repeating-conic-gradient(
      from 45deg at 50% 50%,
      transparent 0deg 40deg,
      #ffffff 40deg 42deg,
      transparent 42deg 90deg
    );

  background-size: 90px 90px;
}

/* Floating light */

body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;

  background:
    radial-gradient(
      circle at 20% 30%,
      rgba(255,255,255,0.6) 0 2px,
      transparent 4px
    ),
    radial-gradient(
      circle at 80% 70%,
      rgba(255,255,255,0.7) 0 3px,
      transparent 5px
    );

  background-size: 180px 180px;
}

/* =================================
   03. GENERAL CONTENT
================================= */

main {
  background: transparent;
  color: var(--ink);
  position: relative;
  z-index: 1;
}

.profile {
  position: relative;
  z-index: 1;
}

.inner {
  color: var(--ink);
}

h1, h2, h3 {
  color: var(--deep-blue);
  font-family: Georgia, serif;
  letter-spacing: 1px;
}

h1 {
  text-align: center;
  text-shadow: 0 2px 5px white;
}

/* =================================
   04. NAVIGATION
================================= */

nav .top {
  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,0.88),
      rgba(174,230,246,0.65)
    );

  border: 1px solid white;
  border-radius: 15px 15px 0 0;

  box-shadow:
    0 3px 15px var(--shadow),
    inset 0 1px 5px white;

  padding: 12px;
}

nav .links {
  background: rgba(255,255,255,0.55);
  border: 1px solid white;
  border-radius: 0 0 15px 15px;

  box-shadow: 0 5px 15px var(--shadow);
  padding: 8px;
}

nav .links a {
  color: var(--deep-blue);
  text-decoration: none;
  transition: 0.3s;
}

nav .links a:hover {
  color: #ffffff;
  text-shadow: 0 0 8px var(--blue);
}

/* =================================
   05. GLASS PANELS
================================= */

.blurbs,
.comments-table,
.url-info,
.table-section,
.general-about,
.blog-preview,
.friends-grid,
.mood {

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,0.78),
      rgba(202,240,250,0.48)
    );

  border: 1px solid rgba(255,255,255,0.95);
  border-radius: 15px;

  padding: 10px;

  box-shadow:
    0 5px 18px var(--shadow),
    inset 0 1px 5px rgba(255,255,255,0.9);

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Individual section spacing */

.blurbs,
.comments-table,
.url-info,
.table-section,
.general-about,
.blog-preview,
.friends-grid {
  margin-bottom: 15px;
}

/* =================================
   06. PROFILE PICTURE
================================= */

.profile-pic {
  position: relative;
  filter:
    drop-shadow(0 5px 8px rgba(66,145,178,0.25));
}

.profile-pic img {
  border: 4px solid rgba(255,255,255,0.9);
  border-radius: 12px;
  padding: 4px;

  background: linear-gradient(
    135deg,
    white,
    #b5e7f7,
    white
  );

  box-shadow:
    0 0 0 2px rgba(115,190,220,0.35),
    0 5px 15px var(--shadow);
}

/* =================================
   07. DETAILS AND CONTACT
================================= */

.details {
  color: var(--ink);
}

.contact {
  background: rgba(255,255,255,0.6);
  border: 1px solid white;
  border-radius: 12px;
  padding: 8px;

  box-shadow: 0 4px 12px var(--shadow);
}

.contact .inner a {
  color: var(--deep-blue);
  transition: 0.3s;
}

.contact .inner a:hover {
  color: #55b9df;
  text-shadow: 0 0 6px white;
}

/* =================================
   08. TABLES
================================= */

.table-section {
  overflow: hidden;
}

.table-section td {
  background: rgba(255,255,255,0.25);
  border-color: rgba(255,255,255,0.6);
  color: var(--ink);
}

.table-section td:first-child {
  background: rgba(161,220,239,0.35);
  color: var(--deep-blue);
}

/* =================================
   09. COMMENTS
================================= */

.comments-table {
  color: var(--ink);
}

.comments-table td {
  background: rgba(255,255,255,0.3);
  border-color: rgba(255,255,255,0.7);
}

/* =================================
   10. BUTTONS
================================= */

button {
  background: linear-gradient(
    135deg,
    #ffffff,
    #b9e9f8,
    #e9faff
  );

  color: var(--deep-blue);
  border: 1px solid white;
  border-radius: 8px;

  box-shadow:
    0 3px 8px var(--shadow),
    inset 0 1px 3px white;

  transition: 0.3s;
}

button:hover {
  background: linear-gradient(
    135deg,
    #a8e4f7,
    #ffffff
  );

  transform: translateY(-2px);
  box-shadow: 0 5px 14px rgba(75,163,198,0.3);
}

input,
textarea {
  background: rgba(255,255,255,0.75);
  color: var(--dark);

  border: 1px solid white;
  border-radius: 8px;

  box-shadow: inset 0 2px 5px rgba(80,150,180,0.1);
}

/* =================================
   11. LINKS
================================= */

a {
  color: var(--deep-blue);
  transition: color 0.3s, text-shadow 0.3s;
}

a:hover {
  color: #54b8df;
  text-shadow: 0 0 5px white;
}

/* =================================
   12. ONLINE STATUS
================================= */

.online {
  color: #ffffff;
  text-shadow: 0 0 5px #58c5e9;
}

/* =================================
   13. FOOTER
================================= */

footer {
  background: rgba(255,255,255,0.55);
  color: var(--deep-blue);

  border: 1px solid white;
  border-radius: 14px;

  box-shadow: 0 4px 15px var(--shadow);
}

footer .links {
  background: transparent;
  border: none;
}

/* =================================
   14. SELECTION
================================= */

::selection {
  background: #82d3ed;
  color: white;
}

/* =================================
   15. ARABESQUE DECORATION
================================= */

h1::before {
  content: "۞  ";
  color: #83c6df;
  font-size: 0.8em;
}

h1::after {
  content: "  ۞";
  color: #83c6df;
  font-size: 0.8em;
}

/* Decorative Arabic motif */

.mood::before {
  content: "✧  ليلة زرقاء  ✧";
  display: block;

  text-align: center;
  color: #5b9fbd;

  font-size: 15px;
  letter-spacing: 3px;

  padding: 5px;
  opacity: 0.8;
}

/* =================================
   16. ANIMATIONS
================================= */

@keyframes floating {
  0%, 100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-7px);
  }
}

@keyframes shimmer {
  0% {
    background-position: -200% center;
  }

  100% {
    background-position: 200% center;
  }
}

.profile-pic {
  animation: floating 5s ease-in-out infinite;
}

h1 {
  background: linear-gradient(
    90deg,
    #5ca9c9,
    #ffffff,
    #5ca9c9
  );

  background-size: 200% auto;
  background-clip: text;
  -webkit-background-clip: text;
  animation: shimmer 7s linear infinite;
}

/* =================================
   17. EXTRA GLASS EFFECT
================================= */

.blurbs:hover,
.friends-grid:hover,
.general-about:hover,
.blog-preview:hover {
  box-shadow:
    0 8px 22px rgba(74,157,190,0.22),
    inset 0 1px 8px white;

  transition: 0.4s;
}

/* =================================
   18. MOBILE
================================= */

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

  .blurbs,
  .comments-table,
  .url-info,
  .table-section,
  .general-about,
  .blog-preview,
  .friends-grid,
  .mood {
    border-radius: 10px;
    padding: 7px;
  }

  h1 {
    font-size: 22px;
  }

  body {
    background-attachment: scroll;
  }
}

/* =================================
   19. ACCESSIBILITY
================================= */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

</style>

<div class="azure-decoration" aria-hidden="true">
  <span>۞</span>
  <span>✧</span>
  <span>☾</span>
  <span>✦</span>
</div><style>
.azure-decoration {
  position: fixed;
  bottom: 15px;
  right: 15px;
  z-index: 10;

  display: flex;
  gap: 12px;

  color: rgba(79,165,201,0.7);
  font-size: 22px;

  pointer-events: none;
}

.azure-decoration span {
  animation: floating 4s ease-in-out infinite;
}

.azure-decoration span:nth-child(2) {
  animation-delay: 0.5s;
}

.azure-decoration span:nth-child(3) {
  animation-delay: 1s;
}

.azure-decoration span:nth-child(4) {
  animation-delay: 1.5s;
}
</style>