Purple Gothic layout

Tags: gothic, purple, black

Description:

Idk

Preview:

click on the image for a larger preview

Code:

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

<style>
  @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@1,400;1,500;1,700&display=swap');
p{
font-family: 'Cormorant Garamond';
Font-size: 150%;
}

h1, h2, h3, h4, h5{
 Font-family: 'Cormorant Garamond';
 Font-size: 200%;
}
/* == background img == */

body{
background: url(https://media.discordapp.net/attachments/1171509452986384554/1171509493822148648/33275d47f49e84886a49b810ca10394a.jpg);
Background-repeat: no-repeat;
1000px;
Background-size: cover;
}

/* == nav == */

nav .top{
background: url(https://media.discordapp.net/attachments/1171509452986384554/1171518349629468672/8c7b0382ff3ba35ab36ef2051debb731.gif);
    border: double 3px #F3EAFFe6;
    margin-top: 50px;
   Background-position-y: 50%;
}

button, input {
    overflow: visible;
    background: black;
    border: double 3px #F3EAFFf2;
    color: #F3EAFFf2;
}

nav .links {
    background-color: black;
    padding: 3.5px 16px 5.5px 16px;
    text-align: center;
    border: double 3px #F3EAFFf2;
margin-top: 20px;
}

nav .links li:not(:last-child)::after, footer .links li:not(:last-child)::after {
    content: " † ";
    color: #F3EAFFf2;
}

nav .links a {
    text-decoration: none;
    color: #F3EAFFf2;
    
    font-size: 0.98em;
    font-size: 80%;
}

nav .links a:hover {
    color: grey;
    text-transform: uppercase;
    font-size: 90%;
    font-style:
}

nav .links .special a {
    color: lightgrey;
}

nav .links li.active a {
    font-weight: bold;
    color: lightgrey;
}


/* == main == */

main {
    margin-top: 20px;
    border: double 3px #F3EAFFf2;
    background: #0E002360; 
    color: #F3EAFFf2;
    padding: 6px 0px;
    font-size: 80%;
}

.container {
    width: 810px;
    max-width: 100%;
    margin: 0 auto 10px;
    text-transform: lowercase;
}

a {
    color: lightgrey;
    text-decoration: auto;
    
    font-style:
}

a:hover, a:active, .blog-entry .kudos-btn:hover, .blog-entry .kudos-btn:active {
    color: grey;
    text-transform: uppercase;
    text-decoration: underline;
   
}


/* == right side == */

span {
    text-align: center;
    font-size: 150%;
    text-transform: uppercase;
}

.edit-link {
    font-size: 90%;
    text-align: center;
}

img.pfp-fallback {
    border: 3px double #F3EAFFe6;
    outline: 2px double #F3EAFFe6;
    border-radius: 15px;
}

.general-about .details {
   
    text-align: center;
}

.online {
    color: grey;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 110%;
    font-style: 
    text-decoration: line-through 2px wavy slategrey;
}

.profile .mood {
    margin-bottom: 18px;
    margin-top: 10px;
    width: 100%;
    display: inline-block;
    border: 3px double #F3EAFFe6;
    outline: 2px double #F3EAFFe6;
    border-radius: 15px;
    background: black;
    padding: 4px;
    text-align: center;
}

.profile .contact .heading, .profile .table-section .heading, .setting-section .heading, .home-actions .heading {
    background: black;
    color: #F3EAFFe6;
    border-bottom: 3px double #EF3EAFFe6;
    text-align: center;
    padding: 2px 7px;
    
}

.profile .contact, .profile .url-info, .profile .table-section, .setting-section, .home-actions {
    width: 100%;
    border: 3px double #F3EAFFe6;
    border-radius: 10px;
    outline: 2px double #F3EAFFe6;
    margin: 10px 0;
    background: black;
}

.profile .url-info {
    padding: 4px 7px;
    font-size: 0px;
    background: url(https://media.discordapp.net/attachments/1171509452986384554/1171509500885336166/f8fbc7ec138535e141ccc43afb698aa8.jpg);
Background-size: cover;
height: 300px;
}

.details-table td {
    background: black;
    border: 1px solid;
    vertical-align: top;
    border-radius: 3px;
}

.details-table td:first-child {
    background: black;
    color: #F3EAFFe6;
    text-align: center;
    vertical-align: middle;
    border: 1px solid #F3EAFFe6;
    font-weight: bold;
    width: 33%;
    border-radius: 5px;
}

/* == left side == */

.profile-info {
    border: 3px double #F3EAFFe6;
    outline: 2px double #F3EAFFe6;
    border-radius: 15px;
    background: url(https://media.discordapp.net/attachments/1171509452986384554/1171527192153423943/90d8e496e7c152201fdfbe6b8ba64882.jpg);
    Background-repeat: no repeat;
    Background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px 5px;
    margin-bottom: 10px;
    font-size: 0;
    height: 100px;
    background-size: 400px;
    background-position-y: center;
    background-position-x: center;
}

.blog-preview {
   
    Background: black;
    outline: 2px double #F3EAFFe6;
    border-radius: 10px;
    padding-left: 10px;
    padding-right: 10px;
}

.profile .blurbs .heading, .profile .friends .heading {
    background: black;
    color: #F3EAFF;
    padding: 2px 7px;
    text-align: center;
    border-bottom: 3px double #F3EAFFe6;
}

.profile .blurbs {
    margin: 20px 0;
    border: 2px double #F3EAFFe6;
    border-radius: 15px;
    background: black;
}

.profile .blurbs .section h4 {
    margin: 0;
    color: grey;
    text-align: center;
    padding-bottom: 5px;
}

.friends {
    background: black;
    border: 3px double #F3EAFFe6;
    border-radius: 10px;
}

.count {
    color: grey;
    font-size: 100%;
}

.profile .friends .person p {
    color: #F3EAFF;
    font-weight: bold;
    width: 100%;
    overflow-wrap: break-word;
    word-break: break-word;
    font-size: 100%;
    text-align: center;
}

.profile .friends .person p:hover {
    color: grey;
}

div#comments {
    margin-top: 15px;
}

.comments-table td, .music-table td {
    background: black;
    vertical-align: top;
    border: 3px double #F3EAFFe6;
    border-radius: 10px;
}

.comments-table td:first-child, .music-table td:first-child {
    background: black;
    text-align: center;
    font-weight: bold;
    width: 38%;
    border: 3px double #F3EAFFe6;
    border-radius: 10px;
}

table.comments-table {
    border: 1px black;
}

/* == footer == */

footer {
    text-align: center;
    font-size: 70%;
    margin: 10px 0 10px;
    padding: 10px 5px;
    background: transparent;
    color: #F3EAFF;
}


/* == scrollbar == */

::-webkit-scrollbar {
    width: 12px;
    height: 12px;
BACKGROUND-COLOR: black;
}
::-webkit-scrollbar-track {
    border-radius: 10px;
    width: 2px;
    border: 1px solid black;
}
::-webkit-scrollbar-thumb {
    background: grey;
    border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
    background: lightgrey;  
}

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

💌 finny 🎧	1771029725 using!! <3 Report Comment
Yu Ming	1768870537 using! Report Comment
𝚌𝚑𝚎𝚕🦢🥀	1766131371 using! Report Comment
XxRabid_RabbitxX	1761340461 usinggg<33 Report Comment
rice_:p	1759075269 awesomw using<3 Report Comment
rice_:p	1759075265 awesomw using<3 Report Comment
mak⋆. ࿐࿔	1755317457 usingg Report Comment
Rednpurplee	1752312596 using Report Comment
Bun	1751949197 Using Report Comment
Inhaler_User<3	1751577827 using! Report Comment
LOVORB	1749432071 Usingh Report Comment
sophielovesspacehey	1748100447 using!! Report Comment
May	1747610481 Using! Report Comment
𝚗𝚊𝚗𝚊	1743953960 Usando <3 Report Comment
𝚗𝚊𝚗𝚊	1743953951 Usando <3 Report Comment
Dark Cacao <33	1743730316 using! Report Comment
Ellyji	1741292056 Usando Report Comment
Ellyji	1741292054 Usando Report Comment
Clarie Nett 𓊆ྀི︎𓊇ྀི	1741016771 usingggg Report Comment
◤✞ 𝕽𝖚𝖒𝖎𝖎 ✞◥	1738160310 using Report Comment