Deftones layout

Tags: deftones, music, emo, cat, band, black
Description:

use idc about credit
Preview:

click on the image for a larger preview
Code:

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

<style>

@import url('https://fonts.googleapis.com/css2?family=Anton&family=Orbitron:wght@900&display=swap');
p{ font-family: 'Orbitron', sans-serif; 
font-size: 100%;
color: pink; 
text-shadow: 1px 1px 1px black;
}

h1, h2, h3, h4, h5{
font-family: 'Orbitron', sans-serif;
font-size: 100%;
color: pink;
text-shadow: 1px 1px 1px black;
}


body {
   background-image: url(https://64.media.tumblr.com/1a67a03559175b93d6284b4bee8d6fe1/59afb044021b208e-8d/s640x960/aa00baee48ddd94a66858b42974cf32d0021f462.gifv);
background-repeat: no-repeat;
background-position-x: center;
background-size: 1550px;
}


main {
background: transparent;
border: none;
}


:root {
--logo-blue: transparent;
--darker-blue: white;
--lighter-blue: transparent;
--even-lighter-blue: transparent ;
--lightest-blue:  transparent;
--dark-orange: white;
--light-orange:transparent;
--even-lighter-orange:;
--green: blue;
}

friends p, .friends a {
color: pink;
}

a:hover {
     color: pink; 
   } 
   a{
     color: pink; 
   }

}
    .count {
        color: pink;
    }

.profile .friends .person p {
color: pink;  
}
.profile .friends .person p:hover {
color: pink;  
}


nav .top{
background-image: transparent;
margin: 1em 0;
text-align: center;
border-radius: 25px;
}

nav .links{
background-image:  transparent;
border-radius: 25px;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
font-style: italic;
}

.profile .contact .heading,
.profile .table-section .heading{
color: #ffc0cb;
background-image: transparent;
border-radius: 25px;
text-align: center;
padding: .1em;
}

.profile .blurbs .heading,
.profile .friends .heading{
color: #ffc0cb;
background-image:  transparent;
border-radius: 25px;
text-align: center;
padding: .1em;
}

footer {
color: pink;
box-shadow:;
text-decoration:;
text-decoration-style:;
background-color: transparent ;
border: 0px solid white;
}</style>

<style>
body { cursor: url(http://www.rw-designer.com/cursor-view/111181.png), auto; }

}
a:hover {
     color: pink;
}

nav{ 
font-size: 13px !important;
font-family: 'Orbitron', sans-serif;
text-shadow: 1px 1px black;
text-transform:none;
padding-left:3px;
text-align: center;
}


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



.profile .contact .heading,
.profile .table-section .heading{
color:#ffc0cb;
background-image: transparent;
border-radius: 25px;
text-align: center;
padding: .1em;
}

}
.top, .links, .heading, footer, button {
   background-color: transparent !important;
}
h1 {
   font-family: courier !important; 
   font-size: 20px !important;
}
h4 {
   color: #ffc0cb !important;
}
.contact, .url-info, .table-section, .profile-info {
   border-color: transparent !important;
}
td {
   background-color: transparent !important;
}
input, button:not(.logout-btn) {
   border: 1px groove transparent !important;
}
.pfp-fallback, .row.profile {
   border: 1px dotted transparent !important;
}
.logo-fallback {
   height: 38px !important;
}

.col.right:before {
content: "";
white-space: pre-wrap;
display: block;
height: 260px;
background-image: url("https://64.media.tumblr.com/261e54257bb46f53dfc81c94dfed38db/0c3824df6bc15c01-68/s400x600/f4b0ee3770c4c0a74fa27d1843c54170a66eb5f9.gifv");
background-repeat: no-repeat;
background-position-x: center;
background-size: 300px;
margin-top: 30px;
}
</style>


<style>
.online {
        content: url("https://www.myspacegens.com/images/online_now/39.gif");}
</style>
<style>
.profile {
Background: url(https://64.media.tumblr.com/d1a0eee288879f71a83d51478287058e/ce61b1cb3df1f171-98/s1280x1920/7a30262d660d127a51352b4c1603ab92877c787f.gif);
background-repeat: no-repeat;
background-position-x: center;
background-size: 1200px;
<style>
<style>
.profile {
Background: url(https://64.media.tumblr.com/e6045b8805aa27d593edb0fcd2496ab8/c2339461670b057b-9d/s100x200/d4342d8637619f372d851eb5df1e1ddc5769f03e.gifv);
background-repeat: no-repeat;
background-position-x: center;
background-size: 975px;
<style>
@keyframes spin{
  from{ transform:rotate(0deg); }
  to{ transform:rotate(0deg); }
}
.general-about .profile-pic img{
  border-radius: 50%;
  animation: spin 7s infinite linear;
}
</style>

<style>
body:before {
content: " ";
height: 100vh;
width: 100vw;
display: block;
position: fixed; 
top: 0; 
left: 75; 
z-index: 100;
background-image: url('https://64.media.tumblr.com/e56d5e9bf8706ef5b6152ebfbf16a7a2/da0b7bfcb4577c56-89/s400x600/7e2a2328f851e9094b3023d57982ab5582219c88.gifv');
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>
<style>
/* replace with cd image that has transparent background. must be 150px by 150px. */
:root {
--cd-image: url('https://fluorescent-lights.neocities.org/Digital-CD-Disk-Vector-Transparent-PNG.png');
}
.profile-pic {
position: relative;
width: 183px;
filter: drop-shadow(0 0 0.25rem gray);
}
.profile-pic:after {
content: "";
background: url('https://fluorescent-lights.neocities.org/f0rzNHe.png'), linear-gradient(150deg, rgba(255,255,255,0.4), rgba(255,255,255,0.2), 40%, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.6));
background-size: contain, cover;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

.profile-pic:before {
content: "";
background: var(--cd-image);
position: absolute;
top: 5px;
left: -20px;
width: 150px;
height: 150px;
background-repeat: no-repeat;
z-index: -1;
animation-name: spin;
animation-duration: 5000ms;
animation-iteration-count: infinite;
animation-timing-function: linear; 
transition: left ease 0.5s;
}
.profile-pic:hover:before {
left: -75px;
}
@keyframes spin {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(360deg);
    }
}
.profile-pic .pfp-fallback {
float: right;
width: 163px;
height: 160px;
border: none;
}
.general-about .profile-pic img {
max-width: inherit;
}
</style>
<iframe width="0" height="0" src="https://www.youtube.com/embed/_t1vqLwqbyA//?&;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>
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 1 of 1 comments ( View all | Add Comment )
nezzka_
1712435118
can you make one with just the intro please?
Report Comment