Purple & Black Gothic Layout

Tags: black, purple, simple, layout, goth

Description:

Change anything & everything, I don't mind. Cursor: https://layouts.spacehey.com/layout?id=26669

Preview:

click on the image for a larger preview

Code:

<!-- (c) Layout created by Melody 💜 (https://layouts.spacehey.com/layout?id=35778) -->

<style>
@font-face {

font-family: "Metropolitan";

src: url("https://file.garden/ZJN0coaUL3bz8vL1/Metropolitan.ttf");

}
@font-face {

font-family: "Classic Robot Condensed";

src: url("https://file.garden/ZJN0coaUL3bz8vL1/Classic%20Robot%20Condensed.otf");

}
p{
  font-family: "Classic Robot Condensed";
  font-size: 150%;
  color: #FFFFFF; 
}
h1,h2,h3,h4,h5{
  font-family: "Classic Robot Condensed";
  font-size: 170%;  
}

h1 {
  color: #9C64BD;
  font-family: "Metropolitan";
}
h4 {
  color:#FFFFFF;
}
  .top{
    background-image:url("https://i.pinimg.com/564x/23/8c/29/238c291f35e5ea828092f4adab8e6f4d.jpg") !important;
    background-position:center;
    background-size: cover;
    background-repeat: no-repeat;
    background-color:rgba(0, 0, 0, 0.8); !important;
  }
  body {
   background-image: url(https://i.pinimg.com/564x/5a/f9/17/5af91714245883bff234d2fffe6d50d1.jpg);
background-size: cover;
height: 100%;
background-attachment: fixed;
cursor: url('https://mario0fan.repl.co/xp.png'),auto;

}
button, input {
    overflow: visible;
    border: 1px dashed #FFFFFF!important; 
    background: #cf7dff;
    color: white;
    font-family: "Classic Robot Condensed";
}
main{
background: rgba(0, 0, 0, 0) !important;
}
.profile {
   background-color: rgba(72, 36, 92, 0.5); 
} 
.container {
   width: 790px;
}
.profile .profile-info{
color: black; 
background-image: url(https://i.pinimg.com/564x/89/dc/f1/89dcf113204acc82d3df5bef6361e226.jpg);
background-size: cover;
background-position: center;
border: 3px dashed #FFFFFF!important; 
border-radius: 10px;
}
  .url-info{
    display:none !important;
  }
nav .links li:not(:last-child)::after, footer .links li:not(:last-child)::after {
    content: " 🕸️ ";
    color: white;
}
nav .top {
color: white;
font-family: "Classic Robot Condensed";
}
.comments-table{
display: block;
height: 200px;
overflow-y: scroll;
}
/* change all headings on page to different colors. */
  .profile .blurbs .heading,
  .profile .friends .heading{
   background-color: rgba(0,0,0,0);
   color: white;
}
/* change all headings on page to different colors. */
  .profile .contact .heading,
  .profile .table-section .heading{
   background-color: rgba(0,0,0,0);
   color: white;
}

footer {
    border-radius: 15px;
    background-image: url(https://i.pinimg.com/564x/b7/b1/72/b7b172b014e40400f3a8d4b662194445.jpg);
    color: white;
}

:root {
    --logo-blue:black;
    --darker-blue: #FFFFFF;
    --lighter-blue: black;
    --even-lighter-blue: ;
    --lightest-blue: ;
    --dark-orange: #FFFFFF;
    --light-orange: ;
    --even-lighter-orange: ;
    --green: pink;
}
.online{
color: #9C64BD;
font-family: "Classic Robot Condensed";
font-size: 14px;
text-align: left;
}

.online img{
content: url(https://media.discordapp.net/attachments/903364339464044575/1083125087823204415/E70C6581-FC09-4CE3-8E5B-CB19665077E3.gif);
}
nav .links a:hover{
text-decoration: underline;
color: #9C64BD;
}

a:hover {
color: #9C64BD;
cursor: url('https://mario0fan.repl.co/xp.png'),auto;
}

.count{
color: #9C64BD;
}
.profile .friends-grid .person p{
color: #9C64BD;
}
nav .links{
background-color: #a362c9;
font-family: "Classic Robot Condensed";
font-size: 100%;
}
nav .links .special a {
    color: #FFFFFF;
}

::selection {
   background: #523165;
   color: #FFFFFF
}
.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 to Friends */
	content: "🦴"
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {
	/* Add to Favorites */
	content: "🎶"
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
	/* Send Message */
	content: "🐈‍⬛"
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
	/* Forward to Friend */
	content: "📖"
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {
	/* Instant Message */
	content: "🕸️"
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {
	/* Block User */
	content: "🤍"
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {
	/* Add to Group */
	content: "💜"
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
	/* Report Profile */
	content: "🔮"
}
  .profile .contact {
    border-radius: 10px;
    border: 3px dashed #FFFFFF!important; 
    background-image: url(https://i.pinimg.com/564x/3c/f5/34/3cf5342dc379ef168a0ce9bdf833307c.jpg);
    background-position: right top;
    background-repeat: repeat;
    background-attachment: scroll;
    Height:140px;
    color: white;
  }
.blog-preview {
border: 3px dashed #FFFFFF!important; 
background: rgba(255, 255, 255);
background-image: url(https://i.pinimg.com/originals/f6/89/67/f689673d2c553f5043729dca7d65a882.gif);
border-radius: 10px;
height:155px!important;
background-position: bottom-right;
background-repeat: no-repeat;
}
.profile .table-section,
.home-actions {
border: 3px dashed #FFFFFF!important; 
background-image: url(https://i.pinimg.com/originals/8c/7b/03/8c7b0382ff3ba35ab36ef2051debb731.gif);
border-radius: 10px;
}
.col, main, footer, nav::before, .online, nav .links, nav .top, .container {
    animation: float 3s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}

.col, main, footer, nav::before, .online, nav .links, nav .top, .container {
animation: float 3s;
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);
}
@keyframes yourAnimation { 0.0%{ opacity: 1;} 75%{ opacity: 1; } 100%{ opacity: 0;} } 

}
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:.2;
  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%) }
}
    .profile .table-section {
        display: block;
        height: 500px;
        width: AUTO;
        overflow-y: scroll;
        font-size: 12px;
        border: dotted 0px!important;
        border-right: none!important
}
</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 63 comments ( View all | Add Comment )

ALEXUS (⁠≧⁠▽⁠≦⁠)	1745681496 Using Report Comment
H34rtBvrn	1744836098 Definitely using, tysm!! <3 Report Comment
JayTheGothQueen	1743387994 using Report Comment
Dominik	1741294227 using Report Comment
Clarie Nett 𓊆ྀི︎𓊇ྀི	1741016708 Usingggggg Report Comment
Parahsite	1740092115 Using !! Thank youu I love this Report Comment
Ery	1739971943 using Report Comment
Finn	1736787602 Using thx!! Report Comment
nena nana	1730044572 using Report Comment
Kimberly	1727904901 using Report Comment
Michaela	1725409057 using but editing a bit! <3 Report Comment
Xypth_136	1723281395 Using! Report Comment
vampXDloverXX	1721321618 Using :3 Report Comment
schütze	1715091773 Use-maxxing Report Comment
Zemarli	1714884196 pls make this in pink and black !!! Report Comment
⋆｡‧˚ʚVALɞ˚‧｡⋆	1713214648 using ^^ Report Comment
Maruu	1711301795 using Report Comment
Spectra Vonderguist	1710374325 using! Report Comment
⋆.ೃ࿔ .° ꜱᴛᴀʀ ° .ೃ⋆ ༘ ⋆	1707700282 using! :3 Report Comment
Ivycita X_X	1705895622 using :33 Report Comment