first layout

Tags: layout, dark, goth, pink, emo, lace

Description:

my own base layout + a bunch of gifs and stuff made by other people whos names are in the code. beware this is very ugly and i did not know what i was doing but alas here we are

Preview:

click on the image for a larger preview

Code:

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

<style>

@import url('https://fonts.googleapis.com/css2?family=UnifrakturMaguntia&display=swap');
}

button, input {
    overflow: visible;
    background-color: #954D70;
    opacity: 90%;
    border-style: dotted;
    border-color: black;
    border-width: 2px;
    margin: 5px 0px 0px 0px;
}

button, [type="button"], [type="reset"], [type="submit"] {
    -webkit-appearance: button;
    background-color: ;
    border-style: full;
    border-color: black;
    border-width: 2px;
    margin: 5px 0px 0px 0px;
    color: black;
}

.comment-replies {
    padding: 0 5px;
    border: 1.8px dashed #fff;
    margin-top: 1px;
}

table {
    border-top-color: rgb(0, 0, 0);
    border-right-color: rgb(0, 0, 0);
    border-bottom-color: rgb(0, 0, 0);
    border-left-color: rgb(0, 0, 0);
font-family: times new roman, cursive;
}

.comments-table td:first-child, .music-table td:first-child {
    background: #954D70;
    background: fff;
    text-align: left;
    font-weight: light;
    width: 30%;
font-family: times new roman, cursive;
}

.comments-table td, .music-table td {
    background: #954D70;
    background: #954D70;
    vertical-align: top;
font-family: times new roman, cursive;
}

.comment-replies {
    padding: 0 5px;
    border: 2px solid black;
    margin-top: 1px;
font-family: times new roman, cursive;
}

body::before {
    content: " ";
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    opacity: 0.5;
    z-index: 2;
background-size: cover;
    pointer-events: none;
    mix-blend-mode: color-dodge;
}

.container {
    width: 1100px;
    border: 2px solid black;
    max-width: 100%;
    margin: 0 auto 10px;
    padding: 9px 0px 0px 0px;
font-family: times new roman, cursive;
}

body{
    background: url(https://i.pinimg.com/564x/92/b6/1f/92b61fda75a688c7cd943ab9e96819f0.jpg); no-repeat fixed; background-size: 400px;
}

nav .top{
margin-top: 10px;
background: url(https://i.pinimg.com/564x/29/2f/81/292f81b3055e3c0cb94de1adc381ad9e.jpg);
    background-size: cover;
    background-position-y: 210px;
    border: 1px black;
    border-radius: 5px;
    box-shadow: 0 0 8px black;
    opacity: 80%;
    filter: hue-rotate(17deg) brightness(1.5);
}

nav .links .special a {
    color: #ff0000;
}

nav .links li:not(:last-child)::after, links li:not(:last-child)::after {
    content: " ♠ ";
    color: black;
}

nav .links{
background: transparent;
text-align: center;
}

nav{
background: url(https://i.pinimg.com/564x/29/2f/81/292f81b3055e3c0cb94de1adc381ad9e.jpg);
    margin-top: 20px;
    margin-bottom: 15px;
    border: 3px solid black;
    filter: contrast(0.8) saturate(0.5) brightness(0.9);
    box-shadow: inset 3px 3px grey, inset -3px -3px #a5a5a5, 7px 6px 7px #0000008f;
}

main{
 background: #954D70;
    opacity: 87%;
    color: black;
    padding: 6px 0px;
    font-size: 100%;
    border-style: dotted;
    border-width: 2px 2px 2px 2px;
    border-color: black;
font-family: times new roman, cursive;   


}

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

main a {
     color: black;
text-shadow: 0 0 2px black;
font-family: times new roman, cursive;
font-size: 50px
line-height: 50px;
}

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

.profile .contact .heading, .profile .table-section .heading, .profile .blurbs .heading h4, .profile .friends .heading h4, .setting-section .heading, .home-actions .heading {
    color: #954d70;
    background: black;
font-family: UnifrakturMaguntia;
}

.profile .url-info{
 display:none;
}

.details-table td:first-child, .comments-table td:first-child, .music-table td:first-child {
 background-color: #954D70;
    background-color: var(--pink); 
    vertical-align: top;
    border-style: solid;
    border-width: 0,5px;
font-family: times new roman, cursive;
}

.details-table td, .comments-table td, .music-table td {
 background-color: #954D70;
    background-color: var(--pink); 
    vertical-align: top;
    border-style: solid;
    border-width: 0,5px;
font-family: times new roman, cursive;
}

main:before {
        background-image: url('http://www.geocities.ws/pict7_1/gothic/gothic_angel.gif');
        margin-left: 600px;
        background-size: 250px;
        background-repeat: no-repeat;
        color: transparent!important;
        display: block;
        content: "";
        width:;
        height: 300px;
        margin-bottom: -29px;
        margin-top: -5px;
}

.profile-info {
background: url(
https://i.pinimg.com/736x/5e/9c/20/5e9c20b31abfc736a590ec5e86413378.jpg);
    background-position-y: -104px;
    height: 120px;
    border: 3px solid black;
    background-size: cover;
 }

h1 {      
  font-size:68px!important;
        font-family: UnifrakturMaguntia;
        font-weight: 200;
 -webkit-text-stroke-width: 1px;
        -webkit-text-stroke-color: black;
 font-style: ;
        text-decoration: line-through;
        text-align: left;
        line-height: 55px!important;
        display: block;
        color: black;
        padding: 10px;   transform: ;
        margin-top: -260px!important;
        margin-bottom: px!important;
}

.profile-info .inner{ background: transparent; }

.profile .blurbs .heading, .profile .friends .heading {
    color: #954d70;
    background: black;
font-family: UnifrakturMaguntia;
text-align: center;
}

.profile .blurbs .section h4 {
    color: #954d70;
    background: black;
font-family: UnifrakturMaguntia;
text-align: center;
}

.count {
    color: #FADBD8;
}

.friends-grid a {
    background: none;
}

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

.online{
content:url("https://gifs.carrd.co/assets/images/image31.gif?vfd74bc7cc");
}

}

footer {
    border: 2px solid black;
    text-align: center;
    font-size: 70%;
    margin: 10px 0 10px;
    padding: 10px 5px;
    background-color: #954d70;
font-family: times new roman, cursive;
}

footer a {
    color: #954d70;
}

:root {
    --logo-blue: ;
    --darker-blue: white;
    --lighter-blue: black;
    --even-lighter-blue: #954D70;
    --lightest-blue: #954D70;
    --dark-orange: black;
    --light-orange: black;
    --even-lighter-orange: red;
    --accent-color: red;
font-family: times new roman, cursive;
}

.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 .mood {
    width: 100%;
    display: inline-block;
    margin-bottom: 26px;
}

.general-about img {
-webkit-mask-image: url( https://i.postimg.cc/4N5mdGFw/842-sin-t-tulo-20240413155316.png);
-webkit-mask-size: 100%;
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;}
}

.profile .friends .person img:not(.icon) { 
-webkit-mask-image: url(https://i.postimg.cc/4N5mdGFw/842-sin-t-tulo-20240413155316.png );
-webkit-mask-size: 100%;
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;}

}
.comments-table td:first-child img:not(.icon) { 
-webkit-mask-image: url(https://i.postimg.cc/4N5mdGFw/842-sin-t-tulo-20240413155316.png);
-webkit-mask-size: 100%;
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;}
}

html:before{
	content: " ";
	height: 100vh;
	width: 100vw;
	display: block;
	position: fixed; 
	top: 0; 
	left: 0; 
	z-index: 100;
	background-image: url(https://i.pinimg.com/originals/f1/dd/12/f1dd12a61da24561ac5997c8308ab37e.gif);
	background-size: cover;
        background-position:center;
        background-color: black;
	animation: yourAnimation 1s ease 1s normal forwards;
	pointer-events: none}

@keyframes yourAnimation { 0.0%{ opacity: 1;} 75%{ opacity: 1; } 100%{ opacity: 0;} }


<!-- (c) Layout created by イザベラ (https://layouts.spacehey.com/layout?id=101359) -->

<img src="https://64.media.tumblr.com/ea24db791b812a6b801a0e2a7a5aa7c4/54342fb5ebe553f2-48/s1280x1920/d9c665414c4514737cb30edc0d7aa72e8dfc38f8.gifv"/>

<img src="https://64.media.tumblr.com/0a247c8ea6e58c746460ebeedb9f02cd/54342fb5ebe553f2-6c/s540x810/0647a635b0b33dfd9b6bcc1a6972ec1dd8f32a37.gifv"/>

<img src="https://64.media.tumblr.com/93495eaaa52b4b5a788e5b952a327a94/54342fb5ebe553f2-11/s500x750/b260af9619e68f4db4d6252b43a4fbd836e49f28.gifv"/>

<img src="https://64.media.tumblr.com/3456bff9f68b7755d3dc76655d82100a/54342fb5ebe553f2-37/s500x750/f327155ed28fd5565e0efffd58146b3bfb530b84.gifv"/>

<img src="https://64.media.tumblr.com/a5289e6bd20ee8e1ee3075d71bcfa1b2/54342fb5ebe553f2-85/s1280x1920/5b28e160d61330bb8f11b7a2ca0ba35c52545e0d.pnj"/>

<img src="https://64.media.tumblr.com/4c9bfaf851a65841c0fc1e622a534fdb/54342fb5ebe553f2-36/s500x750/73c66135cb33684ac37da849a8a66f53aed3fd68.gifv"/>

<img src="https://64.media.tumblr.com/9edea2c199faec930bec245c544863c5/54342fb5ebe553f2-41/s500x750/f98877e7cce59c3aa8496e66d854d628b23872dd.gifv"/>

<img src="https://64.media.tumblr.com/53a8877bad65ed0b977fa0409092dec4/54342fb5ebe553f2-7a/s500x750/c29b62c4b742c04054dc1861b98834579560a134.gifv"/>

<img src="https://64.media.tumblr.com/082f6b2e499b7b6dbbdec8a080fecf3b/54342fb5ebe553f2-39/s640x960/50b005a4448695ec4567769c5130e4d6efd4a59e.gifv"/>

<img src="https://64.media.tumblr.com/d3963116f8a912aea6a06d1587a54ddc/54342fb5ebe553f2-7d/s400x600/7444bf01fe143d45b9e26e5afb31fd07672b0a8c.gifv"/>

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

<img src="https://collection.ju.mp/assets/images/gallery18/1c96020a_original.png?v=0236594d"/>

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

<div style="float:  ; max-height: 200px; position: fixed; left: 25px; top: 6px; z-index: 300;">
<img src="https://notmerlin.com/other/horrorgifs/gifs/Skeleton/Skeleton%20(75).gif" height="290"/>

<div style="float:  ; max-height: 200px; position: fixed; right: 5px; top: 1px; z-index: 200;">
<img src="https://64.media.tumblr.com/23d9c4bd4cc519804bfab3930fcae23f/6f8a043a4b90505a-4a/s400x600/7295563c47964a8e87dc101ed19ad6da3aa4611e.pnj" height="230"/>


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

<style>
li.active .icon { content:url('https://i.ibb.co/vLLVfDx/error-um-amor-bugado-fotor-bg-remover-20231028224327.png'); width: 20PX;height: 20px;}
</style>

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


<div style="float:  ; max-height: 800px; position: fixed; right: 1px; bottom: 10px; z-index: 200;"><img src="https://notmerlin.com/other/horrorgifs/gifs/Fire/Fire%20(9).gif"/>
</div>

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


<div style="float:  ; max-height: 800px; position: fixed; left: 1px; bottom: 10px; z-index: 200;"><img src="https://notmerlin.com/other/horrorgifs/gifs/Fire/Fire%20(9).gif"/>
</div>

<!-- (c) Layout created by ☁️ ˗ˋ Nero ˊ˗ 🦴 !! ᐢ..ᐢ ꒱ ‧₊˚ (https://layouts.spacehey.com/layout?id=103538) -->

<style>

.general-about img {-webkit-mask-image: url( https://i.postimg.cc/4N5mdGFw/842-sin-t-tulo-20240413155316.png);-webkit-mask-size: 100%;-webkit-mask-repeat: no-repeat;-webkit-mask-position: center;}

</style>



<style>

.profile .friends .person img:not(.icon) { -webkit-mask-image: url(https://i.postimg.cc/4N5mdGFw/842-sin-t-tulo-20240413155316.png );-webkit-mask-size: 100%;-webkit-mask-repeat: no-repeat;-webkit-mask-position: center;}

</style>

<style>



.comments-table td:first-child img:not(.icon) { -webkit-mask-image: url(https://i.postimg.cc/4N5mdGFw/842-sin-t-tulo-20240413155316.png);-webkit-mask-size: 100%;-webkit-mask-repeat: no-repeat;-webkit-mask-position: center;}



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

Violetxx.99	1789086402 usandoooo Report Comment
sam	1788684710 using! how would i add an autoplay to this? ive been through html classes but its been a few years so it's completely left my brain xD Report Comment
abeljustwokeup	1786351036 using Report Comment
Ofelia	1785764211 I do not think this is ugly at all! I love it. Thank you. I made a few changes, but not many. Report Comment
V4mpir5_Uv5	1782997433 using Report Comment
wizardVarc	1781029520 Using Report Comment
Carrie	1778240291 using!! Report Comment
𝑫𝒂𝒎𝒂𝒓𝒊𝒔	1777816431 Usando Report Comment
vvsviri	1777161289 used :33 Report Comment
Yeon	1776765340 used Report Comment
Moon_child05	1776476036 I'm using <3 Report Comment
Celestia 𑣲𝄞	1775424608 using !! Report Comment
Yesha	1775265058 Using Report Comment Hey! I saw on your profile that u changed the color to purple. I tried to change it to red but i failed badly. How did you do that? by M. Laura Burns; 1775357395; Report Hi! So sorry for the late reply, I just looked for the hex code and changed it to the color I wanted by Yesha; 1776045013; Report
Felicity	1774928584 using Report Comment
⋆. 𐙚˚࿔ ale 𝜗𝜚˚⋆	1774419234 using Report Comment
XxBL33D1NGH34RTxX	1774301513 using Report Comment
Inveja.	1773180937 Using! Report Comment
‧₊ 𝖔𝖕𝖆𝖑𝖎𝖙𝖊 ࣪₊˖	1772323200 Ty for this! Question: Is there a way to remove the skulls with the red candle in on each bottom side? :)) Report Comment
♱Sil3ntGir1ཐི ཋྀ	1772065752 Usinggggg1!11 Report Comment
angelxiv ⋆｡𖦹°⭒˚｡⋆	1771485179 usinggg Report Comment