Pierce the Veil - A Flair For The Dramatic Layout!

Tags: ptv, pierce the veil, music, animation, band, simple, black, dark, album, emo
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=25741) -->

<style>
body{background:url("https://i.ibb.co/dWnCZfL/ptv222222.png") no-repeat fixed; background-size:cover;
}
</style>
    
<style>
/*Profile (Background Color/Background Image)*/
    main{
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 20px #fff;
}
</style>
    
<style>
/*Adding rounded corners to profile*/
   .top{
        border-radius: 25px 25px 25px 25px !important;
        box-shadow: 0px 0px 5px #fff;
}

.pfp-fallback{
border-radius: 15px !important;
box-shadow: 0px 0px 10px black;
}

.profile .friends p , .comments p{
  text-shadow: 0px 0px 3px 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/KF0sxFy/Untitled-1sdcj.png") !important;
no-repeat fixed; 
height:100%;
background-position: top;
}
</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: #252f24 !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: #252f24 !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: 25px 25px 25px 25px !important;
    background-color: #55584b !important;
    background-image: url('URL');
    background-repeat: repeat;
    background-position: center;}
</style>

<style>
/*Contact Box (Background Color/Background Image)*/
    .contact{
    background-color: #55584b !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: 25px 25px 25px 25px !important;
    text-align:center;
    background-color: #252f24 !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: #252f24 !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: #55584b !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: #55584b;
    background-image: url('URL');
    background-repeat: repeat;
    background-position: center;}
</style>

<style>
.profile-info{
border-radius:5px;
background-color: #252f24;
border-radius: 15px;
}
</style>

<style>
/*Blog (Background Color/Background Image)*/
    .blog-preview{
    background-color: #252f24 !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: 15px
}
</style>

<style>
/*Blurbs Heading (Background Color/Background Image)*/
    .blurbs .heading{
    border-radius: 25px 25px 25px 25px !important;
    background-color: #55584b !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: #252f24 !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: 15px
}

</style>

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

<style>
/*Friends (Background Color/Background Image)*/
    .friends{
    background-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>
/*Comments (Background Color/Background Image)*/
    .comments-table td:first-child{
    background-color: #252f24 !important;
    background-image: url('https://i.ibb.co/SJc3b2c/81j-11-PUKQL-AC-SL1500.jpg') !important;
    background-attachment: FIXED OR SCROLL !important;
    background-repeat:NO-REPEAT !important;
    background-position: CENTER !important;
    border-radius: 25px 25px 25px 25px !important;
    border-width : 0
}

.comments-table td{
background-image: url('https://i.ibb.co/2ScWqxp/81j-11-PUKQL-AC-SL1500-1.jpg') !important;
border-width:0;
background-color: black !important;
    background-repeat:NO-REPEAT !important;
    background-position: CENTER !important;
    border-radius: 25px 25px 25px 25px !important;
}
</style>

<style>
/*Put Your Comments In A Scroll Box*/
table.comments-table{
background-color:#252f24;
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:#818672;}
</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: 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;
    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: #a95f4b !important;}
    
    a:visited{
    color: white !important;}
    
    .top a{
    color: white !important;}
    
    .top a:hover{
    color: #a95f4b !important;}
    
    .top a:visited{
    color: white !important;}
    
    .links a{
    color: white !important;}
    
    .links a:hover{
    color: #a95f4b !important;}
    
    .links a:visited{
    color: white !important;}
   
    .friends-grid p{
    color: white !important;}

    footer .links a{
    color: white !important;}
   
    footer .links a:hover{
    color: #a95f4b !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>body {cursor: url(data:image/x-icon;base64,AAACAAEAICAAAAAAAACoCAAAFgAAACgAAAAgAAAAQAAAAAEACAAAAAAAAAQAAAAAAAAAAAAAAAEAAAAAAAAAAAAAXl5eABQUFAAoKCgAAABmABoaGgB4eHgAAGaZALS0tADIyMgA3NzcAFxcXAAoKCkADQ29AB8f3gBGRkYAgoKCAKioqAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADQ0NDQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADQ0NDQ0NDQ0AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAANDQ0NDQ0NDQ0NAwAAAAAAAAAAAAAAAAAAAAAAAAAADQ0NDQ0NDQ0NDQ0NAwAAAAAAAAAAAAAAAAAAAAAAAAANDQ0NDQ0NDQ0NDQ0AAAAAAAAAAAAAAAAAAAAAAAAADQ0NDQ0NDQ0NDQ0NDQ4AAAAAAAAAAAAAAAAAAAAAAAANDQ0NDQ0NDg4NDQ0NDg4AAAAAAAAAAAAAAAAAAAAAAA0NDQ0NDQ0ODg4NDQ0ODgAAAAAAAAAAAAAAAAAAAAANDQ0NDQ0NDwkJDg4NDg4ODgAAAAAAAAAAAAAAAAAAAA0NDQ0NDQgMBgkODg0ODg4OAAAAAAAAAAAAAAAAAAANDQ0NDQ0MDAgMBg4NDQ4ODg4AAAAAAAAAAAAAAAAAAg0NDQ0NCAwKCAoMDg0NDg4OAAAAAAAAAAAAAAAADQ0NDQ0NDQwMCAwKCAgODQ0ODg4AAAAAAAAAAAAAAA0NDQ0NDQ0IDAoMCAwODQ0NDg4AAAAAAAAAAAAAAAAADQ0AAAAQBwcIDAoODg4NDg4AAAAAAAAAAAAAAAAAAAAAAAAAAAQQBAcIDg4NDQ4AAAAAAAAAAAAAAAAAAAAAAAAAAAAAEAQQBwwODQ0OAAAAAAAAAAAAAAAAAAAAAAAAAAAAABAEEAQQDA0NDgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQBBAEAAANDQ4AAAAAAAAAAAAAAAAAAAAAAAAAAAAAEAQQBAAAAA0NDgAAAAAAAAAAAAAAAAAAAAAAAAAAABAEEAQAAAAADQ4AAAAAAAAAAAAAAAAAAAAAAAAAAAAQBBAEAAAAAAIODgAAAAAAAAAAAAAAAAAAAAAAAAABEAQQBAAAAAAADg4AAAAAAAAAAAAAAAAAAAAAAAAAEREBEAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEREBAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAUFBQUFEQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAFBQUFBQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAUFAAAFAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAFBQAAAAAACwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAUFAAAACwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP//4f///4B///8AH///AA///gAH//4AA//8AAH//AAB//wAAP/4AAD/+AAA//AAAP/AAAH/gAAB/wAAA/8AAA//GAA///AA///wAf//4IP//8GD//+Dh///Bwf//g8P//wfH//gP///wH///8D///+A////AX///wX///+X////), auto !important;}

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

<style>
/*Change Header Text (Contact, About Me, Who I'd Like To Meet, etc)*/
.profile .blurbs .section h4{
color:white;
font-family: courier;
font-size:14px;
}

/*"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/WK9HV4t/ezgif-5-193bde977d.gif');
    background-position: center;
    border: var(--borders)!important;
    border-radius: 20px;
    height:300px;
box-shadow: 0px 0px 5px 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{

content: url("https://i.ibb.co/DfCM844/PIERCE-THE-VEIL-A-FLAIR-FOR-THE-DRAMATIC-RED-VINYL-674539b.png") !important;
}
</style>

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

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

<style>

li.active .icon { 
    content:url('http://www.rw-designer.com/cursor-view/23324.png'); 
    width: HOW WIDE U WANT ITpx;
    height: HOW TALL YOU WANT ITpx;
    }

</style>

<iframe width="0" height="0" src="https://www.youtube.com/embed/BMIaqCMGL3o//?&;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, nav .links, nav .top {
animation: float 3s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}

.col, main, footer, nav::before, nav .links, nav .top {
animation: float 3s;
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>
img:hover , .url-info:hover , .online:hover {
  animation: shake 1s;
  animation-iteration-count: infinite;
}

@keyframes shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}
</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 55 comments ( View all | Add Comment )
ᥫ᭡𝓒𝓵𝓸𝔀𝓷𝓕𝓪𝓬𝓮ᥫ᭡	1737409965 Using Tyty !!! Report Comment
Sai	1737091670 using Report Comment
AFlairForTheSnapple	1736486842 using!! >_< ty Report Comment
sadie :P	1735450735 using!! >_< ty Report Comment
sadie :P	1735450735 using!! >_< ty Report Comment
sadie :P	1735450734 using!! >_< ty Report Comment
sadie :P	1735450731 using!! >_< ty Report Comment
hyunn<3	1735257117 USINGGG <33 TYSM FOR THIS >O<!!!! Report Comment
theo ^_^	1735207527 using!!! i love it>3 Report Comment
Rachel	1734140130 using!! <3 Report Comment
Salt	1734102669 using!! :3 Report Comment
⨂ patch ⨂	1734045524 using! Report Comment
lex	1733245509 using :3 Report Comment
chlo¿	1732116348 Using:3 Report Comment
chlo¿	1732116346 Using:3 Report Comment
PTVBOY	1731707814 using :3 Report Comment
Katyphernalia	1730689346 using! Report Comment
ouraliceofsorrows	1730122688 using! Report Comment
Chula.xd	1728526672 Using X3 Report Comment
aalixxh	1727240076 using >:) Report Comment