Chiodos - All's Well That Ends Well Layout!

Tags: chiodos, band, music, gif, layout, simple, white, purple, green

Description:

Has animations!

Preview:

click on the image for a larger preview

Code:

<!-- (c) Layout created by ✭ Fren-z ✭ (https://layouts.spacehey.com/layout?id=26102) -->

<style>

/* main configs */
body{background:url("https://i.ibb.co/vm3zxKp/chiodosbkgrnd.jpg") no-repeat fixed; background-size:cover;
box-shadow: 0px 0px 15px 6px palegreen;
}

.row.profile{
box-shadow: 0px 0px 10px 6px palegreen;
}

small {
font-size:100%;
}
 
main {
background: white;
position: center;

}

.profile-pic {
box-shadow: 0px 0px 19px 0px palegreen;
 }   

b {
font-size: 14px;
}

/* name */
h1{
font-size: 30px !important;
padding-left: 2px !important;
color: black;
text-shadow: 0px 0px 2px palegreen;
}

p{
font-size: 16px;
}

.details-table td p {
font-size: 14px;
}

  .table-section .heading{ font-size:14px; }
.table-section .heading:before{ content: url(); 

}

.profile h1{
color:sienna !important;
font-size: 14px;
}

.profile .blurbs .section p, .profile .friends p, .blog-entry .comments p, .bulletin .comments p {
font-size: 14px;
}


/* section h4 */
.profile .friends .inner, .profile .blurbs .section h4{
    text-align: center;
background-image: url("https://static3.depositphotos.com/1004899/211/i/950/depositphotos_2119091-stock-photo-grunge-green-background.jpg");
text-shadow: 0 0 9px palegreen;
}

.profile .blurbs .section h4 {
font-size: 14px;
color: black;
text-shadow: 0 0 9px white;
border: 3px black;
}

.button {
    background: white;
    color: black;
}

.profile-info{
background:url("https://i.ibb.co/jwsLn6y/2871-pd1969225-1.jpg") no-repeat fixed; background-size:cover;
border: none;
box-shadow: 0px 0px 19px 0px palegreen;
}

.profile-info a{
font-size: 14px;
color:white;
}

.profile-info h3{
color:white;
}
/* right headings */
.profile .blurbs .heading, .profile .friends .heading {
color: black;
background-color:transparent;
color: black;
}

/* left headings */
.profile .contact .heading, .profile .table-section .heading, .home-actions .heading {
background-color: transparent;
color: black;
}

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


.contact .heading{ font-size:20px; }
.contact .heading:before{ content: url(https://i.ibb.co/r2jPdZR/ezgif-3-48a56380f9.gif); 
overflow:hidden;
}

  .table-section .heading{ font-size:0; }
.table-section .heading:before{ content: url(https://i.ibb.co/nwrXpPz/ezgif-4-c62b0dfc16.gif); 
padding-bottom: 10px;
}



/* text configs */
h4 {
font-size: 14px !important;
color: black;
  font-family: Arial, sans-serif;
text-shadow: 0 0 9px white;
 }

p {
  font-family: Arial, sans-serif;
color: black;
text-shadow: 0 0 9px white;
   } 

   a {
font-size: 14px;
     color: black; 
   }


a:hover {
     color: slateblue; 

}
    .count {
        color: sienna;
text-shadow: 0 0 9px white;
    }

.profile .friends .person p {
color: black;  
}
.profile .friends .person p:hover {
color: slateblue;  
}

/* blog */

.blog-preview{
text-align: center;
background-image: url(https://static3.depositphotos.com/1004899/211/i/950/depositphotos_2119091-stock-photo-grunge-green-background.jpg);
color: white;
box-shadow: inset 0px 0px 51px 0px palegreen;


}


.contact .heading h4{
font-size:14px;
}

 /* images */

.profile .friends .person img:not(.icon) {
box-shadow: 0px 0px 19px 0px rgba(255,255,255,0.3);
border-style: solid;
border-width: 10px;
border-image: url("https://img1.picmix.com/output/stamp/normal/6/8/8/1/1661886_f4aba.gif") 60 fill round;
}


.online {
    margin:auto;
    padding-bottom: 5px;
    content: url(https://i.ibb.co/mJQ5MzG/ezgif-4-4c8526b338.png);
}
  
.icon {
        content: url(https://i.ibb.co/CbHy0qy/ezgif-2-e17f660717.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);
}





/* contact configs */
.profile .contact {
background-color: rgba(171, 118, 207, 0.4);
}
.profile .contact {
border: black;
  font-family: Arial, sans-serif;
background: transparent;
}

.profile .contact a{
font-size: 12px;
}

.f-col{
border: 2px black;
}

.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 friend */
	content: url(https://i.ibb.co/fSPphV0/ezgif-2-1c686b0edc.gif);
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {
	/* add 2 fav */
	content: url(https://i.ibb.co/fSPphV0/ezgif-2-1c686b0edc.gif)
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
	/* chat */
	content: url(https://i.ibb.co/fSPphV0/ezgif-2-1c686b0edc.gif)
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
	/* forward */
	content: url(https://i.ibb.co/fSPphV0/ezgif-2-1c686b0edc.gif)
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {
	/* instant msg */
	content: url(https://i.ibb.co/fSPphV0/ezgif-2-1c686b0edc.gif)
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {
	/* block */
	content: url(https://i.ibb.co/fSPphV0/ezgif-2-1c686b0edc.gif)
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {
	/* add 2 group */
	content: url(https://i.ibb.co/fSPphV0/ezgif-2-1c686b0edc.gif)
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
	/* report */
	content: url(https://i.ibb.co/fSPphV0/ezgif-2-1c686b0edc.gif)
} 

.contact .inner a img {
 font-size: 0;
}
.contact .inner a img:before {
 font-size: 1em;
 display: block
}




/* about, interests n comments details */
.profile .table-section .details-table td {
background:url("https://static3.depositphotos.com/1004899/211/i/950/depositphotos_2119091-stock-photo-grunge-green-background.jpg");
border: 7px slateblue;
}


.profile .friends .comments-table td {
background-color: white;
border: 7px slateblue;
}
.comments-table td*{


  }
.profile .comments-table .inner {
box-shadow: 0px 0px 19px 0px rgba(255,255,255,0.3); 

}

.comments-table td:first-child img{
border-style: solid;
border-width: 10px;
border-image: url("https://img1.picmix.com/output/stamp/normal/6/8/8/1/1661886_f4aba.gif") 60 fill round;
box-shadow: 0px 0px 19px 0px rgba(255,255,255,0.3);

}

.profile .comments-table .comment-replies{
border: none;
color: black;

}

.general-about .details{
padding: 2px;
background: white;
background-image: url("https://i.ibb.co/1nGzD1j/81-OUey-Lohs-L-AC-SL1500.png");
background-size:cover;
box-shadow: 0px 0px 19px 0px palegreen;
  font-family: Arial, sans-serif;
}

.general-about .details p:not(.online){
background-color: white;
color: black !important;
font-size: 14px;
  font-family: Arial, sans-serif;
}

.general-about .details a{
  font-family: Arial, sans-serif;
color: black !important;
font-size: 14px;
}

/* nav bar */
nav{ 
color:black;
font-size: 13px !important;
text-shadow: 1px 1px palegreen;
text-transform:none;
padding-left:3px;
text-align: center;
    }

.links{
width=810px;
}

nav .links {
background: white;
}

nav .links a:hover {
color: slateblue;
}

nav .top{
/* has search bar logo n button */
background:url("https://i.ibb.co/SPDrPXJ/chiodosbnnr2.png") no-repeat fixed; background-size:cover;

}

nav .top a{
color: white !important;
}

nav .top label{
color: white;
}

  .search-wrapper input[type=text] {
    background: white;
  font-family: Arial, sans-serif;
    border: 3px black;
    

  }


.profile .url-info {
border: none;
color: transparent;
font-size: 0.1px;

}
.profile .table-section {
border: none;
}


nav .links a{
color: black;
  font-family: Arial, sans-serif;
text-shadow: 0px 0px 2px palegreen;
font-size: 14px;
}


/* general comments configs */ 

table.comments-table {
border: 2px inset slateblue;
}


footer p{
color: white;
font-size: 100%;
}

footer a{
color: white;
}

footer {
color: white !important;
box-shadow: 0px 0px 15px 6px palegreen;
text-decoration: underline !important;
text-decoration-style: dotted !important;
background: rgb(28,27,27);
background: slateblue;
  }    

    </style>

<style>
/*hides white box around comments table*/
    .table.comments-table:{
    border-color:slateblue;}
</style>

<style>

h1{
  animation: type 3s steps(27);
  color: black;
  font-size: 10px;
  white-space: nowrap;
  overflow: hidden;
  }

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

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

body::before {
content: " ";
display: block;
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: linear-gradient(rgb(82 15 15 / 48%) 50%, rgb(0 0 0 / 0%) 50%);
z-index: 2;
background-size: 100% 2px, 3px 100%;
pointer-events: none;
}

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

.col, main, footer, nav::before, .online, 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>
/* for this box, you can add an image of your choice. it's right under the contact box. */
.url-info{
    background: url('https://i.ibb.co/whYp1wf/ezgif-4-be4fbe3c74.jpg');
    background-position: center;
    height: 300px;
    background-size:cover;
}

.url-info p{
    opacity: 0.0;
}

</style>

<style>
/*Put Your Comments In A Scroll Box*/
table.comments-table{
background-color:white;
display: block;
height: 300px!important;
overflow-y: scroll;
border-radius:15px;
border-color:slateblue;
border-width: 5px;
}
</style>

<style>
img:hover , .url-info: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); }
}
</style>



<style>
/*Customize Scrollbar*/
    ::-webkit-scrollbar {
    width: 8px;
    height: 10px;}

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

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

<style>
.online {
  animation: rotation 8s infinite linear;
}

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

<style>
/*Comments (Background Color/Background Image)*/
    .comments-table td:first-child{
background-color: white;

}

.comments-table td{
border-width:0;
background-color: white;
border: 2px solid slateblue;
</style>

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

brody!(splidao!)	1780174410 idk if your up for requests but could you do an alexisonfire self titled layout? Report Comment
gabxz	1770220361 ITS SO COOL OMG!! USING Report Comment
SamdOOd	1767888530 Def using!! Report Comment
ArtCultt	1765267482 High-key using! Report Comment
SurviveSilhouettes	1757129970 using!! Report Comment
🫀 Xavier Xanax 🦖	1749787165 using! Report Comment
WizzardAttack⋆｡° ✮ 🇩🇿	1749419794 Prob gonna use it Report Comment
izzy☮︎	1748023288 using!!! ALSO I LUV CHIODOSSS AAA OMG TYSM Report Comment
eli 🧁	1747058523 using :3 Report Comment
TR3ZE, moonlight	1740695876 usando!! Report Comment
candi xP	1725608677 OH MY GODHHH I LOVE CHIODOS IM DEF USING Report Comment
⦻CYAN.IDE⦻	1724965985 using!!!! :D Report Comment
virgocrush™	1679693144 i love this Report Comment
Armistice	1676891032 idk if you're up for it, but bone palace ballet layout?? i would do it myself, but i'm not a big fan of coding in general :/ already been doing it for 4 hours, i think i've reached my yearly maximum tolerance Report Comment okay! message me if there's anything specific u want me to add to it :)) by ✭ Fren-z ✭; 1676895494; Report
Armistice	1676877500 OH MY GOODNESS I LOVE THIS Report Comment
beck	1675820805 super sorry for adding the comment so late i jsut wanna say i love my layout and u are THE BEST for this!!!!! <33 Report Comment
Jinxx ;	1675808674 omg Report Comment