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 70 comments ( View all | Add Comment )

MinisterNoSide	1784645562 Using! (technically only for some parts, but still) Report Comment
hex "pluginbabyy"	1784028979 this is so beautiful! using x) Report Comment
annamariemustdie	1783700436 Using! Thanks for this! :D Report Comment
melike (mel???)	1780844828 usingg Report Comment
SaintInTheCity	1778727137 using!! Report Comment
Will	1775794644 using :D Report Comment
lee!!	1774189548 Using! Report Comment
andreilicangel	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
sally!	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