← Back to Layouts
Laneys really cool fire layout

Name: FriendRewind
Author: FriendRewind
Author: Laneyscool
Category: 2000s
Created: July 16, 2026
This took me forever but I think it looks cool and it plays the song fer sure
Comments (0)

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

<style>
<!-- (c) Layout created by :: trixie toxxic :: (https://layouts.spacehey.com/layout?id=26052) -->

I LOVE MY BOYFRIEND DARREN❤

<style>

body {
   background: #fff url(https://i10.glitter-graphics.org/pub/2047/2047330idotockpx7.gif);
   color: #fff;
   cursor: url(https://i10.glitter-graphics.org/pub/1969/1969880sj349n9qin.gif), auto;
}

main {
   background: #f2f0f000;
   color: #fff;
}

div.top {
   background: rgba(0, 154, 255, 0.55);
   border-top: 4px solid #fff;
   border-left: 4px solid #fff;
   border-right: 4px solid #fff;
   padding: 10px;
   margin-top: 10px;
}

.links {
   background: rgba(0, 154, 255, 0.55);
   border-bottom: 4px solid #fff;
   border-left: 4px solid #fff;
   border-right: 4px solid #fff;
   padding: 2px;
}

.blurbs, .comments-table, .url-info, .table-section, .general-about, .blog-preview, .friends-grid, .mood {
   background: rgba(0, 154, 255, 0.55);
   border: 4px solid #fff;
   padding: 2px;
}

.profile-pic img {
   width: 200px;
   padding: 10px;
}

.details {
   color: #fff;
}

.mood {
   color: #fff;
   margin-top: 15px;
   margin-bottom: 15px;
}

.contact {
   background: #000;
}


.contact .inner a img {
   filter: sepia(100%) hue-rotate(190deg) saturate(500%);
}

.comments-table {
   color: #000;
}

.general-about {
   overflow: auto;
}

.profile .url-info {
   border: 4px solid #fff;
}
.profile .contact {
   border: 4px solid #fff;
}
.profile .table-section {
   border: 4px solid #fff;
}

footer {
   color: #fff;
   background: #00000087;
   border: 4px solid #fff;
}

footer .links {
   background: rgba(0, 0, 0, 0);
   border: 0px;

}

.inner {
   color: #fff;
}

button {
   color: #fff;
   background: #000; 
   border: 2px solid #fff;
}

button:hover {
   color: #fff;
   background: #00B7FF;
}

input {
   background: linear-gradient(0deg, rgba(255,255,255,1) 31%, rgba(198,198,198,1) 100%);
   border: 2px solid #fff;
}

.count {
   color: #00B7FF;
   background: #000;
}

a:hover {
   color: #00B7FF;
}

nav .links a:hover {
  text-decoration: none;
  color: #00B7FF;
}

::selection {
   background: #fff;
   color: #000
}

.online {
   content: url(http://www.coolspacetricks.com/images/myspaceicons/045.gif);
}

h1 {
   text-align: center;
   color: #fff;
}

.logo {
   content: url(https://i.imgur.com/yeRU4Gt.png);
}

:root {
  --light-gray: #f2f0f0;
  --gray: #e3e3e3;
  --dark-gray: #919191;
  --darker-gray: #545454;
  --logo-blue: #000;
  --darker-blue: #fff;
  --lighter-blue: #000;
  --even-lighter-blue: #000;
  --lightest-blue: #00000087;
  --red: #00DBFF;
  --dark-orange: #00B7FF;
  --light-orange: #000;
  --even-lighter-orange: #00B7FF;
  --strange-yellow: #00abff;
  --green: #34D399;
  --light-green: #E6F8DD;
  --medium-green: #A0C99C;
  --dark-green: #059669;
}

</style> <!-- (c) Layout created by Evie  (https://layouts.spacehey.com/layout?id=106276) -->

<style>
.contact .inner a img {
  font-size: 0;
}
.contact .inner a img:before {
  font-size: 1em;
  display: block
}
.contact .inner a:before {
  content: ""
}


.contact .inner .f-row:nth-child(1) .f-col:nth-child(1) a:before {
  /* add to friends */
  display: inline-block;
  background: url("https://pixels.crd.co/assets/images/gallery112/56607b05.gif?v=2942f085")no-repeat 0 0;
  background-size: 100%;
  width: 16px;
  height: 16px;
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {
  /* add to favorites */
  display: inline-block;
  background: url("https://pixels.crd.co/assets/images/gallery90/9f8f06f9.gif?v=2942f085")no-repeat 0 0;
  background-size: 100%;
  width: 16px;
  height: 16px;
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
  /* send Message */
  display: inline-block;
  background: url("https://pixels.crd.co/assets/images/gallery112/81f0c7e5.gif?v=2942f085")no-repeat 0 0;
  background-size: 100%;
  width: 16px;
  height: 16px;
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
  /* forward to friend */
  display: inline-block;
  background: url("https://pixels.crd.co/assets/images/gallery112/78ed9a20.gif?v=2942f085")no-repeat 0 0;
  background-size: 100%;
  width: 16px;
  height: 16px;
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {
  /* instant message */
  display: inline-block;
  background: url("https://pixels.crd.co/assets/images/gallery01/206258c7.gif?v=2942f085")no-repeat 0 0;
  background-size: 100%;
  width: 16px;
  height: 16px;
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {
  /* block user */
  display: inline-block;
  background: url("https://pixels.crd.co/assets/images/gallery16/716af8ce.gif?v=2942f085")no-repeat 0 0;
  background-size: 100%;
  width: 16px;
  height: 16px;
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {
  /* add to group */
  display: inline-block;
  background: url("https://pixels.crd.co/assets/images/gallery16/ecd66e8a.gif?v=2942f085")no-repeat 0 0;
  background-size: 100%;
  width: 16px;
  height: 16px;
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
  /* report user */
  display: inline-block;
  background: url("https://pixels.crd.co/assets/images/gallery112/2d519ac6.gif?v=2942f085")no-repeat 0 0;
  background-size: 100%;
  width: 16px;
  height: 16px;
}
</style> <!-- (c) Layout created by HORRORWOOF (https://layouts.spacehey.com/layout?id=102992) -->

<!-- (c) Layout created by KingofRascals (https://layouts.spacehey.com/layout?id=101684) -->

<!-- (c) Original Layout created by peterkilledapony https://layouts.spacehey.com/peterkilledapony -->

<!-- (c) Replace "ADDMUSICIDHERE" with the end part of your Youtube IRL Part! -->

<!-- (c) If you need a visual guide, check out the tutorial right here: https://youtu.be/wZnxkqFnoQc -->

<iframe width="0" height="0" src="https://www.youtube.com/embed/POxlmvN4mI4//?&;amp;;autoplay=1&;loop=1&;controls=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" loading="lazy">
</iframe> <!-- (c) Layout created by Valentine (https://layouts.spacehey.com/layout?id=29048) -->

<style>
/* replace with cd image that has transparent background. must be 150px by 150px. */
:root {
--cd-image: url('https://fluorescent-lights.neocities.org/Digital-CD-Disk-Vector-Transparent-PNG.png');
}
.profile-pic {
position: relative;
width: 183px;
filter: drop-shadow(0 0 0.25rem gray);
}
.profile-pic:after {
content: "";
background: url('https://fluorescent-lights.neocities.org/f0rzNHe.png'), linear-gradient(150deg, rgba(255,255,255,0.4), rgba(255,255,255,0.2), 40%, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.6));
background-size: contain, cover;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

.profile-pic:before {
content: "";
background: var(--cd-image);
position: absolute;
top: 5px;
left: -20px;
width: 150px;
height: 150px;
background-repeat: no-repeat;
z-index: -1;
animation-name: spin;
animation-duration: 5000ms;
animation-iteration-count: infinite;
animation-timing-function: linear; 
transition: left ease 0.5s;
}
.profile-pic:hover:before {
left: -75px;
}
@keyframes spin {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(360deg);
    }
}
.profile-pic .pfp-fallback {
float: right;
width: 163px;
height: 160px;
border: none;
}
.general-about .profile-pic img {
max-width: inherit;
}
</style> <!-- (c) Layout created by .𖥔 ݁ ˖📌𝐑𝐄𝐃 𝐏𝐋𝐀𝐒𝐓𝐈𝐂. !!₊˚⊹ (https://layouts.spacehey.com/layout?id=83930) -->

<div style="float:  ; max-height: 300px; position: fixed; left: 1px; bottom: 9px; z-index: 200;">
<img src="https://img1.picmix.com/output/stamp/normal/6/7/6/3/2363676_b8259.gif" width="300" height="300"/></div> <!-- (c) Layout created by Laydamerfor (https://layouts.spacehey.com/layout?id=105870) -->

<img src="https://pixelsafari.neocities.org/dividers/horror/chain.png"/> <!-- (c) Layout created by  Lennon (https://layouts.spacehey.com/layout?id=90181) -->

<style>* {cursor: url(https://cur.cursors-4u.net/cursors/cur-2/cur116.cur), auto !important;}</style><a href="https://www.cursors-4u.com/cursor/2008/12/17/cool-blue-outer-glow-pointer.html" target="_blank" title="Cool Blue Outer Glow Pointer"><img src="https://cur.cursors-4u.net/cursor.png" alt="Cool Blue Outer Glow Pointer" style="position:absolute; top: 0px; right: 0px;"/></a><!-- (c) Layout created by 𝚌𝚊𝚙𝚙 ⋆ (https://layouts.spacehey.com/layout?id=35873) -->

<style>

body:before {

content: " ";

height: 100vh;

width: 100vw;

display: block;

position: fixed; 

top: 0; 

left: 0; 

z-index: 100;

background-image: url(https://i.pinimg.com/originals/fc/c0/04/fcc0048de86b87d079d6a6daf1534f64.gif);

background-size: cover;

background-repeat: no-repeat;

background-position:center;

animation: yourAnimation 2s ease 2s 1 normal forwards;

pointer-events: none;}

@keyframes yourAnimation { 0.0%{ opacity: 1;} 75%{ opacity: 1; } 100%{ opacity: 0;} } 

</style>
<!-- (c) Layout created by spunky ☆ (https://layouts.spacehey.com/layout?id=39206) -->

<style>* {cursor: url(https://cur.cursors-4u.net/anime/ani-6/ani549.cur), auto !important;}</style><a href="https://www.cursors-4u.com/cursor/2009/02/04/l-lawliet-death-note.html" target="_blank" title="L Lawliet - Death Note"><img src="https://cur.cursors-4u.net/cursor.png" alt="L Lawliet - Death Note" style="position:absolute; top: 0px; right: 0px;"/></a></style>