Panic! At The Disco - Pretty. Odd. Layout

Tags: panic at the disco, music, animation, gif, layout, band, album, brown, flowers

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=26947) -->

<style>

body{
background: url(https://i.ibb.co/XzYwX3g/ezgif-4-5cb8a9dcfa.png) no-repeat fixed; 
background-size:cover;
cursor:url("https://cur.cursors-4u.net/nature/nat-11/nat1009.cur"), auto;
}

.edit-link a{
color: white;
}

nav .top .center form button, .friends button{
background: url(https://i.ibb.co/TgFVNVz/artworks-000249416011-3iwwln-t500x500.jpg);
border-radius: 5px;
color: black;
}

input{
color: white;
border: 2px solid black;
border-radius: 5px;
background: url(https://cdn.shopify.com/s/files/1/0662/0282/9034/products/moda-through-the-years-9627-16.jpg?v=1674682669);
}

p, a, b, .logout-btn, label, h4{
font-family: courier;
}

label, .logout-btn, .top a{
font-size: 14px;
}

.profile .blurbs .section h4 {
color: black;
font-size: 16px;
letter-spacing: -1px;

}

p{
font-size: 14px;
}

main {
background-image: url(https://i.ibb.co/RNkgfbT/maxresdefault-1.jpg);
border-radius: 20px;
border: 3px solid darkgoldenrod;
box-shadow: 0px 2px 4px 2px black;
}

footer{
color: black;
border-radius: 20px;
border: 3px solid darkgoldenrod;
background: url(https://i.ibb.co/X8KFk88/green-grass-under-blue-sky-vintage-retro-style-beauty-background-36013960.jpg);
box-shadow: 0px 2px 4px 2px black;
font-family: courier;
}

nav .top{
background-image: url(https://i.ibb.co/ZYmr7c6/ezgif-5-25027ece42.jpg);
border-radius: 20px;
border: 3px solid darkgoldenrod;
box-shadow: 0px 2px 4px 2px black;
}

nav .links{
background-color: transparent;
}

.profile .friends .inner{
background: url(https://payload.cargocollective.com/1/7/239784/4866023/26-47.jpg);
text-align: center;
border: 3px solid darkgoldenrod;
box-shadow: 0px 2px 4px 2px black;
border-radius: 10px;
}

.general-about .profile-pic img, .comments-table td:first-child img, .profile .friends .person img:not(.icon){
border: 10px solid transparent;
border-image: url("https://storage.needpix.com/rsynced_images/baroque-frame-1518461230BTv.jpg") 60 fill round;
box-shadow: 0px 0px 10px 0px black;
} 

.profile-info{
background: url(https://i.ibb.co/Lr6Cgqs/R-5458789-1492257167-9474.jpg);
border-radius: 10px;
border: 3px solid darkgoldenrod;
box-shadow: 0px 2px 4px 2px black;
color: transparent;
}

.profile-info a{
font-family: courier;
color: white;
}

.blog-preview{
text-align: center;
color: white;
border-radius: 10px;
background: url(https://cdn.shopify.com/s/files/1/0662/0282/9034/products/moda-through-the-years-9627-16.jpg?v=1674682669);
border: 3px solid darkgoldenrod;
box-shadow: 0px 2px 4px 2px black;
}

.profile .blurbs .inner{
color: black;
text-align: center;
border-radius: 10px;
background: url(https://media.istockphoto.com/id/91707849/photo/sheet-of-yellow-ruled-paper.jpg?s=612x612&w=0&k=20&c=RJAHwvSY_tJH27Wfo_xOdQOztxzlP9Xd5a1ZCw3Ued4=);
border: 3px solid darkgoldenrod;
box-shadow: 0px 2px 4px 2px black;
}

.general-about .details{
color: white;
border-radius: 10px;
background: url(https://i.ibb.co/TgFVNVz/artworks-000249416011-3iwwln-t500x500.jpg);
border: 3px solid darkgoldenrod;
box-shadow: 0px 2px 4px 2px black;
}

.bulletin .comments .inner{
color: white;
border-radius: 10px;
background: black;
}

.profile .contact {
color: white;
border-radius: 10px;
background: url(https://dirtsoilandmore.com/wp-content/uploads/sites/12/2014/02/dirt.jpg);
box-shadow: 0px 2px 4px 2px black;
}

.profile .table-section{
color: white;
border-radius: 10px;
border: 2px solid black;
background-image: url(https://cdn.shopify.com/s/files/1/0662/0282/9034/products/moda-through-the-years-9627-16.jpg?v=1674682669);
box-shadow: 0px 0px 19px 0px saddlebrown;
}

.profile .mood {
text-align: center;
color: white;
border-radius: 10px;
border: 3px solid darkgoldenrod;
box-shadow: 0px 2px 4px 2px black;
background: url(https://dirtsoilandmore.com/wp-content/uploads/sites/12/2014/02/dirt.jpg);
}

.profile .blurbs .heading, .profile .friends .heading {
text-align: center;
color: white;
border: 2px solid black;
box-shadow: 0px 2px 4px 2px black;
background: url(https://cdn.shopify.com/s/files/1/0662/0282/9034/products/moda-through-the-years-9627-16.jpg?v=1674682669);
border-radius: 5px;
}

.profile .table-section .heading, .home-actions .heading {
text-align: center;
color: white;
background: url(https://cdn.shopify.com/s/files/1/0662/0282/9034/products/moda-through-the-years-9627-16.jpg?v=1674682669);
border-radius: 5px;
}

table.comments-table{
background-color:black;
display: block;
height: 300px!important;
overflow-y: scroll;
border-radius:15px;
border-color:black;
border-width: 3px;
box-shadow: 0px 0px 19px 0px saddlebrown;
}

.url-info{
background: url(https://i.ibb.co/R9LX38S/Untitled-1.jpg);
background-position: center;
border-radius: 10px;
height: 151px;
border: 3px solid darkgoldenrod;
box-shadow: 0px 2px 4px 2px black;
}

.url-info p{
    opacity: 0.0;
}

.profile h1{
color: white;
text-shadow: 2px 2px 5px black;
font-size: 30px;
font-family: courier;
animation: type 3s steps(27);
white-space: nowrap;
overflow: hidden;
}

@keyframes type{
  0%{
    width:0ch;
  }
  
  100%{
    width:27ch;
  }
}

@keyframes blink{
  0%{opacity:1;}
  50%{opacity:0;}
  100%{opacity:1;}
}

.contact .heading h4{
display:none !important;
}

.contact .heading{ 
font-size: 0.1px; 
}

.contact .heading:before{ content: url(https://i.ibb.co/41CfP7X/ezgif-1-da0de2ef6d.jpg); 
border-radius: 15px !important;
overflow:hidden;
}

.profile .contact .heading{
background: darkolivegreen;
border-radius: 5px;
}

.profile .friends p, .profile .friends .person p {
color: white;
text-shadow: 2px 3px 5px black;
font-family: courier;
font-size: 15px;
letter-spacing: -1px;
}

.comments-table td{
background: url(https://cdn.shopify.com/s/files/1/0662/0282/9034/products/moda-through-the-years-9627-16.jpg?v=1674682669);
background-position: center;
no-repeat fixed; 
background-size:cover;
}

.comments-table td:first-child{
background: url(https://i.ibb.co/PZhzfBn/ezgif-1-ccfc2dc5d3.jpg);
background-position: center;
}

.profile .contact, .profile .url-info, .profile .table-section, .home-actions {
border: 3px solid darkgoldenrod;
box-shadow: 0px 2px 4px 2px black;
}

.profile .friends a, .details a, .blog-preview a, .profile .blurbs a{
color: gold;
}

.profile .friends a:hover, .details a:hover, .blog-preview a:hover, .profile .blurbs a:hover{
color: darkgoldenrod; 
}

.contact a, .mood a, footer a{
color: white;
}

.contact a:hover, .mood a:hover, footer a:hover{
color: darkgreen;
}

.profile .table-section a {
color: white;
}

.profile .table-section a:hover{
color: darkgreen;
}

.count{
color: yellow;
}

.details-table td, .details-table td:first-child{
background: url(https://i.ibb.co/TgFVNVz/artworks-000249416011-3iwwln-t500x500.jpg);
border-radius: 3px;
box-shadow: 0px 2px 4px 2px black;
}

.details-table td:first-child p{
color: white;
}

nav .links .special a{
color: forestgreen;
}

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%) }
}

.online {
  animation: rotation 8s infinite linear;
    margin:auto;
    padding-bottom: 5px;
    content: url(https://i.ibb.co/wWWL7Fs/pretty-odd-4e78cd5e906a2.png);
}

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

.col, main, footer, nav::before, nav .links, nav .top {
animation: float 5s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}

.col, main, footer, nav::before, nav .links, nav .top {
animation: float 5s;
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>
    ::-webkit-scrollbar {
    width: 8px;
    height: 10px;}

    ::-webkit-scrollbar-thumb {
    background: darkgoldenrod;}

    ::-webkit-scrollbar-track {
    background:darkolivegreen;}
</style>

<style>

li.active .icon { 
    content:url('https://i.ibb.co/pzjXHzw/ezgif-2-cb25cc3f4f.gif'); 
    }

.contact .inner a img {
display: none;
}
.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 Favorites */
	content: "🌿"
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
	/* Send Message */
	content: "🧭"
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
	/* Forward 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 to Group */
	content: "🍂"
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
	/* Report Profile */
	content: "🗝️"
}

.icon, .award img {
content:url('https://media0.giphy.com/media/20KOWrJlAGHb9bDhXf/giphy.gif?cid=6c09b9529fb49b9fe20054544710aa21f33a7fe1d8971401&rid=giphy.gif&ct=s'); 
width: 20px;
height: 20px;
}

</style>

<iframe width="0" height="0" src="https://www.youtube.com/embed/pvsQ1Mvnue4//?&;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 20 of 64 comments ( View all | Add Comment )

miette	1772467017 using ^^ Report Comment
andre_must_dye	1770567634 using! Report Comment
Hunter	1767560295 Using!! Report Comment
rody	1766889523 usinggg this is so prettyyy Report Comment
Pat	1765165123 USING Report Comment
skye	1765083930 using Report Comment
Ryrot 🦇	1764478427 HOLT MOLY THIS IS SO COOL USING Report Comment
lulla >_<	1763924757 this is so kewl !! using Report Comment
Crimson	1762525347 This is sooo peak! Using rn XD Report Comment
_Sage_Mcmillin_	1761795246 USING!!!!!! >:] Report Comment
💐 pix.ೃ࿔	1759892019 using Report Comment
pikmin	1758454855 tysm I love this!! using! Report Comment
ryro	1758419500 ILY SMM, I KEEP SEARCHING FOR PRETTY ODD LAYOUTS FOR A LONGGGGGGG TIME!! AND FINALLY FOUND THIS ONE!! I LOVE THE MUSIC PART THINGY!! Report Comment
elijah˚.🦴 ᵎᵎ	1757241523 hii using thank you! Report Comment
C	1751387327 using Report Comment
lizzie :3	1751387143 USING!! Report Comment
⁺‧₊˚ ཐི⋆marin⋆ཋྀ ˚₊‧⁺	1751338119 using !!!1! Report Comment
12v1e	1751293154 using Report Comment
zoe ;-)	1750898439 using Report Comment
hungerstrike	1750704170 usingg Report Comment