weird first layout i made!! c:

Tags: emo, black, kitty, sanrio, dark, scemo, grey, graves, white

Description:

This is the first Layout i created, well, idk how literally ANYTHING works, i just... speak basic english and a bit of html. i hope it works and better if you like it c; (feel free to comment or not if you use it!)

Preview:

click on the image for a larger preview

Code:

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

 <style>
/* Layout made by D41M4GS!! */
</style>
<style>
body {
background: url(https://i.pinimg.com/564x/eb/e0/e2/ebe0e2ed18bbad5297c4d8665830238f.jpg);
}
</style>

<style>

	 /* Chrome, Edge, and Safari */
	*::-webkit-scrollbar {width: 10px;}

	*::-webkit-scrollbar-track {background: #262626;}
	
	*::-webkit-scrollbar-thumb {
		background-color: #F8F8FF;
		border-radius: 4px;
		border: 3px solid #F8F8FF;
	}
</style>

<style>
img:hover {
  /* Start the shake animation and make the animation last for 0.5 seconds */
  animation: shake 0.5s;

  /* When the animation is finished, start again */
  animation-iteration-count: infinite;
}

@keyframes shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
} </style>

<style>

 body { --darker-blue: white;
        --lighter-blue: black;
        --even-lighter-blue: ;
        --lightest-blue: #ffffff;
        --dark-orange: grey;
        --light-orange: grey;
        --even-lighter-orange: grey;
        --green: #38d;
--logo-blue: transparent; }

* {
        font-family: Pixelify Sans;
    }

.general-about{
background:url(https://i.pinimg.com/564x/e9/94/11/e9941107e5d6e521e5753e39784b436b.jpg) fixed; background-size: 700px 350px;
border: 3px inset #fefefe;
font-family: Pixelify Sans;
color: white;
box-shadow: 0px 0px 10px 0px white;
</style>

<style>

main {
background: #808080; 
}

</style>

<style>/* Profile Name Header */
	@import url('https://fonts.cdnfonts.com/css/pf-tempesta-five');
	.profile .left h1{ font-family: 'Pf tempesta five', sans-serif; font-size: 38px; color: #7d; text-align: center; overflow-wrap: break-word; text-shadow: 3px 3px 3px #fff;}
</style>

<style>

nav {
color: black
}

</style>

<style>/* Profile Name Header */
	@import url('https://fonts.cdnfonts.com/css/sf-pixelate');
	 .details p{ font-family: 'Pf tempesta five', sans-serif; font-size: px; color: #7d; text-align: center; overflow-wrap: break-word; text-shadow: 1px 1px 1px #000;}
</style>

<style>
	@import url('https://fonts.cdnfonts.com/css/sf-pixelate');
	 .section h4{ font-family: 'SF Pixelate', sans-serif; font-size: px; color: black; text-align: center; overflow-wrap: break-word; text-shadow: 1px 1px 1px #000;}
</style>
<style>
@import url('https://fonts.cdnfonts.com/css/sf-pixelate');
	 .blog-preview h4{ font-family: 'Pf tempesta five', sans-serif; font-size: px; color: black; text-align: left; overflow-wrap: break-word; text-shadow: 1px 1px 1px #fff;}
</style>


<style>
@import url('https://fonts.cdnfonts.com/css/sf-pixelate');
.friends-grid .person p{ font-family: 'SF Pixelate', sans-serif; font-size: 6px; color: #fff; text-align: center; overflow-wrap: break-word; text-shadow: 1px 1px 1px #fff;}
</style>

<style>
.online {
    margin:auto;
    padding-bottom: 5px;
    content: url(https://dl.glitter-graphics.com/pub/70/70114ow466u9oc3.gif);
}

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

.col, main, footer, nav::before, .online, nav .links, nav .top {
animation: float 5s;
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>

<style>
.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: url(https://web.archive.org/web/20090830190856if_/http://geocities.com/him_palace/SverImages/Heartagram.gif)
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {
	/* Add to Favorites */
	content: url(https://web.archive.org/web/20090830190856if_/http://geocities.com/him_palace/SverImages/Heartagram.gif)
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
	/* Send Message */
	content: url(https://web.archive.org/web/20090830190856if_/http://geocities.com/him_palace/SverImages/Heartagram.gif)
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
	/* Forward to Friend */
	content: url(https://web.archive.org/web/20090830190856if_/http://geocities.com/him_palace/SverImages/Heartagram.gif)
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {
	/* Instant Message */
	content: url(https://web.archive.org/web/20090830190856if_/http://geocities.com/him_palace/SverImages/Heartagram.gif)
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {
	/* Block User */
	content: url(https://web.archive.org/web/20090830190856if_/http://geocities.com/him_palace/SverImages/Heartagram.gif)
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {
	/* Add to Group */
	content: url(https://web.archive.org/web/20090830190856if_/http://geocities.com/him_palace/SverImages/Heartagram.gif)
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
	/* Report Profile */
	content: url(https://web.archive.org/web/20090830190856if_/http://geocities.com/him_palace/SverImages/Heartagram.gif)
}

</style>

<style>/Buttons (Background Color/Background Image)/
    button{
    border-radius: 25px 25px 25px 25px !important;
	color: grey;
	font-weight: bold;
    background-color: #fff !important;
	}
</style>


<style>

html:before{ 

   animation: grain 8s steps(10) infinite;

   background-image: url(https://i.ibb.co/mSXbshm/Boaz9s-Y-2.gif);

   background-size: 100%; 

   content: "";

   height: 200%;

   left: -50%;

   opacity:.5;

   position: fixed;

   top: -100%;

   width: 200%;

   pointer-events:none}

</style>


<div style="float:  ; max-height: 800px; position: fixed; right: 1px; bottom: 10px; z-index: 200;"><img src="https://i.ibb.co/VMwD0HJ/Graveyard-divider.png" width="600" height="200"/></div>

<style>/find more cursors at https://gafcodes.com/ body {cursor:url(https://www.gafcodes.com/premade/cursors/jspunkette/cursor72.cur), default;}</style>

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

<!-- (c) Layout created by ༺♱𝔠𝔞𝔰𝔰♱༻ (https://layouts.spacehey.com/layout?id=94975) -->

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

<style>
  
  .logo {
  
  content:url("https://cdn.discordapp.com/attachments/1111836147530874910/1134738469650976848/Untitled174_20230729004512.png")

  }
  
  </style>

<style>

table, th, td {

  border: 0px solid;

     }

:root {

  --topic1: "Me!!";
  --topic2: "Mus1c";
  --topic3: "h0bbiez";
  --topic4: "NO!";
  --topic5: "YES!";
  --topic6: "Gamez";

 }

.table-section:not(:last-child) .details-table tr td:first-child p{color:transparent !important;text-shadow: none !important;letter-spacing: -100px;}

.details-table tr td:first-child p::after{
    
    
color:var(--links) !important;
letter-spacing:normal !important;
text-shadow: 2px 2px black !important;
filter: brightness(95%) !important;
   
   
}
.table-section:not(:last-child) .details-table tr:nth-child(1) td:first-child p::after{
  content: var(--topic1);
}
.table-section:not(:last-child) .details-table tr:nth-child(2) td:first-child p::after{
  content: var(--topic2);
}
.table-section:not(:last-child) .details-table tr:nth-child(3) td:first-child p::after{
  content: var(--topic3);
}
.table-section:not(:last-child) .details-table tr:nth-child(4) td:first-child p::after{
  content: var(--topic4);
}
.table-section:not(:last-child) .details-table tr:nth-child(5) td:first-child p::after{
  content: var(--topic5);
}
.table-section:not(:last-child) .details-table tr:nth-child(6) td:first-child p::after{
  content: var(--topic6);
}

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

Milla xx	1713461409 using Report Comment
lusliode	1712766963 Using Report Comment
lynx	1711630804 using :3 Report Comment
𝔉𝔞𝔫𝔱𝔞𝔰𝔪𝔞	1711557407 usingggg <3 Report Comment
★ 𝗢𝘀𝗶𝗿𝗶𝘀 ★	1710401956 uzziiiin Report Comment
⛧𝔊𝔬𝔱𝔥 ✧ 𝔐𝔬𝔱𝔥⛧	1709830608 using Report Comment
†gothsushi†	1709574843 using Report Comment
Damien☆ ★ ✮ ★ ☆	1709290868 Using Report Comment
AntiqueN0ah	1708952887 using!! Thankss <3 Report Comment
ML17ES1	1708437795 Def using this! Looks awesome! Report Comment
vhst4rs	1708371330 using Report Comment
☆ ᴄʜᴜᴜʏᴀꜱ ᴘɪɴᴋ ᴍᴏᴛᴏʀᴄʏᴄʟᴇ ☆	1707966910 using !!! Report Comment
BAILS!! XOXO	1707847908 using! Report Comment
switchable	1707765465 usingg Report Comment
▪︎ｓｕｎｓｈｉｎｅ	1707608962 Using, it's perfect ♡ Report Comment
Rednpurplee	1707453373 Using Report Comment
Pearla	1707414426 usinggg!!!!!!! Report Comment
RAWR XD	1707133422 USING! :33 Report Comment
ezra 🦇	1707026176 usinggg <3 <3 Report Comment
Hachi	1706814947 using ^^ Report Comment