The Used Lies For The Liars Layout

Tags: the used, 2000s, 2007, emo, layout, autoplay
Description:

Here is my layout based on the 2007 album Lies For The Liars by The Used (with plenty of images of Chadam, the dude on the album cover, of course). I included the opening track "The Ripper" in this layout, but feel free to change it to anything you want.
Preview:

click on the image for a larger preview
Code:

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

<style>nav .links li:not(:last-child)::after, footer .links li:not(:last-child)::after {
    content: "┊★┊" ;
    color: black;}</style>

<style>body:before{content:" ";height:100vh;width:100vw;display:block;position:fixed;top:0;left:0;z-index:100;background-image:url('https://i.ibb.co/Kh2Hd0B/The-Used-Pretty-Handsome-Awkward-Videoonline-video-cutter-com-ezgif-com-video-to-gif-converter.gif');background-size:cover;background-repeat:no-repeat;background-position:center;animation:yourAnimation 7s 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://i.ibb.co/rZbxQgd/th-1519178460-removebg-preview-1.png');
}

/*PROFILE BACKGROUND*/
.profile{ background: linear-gradient(#ccffff, #4dffff, #e6ffff);
   border-top: #dfdfe1 groove 7px;
   border-bottom: #dfdfe1 groove 7px;
   border-radius: 2px;
   box-shadow: inset 0 0 7px 5px #8c8c96}

/*PROFILE BOXES*/
.profile .contact, .profile .url-info, .profile .table-section, .home-actions, .blog-preview, .blurbs, .friends, .profile-info, .details {
   border-style: outset;
   border-width: 2px;
   border-color: #feffe6 #a6c87e #a6c87e #feffe6;
   padding: 0px 6px;
   border-radius: 2px;
   box-shadow: inset 0 0 7px 5px #e6ffff;
   background: linear-gradient(to left, #4dffff, #4dffff, #e6ffff)}
   
/*PROFILE PIC*/
.profile-pic img{border-radius: 2px !important;
   box-shadow: 0 0 7px 5px #e6e6e6}
.profile-pic{
   border-radius: 2px !important;
   position: relative;
   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: 85%;
height: 95%;
padding: 2px
}

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: -60px;
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 {

width: 163px;
height: 160px;
border: none;
}
.general-about .profile-pic img {
max-width: inherit;
}

</style>

<style>
  font-size: 150%;
}
h1,h2,h3,h4,h5{
  font-size: 200%; 
}
.profile {
   background-color: rgb(253, 251, 218);
border: 2px solid LightPink;
}
  .profile .blurbs .heading,
  .profile .friends .heading{img src="https://i.ibb.co/1XxT9MC/lies-for-the-liars-2007-at-Duck-Duck-Go.png?width=1670&height=524";
 
  border: 2px dashed PaleVioletRed;
}
  .profile .contact .heading,
  border: 6px ridge PaleVioletRed;
  .profile .table-section .heading{color: rgb(121, 29, 30);
   border: 2px dashed PaleVioletRed;
}

.online{content:url("http://dl3.glitter-graphics.net/pub/2226/2226583rlh0v4b3q9.gif");}
.offline{content:url("http://dl.glitter-graphics.net/pub/3546/3546271i47zpvjc37.gif");}

main:before {
    width: 806px;
    margin-bottom: 0px;
    margin-top: -10px;
    border: 0px solid black;
    height: 270px;
    display: block;
    content: "";
    background-image: url(https://i.ibb.co/K72DjV7/lies-for-the-liars-2007-at-Duck-Duck-Go-2.png?width=2160&height=720);
    background-position: center center;
border: 2px solid PaleVioletRed;
    background-size: cover;}

footer {
    border-radius: 0px;
   background-image:url("https://i.ibb.co/1XxT9MC/lies-for-the-liars-2007-at-Duck-Duck-Go.png?width=1670&height=524");
    color: white;
    border: 2px dashed LightPink ;
}

table.comments-table td {
    color: rgb(253, 251, 218);
    border: 2px dashed PaleVioletRed;
}

:root {
    --logo-blue:#602040;
    --darker-blue:#ff6699;
    --lighter-blue:  #4d1933;
    --even-lighter-blue: #73264d;
    --lightest-blue:  #73264d;
    --dark-orange:  #73264d;
    --light-orange: #020100;
    --even-lighter-orange: #020100;
    --green:  #4d1933;

}

body {
  width: 100vw;
  height: 100vh;
  background: url('https://i.ibb.co/ZmVD3KQ/lies-for-the-liars-2007-at-Duck-Duck-Go-1-hosted-at-Img-BB-Img-BB.png?width=1898&height=1068');
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;

<a href="https://www.glitter-graphics.com"><img src="http://dl3.glitter-graphics.net/pub/1527/1527863i9b8mwxouu.jpg" width="450" height="35"><br><a href="https://www.glitter-graphics.com" target="_blank">

}

.url-info {
    background: url(https://i.ibb.co/bXGx8Wd/lies-for-the-liars-tracklist-at-Duck-Duck-Go.png?width=608&height=608);
height:304px;
border: 2px dashed PaleVioletRed;

</style>

<style>

.logo {

content:url("https://media.discordapp.net/attachments/1111147688361209937/1136956242842091590/omq.png?width=1024&height=262");

}

</style>

<style>



    .profile .friends .person img:not(.icon){

        

border: 2px dashed Pink !important;   

        

    }

</style>

<style>

img:hover {
  animation: shake 0.5s;
  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></style>


<div><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: "https://i.ibb.co/XbHVvPH/th-2747873842-removebg-preview.png" } .contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before { /* add to favorite */ content: "https://i.ibb.co/XbHVvPH/th-2747873842-removebg-preview.png" } .contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before { /* send a message */ content: "https://i.ibb.co/XbHVvPH/th-2747873842-removebg-preview.png" } .contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before { /* foward to friend*/ content: "https://i.ibb.co/XbHVvPH/th-2747873842-removebg-preview.png" } .contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before { /* instant message */ content: "https://i.ibb.co/XbHVvPH/th-2747873842-removebg-preview.png" } .contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before { /* block user */ content: "https://i.ibb.co/XbHVvPH/th-2747873842-removebg-preview.png" } .contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before { /* add 2 group */ content: "https://i.ibb.co/XbHVvPH/th-2747873842-removebg-preview.png" } .contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before { /* report */ content: "https://i.ibb.co/XbHVvPH/th-2747873842-removebg-preview.png" }
<style>
</style><iframe width="0" height="0" src="https://www.youtube.com/embed/C5P2r9A4fLc//?&;amp;;autoplay=1&loop=1&;controls=1" title="" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" loading="lazy" data-ruffle-polyfilled="">
</iframe>

<style>* {cursor: url(https://cur.cursors-4u.net/mechanics/mec-2/mec100.cur), auto !important;}</style><a href="https://www.cursors-4u.com/cursor/2005/10/01/mec100.html" target="_blank" title="Guitar"><img src="https://cur.cursors-4u.net/cursor.png" alt="Guitar" style="position:absolute; top: 0px; right: 0px;"/></a>

<img src="https://i.ibb.co/k0ZQ1sn/lies-for-the-liars-2007-at-Duck-Duck-Go-3.png" width="562px" height="auto"/><style>
.footer {
  position: fixed;
  left: 315px;
  bottom: 0;
  width: 810px;
  background-color:#954269;
  color: white;
  text-align: center;
  
}

input {
   background: linear-gradient(0deg, rgba(255,255,255,1) 31%, rgba(198,198,198,1) 100%);
   border: 2px solid #fff;
}
</style></div><div><br/></div><div><br/></div><div class="footer">
  <p><marquee behavior="scroll" direction="left">Now Playing : The Ripper - The Used</marquee></p>
</div>
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.