Fall Out Boy - Folie à Deux layout!

Tags: fall out boy, music, fob, pop punk, album, folie a deux, red, animation

Description:

Has animations and autoplaying music!

Preview:

click on the image for a larger preview

Code:

<!-- (c) Layout created by ✭ Fren-z ✭ (https://layouts.spacehey.com/layout?id=39593) -->

<style>
body{
background:url("https://i.ibb.co/51zBrXK/foliewallpaper1.png") no-repeat fixed; background-size:cover;
background-color: darkred;
}

main{
background-color: gold;
background-image: url('https://i.ibb.co/x2B2XVy/ezgif-3-966f16bd07.jpg');
box-shadow: 0px 0px 20px black;
border-radius: 25px 25px 25px 25px;
}

nav .top{
border-radius: 25px 25px 25px 25px;
box-shadow: 0px 0px 10px black;
}

.pfp-fallback{
border: 8px solid transparent;
border-image: url(https://i.ibb.co/7bgMKQJ/Untitled-1.png) 10 stretch;
box-shadow: 0px 0px 19px 0px black;
}

.img{
box-shadow: 0px 0px 10px black;
}
        
nav .top{
background-image: url("https://i.ibb.co/GT1F59y/fobbanner.png");
no-repeat fixed; background-size:cover;
}

nav .top .right a, .logout-btn{
color: darkred;
}

nav .links a:hover{
color:goldenrod;
}

time.ago{
color: goldenrod;
}

.links{
text-align:center;
background-color: transparent;
}

button{
background-color: black;
color: white;
border-radius: 25px 25px 25px 25px;
}

.mood{
text-align:center;
background: url(https://img.freepik.com/free-photo/dark-grunge-texture-background_1048-9663.jpg);
box-shadow: 0px 0px 19px 0px black;
border-radius: 15px;
}

.mood a, .mood .edit-link, .mood .edit-link a{
color: goldenrod;
}

.contact .heading{
border-radius: 25px 25px 25px 25px;
}

.contact{
background: url(https://img.freepik.com/free-photo/dark-grunge-texture-background_1048-9663.jpg);
box-shadow: 0px 0px 19px 0px black;
}

.table-section .heading{
display: none;}

table.details-table{
background: url(https://cdn.create.vista.com/api/media/medium/186389914/stock-photo-red-abstract-grunge-weathered-background?token=);
border-radius: 15px 15px 15px 15px;
box-shadow: 0px 0px 19px 0px black;
}

.details-table td:first-child p{
color: goldenrod;
}
    
.profile h1 {
font-size: 24px;
text-shadow: 5px 5px 5px white;
color: black;
overflow: hidden; /* Ensures the content is not revealed until the animation */
border-right: .15em solid darkred; /* The typwriter cursor */
white-space: nowrap; /* Keeps the content on a single line */
margin: 0 auto; /* Gives that scrolling effect as the typing happens */
letter-spacing: .12em; /* Adjust as needed */
animation: 
typing 3.5s steps(40, end),
blink-caret .75s step-end infinite;
}

/* The typing effect */
@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}

/* The typewriter cursor effect */
@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: darkred; }
}

.profile .details-table td{
border-radius: 5px 5px 5px 5px;
background: url(https://img.freepik.com/free-photo/dark-grunge-texture-background_1048-9663.jpg);
}

.blog-preview h4{
border-radius: 25px 25px 25px 25px;
background-color: black;
color: goldenrod;
}

.profile .blurbs .section h4, .profile .blurbs .section p{
color: white;
}

.friends-grid{
border-radius: 25px 25px 25px 25px;
}

.profile-info a, .profile-info h3{
color: goldenrod;
}

.profile-info{
border-radius:5px;
background: url(https://img.freepik.com/free-photo/dark-grunge-texture-background_1048-9663.jpg);
box-shadow: 0px 0px 19px 0px black;
}

.general-about .details {
 background-image: url('https://i.ibb.co/NtMDsKB/ezgif-1-b6000b3df3.png');
no-repeat fixed; background-size:cover;
box-shadow: 0px 0px 19px 0px black;
border-radius: 25px 25px 25px 25px;
}

.general-about .details a, .general-about .details .edit-link{
color: goldenrod;
}

.blog-preview{
background: url(https://images.pexels.com/photos/4722577/pexels-photo-4722577.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500);
border-radius: 25px 25px 25px 25px;
box-shadow: 0px 0px 19px 0px black;
}

.profile .blurbs .heading{
display: none;
}

.profile .blurbs , .profile .friends , .blog-entry .comments , .bulletin .comments {
border-radius:15px;
}

.comment-replies {
border: 3px dashed goldenrod;
}

.profile .friends .inner b{
color: black;
}

.blurbs .edit-link a{
color: goldenrod;
}

.blurbs{
background: url(https://i.ibb.co/NtMDsKB/ezgif-1-b6000b3df3.png);
box-shadow: 0px 0px 19px 0px black;
}

.friends .heading{
display: none;
}

.count {
 color: darkred;
}

.friends-grid{
background-image: url('https://media.istockphoto.com/id/897748468/photo/gold-background.webp?b=1&s=170667a&w=0&k=20&c=MfouXEr2aYIx0DIgz6S2d_ksiSFri_dnG8dCNtpEdzE=');
background-size:cover;
box-shadow: 0px 0px 19px 0px black;
}

.comments-table td{
background-color: black;
background-image: url(https://i.ibb.co/NtMDsKB/ezgif-1-b6000b3df3.png);
border-radius: 25px 25px 25px 25px;
border-width : 0
box-shadow: 0px 0px 19px 0px black;
}

.comments-table td:first-child p{
color: goldenrod;
}

.comments-table td:first-child{
 background-color: black;
 background-image: url(https://img.freepik.com/free-photo/dark-grunge-texture-background_1048-9663.jpg) !important;
no-repeat fixed; background-size:cover;
border-radius: 25px 25px 25px 25px;
border-width : 0;
box-shadow: 0px 0px 19px 0px black;
}

table.comments-table{
background-color:black;
display: block;
height: 300px;
overflow-y: scroll;
border-radius:15px;
border-color:black;
border-width: 3px;
}

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

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

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

nav img.logo{
    filter: brightness(100%) saturate(100%);
}

footer{
background-color: #0f2037;
background-image: url('https://i.ibb.co/W26RtPV/footerfob.png');
border-radius:15px;
box-shadow: 0px 0px 10px black;
}

nav .top{
 color: white;
font-size:13px;
}    
    
main{
color: white;
}
    
footer{
color: black;
}

footer a{
color: darkred;
}

.edit-link, .edit-link a {
color: black;
}

a{
color: white;}
    
a:hover{
cursor:url(https://cur.cursors-4u.net/others/oth-6/oth561.cur), auto;
color: sienna;}
    
a:visited{
color: white;}

.profile .blurbs .section h4{
color: goldenrod;
}

.profile .friends .inner, .profile .blurbs .section h4{
text-align: center;
}

.profile .friends .person img:not(.icon) {
border-radius:15px;
}

.profile .friends .person p{
color: goldenrod;
}

.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://pixels.crd.co/assets/images/gallery05/4c4ecaf0.gif?v=b3554822)
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {font-size:20px;
/* add to favorite */
content: url(https://pixels.crd.co/assets/images/gallery100/d15fb416.gif?v=b3554822)
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {font-size:20px;
/* send a message */
content: url(https://pixels.crd.co/assets/images/gallery68/cd89185b.gif?v=b3554822)
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {font-size:20px;
/* foward to friend*/
content: url(https://pixels.crd.co/assets/images/gallery19/3956ab57.gif?v=b3554822)
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {font-size:20px;
/* instant message */
content: url(https://pixels.crd.co/assets/images/gallery14/9cfb2842.gif?v=b3554822)
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {font-size:20px;
/* block user */
content: url(https://pixels.crd.co/assets/images/gallery52/809a5fcf.gif?v=b3554822)
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {font-size:20px;
/* add 2 group  */
content: url(https://pixels.crd.co/assets/images/gallery19/3c7b9ead.gif?v=b3554822)
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {font-size:20px;
/* report */
content: url(https://pixels.crd.co/assets/images/gallery139/0b95c35a.gif?v=b3554822)
}   

 .profile-pic img{
border: 8px solid transparent;
  border-image: url(https://i.ibb.co/7bgMKQJ/Untitled-1.png) 10 stretch;
box-shadow: 10px 10px 10px black;
}

.contact{
border: 1px transparent !important;
border-radius: 15px;}

.url-info{
background: url('https://i.ibb.co/59Lvgb9/ezgif-3-97baa7b91c.gif');
background-position: center;
border: 1px solid transparent;
border-radius: 20px;
height:300px;
}

.url-info p{
    opacity: 0.0;}

body  
    {
--lighter-blue: none;
}
    .table.comments-table:{
    border-color:transparent;
}

.online {
    margin:auto;
    padding-bottom: 5px;
    content: url(https://i.ibb.co/kc1kYPy/ezgif-3-f608065b79.png);
}

li.active .icon { 
content:url('https://i.ibb.co/6ss0Mbc/sticker-gmail.gif'); 
}

.icon, .award img {
content:url('https://i.ibb.co/6ss0Mbc/sticker-gmail.gif'); 
}
</style>

<iframe width="0" height="0" src="https://www.youtube.com/embed/6ZzjYg4kDU8?si=P_JbayD4Uh-ClBok//?&;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>

<style>

h1{
  animation: type 3s steps(27);
  color: white;
  font-size: 10px;
  font-family: courier;
  white-space: nowrap;
  overflow: hidden;
  }

@keyframes type{
  0%{
    width:0ch;
  }
  
  100%{
    width:27ch;
  }
}

@keyframes blink{
  0%{opacity:1;}
  50%{opacity:0;}
  100%{opacity:1;}
}

body::before {
content: " ";
display: block;
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: linear-gradient(rgb(128 0 0 / 30%) 48%, rgb(0 0 0 / 0%) 50%);
z-index: 2;
background-size: 100% 2px, 3px 100%;
pointer-events: none;
}

.col, main, footer, nav::before, .online, nav .links, nav .top {
animation: float 4s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}

.col, main, footer, nav::before, .online, nav .links, nav .top {
animation: float 4s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
@keyframes float {
0% { transform: translate(0, 0px);
}
50% {
transform: translate(0, 5px);
}
100% {
transform: translate(0, -0px);
}

</style>

<style>
.online {
  animation: rotation 8s infinite linear;
}

@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}
</style>

<style>

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


.contact .heading{ font-size:0.1px; }
.contact .heading:before{ content: url(https://i.ibb.co/X7B467r/fobsmall.png); 
border-radius: 15px !important;
overflow:hidden;
}
</style>

<style>
body {
cursor:url(https://cur.cursors-4u.net/others/oth-6/oth561.cur), auto;
}
</style>

Copy and paste this code into the "About me" section of your Profile to use it.

Caution: This Layout was not inspected by SpaceHey — use it at your own risk.

Comments

Displaying 20 of 26 comments ( View all | Add Comment )

frankie (///_ ;)	1737311501 using :D Report Comment
andy @_@	1735730820 usingg Report Comment
ray	1735258190 usingggggggggg<3 Report Comment
Gabi	1733792285 this is so cute im definitely using!!<3 Report Comment
River! at the Disco	1733119102 love this! totally using it x3 Report Comment
dorita ˶ˆᗜˆ˵	1731782251 using!! ⸜(｡˃ ᵕ ˂)⸝♡ Report Comment
bee x3	1728504442 usingggg Report Comment
mimi :p	1727282886 using :p Report Comment
Mikey🎱🫧✨️	1725306808 Using!! Report Comment
mik3ywaylov3r	1723772177 Using!! Report Comment
FRANK IERO	1723259766 Using!!!!! Report Comment
Mikey☆。	1721589988 Using!! Report Comment
isaੈ✩‧₊˚	1718852142 using!!! :3 Report Comment
monroe	1718303337 using :333 Report Comment
aj 🎱✨	1716317399 using !! thx !! Report Comment
mettheu :p	1714707086 using ^^ Report Comment
ch3y_y	1714606267 using !! tysm! Report Comment
llcarcrashhearts	1708925089 using!! Report Comment
venus ☆ !	1699151128 using!! Report Comment
Xx_marlowe_xX	1697424161 can u drop the code just 4 the cd online status pls Report Comment https://layouts.spacehey.com/layout?id=83117 <-- here's the code for a spinning cd, but https://i.ibb.co/kc1kYPy/ezgif-3-f608065b79.png is the url of the cd i used in this layout if you wanted that one specifically :D by ✭ Fren-z ✭; 1697475399; Report THXX I SO MUCH by Xx_marlowe_xX; 1697477277; Report