Currect layout !!

Tags: personal layout, layout, rainbow
Description:

Changing so im putting it here!!! You can use idgaf Comment if using
Code:

<!-- (c) Layout created by RAINY RAINER !!!!!! ☆⌒(ゝ。∂) (https://layouts.spacehey.com/layout?id=102603) -->

<div id="profile">
<h1>🚨 Photosensitivity Warning</h1>
<p>This profile includes the following visuals that may trigger photosensitive seizures.</p>
<ul>
<li>Flashing Images (Strobe)</li>
<li>Moving Repeated Patterns</li>
<li>Bright Colors (Eye Strain)</li>
<li>Loud music (Idk what i causes but turn yo volume down!!!!!)</li>
</ul>
<a href="#profile">LET ME IN!!!!</a>
<a href="https://spacehey.com/home">Go back/home</a>
<img src="https://animesher.com/orig/1/189/1891/18914/animesher.com_colorful-miku-hatsune-vocaloid-1891409.gif"/>
</div>

<style> 

:root {
  --warning-background-color: white;
  --warning-text-color: black;
}

#profile {
 position: fixed;
 z-index: 100;
 top: 0; 
 left: 0;
 width: 100vw;
 height: 100vh;
 padding: 50px 100px;
 font-size: 200%;
 background-color: var(--warning-background-color);
 color: var(--warning-text-color);
 overflow-y: scroll;
 opacity: 1;
 transition: .2s;
}

#profile > * {
 width: 100%;
 max-width: 700px!important;
 margin: 20px auto;
 display: block;
}

#profile:target {
 opacity: 0;
 visibility: hidden;
}

#profile > a {
 text-align: center;
 font-weight: bold;
}

#profile > ul {
 padding: 10px 50px;
 border: 2px dashed var(--warning-text-color);
}
</style>


<style>
/*Main Body (Background Color/Background Image)*/
    body{
    background-color: transparent !important;
    background-image: url('https://i.stack.imgur.com/zcNQa.gif') !important;
    background-attachment: FIXED !important;
    background-repeat: NO-REPEAT !important;
    background-position: CENTER !important;
    background-size: COVER;}
</style>
    
<style>
/*Profile (Background Color/Background Image)*/
    main{
    background-color: white !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>
/*Adding rounded corners to profile*/
   .top{
        border-radius: 10px 10px 10px 10px !important;}
        
    main{
        border-radius: 10px 10px 10px 10px !important;}
</style>
        
<style>
/*Top (Background Color/Background Image)*/
   .top{
    background-color: transparent!important;
    background-image: url('https://animesher.com/orig/1/189/1891/18914/animesher.com_colorful-miku-hatsune-vocaloid-1891409.gif') !important;
    background-attachment: FIXED !important;
    background-repeat: REPEAT OR NO-REPEAT !important;
    background-position: TOP !important;
    background-size: COVER;}
</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: white !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: 10px 10px 10px 10px !important;
    background-color: cyan !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>
/*Profile Name (Background Color/Backround Image)*/
    h1{
    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>
/* the online symbol and text 
you can change it at https://codepen.io/sosuke/pen/Pjoqqp*/
.online{color: var(--links) !important;} 
.online img{
    filter: brightness(0) saturate(100%) invert(84%) sepia(12%) saturate(11%) hue-rotate(330deg) brightness(79%) contrast(89%); !important;}
</style>

<style>
/*General About (Background Color/Background Image)*/
    .general-about{
    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>
/*Mood (Background Color/Background Image)*/
    .mood{
    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>
/*Contact Heading (Background Color/Background Image)*/
    .contact .heading{
    border-radius: 10px 10px 10px 10px !important;
    background-color: cyan !important;
    background-image: url('https://i.stack.imgur.com/zcNQa.gif');
    background-repeat: repeat;
    background-position: center;}
</style>

<style>
/*Contact Box (Background Color/Background Image)*/
    .contact{
    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>
/*Interests Section/Social Links Heading (Background Color/Backround Image)*/
    .table-section .heading{
    border-radius: 10px 10px 10px 10px !important;
    text-align:center;
    background-color: cyan !important;
    background-image: url('URL');
    background-repeat: repeat;
    background-position: center;}
</style>

<style>
/*Interests Table & Links Table (Background Color/Background Image)*/
    table.details-table{
    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;}
    
    .profile .details-table td{
    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>
/*Blogs Heading (Background Color/Background Image)*/
    .blog-preview h4{
    border-radius: 10px 10px 10px 10px !important;
    background-color: cyan;
    background-image: url('URL');
    background-repeat: repeat;
    background-position: center;}
</style>

<style>
/*Blog (Background Color/Background Image)*/
    .blog-preview{
    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>
/*Blurbs Heading (Background Color/Background Image)*/
    .blurbs .heading{
    border-radius: 10px 10px 10px 10px !important;
    background-color: cyan !important;
    background-image: url('URL');
    background-repeat: repeat;
    background-position: center;}
</style>

<style>
/*About Me/Who I'd Like To Meet (Background Color/Background Image)*/
    .blurbs{
    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;}
    
/*Hide "About Me" & "Who I'd Like To Meet" Headers*/
 .blurbs .section h4{display: none !important;}
</style>

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

<style>
/*Friends (Background Color/Background Image)*/
    .friends{
    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>
/*Comments (Background Color/Background Image)*/
    .comments-table td{
    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;
    border-radius: 10px 10px 10px 10px !important;}
</style>

<style>
/*Put Your Comments In A Scroll Box*/
table.comments-table{
display: block;
height: 300px!important;
overflow-y: scroll;}
</style>

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

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

    ::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);}
</style>

<style>
/*spacehey logo color.
you can change it at https://codepen.io/sosuke/pen/Pjoqqp */
nav img.logo{
    filter: brightness(0) saturate(100%) invert(84%) sepia(12%) saturate(11%) hue-rotate(330deg) brightness(79%) contrast(89%);!important;
}
</style>

<style>
/*Footer Links (Background Color/Background Image)*/
    footer{
    background-color:cyan !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>
/*Change Text Colors*/
    .top{
    color: white;}    
    
    main{
    color: darkcyan !important;}
    
    footer{
    color: COLOR;}
</style>

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

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

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

:root {
  --topic1: "☆ GENERAL/FANDOMS!! ☆";
  --topic2: "☆ MUSIC ^_^ ☆";
  --topic3: "☆ MOVIES :3 ☆";
  --topic4: "☆ SERIES/ANIMES !?! ☆";
  --topic5: "☆ books. ☆";
  --topic6: "☆ BEST CHARACTERS!!!!!!! ☆";}

.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 black !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: FONT !important;}
</style>

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

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

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

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

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

<style>
/* cursors: top URL is the cursor that shows when you hover over links, bottom URL is the main or "resting" cursor */
/* https://cursors-4u.net */
a:hover {    
 cursor: url('url'), auto;
}
* {
 cursor: url('url'), auto;
}
</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 {
/* add to friends */
content: "☆"
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {
/* add to favorite */
content: "☆"
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
/* send a message */
content: "☆"
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
/* foward to friend*/
content: "☆"
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {
/* instant message */
content: "☆"
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {
/* block user */
content: "☆"
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {
/* add 2 group  */
content: "☆"
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
/* report */
content: "☆"
}   
</style>

<style>
/*Rounds profile picture*/
    .profile-pic img{
border-radius:25px;}
</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: "Your New Contact Line"; font-size:.8rem; font-weight:bold; }

/*"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: "Your New Blog Entries"; font-size:.8rem; }

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

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

/*"Comments ＼(^_^)／" Title*/
.friends#comments .heading{ font-size:0; text-align:center; }
.friends#comments .heading:before{ content: "Your New Friends Comments Line"; font-size:.8rem; font-weight:bold; }
</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('');
    background-position: center;
    border: var(--borders)!important;
    border-radius: 15px;
    height: 100px;}

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

<iframe width="0" height="0" src="https://www.youtube.com/embed/mO-A3L1bzXY//?&;amp;;autoplay=1&;loop=1&;controls=1" title="Ring Dinge Ding" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" loading="lazy">
</iframe>

<style> .profile{ display:flex; flex-direction: column; overflow-y: auto; } .profile .left{width: 100% !important;} .profile-pic{width: 100% !important;} .general-about{text-align: center !important;} h1{text-align: center !important;} </style>

<style>
body:before {
content: " ";
height: 100vh;
width: 100vw;
display: block;
position: fixed;
top: 0;
left: 0;
z-index: 100;
background-image: url('urlhere');
background-size: cover;
background-repeat: no-repeat;
background-position:center;
animation: youranimation 3s ease 0s 1 normal forwards;
pointer-events: none;
}
@keyframes youranimation { 0.0%{ opacity: 1;} 75%{ opacity: 1; } 100%{ opacity: 0;} }
</style>

<div style="float:  ; max-height: 200px; position: fixed; right: 1px; bottom: 0px; z-index: 350;">
<img src="https://i.pinimg.com/originals/cd/d6/5b/cdd65b2ccd73a14a19e9a8fe681c6f48.gif" height="200"/></div>

<style>
:root{
--first: white;
--second: cyan;
--third: white;}
@keyframes colors{
            0%{
                color: var(--first);
            }
            25%{
                color: var(--second);
            }
            50%{
                color: var(--third);
            }
            75%{
                color: var(--second);
            }
            100%{
                color: var(--third);
            }
        }
</style>

<style>
/*change h1 with whatever element/class you want*/
h1 {
 text-align: left;
    animation-duration: 5s; /*Change the time for faster or slower*/
    animation-name: colors;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
</style>

<style>
@keyframes spin{
  from{ transform:rotate(0deg); }
  to{ transform:rotate(-360deg); }
}
.general-about .profile-pic img{
  border-radius: 50%;
  animation: spin 7s infinite linear;
}
</style>

<style>
.general-about .profile-pic img{
clip-path: polygon(50% 0%, 67% 29%, 98% 35%, 75% 58%, 79% 91%, 50% 75%, 21% 91%, 25% 58%, 2% 35%, 33% 29%);
</style>

<style>
.general-about .profile-pic img{
clip-path: polygon(50% 0%, 67% 29%, 98% 35%, 75% 58%, 79% 91%, 50% 75%, 21% 91%, 25% 58%, 2% 35%, 33% 29%);
}
.profile .friends .person img {
clip-path: polygon(50% 0%, 67% 29%, 98% 35%, 75% 58%, 79% 91%, 50% 75%, 21% 91%, 25% 58%, 2% 35%, 33% 29%);
}
.comments-table img,
.person img{
clip-path: polygon(50% 0%, 67% 29%, 98% 35%, 75% 58%, 79% 91%, 50% 75%, 21% 91%, 25% 58%, 2% 35%, 33% 29%);
}
</style>

<style>html:before {
  animation: grain 8s steps(10) infinite;
  background-image: url(https://i.pinimg.com/originals/17/6f/b5/176fb547189cbdb4f745d425e84167f3.gif);
  content: "";
  height: 300%;
  left: -50%;
  opacity:.4;
  position: fixed;
  top: -110%;
  width: 300%;
  pointer-events:none;
}
@keyframes grain 
  70% { transform:translate(0%, 15%) }
}</style>

<div id="bloodydrip">

<style>
#bloodydrip {
background: url("https://64.media.tumblr.com/27c6cf0846f68c2b01c0bc224f3f9efd/7c22e5fc72c98df2-87/s540x810/0d6b2cb772e66ab374f1df1ce5d4e974f6d018f8.gif");
background-position: center;
background-repeat: repeat;
width: 600%;
height:24px;
min-width: 1720px;
overflow: hidden;
position: fixed;
top: -0.9px;
left: 0px;
z-index: 100;
pointer-events: none;
opacity: 1;
}
</style></div>

<style>
.profile .url-info p:last-child:after {content: ""; display: block; background-image: url(https://media.tenor.com/tAQiRbIywlwAAAAM/pink.gif);  width: auto; height: 49px; background-position: bottom center; background-size: 100%; background-repeat: no-repeat;}
.profile .url-info p {text-align: center;}
</style>

<style>
.online {content:url('https://dl.glitter-graphics.com/pub/157/157641b27q8mcaol.gif'); background-repeat: no-repeat; background-position: -15% 75%; z-index: 2; 
}
</style>

<style>
.logo {
content:url("https://imagizer.imageshack.com/img922/4581/W5bGn3.gif");
}</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 0 of 0 comments ( View all | Add Comment )