Fall Out Boy - Infinity On High Layout

Tags: fob, fall out boy, music, band, blue, infinity on high, gif, 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=26375) -->

<style>
body{background:url("https://i.ibb.co/V2x7Hj2/Untitled-2rtyu.jpg") no-repeat fixed; background-size:cover;}
</style>
    
<style>
/*Profile (Background Color/Background Image)*/
    main{
background-color: #0A3161 !important;
    background-image: url('https://images.unsplash.com/photo-1518896830268-e472923c4fa3?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTd8fGJsdWUlMjBnYWxheHl8ZW58MHx8MHx8&w=1000&q=80') !important;
    background-attachment: FIXED OR SCROLL !important;
    background-repeat: REPEAT OR NO-REPEAT !important;
    background-position: CENTER / LEFT / RIGHT / TOP / BOTTOM !important;
    box-shadow: 0px 0px 20px #fff;
}

.col.right{
box-shadow: 0px 0px 19px 0px black;
}
</style>
    
<style>
/*Adding rounded corners to profile*/
   .top{
        border-radius: 25px 25px 25px 25px !important;
        box-shadow: 0px 0px 10px #fff;
}

.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 #fff;
}
        
    main{
        border-radius: 25px 25px 25px 25px !important;}
</style>
        
<style>
/*Top (Background Color/Background Image)*/
   .top{
    background-image: url("https://i.ibb.co/QQy4xR3/dftgyhjhygtfd.jpg") !important;
no-repeat fixed; 
height:100%;
}
</style>
    
<style>
/*Top Links (Background Color/Background Image)*/
 .links{
     text-align:center;
    background-color: transparent !important;
    background-image: url('URL') !important;
    background-attachment: FIXED OR SCROLL !important;
    background-repeat: REPEAT OR NO-REPEAT !important;
    background-position: CENTER / LEFT / RIGHT / TOP / BOTTOM !important;
}
</style>

<style>
/*Search Users Box (Background Color/Background Image)*/
    .top input{
    background-color: COLOR !important;
    background-image: url('URL') !important;
    background-attachment: FIXED OR SCROLL !important;
    background-repeat: REPEAT OR NO-REPEAT !important;
    background-position: CENTER / LEFT / RIGHT / TOP / BOTTOM !important;}
</style>

<style>
/*Buttons (Background Color/Background Image)*/
    button{
    border-radius: 25px 25px 25px 25px !important;
    background-color: COLOR !important;
    background-image: url('URL') !important;
    background-attachment: FIXED OR SCROLL !important;
    background-repeat: REPEAT OR NO-REPEAT !important;
    background-position: CENTER / LEFT / RIGHT / TOP / BOTTOM !important;}
</style>


<style>
/*General About (Background Color/Background Image)*/
    .general-about{
    background-color: black !important;
    background-image: url('URL') !important;
    background-attachment: FIXED OR SCROLL !important;
    background-repeat: REPEAT OR NO-REPEAT !important;
    background-position: CENTER / LEFT / RIGHT / TOP / BOTTOM !important;}
</style>

<style>
/*Mood (Background Color/Background Image)*/
    .mood{
    text-align:center;
    background-color: #08578a !important;
    background-image: url('URL') !important;
    background-attachment: FIXED OR SCROLL !important;
    background-repeat: REPEAT OR NO-REPEAT !important;
    background-position: CENTER / LEFT / RIGHT / TOP / BOTTOM !important;
box-shadow: 0px 0px 19px 0px black;
    border-radius: 15px !important;
}

</style>

<style>
/*Contact Heading (Background Color/Background Image)*/
    .contact .heading{
    border-radius: 25px 25px 25px 25px !important;
    background-color: black !important;
    background-image: url('URL');
    background-repeat: repeat;
    background-position: center;}
</style>

<style>
/*Contact Box (Background Color/Background Image)*/
    .contact{
    background-color: black !important;
    background-image: url('URL') !important;
    background-attachment: FIXED OR SCROLL !important;
    background-repeat: REPEAT OR NO-REPEAT !important;
    background-position: CENTER / LEFT / RIGHT / TOP / BOTTOM !important;
box-shadow: 0px 0px 19px 0px black;
}
</style>

<style>
/*Interests Section/Social Links Heading (Background Color/Backround Image)*/
    .table-section .heading{
    border-radius: 25px 25px 25px 25px !important;
    text-align:center;
    background-color: #27558D !important;
    background-image: url('URL');
    background-repeat: repeat;
box-shadow: 0px 0px 19px 0px black;
    background-position: center;}
</style>

<style>
/*Interests Table & Links Table (Background Color/Background Image)*/
    table.details-table{
    background-color: #08578a !important;
    background-image: url('') !important;
    background-attachment: FIXED OR SCROLL !important;
    background-repeat: REPEAT OR NO-REPEAT !important;
    background-position: CENTER / LEFT / RIGHT / TOP / BOTTOM !important;
box-shadow: 0px 0px 19px 0px black;
}
    
.profile h1 {
font-size: 24px;
overflow: hidden; /* Ensures the content is not revealed until the animation */
  border-right: .15em solid sienna; /* 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: sienna; }
}
}

.profile .details-table td p{
color: black !important;
}

    .profile .details-table td{
    background-color: black !important;
    background-image: url('URL') !important;
    background-attachment: FIXED OR SCROLL !important;
    background-repeat: REPEAT OR NO-REPEAT !important;
    background-position: CENTER / LEFT / RIGHT / TOP / BOTTOM !important;}
</style>

<style>
/*Blogs Heading (Background Color/Background Image)*/
    .blog-preview h4{
    border-radius: 25px 25px 25px 25px !important;
    background-color: black;
    background-image: url('URL');
    background-repeat: repeat;
    background-position: center;}

.profile .blurbs .section h4 {
color: white !important;
font-family: courier !important;
}

.blurbs .heading:before, .blog-preview h4:before, .friends .heading:before {
font-family: courier !important;
font-size: 14px;
}
</style>

<style>
.profile-info{
border-radius:5px;
background-color: black;
box-shadow: 0px 0px 19px 0px black;
}

.general-about .details {
    background-image: url('https://i.ibb.co/c6f2g0Q/71-J-Qk-Om-AKL-AC-SL1400.jpg');
no-repeat fixed; background-size:cover;
box-shadow: 0px 0px 19px 0px black;
}
</style>

<style>
/*Blog (Background Color/Background Image)*/
    .blog-preview{
    background-color: #0f2037 !important;
    background-image: url('URL') !important;
    background-attachment: FIXED OR SCROLL !important;
    background-repeat: REPEAT OR NO-REPEAT !important;
    background-position: CENTER / LEFT / RIGHT / TOP / BOTTOM !important;
    border-radius: 25px 25px 25px 25px !important;
box-shadow: 0px 0px 19px 0px black;
}
</style>

<style>
/*Blurbs Heading (Background Color/Background Image)*/
    .blurbs .heading{
    border-radius: 25px 25px 25px 25px !important;
    background-color: black !important;
    background-image: url('URL');
    background-repeat: repeat;
    background-position: center;}

.profile .blurbs , .profile .friends , .blog-entry .comments , .bulletin .comments {
border-radius:15px;
box-shadow: 0px 0px 19px 0px black;
}
</style>

<style>
/*About Me/Who I'd Like To Meet (Background Color/Background Image)*/
    .blurbs{
    background-color: #0f2037 !important;
    background-image: url('URL') !important;
    background-attachment: FIXED OR SCROLL !important;
    background-repeat: REPEAT OR NO-REPEAT !important;
    background-position: CENTER / LEFT / RIGHT / TOP / BOTTOM !important;}

</style>

<style>
/*Friends/Comments Heading (Background Color/Background Image)*/
    .friends .heading{
    border-radius: 25px 25px 25px 25px !important;
    background-color: black !important;
    background-image: url('URL');
    background-repeat: repeat;
    background-position: center;}
.count {
    color: lightblue;
</style>

<style>
/*Friends (Background Color/Background Image)*/
    .friends{
    background-color:  !important;
no-repeat fixed; background-size:cover;
    background-attachment: FIXED OR SCROLL !important;
    background-repeat: REPEAT OR NO-REPEAT !important;
    background-position: CENTER / LEFT / RIGHT / TOP / BOTTOM !important;}

.friends-grid{
    background-image: url('https://media.istockphoto.com/id/1202974826/vector/navy-classic-blue-color-christmas-winter-texture-with-clouds.jpg?s=612x612&w=0&k=20&c=Bz3apjwtW_Vq3FUg9WAc1Krj4ufgCpcDv0fuO0CQ4o8=') !important;
background-size:cover;
}
</style>

<style>
/*Comments (Background Color/Background Image)*/
    .comments-table td{
    background-color: #27558d !important;
    background-image: url('https://media.istockphoto.com/id/1202974826/vector/navy-classic-blue-color-christmas-winter-texture-with-clouds.jpg?s=612x612&w=0&k=20&c=Bz3apjwtW_Vq3FUg9WAc1Krj4ufgCpcDv0fuO0CQ4o8=') !important;
    background-attachment: FIXED OR SCROLL !important;
    background-repeat: REPEAT OR NO-REPEAT !important;
    background-position: CENTER / LEFT / RIGHT / TOP / BOTTOM !important;
    border-radius: 25px 25px 25px 25px !important;
    border-width : 0
box-shadow: 0px 0px 19px 0px black;
}

.comments-table td:first-child{
 background-color: #0f2037 !important;
    background-image: url('https://i.ibb.co/9b4D1wX/rtyuj.jpg') !important;
no-repeat fixed; background-size:cover;
    background-attachment: FIXED OR SCROLL !important;
    background-repeat: REPEAT OR NO-REPEAT !important;
    background-position: CENTER / LEFT / RIGHT / TOP / BOTTOM !important;
    border-radius: 25px 25px 25px 25px !important;
    border-width : 0;
box-shadow: 0px 0px 19px 0px black;
}
</style>

<style>
/*Put Your Comments In A Scroll Box*/
table.comments-table{
background-color:black;
display: block;
height: 300px!important;
overflow-y: scroll;
border-radius:15px;
border-color:black;
border-width: 3px;
}
</style>

<style>
/*Customize Scrollbar*/
    ::-webkit-scrollbar {
    width: 8px;
    height: 10px;
}

    ::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 1);}

    ::-webkit-scrollbar-track {
    background:#27558D;
}
</style>

<style>
/*spacehey logo color.
you can change it at https://codepen.io/sosuke/pen/Pjoqqp */
nav img.logo{
    filter: brightness(100%) saturate(100%) ;!important;
}
</style>

<style>
/*SpaceHey Logo (Background Color/Background Image)*/
    .logo{
    background-color: COLOR !important;
    background-image: url('URL') !important;
    background-attachment: FIXED OR SCROLL !important;
    background-repeat: REPEAT OR NO-REPEAT !important;
    background-position: CENTER / LEFT / RIGHT / TOP / BOTTOM !important;}
</style>

<style>
/*Footer Links (Background Color/Background Image)*/
    footer{
    background-color: #0f2037 !important;
    background-image: url('https://i.ibb.co/xhY2pLQ/dftgyhjhygtfd-lkjhg.jpg') !important;
    background-attachment: FIXED OR SCROLL !important;
    background-repeat: REPEAT OR NO-REPEAT !important;
    background-position: CENTER / LEFT / RIGHT / TOP / BOTTOM !important;
    border-radius:15px;
    box-shadow: 0px 0px 10px #fff;
}
</style>

<style>
/*Change Text Colors*/
    .top{
    color: white;
font-size:13px;
}    
    
    main{
    color: white !important;}
    
    footer{
    color: white;}
</style>

<style>
/*Change Link Colors*/
    a{
    color: white !important;}
    
    a:hover{
    color: sienna !important;}
    
    a:visited{
    color: white !important;}
    
    .top a{
    color: white !important;}
    
    .top a:hover{
    color: sienna !important;}
    
    .top a:visited{
    color: white !important;}
    
    .links a{
    color: white !important;}
    
    .links a:hover{
    color: sienna !important;}
    
    .links a:visited{
    color: white !important;}
   
    .friends-grid p{
    color: white !important;}

    footer .links a{
    color: white !important;}
   
    footer .links a:hover{
    color: sienna !important;}
   
    footer .links a:visited{
    color: white !important;}
</style>

<style>
/*Change Interests Section Titles*/
table, th, td {
  border: 0px trans;text-align:center;border-radius: 15px;}

:root {
  --topic1: "General";
  --topic2: "Music";
  --topic3: "Movies";
  --topic4: "Television";
  --topic5: "Books";
  --topic6: "Heroes";}

.table-section:not(:last-child) .details-table tr td:first-child p{color:transparent !important;text-shadow: none !important;letter-spacing: -100px;}

.details-table tr td:first-child p::after{
color:var(--links) !important;
letter-spacing:normal !important;
text-shadow: 2px 2px white !important;
filter: brightness(95%) !important;}

.table-section:not(:last-child) .details-table tr:nth-child(1) td:first-child p::after{
  content: var(--topic1);}

.table-section:not(:last-child) .details-table tr:nth-child(2) td:first-child p::after{
  content: var(--topic2);}

.table-section:not(:last-child) .details-table tr:nth-child(3) td:first-child p::after{
  content: var(--topic3);}

.table-section:not(:last-child) .details-table tr:nth-child(4) td:first-child p::after{
  content: var(--topic4);}

.table-section:not(:last-child) .details-table tr:nth-child(5) td:first-child p::after{
  content: var(--topic5);}

.table-section:not(:last-child) .details-table tr:nth-child(6) td:first-child p::after{
  content: var(--topic6);}
</style>

<style>
/*Follow font instructions at: https://forum.spacehey.com/topic?id=6530  */
/*Change normal text font*/
.body{
font family: courier !important;}
</style>

<style>
/*Change link font*/
a{
font-family: courier !important;}

a:hover{
font-family: courier !important;}

a:visited{
font-family: courier !important;}
</style>

<style>
/*Change Profile Name Font*/
h1{
font-family: courier !important;
color:white;
}
</style>

<style>
/* this centers your friend space */
    .profile .friends .inner, .profile .blurbs .section h4{
    text-align: center;
    }
</style>


<style>
/* this edits your friends' icons */
.profile .friends .person img:not(.icon) {
border-radius:15px;
}
</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: "♪"
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {font-size:20px;
/* add to favorite */
content: "♪"
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {font-size:20px;
/* send a message */
content: "♪"
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {font-size:20px;
/* foward to friend*/
content: "♪"
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {font-size:20px;
/* instant message */
content: "♪"
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {font-size:20px;
/* block user */
content: "♪"
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {font-size:20px;
/* add 2 group  */
content: "♪"
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {font-size:20px;
/* report */
content: "♪️"
}   
</style>

<style>
 .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;
}
</style>

<style>
/*Change Header Text (Contact, About Me, Who I'd Like To Meet, etc)*/

/*"Contacting You" Box Title*/
.contact .heading{ font-size:0; text-align:center; }
.contact .heading:before{ content: "Contact Me"; font-size:.8rem; font-weight:bold;color:white }

/*"Latest Blogs Entries" Title*/
.blog-preview h4{ font-size:0; text-align:center;}
.blog-preview h4 a{font-size:.8rem;margin-left:5px; }
.blog-preview h4:before{ content: "Blog Entries"; font-size:.8rem; }

/*"Your Blurbs" Title*/
.blurbs .heading{ font-size:0; text-align:center;}
.blurbs .heading:before{ content: "Blurbs"; font-size:.8rem; font-weight:bold;color:white; }

/*"Your Friend Space" Title*/
.friends .heading{ font-size:0; text-align:center;}
.friends .heading:before{ content: "My Friends"; font-size:.8rem; font-weight:bold;color:white; }

/*"Your Friend Comments" Title*/
.friends#comments .heading{ font-size:0; text-align:center; }
.friends#comments .heading:before{ content: "Comments"; font-size:.8rem; font-weight:bold;color:white; border-width : 0 }
</style>

<style>
/*contact box border*/
    .contact{
border: 1px transparent !important;
border-radius: 15px;}
</style>

<style>
/* for this box, you can add an image of your choice. it's right under the contact box. */
.url-info{
    background: url('https://i.ibb.co/wKhdJ8P/ezgif-1-3092a6a736.gif');
    background-position: center;
    border: var(--borders)!important;
    border-radius: 20px;
    height:300px;
box-shadow: 0px 0px 19px 0px black;
}

.url-info p{
    opacity: 0.0;}
</style>

<style>
/*removes boxes around the interests/links table*/
body  
    {
--lighter-blue: none;
}
</style>

<style>
/*hides white box around comments table*/
    .table.comments-table:{
    border-color:transparent;}
</style>



<style>
.online {
    margin:auto;
    padding-bottom: 5px;
    content: url(https://i.ibb.co/MCw75HC/ezgif-1-9012e41fa8.png);
}
</style>

<style>

li.active .icon { 
    content:url('https://i.ibb.co/6ss0Mbc/sticker-gmail.gif'); 
    width: HOW WIDE U WANT ITpx;
    height: HOW TALL YOU WANT ITpx;
    }

.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/sblt28EXnyY//?&;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(19 18 79 / 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, 8px);
}
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/JHJyJCZ/download-1.png); 
border-radius: 15px !important;
overflow:hidden;
}
</style>

<style>
body {
cursor:url("https://cur.cursors-4u.net/nature/nat-11/nat1009.cur"), auto;
}

.profile .contact .heading h4, .profile .table-section .heading h4, .profile .blurbs .heading h4, .profile .friends .heading h4, .blog-entry .comments .heading h4, .bulletin .comments .heading h4, .home-actions .heading h1, .statistics .heading h4 {
font-family: courier !important;
</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 85 comments ( View all | Add Comment )
✩iluvstarz☆	1778872845 using!!! Report Comment
xx_takethistoyourgave_xx	1773159544 using!!! Report Comment
ziggysatdust	1772804665 Using <33 Report Comment
Ger@rd XD	1771707794 Using :33 Report Comment
Henry	1769299164 Using! Report Comment
Mikeymustdie(i Promise)	1769286585 Using Report Comment
Mikeymustdie(i Promise)	1769286583 Using Report Comment
chris!!	1768423160 Using! Report Comment
Folie	1767343439 Using!! Report Comment
Eva !!	1766788654 using!! Report Comment
🪰🐚 addz 🚦🛸	1765064494 using! Report Comment
ᒪIᘔ !!	1764866728 using!!!! Report Comment
ᒪIᘔ !!	1764866728 using!!!! Report Comment
lee	1763869064 using! ^_^ Report Comment
Xx_*67sapphi3stardust27_xX	1762764187 using!!! Report Comment
trixie	1759199164 USING Report Comment
Senny	1758200207 using!! Report Comment
Judas	1754129286 using :3 Report Comment
massacre wentz	1751844365 usingg! Report Comment
ly 🩸	1751573631 usingg Report Comment