Taking Back Sunday Layout

Tags: taking back sunday, emo, cursor, autoplay, animation, overlay
Description:

Includes: Shaking elements on hover, neon tilted nameplate, floating images, custom cursor and online status, custom icons inc contact icons and bell, autoplay of makedamnsure etc!
Preview:

click on the image for a larger preview
Code:

<!-- (c) Layout created by arlo atomickk (https://layouts.spacehey.com/layout?id=29072) -->

<style>

@import url('https://fonts.googleapis.com/css2?family=Zeyada&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
@import url('https://cory.anota.do/spacehey/pdg_neon.css');

main{background: none}

/*BODY FONT*/
   body{font-family: 'Zeyada', cursive;
   color: white !important;
   font-size: 150%;
   text-shadow: 2px 2px 3px white, 0 0 25px white, 0 0 5px white}

/*HEADINGS FONT*/
   h1, h2, h3, h4, .profile .blurbs .section h4{font-family: 'Press Start 2P', cursive;
   font-size: 80%;
   color: white !important;
   text-shadow: 2px 2px 3px white, 0 0 25px white, 0 0 5px white}

/*TEXT SETTINGS*/
main p{
   letter-spacing: 2px;
   font-weight: 700; 
   line-height: 1.5;
   color: white !important;
   text-shadow: 2px 2px 3px #FFFFFF, 0 0 25px #1a85ff, 0 0 5px #FFFFFF}

/*NAMEPLATE*/
:root{ --neon-text-color: #00ff80; }
.profile .left h1{ font-family: 'Press Start 2P', cursive; transform: rotate(-10deg) !important}

/*VERY BACK BACKGROUND*/
body{
   background: url(https://i.imgur.com/2tQKgSF.jpg);  
   background-size: cover}

/*PROFILE BCKGROUND*/
.profile{
   background-image: url(https://i.imgur.com/6nxwn8c.jpg);
   background-size: 100%;
   margin-bottom: -10px;
   border: 2px solid red;
   box-shadow: calc((400px + (25px * 2)) * 0.025) calc((400px + (25px * 2)) * 0.025) 
   #a12c26}

/*NAV BAR*/
.links{ 
   border: 2px solid red !important;
   border-top: none !important;
   text-align: center;
   background:  !important;
   background-image: url(https://i.imgur.com/NFOQdk7.jpg) !important;
   background-size: cover !important}

/*HEADER*/
.top{
   background:  !important;
   height: 250px;
   background-image: url(https://i.imgur.com/XIQlL2J.jpg) !important;
   background-size: cover !important;
   margin-top: 20px;
   border: 2px solid red;
   border-bottom: none !important}

/*FOOTER*/
footer {
   height: 200px;
   background-image: url(https://i.imgur.com/kD5tkGi.jpg);
   background-position: centre !important;
   background-size: cover;
   box-shadow: calc((400px + (25px * 2)) * 0.025) calc((400px + (25px * 2)) * 0.025) 
   #a12c26;
   border: 2px solid red}

footer .links{
   background: none !important;
   box-shadow: none !important}

/*BITS BETWEEN LINKS IN NAV BAR*/
nav .links li:not(:last-child)::after, footer .links li:not(:last-child)::after{
    content: " ⭒ ";
    color: white}

/*LOGO*/
.logo {
   filter: invert(38%) sepia(43%) saturate(3307%) hue-rotate(198deg) brightness(101%) 
   contrast(101%);
   !important;
   box-shadow: 0px 0px 7px 5px white}

/*HEADINGS BACKGROUND*/
.profile .blurbs .heading, .profile .friends .heading, .profile .table-section .heading, .profile .contact .heading, links{
   background: rgba(182, 14, 14, 0.7);
   border: 2px solid white;
   border-radius: 2px}

/*CIRCULAR PFP*/
.profile-pic {
   border-radius: 500px;
   overflow: hidden;
   box-shadow: 0px 0px 9px 7px #a12c26}

/*CIRCULAR FRIENDS PFP*/
.friends-grid img{
   border-radius: 500px;
   overflow: hidden;
   box-shadow: 0px 0px 9px 7px #a12c26}

/*BORDERS*/
.contact, .table-section{
   border-width: 2px; 
   border-radius: 4px;
   border-color: white !important;
   box-shadow: 0px 0px 5px 3px white !important;
   margin-bottom: 20px !important;
   background-color: rgba(182, 14, 14, 0.5);
   padding: 1px}

.blurbs, .friends{ 
   border: solid white 2px;
   border-radius: 4px;
   margin-bottom: 20px;
   box-shadow: 0px 0px 5px 3px white !important;
   margin-bottom: 20px !important
   padding: 1px}

.comments-table{ 
   border: solid white 2px;
   border-radius: 4px;
   box-shadow: 0px 0px 5px 3px white !important;
   margin-bottom: 20px !important
   background: url(https://i.imgur.com/L2JqDw7.jpg);
   padding: 1px}

footer .links{
   background: none !important;
   box-shadow: none !important}

/*TRANSPARENT INTERESTS GRID*/
:root{
   --even-lighter-blue: pink, opacity:0.01;
   --lightest-blue: pink, opacity:0.01;

/*FRIENDS-GRID*/
   --light-orange: url(https://media.tenor.com/FEtkvYoaVRsAAAAM/strangle-tangled.gif);
   --even-lighter-orange: url(https://thumbs.gfycat.com/CalculatingAppropriateAltiplanochinchillamouse-max-1mb.gif)}

/*FRIENDS BACKGROUND*/
.friends{
   background-image: url(https://i.imgur.com/gaofiZZ.gif);
   border-style: Double; 
   border-width: 6px; 
   border-radius: 5px;
   border-color: white}

/*URL SECTION*/
.profile .url-info{
   height: 228px;
   font-size: 0;
   background-image:url(https://i.imgur.com/OdmfHKe.gif);
   background size: cover !important;
   border: 2px solid white;
   border-radius: 4px}

/*ONLINE*/
.online{content: url(https://i.imgur.com/er693yL.gif);
   box-shadow: 0px 0px 7px 5px white}

/*BUTTONS*/
button{
   color: white;
   background: url(https://i.imgur.com/gaofiZZ.gif); 
   border: 2px solid white;
   padding: 2px}
   button:hover {
   color: white;
   background: url(https://i.imgur.com/gaofiZZ.gif);
   padding: 4px}

/*TOP SEARCH BAR*/
  .search-wrapper input[type=text] {
    background-color: #a12c26  !important;
    border: 1px solid white !important;
    border-radius: 10px !important}
 button{
    border-radius: 10px !important;
    border: 1px solid white !important;
    background-color:  #a12c26 !important}

/*LINK COLOURS*/
.links a, .logout-btn{
   color: white !important;
   font-family: 'Zeyada', cursive;
   text-shadow: 2px 2px 3px white, 0 0 25px white, 0 0 5px white;
   border: none !important}

a{color: white !important}
   a:hover{color: red !important;
    text-decoration: underline}
   a:visited: color: red !important}

.top a{color: white !important}
   .top a:hover{color: red !important
    text-decoration: underline}
   .top a:visited{color: red !important}

.links a{color: white !important}
   .links a:hover{color: red !important
    text-decoration: underline}
   .links a:visited{color: red !important}

footer .links a{color: white !important}
   footer .links a{color: red !important
    text-decoration: underline}
   footer .links a{color: red !important}

/*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: url(https://i.imgur.com/SsxBVO3.gif)
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {
/* add to favorite */
content: url(https://i.imgur.com/SsxBVO3.gif)
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
/* send a message */
content: url(https://i.imgur.com/SsxBVO3.gif)
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
/* foward to friend*/
content: url(https://i.imgur.com/SsxBVO3.gif)
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {
/* instant message */
content: url(https://i.imgur.com/SsxBVO3.gif)
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {
/* block user */
content: url(https://i.imgur.com/SsxBVO3.gif)
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {
/* add 2 group  */
content: url(https://i.imgur.com/SsxBVO3.gif)
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
/* report */
content: url(https://i.imgur.com/SsxBVO3.gif)}


/*PROFILE LINKS ICONS*/
  .icon, .award img {
        content: url(https://i.imgur.com/7hX3A7R.gif);
        display: inline-block;
        height: 2.0em;
        width: 2.0em;
        margin: 0 .05em 0 .1em;
        vertical-align: -0.3em;
        color: rgba(0,0,0,0)}

/*CURSOR*/
*{cursor: url(http://www.rw-designer.com/cursor-view/153825-48.png), auto !important}

/*ELEMENT SHAKE*/
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); }
}


/*ANIMATION OVERLAY*/
html:before {
  animation: grain 8s steps(10) infinite;
  background-image: url(https://i.imgur.com/QpnTsrV.jpg);
  content: "";
  height: 300%;
  left: -50%;
  opacity:.2;
  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%) }
}

</style>

<style>
left image
</style>
<div style="float: ; max-height: 800px; position: fixed; left: 1px; bottom: 10px; z-index: 200; width: 300px;"><img src="https://i.imgur.com/zXlKx8b.gif"/></div>

<style>
right image
</style>
<div style="float: ; max-height: 800px; position: fixed; right: 1px; top: 10px; z-index: 200; width: 300px;"><img src="https://i.imgur.com/N0ZaYJj.gif"/></div>

<iframe width="0" height="0" src="https://www.youtube.com/embed/4ldjbjwim4k//?&;amp;;autoplay=1&;loop=infinite&;controls=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" loading="lazy">

</iframe>
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 2 of 2 comments ( View all | Add Comment )
ozi B)
1705711985
using!
Report Comment
ozi B)
1705711984
using!
Report Comment