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

Candy ^.^	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