← Back to Layouts

Harley Quinn (Rebirth)

Name: FriendRewind
Author: FriendRewind

Author: 𝐒𝐩𝐞𝐧𝐜𝐞𝐫

Category: Characters

Created: June 27, 2026

🃏 Inspired by the edgy and iconic Harley Quinn Rebirth aesthetic, this layout features a bold red and black color palette, high contrast graphics, and a sleek design that is perfect for any fan of the Clown Princess of Crime!

✨ Features:
❤️ Matching Harley Quinn themed graphics and sidebar images

🎵 Custom "Profile Tunes" music player section

📖 Blog, Friends, Photos, and Videos sections styled with a dark, villainous flair

♦️ Striking red on black color palette

✨ Clean, modern, and high-impact profile layout

💕 Bio Section:
📝 The "My Life 🖤" section automatically shows whatever you enter in your profile's Bio/About Me field when editing your profile. Add your favourite quotes, chaotic intros, or anything else you want visitors to see!

❤️🃏 Perfect for fans of comic book aesthetics, Gotham's favorite anti-hero, and all things Harley Quinn 🃏❤️

Credit Notice: This layout is free to use; however, the creator credit is required and must remain visible on your profile at all times. Removing, hiding, modifying, or relocating the credit is not permitted. By using this layout, you agree to keep the credit displayed on your FriendRewind profile.

Comments (1)

Def3ct 57 mins ago

amazing work!

You must log in to comment.

CSS Code

<style>
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;600&family=Montserrat:wght@300;400;600&display=swap');

:root{
--hq-red:#9d1128;
--hq-light:#d6425d;
--hq-darkred:#6e0b1b;
--hq-black:#050505;
--hq-cream:#f4efe8;
}

body, a, button, input{
cursor:url('https://i.ibb.co/jPmgN790/cursor.png') 0 0, auto !important;
}

body{
background:
linear-gradient(rgba(0,0,0,.40), rgba(0,0,0,.60)),
url("https://i.pinimg.com/736x/f5/7a/59/f57a5901d92a5ea11e10943daad48761.jpg");
background-size:cover;
background-position:center;
background-attachment:fixed;
font-family:'Montserrat',sans-serif;
color:var(--hq-cream);
}

.profile{
background:rgba(10,10,10,.85);
color:var(--hq-cream);
}

main{
background:rgba(5,5,5,.88)!important;
border-radius:0 0 20px 20px;
overflow:hidden;
}

main:before{
content:"";
display:block;
width:100%;
height:380px;
background:url("https://i.ibb.co/FqKFGTs4/STL280534.jpg");
background-size:cover;
background-position:center top;
border-bottom:4px solid var(--hq-red);
filter:contrast(1.05) saturate(1.1);
}

.top,
nav{
background:linear-gradient(
90deg,
#000 0%,
#140006 45%,
#3b000c 100%
)!important;
border-bottom:2px solid rgba(197,29,52,.55)!important;
border-top:none!important;
}

.top *,
nav *{
background:transparent !important;
border:none !important;
box-shadow:none !important;
}

.top .links,
nav .links{
background:repeating-linear-gradient(
45deg,
#000 0px,
#000 15px,
#140006 15px,
#140006 30px
)!important;
border-top:1px solid rgba(197,29,52,.35)!important;
border-bottom:1px solid rgba(0,0,0,.9)!important;
}

.top .links a,
nav .links a{
color:#f5f0ea!important;
font-weight:600;
letter-spacing:1px;
text-transform:uppercase;
}

.top .links a:hover,
nav .links a:hover{
color:#d6425d!important;
text-shadow:0 0 6px rgba(197,29,52,.6);
}

.top input[type="text"]{
background:#0f0f0f!important;
border:1px solid var(--hq-red)!important;
color:#fff!important;
}

.top input[type="submit"],
.top button{
background:var(--hq-red)!important;
border:none!important;
color:#fff!important;
border-radius:20px!important;
}

.top input[type="submit"]:hover,
.top button:hover{
background:#8b0f1a!important;
}

.profile .left h1{
font-family:'Oswald',sans-serif;
font-size:40px;
letter-spacing:3px;
text-transform:uppercase;
color:#d6425d;
text-shadow:
0 0 8px rgba(214,66,93,.4),
0 0 15px rgba(157,17,40,.25);
}

.profile-pic{
border-radius:24px;
overflow:hidden;
border:3px solid var(--hq-red);
box-shadow:0 0 18px rgba(197,29,52,.30);
}

.profile .contact,
.profile .url-info,
.profile .table-section,
.home-actions,
.profile-playlist-widget{
background:rgba(18,18,18,.88)!important;
border:none!important;
border-radius:18px;
box-shadow:0 6px 18px rgba(0,0,0,.35);
margin-bottom: 20px !important;
}

.heading {
    background: linear-gradient(90deg,#2a0008,#c51d34) !important;
    color: white !important;
    border-radius: 14px !important;
    padding: 10px 15px !important;
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    min-height: 24px !important;
    box-sizing: border-box !important;
}

.heading h4, .heading h2, .heading .title, .blog-preview h4 {
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.heading, .blog-preview {
    visibility: visible !important;
    display: flex !important;
}

.heading:before {
    font-family: 'Oswald', sans-serif !important;
    font-size: 1.15rem !important;
    font-weight: 600 !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    color: var(--hq-cream) !important;
    position: absolute !important;
    z-index: 1 !important;
}

.table-section:has(a[href*="photo"]) .heading:before { content: "My Photos ❤️"; }
.table-section:has(a[href*="video"]) .heading:before { content: "My Videos ❤️"; } 
.blurbs .heading:before { content: "My Life 🖤"; }
.profile .friends:not(#comments):not(.badges-widget) .heading:before { content: "My Friends ❤️"; }
.profile .friends.badges-widget .heading:before { content: "My Badges 🖤"; }
.profile .friends#comments .heading:before { content: "Leave Me a Comment ❤️"; }
.contact .heading:before { content: "Contact Me 🖤"; }
.profile .left .table-section.interests .heading:before { content: "What I Like ❤️"; }
.profile .left .table-section.social-links .heading:before { content: "Follow Me 🖤"; }

.details-table td{
background:#151515!important;
border:none!important;
color:#f4efe8!important;
}

.details-table td:first-child{
color:#d6425d!important;
font-weight:bold;
}

a,a:visited{
color:#d6425d!important;
}

a:hover{
color:#fff!important;
}

.profile .friends .person img:not(.icon){
border-radius:16px;
border:2px solid var(--hq-red);
transition:.3s ease;
}

.profile .friends .person img:not(.icon):hover{
transform:translateY(-3px) scale(1.03);
}

.comments-table td{
background:#151515!important;
border:none!important;
}

button,
input[type="submit"]{
background:var(--hq-red)!important;
border:none!important;
border-radius:999px!important;
color:white!important;
font-weight:600;
}

button:hover,
input[type="submit"]:hover{
background:#9f1426!important;
}

::-webkit-scrollbar{width:10px;}
::-webkit-scrollbar-track{background:#0b0b0b;}
::-webkit-scrollbar-thumb{background:var(--hq-red);border-radius:10px;}

nav .logo img,
.logo img,
.home img{
content:url("https://1000logos.net/wp-content/uploads/2023/09/Harley-Quinn-Emblem.png")!important;
width:40px!important;
height:40px!important;
object-fit:contain;
}

.layout-credit{
font-family:'Oswald',sans-serif;
position:fixed;
top:12px;
left:12px;
background:rgba(0,0,0,.88);
padding:8px 12px;
border-radius:999px;
border:2px solid var(--hq-red);
font-size:11px;
font-weight:bold;
color:white!important;
z-index:9999;
}

.blurbs{
padding:0!important;
background:none!important;
}

.blurbs .heading{
display:flex !important;
align-items:center !important;
justify-content:center !important;
text-align:center !important;
} 

.blurbs .section{
background:transparent !important;
border:none !important;
border-radius:0 !important;
box-shadow:none !important;
padding:10px 0 !important;
margin:10px 0 !important;
text-align:center !important;
}

.blurbs h4,
.blurbs .section-title{
visibility:hidden;
height:0;
margin:0;
padding:0;
display:none;
} 

.blurbs .section p{
color:var(--hq-cream)!important;
font-size:14px;
line-height:1.9;
max-width:700px;
margin:0 auto;
text-align:center!important;
}

.profile-playlist-widget{
background:
linear-gradient(
135deg,
#000,
#220007
)!important;
border:2px solid var(--hq-red)!important;
box-shadow:0 0 15px rgba(197,29,52,.35)!important;
}

.profile-playlist-widget *{
color:var(--hq-cream)!important;
}

.profile-playlist-widget a{
color:#d6425d!important;
}

footer,
#footer,
.footer,
.music-player,
.global-player{
background:
linear-gradient(
90deg,
#000,
#1b0005,
#45000d
)!important;
border-top:2px solid var(--hq-red)!important;
backdrop-filter:none!important;
}

footer *,
#footer *,
.footer *,
.music-player *,
.global-player *{
color:var(--hq-cream)!important;
text-shadow:none!important;
box-shadow:none!important;
}

footer a,
#footer a,
.footer a,
.music-player a,
.global-player a,
footer a:visited,
#footer a:visited,
.footer a:visited,
.music-player a:visited,
.global-player a:visited{
color:var(--hq-cream)!important;
text-shadow:none!important;
box-shadow:none!important;
outline:none!important;
}

footer a:hover,
#footer a:hover,
.footer a:hover,
.music-player a:hover,
.global-player a:hover{
color:#d6425d!important;
text-shadow:
0 0 4px rgba(197,29,52,.45),
0 0 10px rgba(197,29,52,.25)!important;
}

@keyframes snowflakes-fall{
0%{top:-10%;}
100%{top:100%;}
}
@keyframes snowflakes-shake{
0%,100%{margin-left:0;}
50%{margin-left:60px;}
}
.snowflake{
position:fixed;
top:-10%;
z-index:9999;
font-size:1.2rem;
color:var(--hq-light);
text-shadow:
0 0 8px rgba(197,29,52,.8),
0 0 12px rgba(255,255,255,.15);
user-select:none;
pointer-events:none;
animation:
snowflakes-fall 10s linear infinite,
snowflakes-shake 3s ease-in-out infinite;
}
.snowflake:nth-child(3n){ font-size:.9rem; opacity:.5; animation-duration:18s; }
.snowflake:nth-child(3n+1){ font-size:1.2rem; opacity:.85; animation-duration:14s; }
.snowflake:nth-child(3n+2){ font-size:1.6rem; opacity:1; animation-duration:11s; }

.snowfall .snowflake:nth-child(1){left:1%;animation-delay:0s,0s;}
.snowfall .snowflake:nth-child(2){left:10%;animation-delay:1s,1s;}
.snowfall .snowflake:nth-child(3){left:20%;animation-delay:6s,.5s;}
.snowfall .snowflake:nth-child(4){left:30%;animation-delay:4s,2s;}
.snowfall .snowflake:nth-child(5){left:40%;animation-delay:2s,2s;}
.snowfall .snowflake:nth-child(6){left:50%;animation-delay:8s,3s;}
.snowfall .snowflake:nth-child(7){left:60%;animation-delay:6s,2s;}
.snowfall .snowflake:nth-child(8){left:70%;animation-delay:2s,1s;}
.snowfall .snowflake:nth-child(9){left:80%;animation-delay:1s,0s;}
.snowfall .snowflake:nth-child(10){left:90%;animation-delay:3s,1.5s;}

.profile-playlist-widget h3,
.profile-playlist-widget .heading{
    text-align:center !important;
    position:relative;
}
.profile-playlist-widget h3{
    display:block;
    width:100%;
    margin:0 auto;
}
.profile-playlist-widget h3:before{
    content:"♥";
    position:absolute;
    left:10px;
    top:50%;
    transform:translateY(-50%);
    color:#d6425d;
    text-shadow:0 0 6px rgba(182,20,42,.4);
}
.profile-playlist-widget h3:after{
    content:"♦";
    position:absolute;
    right:10px;
    top:50%;
    transform:translateY(-50%);
    color:#d6425d;
    text-shadow:0 0 6px rgba(182,20,42,.4);
}

.blurbs ul, .blurbs ol { list-style: none !important; margin: 0 !important; padding: 0 !important; }
.blurbs li::marker { content: "" !important; }
.blurbs li::before, .blurbs li::after { content: none !important; }

table.details-table { border-collapse: collapse; }
table.details-table td { background-color: #151515 !important; }
.details-table td:first-child { color: var(--hq-light) !important; }

.blog-preview p {
background-color: transparent;
padding: 5px 10px;
border-radius: 10px;
color: var(--hq-cream);
font-weight: bolder;
}
.blog-preview p a { color: var(--hq-light) !important; }
.blog-preview p a:hover { color: #fff !important; }

.profile .friends .heading { color: #ffffff; text-align: center; }
.profile .friends .person p,
.profile .friends .person a,
.profile .friends .person a:visited{ color:var(--hq-red) !important; }
.profile .friends .person a:hover{ color:var(--hq-light) !important; text-shadow:0 0 6px rgba(214,66,93,.6); } 

.count { color: var(--hq-light) !important; }
.profile .friends .person img { border-radius: 500px; }
.profile .friends .person img:not(.icon) {
border-radius: 16px;
box-shadow: 0 0 12px rgba(197, 29, 52, 0.35);
border: 2px solid var(--hq-red);
transition: 0.3s ease;
}
.profile .friends .person img:not(.icon):hover { transform: scale(1.05); }

.comments-table td { background-color: #151515 !important; border: none; }
.comments-table td:first-child img { width: 80px; border-radius: 500px; }
.comments-table { display: block; height: 1000px; overflow-y: scroll; border: none; }

.profile .friends.badges-widget .heading { justify-content: center; }
.profile .friends.badges-widget .heading h4 { position: absolute; opacity: 0; }
.profile .friends .person p, .profile .friends .person a { display:block !important; text-align:center !important; margin:6px auto 0 auto !important; width:100% !important; }

.details-table td:first-child { display:none !important; }
.details-table td:last-child { width:100% !important; }

.heading a,
.heading small a,
.heading span a,
.heading div a,
.heading > a,
.heading * a,
.profile .friends .heading a,
.profile .friends .heading a:visited,
.blog-preview .heading a {
font-size: 0 !important;
color: transparent !important;
text-decoration: none !important;
display: inline-block !important;
position: absolute !important;
right: 15px !important;
top: 50% !important;
transform: translateY(-50%) !important;
z-index: 999 !important;
visibility: visible !important;
opacity: 1 !important;
width: auto !important;
height: auto !important;
}

.heading a::after,
.profile .friends .heading a.more::after,
.heading * a::after,
.blog-preview .heading a::after {
content: "♦ VIEW ALL ♦" !important;
font-family: 'Montserrat', sans-serif !important;
font-size: 11px !important;
font-weight: 700 !important;
letter-spacing: 0.5px !important;
text-transform: uppercase !important;
color: var(--hq-cream) !important;
display: inline-block !important;
text-shadow: 0 1px 2px rgba(0,0,0,0.6) !important;
visibility: visible !important;
}

.heading a:hover::after,
.profile .friends .heading a:hover::after,
.heading * a:hover::after,
.blog-preview .heading a:hover::after {
color: var(--hq-light) !important;
text-shadow: 0 0 8px rgba(214,66,93,0.9) !important;
}

.music-player,
.global-player {
background: linear-gradient(90deg, #000000 0%, #220007 40%, #9d1128 100%) !important;
border-top:2px solid var(--hq-red) !important;
}
.music-player * { color:var(--hq-cream) !important; font-weight:600 !important; }
.music-player a { color:#d6425d !important; }
.music-player a:hover { color:#ffffff !important; text-shadow:0 0 8px rgba(214,66,93,.7) !important; }
.music-player progress { accent-color:#d6425d !important; }

.music-bar,
#footer-music-bar{
background: linear-gradient(90deg, #000000 0%, #180005 30%, #3a000d 65%, #9d1128 100%) !important;
border-top:2px solid var(--hq-red) !important;
box-shadow: 0 0 15px rgba(157,17,40,.35), inset 0 1px 0 rgba(255,255,255,.05);
}
.music-bar::before, #footer-music-bar::before{ display:none !important; }
.bar-now-playing{ color:#d6425d !important; font-weight:700 !important; text-transform:uppercase; letter-spacing:1px; }
.music-bar .bar-title{ color:var(--hq-cream) !important; font-weight:700 !important; text-shadow:0 0 6px rgba(214,66,93,.35); }
.bar-time-display, .bar-time-total{ color:#d6425d !important; font-weight:600; }
.bar-progress{ background:#0b0b0b !important; border:1px solid rgba(214,66,93,.25); }
.bar-progress-fill{ background: linear-gradient(90deg, #6e0b1b, #d6425d) !important; box-shadow: 0 0 8px rgba(214,66,93,.5); }
.music-bar .bar-btn{ color:#f4efe8 !important; background:transparent !important; border:none !important; }
.music-bar .bar-btn:hover{ color:#d6425d !important; text-shadow:0 0 8px rgba(214,66,93,.6); }
.volume-slider{ background:#0b0b0b !important; }
.volume-slider::-webkit-slider-thumb{ background:#d6425d !important; border:none !important; box-shadow:0 0 8px rgba(214,66,93,.6); }
.volume-slider::-moz-range-thumb{ background:#d6425d !important; border:none !important; box-shadow:0 0 8px rgba(214,66,93,.6); }

#footer-music-bar #bar-playlist-btn,
#footer-music-bar #bar-playlist-btn:hover,
.music-bar #bar-playlist-btn {
background:transparent !important; border:none !important; box-shadow:none !important; color:transparent !important; font-size:0 !important; position:relative !important;
}
#footer-music-bar #bar-playlist-btn::before,
.music-bar #bar-playlist-btn::before{
content:"♦"; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); font-size:24px; font-weight:bold; color:#d6425d; text-indent:0; display:block !important; text-shadow: 0 0 6px rgba(214,66,93,.8), 0 0 12px rgba(157,17,40,.5);
}
  
.profile-playlist-widget li,
.profile-playlist-widget .current,
.profile-playlist-widget .active,
.profile-playlist-widget .song {
background:rgba(157,17,40,.35) !important; border:1px solid rgba(214,66,93,.55) !important; box-shadow:none !important;
}
.profile-playlist-widget li:hover{ background:rgba(110,11,27,.55) !important; }
.pp-equalizer span, .profile-playlist-widget .pp-equalizer span{ background:#000 !important; box-shadow:none !important; }

.table-section.videos-preview, 
.table-section:has(a[href*="vid/profile"]) {
    display: block !important;
    visibility: visible !important;
    min-height: 50px !important;
}

.table-section:has(a[href*="vid/profile"]) .heading {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.table-section.videos-preview {
    display: block !important;
    visibility: visible !important;
    min-height: 40px !important;
}

.table-section.videos-preview .heading h4 {
    visibility: hidden !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 0 !important;
}

.table-section.videos-preview .heading:before {
    content: "My Videos 🖤" !important;
    font-family: 'Oswald', sans-serif !important;
    font-size: 1.15rem !important;
    color: var(--hq-cream) !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    text-align: center !important;
    pointer-events: none !important;
}

.table-section.videos-preview .heading h4 a {
    visibility: visible !important;
    display: inline-block !important;
    font-size: 0 !important;
    position: absolute !important;
    right: 15px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
}

.table-section.videos-preview .heading h4 a::after {
    content: "♦ VIEW ALL ♦" !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    color: var(--hq-cream) !important;
    visibility: visible !important;
}

.blog-preview h4 {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    background: linear-gradient(90deg, #2a0008, #c51d34) !important;
    border-radius: 14px !important;
    padding: 10px 15px !important;
    box-sizing: border-box !important;
    visibility: visible !important;
    font-size: 0 !important;
    margin: 0 0 10px 0 !important;
}

.blog-preview h4::before {
    content: "MY BLOGS ❤️" !important;
    display: block !important;
    font-family: 'Oswald', sans-serif !important;
    font-size: 1.15rem !important;
    font-weight: 600 !important;
    color: var(--hq-cream) !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    text-align: center !important;
}

.blog-preview h4 a {
    font-size: 0 !important;
    position: absolute !important;
    right: 15px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    display: block !important;
}

.blog-preview h4 a::after {
    content: "♦ VIEW ALL ♦" !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    color: var(--hq-cream) !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.6) !important;
    display: block !important;
}

.blog-preview h4 {
    padding: 6px 15px !important;
    min-height: 30px !important;
    margin-bottom: 5px !important;
}

.blog-preview {
    display: block !important;
    width: 100% !important;
}

.blog-preview p {
    margin-top: 5px !important;
    text-align: center !important;
}

.blog-preview p {
    text-align: left !important;
    width: 100% !important;
    margin: 10px 0 !important;
    display: block !important;
    padding-left: 10px !important;
}

.blog-preview p a {
    display: inline-block !important;
    margin: 0 !important;
}

.blog-preview h4 a:hover::after {
    color: var(--hq-light) !important;
    text-shadow: 0 0 8px rgba(214, 66, 93, 0.9) !important;
}

.table-section.videos-preview .heading h4 a:hover::after {
    color: var(--hq-light) !important;
    text-shadow: 0 0 8px rgba(214, 66, 93, 0.9) !important;
}

.intro-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 99999;
    animation: fadeOut 1s ease-out 3s forwards;
}

.intro-overlay img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

@keyframes fadeOut {
    from { opacity: 1; visibility: visible; }
    to { opacity: 0; visibility: hidden; pointer-events: none; }
}

.fade-in-content {
    animation: fadeIn 2s ease-in;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
  
.status-gif {
    content: url('https://i.ibb.co/nq1xnJgV/oie-oie-glitters.gif') !important;
    width: 100px !important; 
    height: auto !important;
    display: inline-block !important;
}
</style>

<div class="intro-overlay">
    <img src="/proxy/image.php?url=https%3A%2F%2Fmedia.tenor.com%2F8R7HhZGdUf8AAAAM%2Fhello-guys-harley-quinn-hello.gif" alt="Hello">
</div>

<div class="snowfall" aria-hidden="true">
<div class="snowflake">♥</div>
<div class="snowflake">♦</div>
<div class="snowflake">♠</div>
<div class="snowflake">♣</div>
<div class="snowflake">🖤</div>
<div class="snowflake">♦</div>
<div class="snowflake">♠</div>
<div class="snowflake">♣</div>
<div class="snowflake">🖤</div>
<div class="snowflake">❤️</div>
<div class="snowflake">♥</div>
<div class="snowflake">♦</div>
</div>

<a href="/spencer" class="layout-credit">
♥ Layout by 𝐒𝐩𝐞𝐧𝐜𝐞𝐫 ♦
</a></style>