Layout Preview | FriendRewind

Name: FriendRewind
Author: FriendRewind
FriendRewind
← Back to Layouts
Goth purple

Author: Lumi ☾⋆⁺₊⋆
Category: Goth
Created: June 15, 2026
Comments (0)

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

<style>
<style>
html:after {
  animation: grain 8s steps(10) infinite;
  background-image: url(https://i.ibb.co/xSYVGtwd/loop-animation-of-white-grain-moving-black-background-video.jpg);
  content: "";
  height: 300%;
  left: -50%;
  opacity:.1;
  position: fixed;
  top: -110%;
  width: 300%;
  pointer-events:none;
}
@keyframes grain {
  0%, 100% { transform:translate(0, 0) }
  10% { transform:translate(-5%, -10%) }
  20% { transform:translate(-15%, 5%) }
  30% { transform:translate(7%, -25%) }
  40% { transform:translate(-5%, 25%) }
  50% { transform:translate(-15%, 10%) }
  60% { transform:translate(15%, 0%) }
  70% { transform:translate(0%, 15%) }
  80% { transform:translate(3%, 35%) }
  90% { transform:translate(-10%, 10%) }
}
</style>
<style>
@import url('https://fonts.googleapis.com/css2?family=UnifrakturCook:wght@700&display=swap');

 :root {
        --logo-blue: url("https://i.ibb.co/997r6kYj/ezgif-878c6134cac18b.gif");
 }
  * {
  cursor: url('https://cdn.cursors-4u.net/previews/espeon-pokemon-5e457611-32.webp') 32 32, auto !important;
}

text-align: center;
main:before {
width: auto;
margin-bottom: 2px;
border: 2px solid #36275B;
height: 135px;
display: block;
content: "";
box-shadow: 0px 0px 10px 5px #36275B;
background-image: url('');
background-position: center center;
background-size: cover;
}


  main {
    background: #000;
    color: #6C56AF;
    padding: 6px 0;
    font-size: 14px;
font-family: monospace;
}

body

  
{
background:url("https://i.ibb.co/S7r2g283/thumb-1920-285172.jpg") no-repeat fixed; background-size:cover;
}
body.profile-page .master-container
 {
    width: 810px !important;
    max-width: 810px !important;
  }
.profile .left h1 {
padding-left: 5px;
  padding-bottom: 10px;
color: transparent;
font-family: 'UnifrakturCook', cursive;
font-size: 45px !important;
  }

.row.profile{
box-shadow: 0px 0px 10px 6px #463572;
}


nav .links .special a {
color: #36275B;
}

small {
font-size:100%;
}
 
main {
background-color: black;
}

.general-about .profile-pic img {
border: 2px solid #36275B;

box-shadow: 0px 0px 10px 0px #36275B;
 }   

b {
font-size: 14px;
}

time.ago {
color: #6C56AF;
}

h1{
font-size: 30px !important;
text-shadow: 5px 5px 0px #36275B;
color: #36275B;
}

.profile .friends .inner b, .profile .friends .inner a{
color: #6C56AF;
text-shadow: 2px #36275B;
}

p{
font-size: 16px;
}

.details-table td a {
color: #6C56AF;
}

.details-table td p {
color: #6C56AF;
font-size: 14px;
}

  .table-section .heading{ font-size:14px; }

}

.profile h1{
color: #6C56AF !important;
font-size: 5px;
}

.profile .blurbs .section p, .profile .friends p, .blog-entry .comments p, .bulletin .comments p {
font-size: 14px;
}

.friends p, .friends a {
color: #6C56AF;
}

.profile .friends .inner{
background-image: url("");
background-size: cover;
border: 2px inset #36275B;
box-shadow: 0px 0px 10px 0px #36275B;
background-position: center;
}

.profile .blurbs .section h4 {
text-align: center;
font-size: 14px;
color: #6C56AF;
border: 2px #36275B;
}

.button {
    background: black;
    color: #36275B;
}

.profile-info{
background:url("") no-repeat fixed; background-size:cover; background-image: center;
border: 2px inset #36275B;
box-shadow: 0px 0px 15px 0px #36275B;
}

.profile-info a{
font-size: 14px;
color: #6C56AF;
text-shadow:  3px 3px 2px #36275B;
}

.profile-info h3{
color: #6C56AF;
}

.profile .blurbs .heading, .profile .friends .heading {
color: #6C56AF;
background-color:transparent;
}

.profile .blurbs .inner{
background: url("");
box-shadow: 0px 0px 10px 0px #36275B;
border: 3px inset #36275B;
}

.profile .contact .heading, .profile .table-section .heading, .home-actions .heading {
background-color: transparent;
color: #6C56AF;
}

.contact .heading h4{
display:none !important;
}

h4 {
font-size: 14px !important;
color: #6C56AF;

 }

p {
color: #6C56AF;
   } 

   a {
font-size: 14px;
     color: #6C56AF; 
   }


a:hover {
     color: #6C56AF; 

}
    .count {
        color: #6C56AF;
    }

.profile .friends .person p {
color: #6C56AF;  
}
.profile .friends .person p:hover {
color: white;  
}

.blog-preview{
text-align: center;
background-image: url();
color: #6C56AF;
border: 2px solid #36275B;
box-shadow: 0px 0px 10px 0px #36275B;
}

.blog-preview p, .blog-preview a, .blog-preview h4{
background-color: black;
}

.contact .heading h4{
font-size:14px;
}

.profile .friends .person img:not(.icon) {
box-shadow: 0px 0px 19px 0px #36275B;
border-style: solid;
border-width: 2px #36275B;
border-image: url("") 60 fill round;
}

a, .profile .friends .badges-widget .person p, .logout-btn {
color: #36275B !important;
text-decoration: underline !important;
}

.online {
    margin:auto;
    padding-bottom: 5px;
    content: url(https://i.ibb.co/C3S77CQg/ezgif-1368067630dd6ca1.gif);
}
  

.profile .contact {
background-color: black;
}
.profile .contact {
border: 2px solid #36275B;
box-shadow: 0px 0px 10px 0px #36275B;
background: transparent;
}

.profile .contact a{
font-size: 12px;
}

.f-col{
border: 2px #36275B;
}

.contact .inner a img {
 font-size: 0;
}
.contact .inner a img:before {
 font-size: 1em;
 display: block
}

.profile .table-section .details-table td p, .profile .table-section .details-table td a{
color: #6C56AF;
}

.profile .table-section .details-table td {
text-align: center;
background:url("");
background-image: center;

border: 2px inset #36275B;
box-shadow: 0px 0px 10px 0px #36275B;
}


.profile .friends .comments-table  {
background-image: url("https://i.ibb.co/997r6kYj/ezgif-878c6134cac18b.gif");
border: 3px solid #36275B;
}
.comments-table td*{


  }
.profile .comments-table .inner {
box-shadow: 0px 0px 19px 0px #36275B; 

}

.comments-table td:first-child img{
border-style: solid;
border-width: 2px;
border-image: url("") 60 fill round;
box-shadow: 0px 0px 19px 0px #36275B;

}

.comment-replies{
border: 3px inset #36275B;
color: #6C56AF;
}

.general-about .details{
padding: 2px;
background: black;
border: 3px inset #36275B;
height: 162px;
background-image: url(https://64.media.tumblr.com/a403e9b2b52f6fd156bef539ef3c2c82/1ebc7035c604b0aa-31/s1280x1920/7593c193c7f5c2a6e557564dd49275b18f363701.gifv);
background-size: cover;
  background-position: bottom;
box-shadow: 0px 0px 10px 0px #36275B;
}

.general-about .details p:not(.online){
color: #6C56AF!important;

}

.general-about .details a{

color: #6C56AF !important;
}

nav{ 
color: #36275B;
font-size: 13px !important;
text-transform:none;
text-align: center;
    }

.links{
width=810px;
}

nav .links {
background: black;
}

}

nav .links::after {
    content: ;
}


nav .links li:not(:last-child)::after, footer .links li:not(:last-child)::after {
    content: " ⛤";
color: #6C56AF;
font-size: 16px !important;
    

}
nav .links a:hover {
color: #36275B;
}

nav .top{
background-color: transparent;
}

nav .top a{
color: #36275B !important;
}

nav .top label{
color: #36275B;
}


.profile .url-info {
border: 1px #000000;
}
.profile .table-section {
border: none;
}


nav .links a{
color: #36275B;

font-size: 14px;
}

table.comments-table {
border: 2px inset #36275B;
}


footer p{
color: #6C56AF;
font-size: 100%;
}

footer a{
color: #36275B;
}

footer {
background: #000000;
text-decoration: underline !important;
text-decoration-style: dotted !important;
  border: 1px black;
  }    


table.comments-table{
background-color: black;
display: block;
height: 600px!important;
overflow-y: scroll;
border-color: #6C56AF;
border-width: 5px;
}

    ::-webkit-scrollbar {
    width: 8px;
    height: 10px;}

    ::-webkit-scrollbar-thumb {
    background: ;}

    ::-webkit-scrollbar-track {
    background:black;}


.url-info{
    background: url('https://i.ibb.co/p6w7r01b/dragonpurple.gif');
height: 65px;
    background-position: center;
background-size: contain;
background-repeat: no-repeat;

}

.url-info p{
    opacity: 0.0;
}

    .comments-table td:first-child{
background-color: black;

}

.comments-table td{
border-width:0;
background-color: black;
border: 2px solid #6C56AF;
  }


  .profile-playlist-widget {
    background: url('https://i.ibb.co/997r6kYj/ezgif-878c6134cac18b.gif')!important;
    border: 1px solid rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px) saturate(160%);
    -webkit-backdrop-filter: blur(10px) saturate(160%);
    color: #f1f1f1;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.4);
    max-width: 280px;
    font-size: 13px;
    border-radius: 6px;
    padding: 12px;
    margin: 15px 0;
    position: relative;
    z-index: 1;
    overflow: hidden;
    -webkit-user-select: none;
    user-select: none;
}
  .profile-playlist-widget h3 {
    margin: 0;
    font-size: 15px;
    color: #6c56af!important;
    flex: 1;
}
  .profile-playlist-widget li.current .song-info {
    color: #fff!important;
}
  .profile-playlist-widget li.current {
    background-color: #9509ed3d !important;
    color: #fff!important;
    font-weight: bold;
}

  .profile .blurbs .heading {display:none !important;}
.section h4{display:none}
</style>


      <style>
/* contact icons */
.contact .inner a img {
font-size: 0;
}

.contact .inner a img:before {
font-size: 1em;
display: block
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(1) a:before {font-size:20px;
/* add to friends */
content: url("https://i.ibb.co/wN5QL02m/ezgif-287aeab03e40b1ec.gif")
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {font-size:20px;
/* add to favorite */
content: url("https://i.ibb.co/fc7QLrK/ezgif-2776e0214dfc534e.gif")
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {font-size:20px;
/* block user */
content: url("https://64.media.tumblr.com/acda0398ea3901ed8f74a7258c2f7121/04dfb8c512e3f807-6f/s75x75_c1/09247f0495825fea63c1924c59d29d00944fe040.gifv")
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {font-size:20px;
/* send message*/
content: url("https://64.media.tumblr.com/5a3293d8bebed08cf1c222aa9e8468b7/8b24ff32e3edc90e-7e/s75x75_c1/6fc4b5efc377567a48f99611d2ad9371af4eb7c3.gifv")
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {font-size:20px;
/* invite to group */
content: url("https://i.ibb.co/zTvkjDXX/ezgif-29c585c18856c25c.gif")
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {font-size:20px;
/* report user */
content: url("https://i.ibb.co/S4g7rdSv/ezgif-227674bbf9edbe75.gif")
}

        .bar-progress-fill {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    background: linear-gradient(180deg, #9509ed 0%, #000000 100%) !important;
    width: 0%;
    border-radius: 3px;
    transition: width 0.1s ease;
    will-change: width;
    transform: translateZ(0);
}
        
        .volume-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    border-radius: 3px;
    background: linear-gradient(180deg, #9509ed 0%, #000000 100%) !important;
    outline: none;
    border: 1px solid #9509ed !important;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
}
        .bar-now-playing {
          color: #caa1ff !important; }
</style>


<div class="snowflakes">

  <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>
<style>

/* customizable snowflake styling */

.snowflake {

  color: #fff;

  font-size: 1em;

  font-family: Arial, sans-serif;

  text-shadow: 0 0 5px rgba(132, 16, 222, 1);

}



@-webkit-keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}}@-webkit-keyframes snowflakes-shake{0%,100%{-webkit-transform:translateX(0);transform:translateX(0)}50%{-webkit-transform:translateX(80px);transform:translateX(80px)}}@keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}}@keyframes snowflakes-shake{0%,100%{transform:translateX(0)}50%{transform:translateX(80px)}}.snowflake{position:fixed;top:-10%;z-index:9999;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default;-webkit-animation-name:snowflakes-fall,snowflakes-shake;-webkit-animation-duration:10s,3s;-webkit-animation-timing-function:linear,ease-in-out;-webkit-animation-iteration-count:infinite,infinite;-webkit-animation-play-state:running,running;animation-name:snowflakes-fall,snowflakes-shake;animation-duration:10s,3s;animation-timing-function:linear,ease-in-out;animation-iteration-count:infinite,infinite;animation-play-state:running,running}.snowflake:nth-of-type(0){left:1%;-webkit-animation-delay:0s,0s;animation-delay:0s,0s}.snowflake:nth-of-type(1){left:10%;-webkit-animation-delay:1s,1s;animation-delay:1s,1s}.snowflake:nth-of-type(2){left:20%;-webkit-animation-delay:6s,.5s;animation-delay:6s,.5s}.snowflake:nth-of-type(3){left:30%;-webkit-animation-delay:4s,2s;animation-delay:4s,2s}.snowflake:nth-of-type(4){left:40%;-webkit-animation-delay:2s,2s;animation-delay:2s,2s}.snowflake:nth-of-type(5){left:50%;-webkit-animation-delay:8s,3s;animation-delay:8s,3s}.snowflake:nth-of-type(6){left:60%;-webkit-animation-delay:6s,2s;animation-delay:6s,2s}.snowflake:nth-of-type(7){left:70%;-webkit-animation-delay:2.5s,1s;animation-delay:2.5s,1s}.snowflake:nth-of-type(8){left:80%;-webkit-animation-delay:1s,0s;animation-delay:1s,0s}.snowflake:nth-of-type(9){left:90%;-webkit-animation-delay:3s,1.5s;animation-delay:3s,1.5s}.snowflake:nth-of-type(10){left:25%;-webkit-animation-delay:2s,0s;animation-delay:2s,0s}.snowflake:nth-of-type(11){left:65%;-webkit-animation-delay:4s,2.5s;animation-delay:4s,2.5s}

</style>
    <div class="mobileHide">

        <style>

   .mobileHide { display: inline;}

   /* Smartphone Portrait and Landscape */

   @media only screen

   and (min-device-width : 320px)

   and (max-device-width : 480px){  .mobileHide { display: none;}}

</style>

      

<div style="">

 <div style="float:  ; 

max-height: 400px; 

position: fixed; 

right: 30px; 

bottom:250px; 

filter: drop-shadow(0 0 0.75rem rgb(132, 16, 222));

z-index: 600;"><img src="https://64.media.tumblr.com/002ea4e24a4029c1f1a5f840c4d05c7a/94169876d9494265-2e/s2048x3072/5e8fe4ded506b1b0f3d5bf8c82dfe1ea08138d06.webp" height="600px"/>

</div></style>