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

☆STARBUG☆	1714684471 using Report Comment
♡₊˚ ‧ Асия / Oliver	1713985462 usingg Report Comment
cherii	1713971739 using! Report Comment
Aileen !!	1713010925 Use Report Comment
vic !!	1710150138 using ! Report Comment
.Dew	1709640811 Using, may change in the future or later. Report Comment
♡Rune♡	1708842580 Useing Report Comment
stvr ★	1708016196 using ! Report Comment
13Axes	1707851113 using Report Comment
⋆ ˚｡⋆୨୧˚ wesley ^.^!!!	1707144370 using!!! Report Comment
eyeskull	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
ivy ✧	1704242925 using!! tysm <33 Report Comment
chai.latte.lvr	1704067445 using!! <3 Report Comment
☽🎕𝖆𝖙𝖑𝖆𝖘🎕☾	1703967717 using <3 Report Comment