The Cure Layout!

Tags: the cure, blue, red, stars, animation, gif, simple, music, band, layout
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=26144) -->

<style>
body{background:url("https://i.ibb.co/QNv3GLL/the-cure-greatest-hits-750.jpg") no-repeat fixed; background-size:cover;}
</style>
    
<style>
/*Profile (Background Color/Background Image)*/
    main{
background-color: #0A3161 !important;
    background-image: url('https://pbs.twimg.com/ext_tw_video_thumb/1459339638007549952/pu/img/RhxBtpDurSwLuvNX.jpg:large') !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;
}
</style>
    
<style>
/*Adding rounded corners to profile*/
   .top{
        border-radius: 25px 25px 25px 25px !important;
        box-shadow: 0px 0px 10px #fff;
}

.pfp-fallback{
border-radius: 15px !important;
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/qNx6Gg6/Untitled-1.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: #27558D !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: #132031 !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: #B52032 !important;
    background-image: url('URL');
    background-repeat: repeat;
    background-position: center;}
</style>

<style>
/*Contact Box (Background Color/Background Image)*/
    .contact{
    background-color: #B52032 !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: #27558D !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;
}

    .profile .details-table td{
    background-color: #B52032 !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: #B52032;
    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: #132031;
box-shadow: 0px 0px 19px 0px black;
}

.general-about .details {
    background-image: url('https://i.ibb.co/2ZqvW6y/ezgif-5-1920d3d78f.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: #132031 !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>
/*Blurbs Heading (Background Color/Background Image)*/
    .blurbs .heading{
    border-radius: 25px 25px 25px 25px !important;
    background-color: #B52032 !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: #132031 !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: #B52032 !important;
    background-image: url('URL');
    background-repeat: repeat;
    background-position: center;}
.count {
    color: seagreen;
</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://images.genius.com/d3e6b67499d8fc59298df1e0a2aa7f0a.599x599x1.jpg') !important;
background-size:cover;
}
</style>

<style>
/*Comments (Background Color/Background Image)*/
    .comments-table td{
    background-color: #132031 !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;
    border-radius: 25px 25px 25px 25px !important;
    border-width : 0
}

.comments-table td:first-child{
 background-color: #132031 !important;
    background-image: url('https://i.ibb.co/LSwmvTL/ezgif-5-1920d3d78f.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;
}
</style>

<style>
/*Put Your Comments In A Scroll Box*/
table.comments-table{
background-color:#132031;
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: #132031 !important;
    background-image: url('https://i.ibb.co/hRW9FKX/Untitled-1.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: yellow !important;}
    
    a:visited{
    color: white !important;}
    
    .top a{
    color: white !important;}
    
    .top a:hover{
    color: yellow !important;}
    
    .top a:visited{
    color: white !important;}
    
    .links a{
    color: white !important;}
    
    .links a:hover{
    color: yellow !important;}
    
    .links a:visited{
    color: white !important;}
   
    .friends-grid p{
    color: white !important;}

    footer .links a{
    color: white !important;}
   
    footer .links a:hover{
    color: yellow !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>
/*Rounds profile picture*/
    .profile-pic img{
border-radius:25px;
box-shadow: 0px 0px 19px 0px 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/wW0fZbx/ezgif-4-4b28d68c9d.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/k95P2FB/ezgif-5-2476e1deb9.png);
}
</style>

<style>

li.active .icon { 
    content:url('https://i.ibb.co/vDCVBqj/ezgif-4-fd8970722b.png'); 
    width: HOW WIDE U WANT ITpx;
    height: HOW TALL YOU WANT ITpx;
    }

.icon, .award img {
content:url('https://i.ibb.co/vDCVBqj/ezgif-4-fd8970722b.png'); 
}

</style>
<iframe width="0" height="0" src="https://www.youtube.com/embed/uXHmKrTTR6g//?&;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>
html:before , body:before{
  animation: grain 8s steps(10) infinite;
  background-image: url(https://i.imgur.com/QpnTsrV.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%) }
}

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

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

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


.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/GWyXDLs/tumblr-nuh83muoi-F1s156ulo1-500.gif); 
border-radius: 15px !important;
overflow:hidden;
}
</style>

<style>
body {
cursor:url("https://cur.cursors-4u.net/nature/nat-6/nat583.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 70 comments ( View all | Add Comment )
emi	1725322207 using ^^ Report Comment
xZ3PHYR!!	1723912830 Using!! Report Comment
maxh3adroom	1723493166 usingg ^^ Report Comment
cillian	1723150901 using tyyyy Report Comment
oliwia	1722466897 USING XP Report Comment
oliwia	1722466896 USING XP Report Comment
oliwia	1722466896 USING XP Report Comment
oliwia	1722466895 USING XP Report Comment
Umer_tam2007	1722361409 using Report Comment
doug/marshall	1721964306 USING AJJHLKG Report Comment
♕ ⋆ 𝕯𝖎𝖔𝖒𝖊𝖉𝖊𝖘 ⋆ ♕	1721694159 Using! Report Comment
collie !	1721343817 hey is ur mother by any chance a basketball (using n a ref) Report Comment
charlie	1721135119 using!! <3 Report Comment
Nico	1719614320 using thank you!! Report Comment
✮noah🦇✮	1717981498 using :p Report Comment
anastasia	1716821424 using!! Report Comment
transpity	1716330520 using Report Comment
Yaneli	1715637987 USINGG!!!!:333 Report Comment
groovalicious	1715030023 using !! Report Comment
☥ 𝔙𝔢𝔫𝔦 ☥ 🦇🌘	1711859558 using! Report Comment