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

𝗕𝗿𝗶𝗮𝗻𝗻𝗮	1779847697 Usingg!!! Report Comment
kailynn	1773869300 using! Report Comment
chizurush	1771301823 using!!! Report Comment
Sonii	1767813114 Usingg!! Report Comment
crazedrabbit	1766992941 using >_< Report Comment
Se3xInHorrorr	1765940443 USING!! Report Comment
Frank	1764184469 Using Report Comment
𖤐Fhoebe𖤐	1763941888 𖤐♡♡USING 𖤐♡ Report Comment
Dahlia_T0r	1760028014 usingg Report Comment
sarah :D	1759931929 USINGGGGG Report Comment
L ★	1756912111 Using Report Comment
⋆ #meishanggg	1754410799 tyyy it's so cool!!! usinggg Report Comment
༻♡𝔄𝔳𝔦𝔳𝔦♡༺	1754084970 Usingg Report Comment
༻♡𝔄𝔳𝔦𝔳𝔦♡༺	1754084965 Usingg Report Comment
KB	1753652424 using Report Comment
selmawelma	1752644388 SOO CUTE! USING!! Report Comment
Ci 🕷	1752022802 usingggggggggggggggg Report Comment
Bammyyy	1751014982 using! Report Comment
𝒜𝚢𝚕𝚊	1750613783 usando Report Comment
ALEXUS (⁠≧⁠▽⁠≦⁠)	1745681496 Using Report Comment