Send The Message - Promotional Layout

Tags: music, blue, emo, poppunk
Description:

This is the layout we're using to promote our upcoming album "Send The Message." We are consistently working on ways to improve what's on our profile, so we're sharing the layout in order to have something to come back to if we mess our code up.
Code:

<!-- (c) Layout created by Safety? Always Off!  (https://layouts.spacehey.com/layout?id=27297) -->

<style>

/* main configs */
body{background:url("https://cdn.spacehey.net/profilepics/793306_9b97e9360036283cb968e7d897759f86.png?token=WOkCivqfpLdWAr5Ms1fYit0dJRUnLB5lvrBGDJJS86w&expires=1678288466") no-repeat fixed; background-size:cover;
box-shadow: 0px 0px 15px 6px slateblue;
}

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

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

}

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

b {
font-size: 14px;
}

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

p{
font-size: 16px;
}

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

  .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://cdn.hovia.com/app/uploads/blue-grunge-watercolour-paint-design-plain.jpg");
text-shadow: 0 0 9px black;
}

.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://pbs.twimg.com/media/FrMYOZtXgAAsrGm?format=png&name=small") no-repeat fixed; background-size:cover;
border: none;
box-shadow: 0px 0px 19px 0px slateblue;
}

.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://pbs.twimg.com/media/FrOeMyIXgAIQy-q?format=png&name=360x360); 
overflow:hidden;
}

  .table-section .heading{ font-size:0; }
.table-section .heading:before{ content: url(https://pbs.twimg.com/media/FrOg3EHWAAEKOmc?format=png&name=360x360); 
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://cdn.hovia.com/app/uploads/blue-grunge-watercolour-paint-design-plain.jpg);
color: white;
box-shadow: inset 0px 0px 0px 0px slateblue;


}


.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://pbs.twimg.com/media/FrOk64fXgAECTsQ?format=webp&name=tiny);
        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://pbs.twimg.com/media/FrOk64fXgAECTsQ?format=webp&name=tiny);
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {
	/* add 2 fav */
	content: url(https://pbs.twimg.com/media/FrOk64fXgAECTsQ?format=webp&name=tiny)
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
	/* chat */
	content: url(https://pbs.twimg.com/media/FrOk64fXgAECTsQ?format=webp&name=tiny)
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
	/* forward */
	content: url(https://pbs.twimg.com/media/FrOk64fXgAECTsQ?format=webp&name=tiny)
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {
	/* instant msg */
	content: url(https://pbs.twimg.com/media/FrOk64fXgAECTsQ?format=webp&name=tiny)
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {
	/* block */
	content: url(https://pbs.twimg.com/media/FrOk64fXgAECTsQ?format=webp&name=tiny)
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {
	/* add 2 group */
	content: url(https://pbs.twimg.com/media/FrOk64fXgAECTsQ?format=webp&name=tiny)
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
	/* report */
	content: url(https://pbs.twimg.com/media/FrOk64fXgAECTsQ?format=webp&name=tiny)
} 

.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://cdn.hovia.com/app/uploads/blue-grunge-watercolour-paint-design-plain.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://pbs.twimg.com/media/FrOjF_kWIAAG-wR?format=png&name=small");
background-size:cover;
box-shadow: 0px 0px 19px 0px slateblue;
  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 blue;
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://pbs.twimg.com/media/FrMerW4XsAQG8ql?format=png&name=900x900") 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 black;
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 slateblue;
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://pbs.twimg.com/media/FmNXh3uWYBI4qGd?format=jpg&name=small');
    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:black;}
</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

Comments disabled.