← Back to Layouts
Dudu · Cielo pastel

Name: FriendRewind
Author: FriendRewind
Author: Dudu
Category: Classic
Created: August 26, 2026
Layout de pagina de Dudu
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>


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


/* FR_MANUAL_EXTRAS */
/* ============================================================
   DUDU · 01 · CIELO PASTEL
   Free space: recadito de Bubu (mensajes rotativos)

   Pega TODO este archivo en: My Layouts > Create New Layout > Advanced CSS
   Antes de pegar, reemplaza los tokens https://friendrewind.com/uploads/gallery/32152/img_6a8e38807a5db7.09089036.webp / https://friendrewind.com/uploads/gallery/32152/img_6a8e387fa3c6d5.40585257.webp / https://friendrewind.com/uploads/gallery/32152/img_6a8e38807d79e2.07046406.webp
   por los links de tu galeria de FriendRewind.
   Ver docs/como-subir-imagenes.md
   ============================================================ */
</style>
<style>
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@400;500;600;700&display=swap');

/* ---------- LO UNICO QUE TIENES QUE EDITAR ---------- */
:root {
    --img-fondo:   url('https://friendrewind.com/uploads/gallery/32152/img_6a8e38807a5db7.09089036.webp');
    --img-banner:  url('https://friendrewind.com/uploads/gallery/32152/img_6a8e387fa3c6d5.40585257.webp');
    --img-sticker: url('https://friendrewind.com/uploads/gallery/32152/img_6a8e38807d79e2.07046406.webp');

    --cafe:        #A9714E;
    --cafe-oscuro: #7A4E33;
    --cafe-claro:  #C08552;
    --rosa:        #FFD1DC;
    --rosa-fuerte: #F5A9A9;
    --cielo:       #A9D3EE;
    --crema:       #FFF9F0;
    --texto:       #4A3728;
    --caja:        rgba(255, 255, 255, 0.92);
    --fuente:      'Quicksand', 'Trebuchet MS', sans-serif;
}
/* ---------------------------------------------------- */

body.profile-page {
    background-color: var(--cielo) !important;
    background-image: var(--img-fondo) !important;
    background-size: cover !important;
    background-position: center top !important;
    background-attachment: fixed !important;
    font-family: var(--fuente) !important;
    font-size: 14px !important;
    color: var(--texto) !important;
}

body.profile-page * { font-family: var(--fuente); }

/* ---------- NAV ---------- */
body.profile-page nav {
    background: var(--cafe) !important;
    border-bottom: 4px solid var(--rosa) !important;
    box-shadow: 0 4px 12px rgba(122, 78, 51, 0.25) !important;
}
body.profile-page nav .top { background: transparent !important; color: #FFF !important; }
body.profile-page nav .links { background: transparent !important; border: none !important; }
body.profile-page nav .links a {
    color: var(--crema) !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    padding: 4px 12px !important;
    border-radius: 999px !important;
    transition: all .2s ease !important;
}
body.profile-page nav .links a:hover {
    background: var(--rosa) !important;
    color: var(--cafe-oscuro) !important;
}

/* ---------- CONTENEDOR ---------- */
body.profile-page .master-container { max-width: 980px !important; }
body.profile-page .row.profile { gap: 18px !important; }

/* ---------- CAJAS ---------- */
body.profile-page .contact,
body.profile-page .general-about,
body.profile-page .url-info,
body.profile-page .table-section,
body.profile-page .blurbs,
body.profile-page .blog-preview,
body.profile-page .photos-preview,
body.profile-page .videos-preview,
body.profile-page .friends,
body.profile-page #comments {
    background: var(--caja) !important;
    border: 3px solid var(--cafe-claro) !important;
    border-radius: 20px !important;
    box-shadow: 6px 6px 0 var(--rosa) !important;
    margin-bottom: 22px !important;
    padding: 0 !important;
    overflow: hidden !important;
    position: relative !important;
}

/* ---------- ENCABEZADOS ---------- */
body.profile-page .heading,
body.profile-page .blog-preview h4,
body.profile-page .heading h1,
body.profile-page .heading h4 {
    background: var(--cafe) !important;
    color: #FFF !important;
    font-weight: 700 !important;
    font-size: 17px !important;
    letter-spacing: .5px !important;
    text-align: center !important;
    padding: 12px 16px !important;
    margin: 0 !important;
    border-bottom: 3px dashed var(--rosa) !important;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, .15) !important;
}
body.profile-page .heading a { color: var(--rosa) !important; }

body.profile-page .contact .inner,
body.profile-page .general-about .inner,
body.profile-page .url-info p,
body.profile-page .table-section .inner,
body.profile-page .blurbs .inner,
body.profile-page .friends .inner,
body.profile-page #comments .inner,
body.profile-page .blog-preview p {
    padding: 18px !important;
    line-height: 1.7 !important;
}

/* ---------- BANNER DENTRO DE LA CAJA DE ABOUT ---------- */
body.profile-page .blurbs .inner::before {
    content: '' !important;
    display: block !important;
    height: 140px !important;
    margin: -18px -18px 16px -18px !important;   /* full-bleed: cancela el padding del .inner */
    background: var(--img-banner) center 60% / cover no-repeat !important;
    border-bottom: 3px dashed var(--rosa) !important;
}

/* ---------- ENLACES ---------- */
body.profile-page a {
    color: var(--cafe-oscuro) !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    border-bottom: 2px dashed var(--rosa-fuerte) !important;
    transition: all .2s ease !important;
}
body.profile-page a:hover {
    color: #FFF !important;
    background: var(--cafe) !important;
    border-radius: 6px !important;
    border-bottom-color: transparent !important;
}

/* ---------- FOTO DE PERFIL: CUADRADA ---------- */
body.profile-page .profile-pic img,
body.profile-page .profile-pic .pfp-fallback {
    border-radius: 6px !important;
    border: 5px solid #FFF !important;
    box-shadow: 0 6px 16px rgba(122, 78, 51, .35) !important;
    object-fit: cover !important;
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    background: var(--crema) !important;
}

/* ---------- MOOD / ESTADO ---------- */
body.profile-page .mood,
body.profile-page .online,
body.profile-page .offline,
body.profile-page .last-login {
    background: var(--caja) !important;
    border: 2px dashed var(--cafe-claro) !important;
    border-radius: 14px !important;
    padding: 8px 12px !important;
    margin: 10px 0 !important;
    font-weight: 600 !important;
}
body.profile-page .online { color: #4E9A4E !important; }

/* ---------- IMAGENES DENTRO DE SECCIONES ---------- */
body.profile-page .table-section .inner img,
body.profile-page .blurbs .inner img,
body.profile-page .photos-preview img,
body.profile-page .videos-preview img {
    max-width: 100% !important;
    border-radius: 12px !important;
    border: 3px solid var(--rosa) !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, .12) !important;
}

/* ---------- TABLA DE DATOS ---------- */
body.profile-page .details-table {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
}
body.profile-page .details-table th,
body.profile-page .details-table td {
    border: 1px dashed var(--cafe-claro) !important;
    padding: 9px 12px !important;
    text-align: left !important;
}
body.profile-page .details-table th {
    background: var(--cafe) !important;
    color: #FFF !important;
    font-weight: 700 !important;
}
body.profile-page .details-table tr:nth-child(even) td { background: rgba(255, 209, 220, .28) !important; }
body.profile-page .details-table td:first-child,
body.profile-page .interest-content { color: var(--cafe-oscuro) !important; font-weight: 600 !important; }

/* ---------- TOP 8 ---------- */
body.profile-page #top8-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 14px !important;
}
body.profile-page .friends .person img,
body.profile-page #top8-grid img {
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
    border-radius: 10px !important;
    border: 3px solid var(--rosa) !important;
    transition: transform .2s ease !important;
}
body.profile-page .friends .person img:hover { transform: translateY(-4px) rotate(-2deg) !important; }
body.profile-page .friends .person p { font-weight: 600 !important; font-size: 12px !important; }

/* ---------- COMENTARIOS ---------- */
body.profile-page .comments-table { width: 100% !important; border-collapse: collapse !important; }
body.profile-page .comments-table td {
    border-bottom: 2px dashed var(--rosa) !important;
    padding: 12px !important;
    vertical-align: top !important;
}
body.profile-page .cb-author-name { color: var(--cafe-oscuro) !important; font-weight: 700 !important; }
body.profile-page .cb-content-cell { line-height: 1.6 !important; }
body.profile-page .comment-reply,
body.profile-page .cb-like-btn { font-size: 11px !important; color: var(--cafe-claro) !important; }

/* ---------- BADGES ---------- */
body.profile-page .badges-list { display: flex !important; flex-wrap: wrap !important; gap: 10px !important; }
body.profile-page .badge-item {
    background: var(--crema) !important;
    border: 2px solid var(--cafe-claro) !important;
    border-radius: 12px !important;
    padding: 6px !important;
}
body.profile-page .badge-label { font-size: 11px !important; font-weight: 600 !important; }

/* ---------- PROFILE TUNES (necesita !important en TODO) ---------- */
body.profile-page .profile-playlist-widget {
    background: var(--crema) !important;
    border: 3px solid var(--cafe-claro) !important;
    border-radius: 20px !important;
    box-shadow: 6px 6px 0 var(--rosa) !important;
    color: var(--texto) !important;
}
body.profile-page .profile-playlist-widget h3,
body.profile-page .pp-header h3 {
    color: var(--cafe-oscuro) !important;
    font-weight: 700 !important;
    font-family: var(--fuente) !important;
}
body.profile-page .profile-playlist-widget li {
    border-radius: 10px !important;
    border: 1px solid transparent !important;
    margin-bottom: 4px !important;
}
body.profile-page .profile-playlist-widget li:hover { background: rgba(255, 209, 220, .5) !important; }
body.profile-page .profile-playlist-widget li.current {
    background: var(--rosa) !important;
    color: var(--cafe-oscuro) !important;
    border-color: var(--cafe-claro) !important;
}
body.profile-page .profile-playlist-widget .song-info { font-weight: 600 !important; }
body.profile-page .profile-playlist-widget .song-artist { color: var(--cafe-claro) !important; font-size: 11px !important; }
body.profile-page .profile-playlist-widget li.played { opacity: .6 !important; }
body.profile-page .pp-equalizer span { background: var(--cafe) !important; }
body.profile-page .pp-drag { color: var(--cafe-claro) !important; }

/* ---------- BARRA DE MUSICA ---------- */
body.profile-page .music-bar {
    background: var(--cafe) !important;
    border-top: 4px solid var(--rosa) !important;
    color: #FFF !important;
}
body.profile-page .music-bar .bar-title,
body.profile-page .bar-now-playing,
body.profile-page .bar-time-display,
body.profile-page .bar-time-total { color: var(--crema) !important; }
body.profile-page .bar-progress { background: rgba(255, 255, 255, .28) !important; border-radius: 999px !important; }
body.profile-page .bar-progress-fill { background: var(--rosa) !important; border-radius: 999px !important; }
body.profile-page .music-bar .bar-btn { color: var(--crema) !important; }
body.profile-page .music-bar .bar-btn:hover { color: var(--rosa) !important; }
body.profile-page .volume-slider { accent-color: var(--rosa) !important; }

/* ---------- SCROLLBAR ---------- */
body.profile-page::-webkit-scrollbar { width: 14px !important; }
body.profile-page::-webkit-scrollbar-track { background: var(--crema) !important; }
body.profile-page::-webkit-scrollbar-thumb {
    background: var(--cafe-claro) !important;
    border-radius: 999px !important;
    border: 3px solid var(--crema) !important;
}
body.profile-page::-webkit-scrollbar-thumb:hover { background: var(--cafe) !important; }
body.profile-page { scrollbar-color: var(--cafe-claro) var(--crema) !important; }

/* ---------- FREE SPACE: RECADITO DE BUBU ---------- */
body.profile-page .free-space {
    background: var(--caja) !important;
    border: 3px solid var(--cafe-claro) !important;
    border-radius: 20px !important;
    box-shadow: 6px 6px 0 var(--rosa) !important;
    padding: 16px 16px 16px 90px !important;
    margin: 0 auto 22px auto !important;
    max-width: 940px !important;
    position: relative !important;
    min-height: 84px !important;
    text-align: center !important;
}
body.profile-page .free-space::before {
    content: '' !important;
    position: absolute !important;
    left: 14px !important;
    top: 50% !important;
    width: 64px !important;
    height: 64px !important;
    border-radius: 8px !important;
    background: var(--img-sticker) center / cover no-repeat, var(--rosa) !important;
    border: 3px solid #FFF !important;
    box-shadow: 0 3px 8px rgba(0, 0, 0, .2) !important;
    animation: dudu-flotar 4s ease-in-out infinite !important;
}
@keyframes dudu-flotar {
    0%, 100% { transform: translateY(-50%) rotate(-3deg); }
    50%      { transform: translateY(-58%) rotate(3deg); }
}
body.profile-page .free-space .fs-titulo {
    color: var(--cafe-oscuro) !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    margin: 0 0 6px 0 !important;
}
body.profile-page .fs-recados {
    position: relative !important;
    height: 26px !important;
    overflow: hidden !important;
}
body.profile-page .fs-recados p {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    margin: 0 !important;
    opacity: 0 !important;
    font-size: 15px !important;
    color: var(--cafe) !important;
    font-weight: 600 !important;
    animation: dudu-recados 24s linear infinite !important;
}
body.profile-page .fs-recados p:nth-child(1) { animation-delay:  0s !important; }
body.profile-page .fs-recados p:nth-child(2) { animation-delay:  6s !important; }
body.profile-page .fs-recados p:nth-child(3) { animation-delay: 12s !important; }
body.profile-page .fs-recados p:nth-child(4) { animation-delay: 18s !important; }
@keyframes dudu-recados {
    0%   { opacity: 0; transform: translateY(10px); }
    3%   { opacity: 1; transform: translateY(0); }
    22%  { opacity: 1; transform: translateY(0); }
    25%  { opacity: 0; transform: translateY(-10px); }
    100% { opacity: 0; }
}

/* ---------- MOVIL ---------- */
@media (max-width: 768px) {
    body.profile-page .row.profile { display: block !important; }
    body.profile-page .col.w-40.left,
    body.profile-page .col.right { width: 100% !important; max-width: 100% !important; }
    body.profile-page #top8-grid { grid-template-columns: repeat(3, 1fr) !important; }
    body.profile-page .blurbs .inner::before { height: 100px !important; }
    body.profile-page .free-space { padding: 84px 16px 16px 16px !important; }
    body.profile-page .free-space::before {
        left: 50% !important;
        top: 14px !important;
        margin-left: -32px !important;
        animation: dudu-flotar-movil 4s ease-in-out infinite !important;
    }
    @keyframes dudu-flotar-movil {
        0%, 100% { transform: rotate(-3deg); }
        50%      { transform: translateY(-6px) rotate(3deg); }
    }
}
</style><div class="free-space">
    <p class="fs-titulo">Recadito de Bubu</p>
    <div class="fs-recados">
        <p>Dudu, te guardé el último pan de crema. No preguntes por qué.</p>
        <p>No te duermas en el sillón otra vez. Te espero arriba.</p>
        <p>Hoy también me caíste bien. Como siempre.</p>
        <p>Mañana vamos por helado. No es pregunta.</p>
    </div>
</div>