Published by Eldritch Taki

published 1729135264

View Blog View Profile Report Blog Entry

my current layout Oct 16 2024

<marquee direction="left">SONG: Above and Beyond by R.I.P ft. NYL</marquee>

Hey there! I'm Sam, and i'm a Senior in High School, and i am a vampiric eldritch horror beyond comprehension (Non-Human/otherkin). I like Infinity Train, Fallout, and other stuff. i also simp for Mace from Infinity train so expect that lol.

<style>

/* Scrollbar styles */

::-webkit-scrollbar {

width: 5px;

height: 10px;

}

::-webkit-scrollbar-track {

border-radius: var(--curve);

border: 1px solid #630000;

}

::-webkit-scrollbar-thumb {

background: #630000;

border-radius: var(--curve);

}

</style>

<style>

.online{

content: url(https://i.ibb.co/b7BYSr6/D1d3a33719d717ae776b567c58bea339fd1c0545.gif);

}

</style>

<style>

.blog-preview .pinned .icon{

content: url('https://64.media.tumblr.com/4b71599658219ed016d375f30328597b/82c77a3cd993f4da-f9/s75x75_c1/45c8fbcf7b29b45b2f76353a874229ff464605b5.gifv');

<style>

/* font-family */

@font-face { font-family: "PenetrationOutGrunge-JvyM"; src: url('//dl.dropbox.com/s/3wt5r6e8l5xrc66/PenetrationOutGrunge-JvyM.ttf'); }

@font-face { font-family: "RavenouslyDemoGrunge-Ea9OW"; src: url('//dl.dropbox.com/s/ydwh9wmm0k5a2bo/RavenouslyDemoGrunge-Ea9OW.ttf'); }

</style>

<style>

/* this is where the colors are rooted */

:root{

--headers: #2804c6;

--text: #6E6E6E;

--names: #3627c0;

--links: #1a0081;

--hover: #3300d9;

--borders: 4px double #0a0061;

--background_image: url('https://64.media.tumblr.com/4124a8939d51672162f3714e24d3cc84/de5a35eddd9fad73-37/s640x960/a83a944c407ec3fc358351970509473f5460a8ee.gif');

--font-family: "RavenouslyDemoGrunge-Ea9OW";

--curve: 0px; /* the higher the number, the rounder the border. (try putting 50 as an example) */

}

/* this is where the colors for specific things are located */

h3, h4, h5{color: var(--headers) !important;} /* headings*/

a{color: var(--links) !important;} /* color of links */

a:hover{color: var(--hover) !important;} /* color of links on hover */

p, b, h2, .count {color: var(--text) !important;} /* color of text */

.friends a p{color: var(--names) !important;} /* color of names, and friends counter */

.friends a:hover p{color: var(--hover) !important;} /* color of names on hover */

nav label{color: var(--links) !important;} /* color of search */

.section h4 {display:none;} /* aboutme & want2meet headings */

.blurbs .heading {display:none;} /* hides the blurbs title. if you want it to show, replace with the code: color: var(--headers) !important; */

/* .details-table td:first-child{display:none;} this code hides the general-heroes titles */

.logo {

content:url("https://cdn.pixilart.com/photos/large/7a62e4b9ee3679f.png ");

}

/* this is where your background image ends up being styled */

body{

background-color: #000;

background-size: contain;

background-attachment: fixed;

color: var(--text)!important;

}

/* this is where your name appears */

h1{

color: #1e04c6;

font-family: "PenetrationOutGrunge-JvyM";

font-size:30px !important;

font-weight: bold;

text-align: center;

background-color: rgba(0,0,0,0.5);

border: var(--borders);

}

/* the navigation is adjusted here */

nav{

background-color: rgba(0,0,0,0.5);

border: var(--borders);

border-radius: var(--curve);

}

nav .top{

background: transparent;

color:var(--links);

}

nav .top a, nav .links a{

color: var(--text);

text-shadow:none;

}

nav .links{

color: var(--text);

background-color: transparent;

border-radius: var(--curve);

text-align: center;

}

/* this is the line that appears between links in the header and footer.

you can add an emoji or symbol instead of the default line it has */

nav .links li:not(:last-child)::after,

footer .links li:not(:last-child)::after{

content: "♆";

color: var(--links);

}

/* the search wrapper and button */

.search-wrapper input[type=text] {

background-color: transparent !important;

border: 1px solid var(--links) !important;

color:var(--links) !important;

border-radius: var(--curve) !important;

}

button{

border-radius: var(--curve) !important;

border: 0px solid var(--links) !important;

font-family: var(--font-family) !important;

background-color: transparent !important;

color:var(--links) !important;

}

/* font family for the headers, navigtion links, links, body text */

h2, h3, h4, h5{

font-family: "PenetrationOutGrunge-JvyM";

font-size: 20px;

font-weight: normal;

}

a, p, b, nav label, .section{

font-family: var(--font-family) !important;

font-size: 14px;

font-weight: bold;

}

/* the hr code.

the hr is the horizontal line when you want to

separate important info or add a break in your paragraphs*/

hr{

height:1px;

background: var(--links);

border: none;

}

/* this is where you adjust the borders and background */

.blurbs, .friends, .profile .table, .blog-preview, .contact{

border-radius: var(--curve) !important;

border: var(--borders) !important;

background-color: rgba(0,0,0,0.5)!important;

}

.general-about .details{

border-radius: var(--curve) !important;

border: var(--borders) !important;

background-color: rgba(0,0,0,0.5)!important;

padding:20px;

text-align: right;

}

.mood{

border-radius: var(--curve) !important;

border: var(--borders) !important;

background-color: rgba(0,0,0,0.5)!important;

text-align: center;

padding:5px;

}

.icon{border:none !important;}

.comment-replies{border:2px dotted #0c0063;} /* this is the border around the replies */

.comment-reply:not(:first-child){border-top: 2px dotted var(--links);} /* line in between comment replies*/

/* your interest and comments table row background color */

td{

background-color: transparent!important;

}

/* the middle section of your profile background color*/

main{

background: transparent;

border-radius: var(--curve) !important;

border: transparent !important;

outline: none !important;

}

/* the interest table */

.table-section{

background-color:transparent!important;

border:var(--borders)!important;

background-color: rgba(0,0,0,0.5)!important;

}

.details-table{

border-spacing:0px 10px;

}

.details-table td{

border-top:1px solid darkred;

padding:5px;

}

/* the header section of the boxes */

.heading, .blog-preview h4, .section h4{

background: none !important;

text-align: center;

}

/* this is the box that says "Edit Info" when you're logged in,

and to your friends it says "Profile Name is your friend". */

.profile-info {

background-color: rgba(0,0,0,0.5);

border: var(--borders) !important;

border-radius: var(--curve) !important;

}

/* adjusting images borders and adding styling if you want to */

.profile-pic img{

outline:none !important;

border-radius: var(--curve) !important;

padding:6px;

border: none;

}

/* you can remove text-align:center; if you don't want your friends to be centered */

.friends-grid{

text-align: center;

}

.friends-grid img{

border-radius: var(--curve) !important;

filter: brightness(70%);

}

/* margin and padding */

h2, h3, h4, h5, p{padding-left:5px !important;} /* this is important when you have rounded corners */

.profile .table-section .heading, .blog-preview .heading, .profile .friends .heading{padding: 5px!important;} /* add space to the titles */

.friends, .mood, .general-about .details{margin-bottom: 20px;} /* this adds space between sections */

/* custom contact

you can change the content: "✦" to content: url('image-url-here');

.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://64.media.tumblr.com/b1d7f035a201b19b388494d54624f7d1/41a4364a00fb5cb3-90/s75x75_c1/1ddcc1f4dbc1e216ae6741f27e88a665cc85aed2.gifv')

}

.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {

/* add to favorites */

content: url('https://64.media.tumblr.com/b1d7f035a201b19b388494d54624f7d1/41a4364a00fb5cb3-90/s75x75_c1/1ddcc1f4dbc1e216ae6741f27e88a665cc85aed2.gifv')

}

.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {

/* Send Message */

content: url('https://64.media.tumblr.com/b1d7f035a201b19b388494d54624f7d1/41a4364a00fb5cb3-90/s75x75_c1/1ddcc1f4dbc1e216ae6741f27e88a665cc85aed2.gifv')

}

.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {

/* forward to friend */

content: url('https://64.media.tumblr.com/b1d7f035a201b19b388494d54624f7d1/41a4364a00fb5cb3-90/s75x75_c1/1ddcc1f4dbc1e216ae6741f27e88a665cc85aed2.gifv')

}

.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {

/* instant message */

content: url('https://64.media.tumblr.com/b1d7f035a201b19b388494d54624f7d1/41a4364a00fb5cb3-90/s75x75_c1/1ddcc1f4dbc1e216ae6741f27e88a665cc85aed2.gifv')

}

.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {

/* block user */

content: url('https://64.media.tumblr.com/b1d7f035a201b19b388494d54624f7d1/41a4364a00fb5cb3-90/s75x75_c1/1ddcc1f4dbc1e216ae6741f27e88a665cc85aed2.gifv')

}

.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {

/* add to group */

content: url('https://64.media.tumblr.com/b1d7f035a201b19b388494d54624f7d1/41a4364a00fb5cb3-90/s75x75_c1/1ddcc1f4dbc1e216ae6741f27e88a665cc85aed2.gifv')

}

.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {

/* report user */

content: url('https://64.media.tumblr.com/b1d7f035a201b19b388494d54624f7d1/41a4364a00fb5cb3-90/s75x75_c1/1ddcc1f4dbc1e216ae6741f27e88a665cc85aed2.gifv')

}

/* where your spacehey url goes. you can add a picture here instead.

if you don't want a picture or the url just remove this code

and add this:

.url-info{display:none;}

.url-info{

background-image: url('https://64.media.tumblr.com/6d17e1e82c92cee3f718b5cb44b3c591/89e3025544f2a185-17/s2048x3072/cbc0588c10af8fae21c7177575927f73785ecc56.pnj');

background-size: 100%;

background-repeat: no-repeat;

height: 193px;

border: var(--borders)!important;

border-radius: var(--curve);

}

.url-info p{

opacity: 0.0;

}

/* this is the comments table scroll code.

you can delete this if you don't want a scroll box */

.comments-table {

display: block;

height: 500px!important;

overflow-y: scroll;

border: 0px dotted #040059 !important;

outline: none !important;

border-radius: 8px;

padding:5px;

border-spacing: 4px; /* this changes the distance between boxes */

}

/* this styles the first column */

.comments-table td:first-child{

background-size: cover;

background-position: center;

}

.comments-table td{

background-size: cover;

background-position: center;

border: 2px solid #040059;

padding:10px;

border-radius: 0px;

}

footer{

background-color: rgba(0,0,0,0.5);

border: var(--borders);

border-radius: var(--curve);

padding:5px;

}

</style>

<style>

/* Scrollbar styles */

::-webkit-scrollbar {

width: 5px;

height: 10px;

}

::-webkit-scrollbar-track {

border-radius: var(--curve);

border: 1px solid #040059;

}

::-webkit-scrollbar-thumb {

background: #040059;

border-radius: var(--curve);

}

</style>

!important </iframe>

<style>

html:before {

animation: grain 8s steps(10) infinite;

background-image: url(https://i.pinimg.com/564x/ba/2e/b1/ba2eb187f976d0749cc4e6b7af4e7e1f.jpg);

content: "";

height: 300%;

left: -50%;

opacity:.1;

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%) }

} </style>

<style>

.general-about .profile-pic img {

max-height: 149px;

width: 144px;

max-width: 100%;

border: 0px solid rgba(.0,.0,.0,.0);

padding: 25px;

padding-top: 19px;

border-radius: 2px;

}

.general-about .profile-pic {

height: 138px;

}

.profile-pic {

position: relative;

}

.profile-pic:after {

content: "";

background: url('https://i.ibb.co/NC0n3QC/0LGFEs7.png');

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

}

</style>

<style>

body:before {

content: " ";

height: 100vh;

width: 100vw;

display: block;

position: fixed;

top: 0;

left: 0;

z-index: 100;

background-image: url('https://64.media.tumblr.com/47d86029b6e925112c0a92753d91fc57/tumblr_nobptnfhMe1r90ooxo1_500.gif');

background-size: cover;

background-repeat: no-repeat;

background-position:center;

animation: yourAnimation 5s ease 0s 1 normal forwards;

pointer-events: none;}

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

</style>

0 Kudos

Comments

Displaying 0 of 0 comments ( View all | Add Comment )