Black and White Goth Layout

Tags: goth, gothic, gothic rock, black, white, spooky, layout, gif, autoplay

Description:

As the title says. The main code is mine but the extra shit is not, code that is not mine has been credited! Comment using if you are using! Some other things the layout includes... *Darkwave/Post Punk/ Gothic Rock Playlist (1 hr) *Profile Flouting animation *Custom Skull cursor *Custom Online animation

Preview:

click on the image for a larger preview

Code:

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

<!-- (c) Edited/curated Layout. Note that some of the code is not mine! Original creators are linked -->

<!-- Darkwave/Post Punk/ Gothic Rock (1:15:00 long) -->

<iframe width="0" height="0" src="https://www.youtube.com/embed/YaKVt-GXIbc?si=QOLvrWWeTBbX4yj4??feature=shared//?&;amp;;autoplay=1&;loop=1&;controls=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" loading="lazy">

</iframe>


<!-- About me section  -->

<img src="https://64.media.tumblr.com/8feabcdd66038c711b5ef52ee84f20ee/4f7dfb36276881c0-c9/s1280x1920/5880d906fa743985253909ec3ca235c231e6541d.pnj"/>

<img src="https://i.pinimg.com/originals/7b/1e/dc/7b1edc9b51d44b6748995b0949a7055e.gif"/>

<img src="https://64.media.tumblr.com/96ff7f1a01c6866969c24ac01b8e630d/8454230d59298660-75/s400x600/a85f1c81845d38411f3689e56141bbd5e7bfa0c3.jpg"/>

<img src="https://64.media.tumblr.com/805889df089ea022783efd0333218fdf/8bb2648b198edef3-fe/s400x600/9eaefa917b4c9165cf812efac7ad60c6483ccece.jpg"/>

<img src="https://64.media.tumblr.com/8feabcdd66038c711b5ef52ee84f20ee/4f7dfb36276881c0-c9/s1280x1920/5880d906fa743985253909ec3ca235c231e6541d.pnj"/>

you can put your about me here!


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

<style>

.col, main, footer, nav::before, .online, nav .links, nav .top {
    animation: float 3s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}

.col, main, footer, nav::before, .online, nav .links, nav .top {
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);
}
</style>

<!-- main Layout code -->

<style>
@import url('https://fonts.googleapis.com/css2?family=Potta+One&display=swap');
body{font-family: "potta one" ;}
</style> 

<style>
body {
    background: url("https://i.pinimg.com/originals/33/ea/82/33ea82ae04a395016e2a3e21bb78c20e.gif");
}
.profile {
background-image:url(https://i.pinimg.com/474x/10/d1/13/10d11379d326e14038ce806033f7b911.jpg);
  background-repeat: repeat;
    border-radius: 8px;
}

h1
{
	color:
h1
{         color: white; 
	//text-shadow: 1px 1px #ffffff;
	
};
	text-shadow: 2px 2px 3px #ffffff, 0 0 25px #ffffff, 0 0 5px black;
}
h1, h2, h3, h4,h5,a, p, nav label, .section
{
	
main, top, links, nav .top, nav .links, details-table
{
    background:  !important;
	background-image:   !important;
	background-size: cover !important;
    padding: 0 !important;
    /*font-size: small;*/
    color: #ffffff;
{

.mood
text-transform:uppercase !important;
}

table, td
}
	/* border: 1px solid var(--url-pink-bg)!important; */
	border-spacing: 2px;
}

.profile .contact, .profile .url-info, .profile .table-section, .home-actions
{
    width: 100%;
    border: 2px solid var(--#FB9E00);
}
table, th, td

}
   border: 1px solid #ffffff;
   border-spacing: 2px;
}
.blog
}   
   border: 10px solid #ffffff;
}
.profile .contact, .profile .url-info, .profile .table-section, .home-actions
}
   width: 100%;
   border: 4px outset #ffffff;
   margin 10px 2;
}

.online
{
  color: gold!important; 
  //text-shadow: 1px 1px white;
}

:root 
{
	--logo-blue: ;
 	--darker-blue: ;
	--lighter-blue: #000000;
	--even-lighter-blue: ;
	--lightest-blue: ;
	--dark-orange: ;
	--light-orange: ;
	--even-lighter-orange: ;
	--turquoise: ;
        
        --table-header: white;
	--table-color: white;
	--link-text: white;
	--main-text: white;

    }   
main 
{
  /* changes made to stuff outside of columns */
    background: black;
    padding: 0;
    font-size: small;
    color: #ffffff;
text color: white;
  text-shadow: 1px 1px 2px #000000, 0 0 25px #000000, 0 0 3px #000000; 
}
footer 
{
    background: white!important;
}
.comments-table{
display: block;
height: 500px;
overflow-y: scroll;
Border-radius: 8px; 
color: #ffffff;
  text-shadow: 1px 1px 2px #000000, 0 0 25px #000000, 0 0 3px #000000; 
}
.contact {
  border-radius: 8px;
  background-image: url(https://i.pinimg.com/originals/7e/80/ab/7e80ab41535bb0107728bf36896d40a8.gif);
  background-position: right top;
  background-repeat: repeat;
background-attachment: scroll;
Width: 310px;
Height:180px;

color: #ffffff;
  text-shadow: 1px 1px 2px #000000, 0 0 25px #FB9E00, 0 0 3px #ffffff; 
}
.friends th, tr, .friends td, th, .icon, main, .comments-table, .friends, .profile-info, .table, .table-section,  .url-info, .mood, .blurbs, .blog-preview, .details, 
{
border: 1px curve none !important;
outline: none !important;
}
img
{
border-radius: 12px;
}

main {
background:  black;
border-radius: 14px;
padding: 0;
font-size: 85%;
color: #000000;
}

nav, footer, .profile .contact {
display: inherit !important;
opacity: 1 !important;
border-radius: 12px;
}
main {
background:  ;
border-radius: 12px;
border: 12px solid #000000;
padding: 0;
font-size: 90%;
color: #ffffff;
}
nav .top {
  background: transparent;
}

nav .links {
  background: rgba(0, 0, 0, 0.3);
}

nav { background-image: url(https://i.pinimg.com/564x/bf/5c/40/bf5c40f038483e9f4c32d6fb0912f767.jpg) 
}


/*customising interests box*/
  .profile .table-section{
    border:2px solid #000000;
    border-radius: 15px;
  }
  .profile .table-section .heading{
    background:#000000;
    border: 1px solid #000000;
    border-radius: 15px 15px 0px 0px;
    text-align: center;
  }
  .profile .table-section .heading h4{
    color: #ffffff;
    text-shadow: 1px 1px 2px black;
  }
  .profile .table-section .details-table td{
    background: rgba(0, 0, 0, 0);
    padding-right: 10%;
  }
 
  .profile .friends .heading{
    background: #ffffff;
    color: #ffffff;
    text-shadow: 1px 1px 2px black;
    text-align: center;
  }
  .profile .friends .heading h4{
    text-align: center;
    color: #ffffff;
    text-shadow: 1px 1px 2px black
  }
.general-about {
	background-image: url(https://i.pinimg.com/564x/95/17/3b/95173bfe83448a81109f418a0d4ae111.jpg);
	padding: 20px;
	border-radius: 10px;
	box-shadow: 4px 4px 0 #000000;
	text-align: center;
	animation: nineties2 2s ease 0s infinite normal none;
	animation-delay: .46s;
}
.profile .blurbs .section :nth-child(2) {
	background-image: url(https://i.pinimg.com/originals/13/4b/b9/134bb9effbf9031cf8ddb4b8d9aaaad5.gif);
     /* margin-top: -5px; */
	padding: 18px;
	box-shadow: 4px 4px 0 #000;
}

.profile .profile-info .inner h3 {
	filter: drop-shadow(3px 3px 0 #000000);
	margin: 0!important;
	color:#ffffff;
}
.profile .profile-info .inner h3 a {
	color: #ffffff ;
}
.profile .profile-info {
	background-image: url(https://i.pinimg.com/564x/ef/2f/7b/ef2f7be4b75d72a7cbed2b35d0ac9224.jpg);
	padding: 20px;
	border: none;
	border-radius: 10px;
	box-shadow: 4px 4px 0 #ffffff;
	text-align: center;
	animation: nineties2 2s ease 0s infinite normal none;
	animation-delay: .15s;
	border: none;
}

</style>

<style>* {cursor: url(https://www.cursors-4u.com/cursor/2009/10/14/thick-skeleton-skull.html), url(https://cur.cursors-4u.net/holidays/images4/hol335.gif), auto !important;}</style><a href="https://www.cursors-4u.com/cursor/2010/05/04/mac-os-x-radioactive-busy.html" target="_blank" title="Mac OS X Radioactive Busy"><img src="https://cur.cursors-4u.net/cursor.png" alt="Mac OS X Radioactive Busy" style="position:absolute; top: 0px; right: 0px;"/></a>
<style>

.online{

content: url("https://64.media.tumblr.com/5f8558a455d56372f6b5208565681be5/d81aeaff7282566d-ed/s250x400/92cd8eb606d5080ab7e34529f04c821aad572a44.gifv") !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 343 comments ( View all | Add Comment )

Trash Bat Char	1767611427 Using~ Report Comment
𝖆𝐲𝖊𝖘𝖍𝖆 ´ཀ`	1767473357 usingg Report Comment
nene dollie	1767436167 using Report Comment
𝔩𝔦𝔳𝔦𝔡𝔦𝔱𝔦𝔷𝔢.𝔥𝔪	1767208038 Using Report Comment
𝐄𝐦𝐦𝐲 ༉‧₊˚.	1767156895 Using Report Comment
sage	1766993125 using Report Comment
Zinyaaaaaa	1766971161 using. Report Comment
𝖍𝖎𝖐𝖆𝖗𝖎✟𓆉	1766873523 Usandooo Report Comment
-MysteriousMax-	1766862272 using Report Comment
ꜰᴜꜰꜰʟᴅᴏᴏꜰ	1766546487 Using🖤 Report Comment
fawnesq	1766476711 using Report Comment
Lalaz_gh0st	1765951860 using oml Report Comment
Kalliel	1765822772 USANDO Report Comment
Malvo	1765794853 Using!! Report Comment
𝖘𝖆𝖐𝖚𝖗𝖆𝖎'𝖘 𝖘𝖔𝖓	1765390046 using omggg Report Comment
izzymustdie	1764778395 using Report Comment
Juli	1764140886 using Report Comment
Juli	1764140884 using Report Comment
showmeurtoyzz	1764119310 using !! Report Comment
𝕿𝖞𝖑𝖊𝖗𝖓𝖔𝖑	1764098939 Using Report Comment