purple-y whimsigothic layout

Tags: purple, whimsigoth, gothic

Description:

i used this layout as a base: https://layouts.spacehey.com/layout?id=31667 , so all credits to them for putting the code together, i just changed the colors and pictures.

Preview:

click on the image for a larger preview

Code:

<!-- (c) Layout created by ☣︎deadnbloated☣︎ (https://layouts.spacehey.com/layout?id=84265) -->

<!-- (c) Layout created by Sip O' Poison (https://layouts.spacehey.com/layout?id=31667) -->

<style>
text-align: center;
main:before {
width: auto;
margin-bottom: 2px;
border: 2px solid #36275B;
height: 135px;
display: block;
content: "";
box-shadow: 0px 0px 10px 5px #36275B;
background-image: url('');
background-position: center center;
background-size: cover;
}


body

{
text-align: center;
background:url("https://media.discordapp.net/attachments/1115051011871096897/1163934027070308442/6C251BF5-DA87-4F0E-8B4A-F9CA2DC76530.gif?ex=65416108&is=652eec08&hm=c05e94360453a4babf8bd9745111da80e5a1f3eadaf247ecd7e01fc2cdc8e3ec&") no-repeat fixed; background-size:cover;
}

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

nav .links .special a {
color: #36275B;
}

small {
font-size:100%;
}
 
main {
background-color: black;
}

.general-about .profile-pic img {
border: 2px solid #36275B;

box-shadow: 0px 0px 10px 0px #36275B;
 }   

b {
font-size: 14px;
}

time.ago {
color: #6C56AF;
}

h1{
font-size: 30px !important;
text-shadow: 5px 5px 0px #36275B;
color: #36275B;
}

.profile .friends .inner b, .profile .friends .inner a{
color: #6C56AF;
text-shadow: 2px #36275B;
}

p{
font-size: 16px;
}

.details-table td a {
color: #6C56AF;
}

.details-table td p {
color: #6C56AF;
font-size: 14px;
}

  .table-section .heading{ font-size:14px; }

}

.profile h1{
color: #6C56AF !important;
font-size: 5px;
}

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

.friends p, .friends a {
color: #6C56AF;
}

.profile .friends .inner{
    text-align: center;
background-image: url("");
border: 2px inset #36275B;
box-shadow: 0px 0px 10px 0px #36275B;
background-position: center;
}

.profile .blurbs .section h4 {
text-align: center;
font-size: 14px;
color: #6C56AF;
border: 2px #36275B;
}

.button {
    background: black;
    color: #36275B;
}

.profile-info{
background:url("") no-repeat fixed; background-size:cover; background-image: center;
border: 2px inset #36275B;
box-shadow: 0px 0px 15px 0px #36275B;
}

.profile-info a{
font-size: 14px;
color: #6C56AF;
text-shadow:  3px 3px 2px #36275B;
}

.profile-info h3{
color: #6C56AF;
}

.profile .blurbs .heading, .profile .friends .heading {
color: #6C56AF;
background-color:transparent;
}

.profile .blurbs .inner{
background: url("");
box-shadow: 0px 0px 10px 0px #36275B;
border: 3px inset #36275B;
}

.profile .contact .heading, .profile .table-section .heading, .home-actions .heading {
background-color: transparent;
color: #6C56AF;
}

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

.logo {

    background: #36275B;
}

h4 {
font-size: 14px !important;
color: #6C56AF;
  font-family: Arial, sans-serif;
 }

p {
  font-family: Arial, sans-serif;
color: #6C56AF;
   } 

   a {
font-size: 14px;
     color: #6C56AF; 
   }


a:hover {
     color: #6C56AF; 

}
    .count {
        color: #6C56AF;
    }

.profile .friends .person p {
color: #6C56AF;  
}
.profile .friends .person p:hover {
color: white;  
}

.blog-preview{
text-align: center;
background-image: url();
color: #6C56AF;
border: 2px solid #36275B;
box-shadow: 0px 0px 10px 0px #36275B;
}

.blog-preview p, .blog-preview a, .blog-preview h4{
background-color: black;
}

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

.profile .friends .person img:not(.icon) {
box-shadow: 0px 0px 19px 0px #36275B;
border-style: solid;
border-width: 2px #36275B;
border-image: url("") 60 fill round;
}

a, .profile .friends .person p, .logout-btn {
color: #36275B !important;
text-decoration: underline !important;
}

.online {
    margin:auto;
    padding-bottom: 5px;
    content: url(https://media.discordapp.net/attachments/1115051011871096897/1164018121137455144/IMG_0140.gif?ex=6541af5a&is=652f3a5a&hm=45ab8598533dd471ac597b213940d8573ca0fc61b982429b036dc7660f0ab3ce&);
}
  

.profile .contact {
background-color: black;
}
.profile .contact {
border: 2px solid #36275B;
box-shadow: 0px 0px 10px 0px #36275B;
  font-family: Arial, sans-serif;
background: transparent;
}

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

.f-col{
border: 2px #36275B;
}

.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: “☆“;
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {
	/* add 2 fav */
	content: “☆“;
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
	/* chat */
	content: “☆“;
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
	/* forward */
	content: “☆“;
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {
	/* instant msg */
	content: “☆“;
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {
	/* block */
	content: “☆“;
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {
	/* add 2 group */
	content: “☆“;
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
	/* report */
	content: “☆“;
} 

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

.profile .table-section .details-table td p, .profile .table-section .details-table td a{
color: #6C56AF;
}

.profile .table-section .details-table td {
background:url("");
background-image: center;
border: 2px inset #36275B;
box-shadow: 0px 0px 10px 0px #36275B;
}


.profile .friends .comments-table td {
background-image: url("");
position: center;
border: 3px solid #36275B;
}
.comments-table td*{


  }
.profile .comments-table .inner {
box-shadow: 0px 0px 19px 0px #36275B; 

}

.comments-table td:first-child img{
border-style: solid;
border-width: 2px;
border-image: url("") 60 fill round;
box-shadow: 0px 0px 19px 0px #36275B;

}

.comment-replies{
border: 3px inset #36275B;
color: #6C56AF;
}

.general-about .details{
padding: 2px;
background: black;
border: 3px inset #36275B;
background-image: url("https://media.discordapp.net/attachments/1115051011871096897/1163935492081991821/IMG_0122.jpg?ex=65416266&is=652eed66&hm=49ca1411af69656b42ce0d8d872c0e0c9fe1eeacc10e194e01bdc7a6988d19b0&");
background-size:cover;
box-shadow: 0px 0px 10px 0px #36275B;
  font-family: Arial, sans-serif;
}

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

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

nav{ 
color: #36275B;
font-size: 13px !important;
text-transform:none;
text-align: center;
    }

.links{
width=810px;
}

nav .links {
background: black;
box-shadow: 0px 0px 10px 6px #36275B;
}

nav .links a:hover {
color: #36275B;
}

nav .top{
background-color: transparent;
}

nav .top a{
color: #36275B !important;
}

nav .top label{
color: #36275B;
}


.profile .url-info {
border: 3px inset #36275B;
color: transparent;
font-size: 0.1px;
box-shadow: 0px 0px 10px 0px #36275B;
}
.profile .table-section {
border: none;
}


nav .links a{
color: #36275B;
  font-family: Arial, sans-serif;
font-size: 14px;
}

table.comments-table {
border: 2px inset #36275B;
}


footer p{
color: #36275B;
font-size: 100%;
}

footer a{
color: #36275B;
}

footer {
color: white !important;
box-shadow: 0px 0px 15px 6px #36275B;
text-decoration: underline !important;
text-decoration-style: dotted !important;
background: transparent;
  }    

    </style>

<style>

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

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

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

.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, 6px);
}
100% {
transform: translate(0, -0px);
}

</style>

<style>
.url-info{
    background: url('https://media.discordapp.net/attachments/1115051011871096897/1163935492081991821/IMG_0122.jpg?ex=654a9ce6&is=653827e6&hm=455a3f3acb6fe307e5e81fe706428201b4d0f57e65b73c624ae209650bf1e812&');
    background-position: center;
    height: 77px;
    background-size:cover;
}

.url-info p{
    opacity: 0.0;
}

</style>

<style>
table.comments-table{
background-color: black;
display: block;
height: 300px!important;
overflow-y: scroll;
border-color: #6C56AF;
border-width: 5px;
}
</style>



<style>
    ::-webkit-scrollbar {
    width: 8px;
    height: 10px;}

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

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

<style>
    .comments-table td:first-child{
background-color: black;

}

.comments-table td{
border-width:0;
background-color: black;
border: 2px solid #6C56AF;
</style>


<style>
html:after {
  animation: grain 8s steps(10) infinite;
  background-image: url(https://s.studiobinder.com/wp-content/uploads/2020/08/What-is-Film-Grain-Film-Grain-Example.jpg);
  content: "";
  height: 300%;
  left: -50%;
  opacity:.1;
  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%) }
}
</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 20 of 50 comments ( View all | Add Comment )

Elios	1726982920 using <3 Report Comment
ronnie ♪	1722821172 using ! Report Comment
bugeater	1722204415 using tysm <3 Report Comment
Sofiya 🎸	1720607265 using Report Comment
#1 LISA FRANKENSTEIN FAN	1719950281 Using Report Comment
Z3VILER_EVLIER	1715295638 Using Report Comment
☆STARBUG☆	1714684471 using Report Comment
♡₊˚ ‧ Асия / Asia (Spacehey N*1 ANGEL) ✉️	1713985462 usingg Report Comment
cherii	1713971739 using! Report Comment
Dewdrop	1709640811 Using, may change in the future or later. Report Comment
♡Rune♡	1708842580 Useing Report Comment
Nonya ★	1708016196 using ! Report Comment
13Axes	1707851113 using Report Comment
jiji	1706598581 using Report Comment
umanxle	1706200526 using Report Comment
fibi	1706034819 using Report Comment
Casey	1705293871 Using!! Report Comment
Hermi	1705082508 Usingx3 Report Comment
dilly	1704389296 prolly gonna use Report Comment
Bone_soup	1704383262 probs gonna use ;3 Report Comment