- feel free to edit
- dm me with any questions
<style>
img{
filter: grayscale(70%) sepia(100%) hue-rotate(312deg) saturate(4);
}
<style>
/*Online icon*/
.general-about{
position: relative;
margin-top: 100px;
}.online{
content: url(https://64.media.tumblr.com/ef0129e489a84002a21b60cea596b03c/097aeb2deb2195be-ca/s75x75_c1/55ac5f7ed0e524dea9a7349eded9d617797164ef.gifv);}
filter: grayscale(70%) sepia(100%) hue-rotate(312deg) saturate(4);
}
</style>
<style>
/*Change only notification bell*/
nav .links li .icon{
content: url('https://64.media.tumblr.com/d727a97368eb1ed968ef5baa51ef82db/0f1dd797b5574c42-18/s75x75_c1/e318ba49f198aa352934eac7d4d37457ed04761a.gifv');
</style>
<div style="max-height: 300px; position: fixed; left: -430px; top: 40px; z-index: 99;">
<img src="https://64.media.tumblr.com/481c22696da3151b4168a16a177fd797/79d08b8c44c49128-63/s250x400/9323cbc4730de533d72fd2c569e226d1596b9d4f.pnj" height="320"/></div>
<div style="float: ; max-width: 200px; height: auto; position: fixed; right: -100px; top: -380px; z-index: 200;"><a href="https://alturl.com/p749b"><img src="https://64.media.tumblr.com/06a031a9fff295178b00780f3c0bfe24/23bcb24aabf20f71-92/s100x200/ae703a350b1e161e0cd4a8951c9d9448f44b89e7.pnj" height="100"/>
<div style="max-height: 300px; position: absolute; left: 100px; top: 150px; z-index: 99;">
<img src="https://64.media.tumblr.com/481c22696da3151b4168a16a177fd797/79d08b8c44c49128-63/s250x400/9323cbc4730de533d72fd2c569e226d1596b9d4f.pnj" height="300"/>
<div style="max-height: 300px; position: fixed; right: -130px; top: 350px; z-index: 99;">
<img src="https://64.media.tumblr.com/03280435f046660a22b46da996dcd38f/9949497ac88c18ca-89/s400x600/758f95b62bd49e9dbef893ad782407ae065e75dc.gifv" height="300"/>
<style>
/*Main code*/
/*Top Background Color*/
.top{
background-image: none!important;
height: 200px
display: inline-block;
content: url
background-size: contain;
background-repeat: repeat;
background-color: transparent !important;
border: none;
</style>
<style>
body {
background-color: #240907dd;
background-repeat: repeat repeat;
background-attachment: fixed;
}
/*PC version*/
@media (min-width: 768px) {
body {
background-image: url(https://64.media.tumblr.com/466be0a368eacd584c12320fcb13121b/47545358ef9d5cf0-dc/s250x400/48458492aa4b3ea7ad6752db1af48854a1b0ffb9.gifv), url(https://64.media.tumblr.com/8dff512f89eae98ec0c1d51999ec3a36/2f14f669b9de0150-d4/s400x600/871e059e805db1e834f9397c38e7d3b85c01d389.gifv);
background-repeat: repeat-x, repeat;
animation: sky 200s linear infinite;
background-size: cover;
background-position:bottom bottom;
animation-fill-mode: both;
background-size: 20%, 200px;
}
}
@keyframes sky {
from {
background-position-x: 0;
}
to {
background-position-x: -100%;
}
}
<style>
/* This is the loading image when someone clicks on your profile.
You can search for 'transparent loading screen gif' on google or giphy.com and select one that fits your style.
The background-size code will change the size of it. Remember to test it out on your phone/tablet
and change the background-size in the mobile code.*/
body:before {
content: " ";
height: 100vh;
width: 100vw;
display: block;
position: fixed;
top: 0;
left: 0;
z-index: 100;
background-image: url('');
background-size: 50%;
background-repeat: no-repeat;
background-position:center;
background-color: black;
pointer-events: none;
}
@keyframes yourAnimation { 0.0%{ opacity: 1;} 75%{ opacity: 1; } 100%{ opacity: 0;} }
main:before {
height: 180px ;
display: block;
content: "";
background-image: url('https://64.media.tumblr.com/79bd78c78b2b22651830c7c352a77d8f/23bcb24aabf20f71-4d/s500x750/b4cfc27ff68b952ada702389143914632c78e3d8.gifv');
filter:grayscale(70%) sepia(100%) hue-rotate(312deg) saturate(4);
background-position:top center;
background-repeat: no-repeat;
background-size: 500px;
}
@media only screen and (max-width: 600px) {
main:before{
height: 100px;
}
}
</style>
<style>
/* cursors */
a:hover{
cursor: url('https://64.media.tumblr.com/767a44a168259d19f6d3665cd34a344d/9af5fa5f2a876bf2-09/s75x75_c1/320263231f6fd3e8e4dc36799ffbcba034421cd7.pnj'), auto;
}
* {
cursor: url('https://64.media.tumblr.com/1c7b94e9becbf27aaa3b45c008136d58/9af5fa5f2a876bf2-3d/s75x75_c1/3a31a8e24906c10b75dbb64ec33fd770f317ed1d.pnj'), auto;
}
</style>
<style>
/* fonts */
@font-face { font-family: "Squarewave"; src: url('//dl.dropbox.com/s/ywrwfz8d2jsi462/Squarewave.ttf'); }
@font-face { font-family: "7pixelsOfPerfection"; src: url('//dl.dropbox.com/s/xko4q8bi21sd3wz/7pixelsOfPerfection.ttf'); }
@font-face { font-family: "Neuborn"; src: url('//dl.dropbox.com/s/h338im6w4a9uouf/Neuborn%20Regular.ttf'); }
</style>
<style>
:root{
--headers: #421212;
--text: #ffc078;
--names: #ff9e8f;
--links: #ffbd96;
--font-family: "Squarewave";
}
a:hover{text-decoration: none;text-shadow: 0px 0px 5px red;}h2, h3, h4, h5{color: var(--headers) !important;} /* headings*/
a{color: var(--links) !important;} /* color of links */
p, b, .count {color: var(--text) !important;} /* color of text */
.profile .friends .person p{color: var(--names) !important;} /* color of names and friends counter */
nav label{color: var(--links) !important;} /* color of search */
.section h4 {color: var(--headers)!important;} /* 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; */
body{
background-color:transparent!important;
}
background-size:20%20%;
background-repeat: repeat;
}
.container{
}
main{
background-image: url('');
background-size: 20%20%;
background-repeat: repeat;
width:950px;
overflow-y: visible;
margin: auto;
background-color: #000000bf;
padding: 50px;
border: 55px solid transparent;
border-image: url(https://img1.picmix.com/output/stamp/normal/4/9/2/6/1046294_664a8.gif) 100 round;
}
}
nav{
background-color: transparent;
border: none;
margin-bottom: 50px;
}
nav .top{
background: transparent;
color:var(--links);
}
nav .top a, nav .links a{
color: var(--text);
}
nav .links{
background-color: transparent;
text-align: center;
}
/* This is the spacehey logo */
img.logo{
content: url("https://64.media.tumblr.com/921c5da34cb9a8c4c1047b141d78b2f5/79d08b8c44c49128-3e/s640x960/a13415a5025aafd69696ca28cc8fd98a9afabcde.gifv");
width: 180px !important;
height: 70px !important;
}
/* 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: url(https://64.media.tumblr.com/f88bca47ef7b675106277f2bab2a07d8/c1f5045b3508ea6e-ea/s75x75_c1/de74f857de93337920ccb2b026a1b9fce7cf58bf.gifv)}
color: var(--headers);
}
<style>
/*Buttons*/
button{
border: 3px double #ffdf8f;
box-shadow: 1px -4px 35px 19px rgba(255, 255, 255, 0.2);
background-color: #e35b64 !important;
</style>
<style>
/*Profile Name Background Color*/
h1{
text-align:center;
font-family: "Chalkduster", fantasy;
font-size: 3em;
border-radius: none;
text-shadow: 0px 0px 10px #ffd261b3, 2px 3px #ffce52c4;
background-color: transparent!important;
</style>
<style>
/*Mood */
.mood{
text-align:center;
</style>
<style>
/*Search Users Box Background Color*/
.top input{
background-color: #ffa39e !important;
border:3px double #edd5a2;
box-shadow: 1px -4px 35px 19px rgba(255, 255, 255, 0.2);
</style>
<style>
/*Contact Heading Background Color*/
.contact .heading{
background-color: transparent !important;
</style>
<style>
/*Contact Box Background Color*/
.contact{
background-color: transparent !important;
margin: 10px 0;
</style>
<style>
/*Friends/Comments Heading Background Color*/
.friends .heading{
border-radius: none;
border: 5px double #edd5a2;
box-shadow: 2px 1px 14px -4px rgba(255, 215, 193, 0.24);
background-color: #EDAB95 !important;
</style>
<style>
/*Comments Background/border Color*/
.comments-table td{
background-color: transparent !important;
border: 3px double #edd5a2;
box-shadow: 2px 1px 14px -4px rgba(255, 215, 193, 0.24);
border-radius: none;
</style>
<style>
/*Interests Section/Social Links Heading Background Color*/
.table-section .heading{
text-align:center;
background-color: transparent !important;
</style>
<style>
/*Interests Table & Links Table Background Color*/
table.details-table{
background-color: COLOR !important;
background-image: url('URL') !important;
background-attachment: FIXED OR SCROLL !important;
background-repeat: REPEAT OR NO-REPEAT !important;
background-position: CENTER / LEFT / RIGHT / TOP / BOTTOM !important;}
.profile .details-table td{
background-color: #421212 !important;
background-image: url('') !important;
border: 2px double #ffdf8f;
background-attachment: FIXED OR SCROLL !important;
background-repeat: REPEAT OR NO-REPEAT !important;
background-position: CENTER / LEFT / RIGHT / TOP / BOTTOM !important;}
</style>
<style>
/*Blurbs Heading Background Color*/
.blurbs .heading{
padding: 9px;
border: 5px double #edd5a2;
box-shadow: 2px 1px 14px -4px rgba(255, 215, 193, 0.24);
background-color: #421212 !important;
</style>
<style>
/*"About Me" & "Who I'd Like To Meet" Headers*/
h4{
font-size: 20px !important;
font-family: '7pixelsOfPerfection';
text-transform:uppercase !important;
padding-left: 2px !important;
background: -webkit-linear-gradient(#ffcf99, #ff6363);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-color: #421212 !important;
</style>
<style>
/*Removes blue boxes around the interests/links table*/
body
{
--lighter-blue: none;
}
</style>
<style>
/*Centering Text and Images in Blurbs Section*/
.blurbs .inner{
text-align: center !important;
}
</style>
<style>
/* contact icons */
.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/0d9c811f016212f6606dab543dc4245b/cf53b60cec017c02-c4/s75x75_c1/819f14c7ecb2e224affe0397bc707534f3c55c2b.gifv)}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {
/* add to favorite */
content: url(https://64.media.tumblr.com/0d9c811f016212f6606dab543dc4245b/cf53b60cec017c02-c4/s75x75_c1/819f14c7ecb2e224affe0397bc707534f3c55c2b.gifv)}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
/* send a message */
content: url(https://64.media.tumblr.com/0d9c811f016212f6606dab543dc4245b/cf53b60cec017c02-c4/s75x75_c1/819f14c7ecb2e224affe0397bc707534f3c55c2b.gifv)}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
/* foward to friend*/
content:
url(https://64.media.tumblr.com/0d9c811f016212f6606dab543dc4245b/cf53b60cec017c02-c4/s75x75_c1/819f14c7ecb2e224affe0397bc707534f3c55c2b.gifv)}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {
/* instant message */
content:
url(https://64.media.tumblr.com/0d9c811f016212f6606dab543dc4245b/cf53b60cec017c02-c4/s75x75_c1/819f14c7ecb2e224affe0397bc707534f3c55c2b.gifv)}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {
/* block user */
content:
url(https://64.media.tumblr.com/0d9c811f016212f6606dab543dc4245b/cf53b60cec017c02-c4/s75x75_c1/819f14c7ecb2e224affe0397bc707534f3c55c2b.gifv)}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {
/* add 2 group */
content:
url(https://64.media.tumblr.com/0d9c811f016212f6606dab543dc4245b/cf53b60cec017c02-c4/s75x75_c1/819f14c7ecb2e224affe0397bc707534f3c55c2b.gifv)}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
/* report */
content:
url(https://64.media.tumblr.com/0d9c811f016212f6606dab543dc4245b/cf53b60cec017c02-c4/s75x75_c1/819f14c7ecb2e224affe0397bc707534f3c55c2b.gifv)}
</style>
<style>
/*Footer Links Background Color*/
footer{
background-color: transparent!important;
</style>
<style>
/*Change Text Colors*/
.top{
color: #ffd47f;}
main{
color: #ffd47f !important;}
footer{
color: #ffd47f;}
</style>
<style>
/*Change Link Colors*/
a{
color: #f59984 !important;}
a:hover{
color: #f59984!important;}
.top a{
color: #f59984 !important;}
.top a:hover{
color: #f59984 !important;}
.top a:visited{
color: #f59984 !important;}
.links a{
color: #f59984 !important;}
.links a:hover{
color: #f59984 !important;}
.links a:visited{
color: #f59984 !important;}
.friends-grid p{
color: #f59984 !important;}
footer .links a{
color:#f59984 !important;}
footer .links a:hover{
color: #f59984 !important;}
footer .links a:visited{
color: #f59984 !important;}
</style>
<style>
.blog-preview :not(:first-child):before {
content: "";
display: block;
height: 15px;
background: url('https://64.media.tumblr.com/c5d63be816d9411226c3b0e08b8c6a3b/e62f9496737079a2-94/s250x400/60b8baa93b70cbee5dd2af8ea98a31bd82066b8a.gifv');
filter: grayscale(70%) sepia(100%) hue-rotate(312deg) saturate(4);
background-repeat: no-repeat;
background-position: left;
background-size: contain;
}
<style>
/*Change Interests Section Titles*/
table, th, td {
border: 3px double;text-align:center; }
:root {
--topic1: "Games";
--topic2: "Music ";
--topic3: "Movies ";
--topic4: "Television ";
--topic5: "Books ";
--topic6: "Heroes";}
.table-section:not(:last-child) .details-table tr td:first-child p{color:transparent !important;text-shadow: white !important;letter-spacing: -100px;}
.details-table tr td:first-child p::after{
color: #ffe8ad(--links) !important;
letter-spacing:normal !important;
text-shadow: 2px 2px #C4402E !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>
<style>
* "About Me" & "Who I'd Like To Meet" Headers*
.blurbs .section h4{display: block !important;}
border: 3px double #e3cbd6;
border-radius: 10px;
</style>
<style>
/* Scrollbar styles */
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
background: linear-gradient(90deg,rgba(207, 21, 21, 1) 0%, rgba(224, 133, 54, 1) 47%, rgba(230, 139, 60, 1) 50%, rgba(224, 149, 56, 1) 59%, rgba(237, 187, 92, 1) 69%, rgba(245, 239, 132, 1) 97%, rgba(255, 245, 158, 1) 100%);
border-radius: 5px;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: linear-gradient(90deg,rgba(207, 21, 21, 1) 0%, rgba(224, 133, 54, 1) 47%, rgba(230, 139, 60, 1) 50%, rgba(224, 149, 56, 1) 59%, rgba(237, 187, 92, 1) 69%, rgba(245, 239, 132, 1) 97%, rgba(255, 245, 158, 1) 100%);
box-shadow: inset 0 0 5px #96969b;
border: 4px #be4d4d ridge;
}
</style>
<style>
}
{
(grain effect) vvvv
}
body::before {
content: " ";
display: block;
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: linear-gradient(rgb(82 15 15 / 48%) 50%, rgb(0 0 0 / 0%) 50%);
z-index: 2;
background-size: 100% 2px, 3px 100%;
pointer-events: none;
}
(bounce animation) .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 6s;
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>
</div></div></a></div>
<img src="https://64.media.tumblr.com/0faea0e757a0c3d4d1745d31ff65ac8b/f726d737f3264f84-58/s1280x1920/e9eb4cd92b0ac5d6066c5de551530dddb4c4b792.gifv"/>
Comments
Displaying 6 of 6 comments ( View all | Add Comment )
₩ILLO3 RA¥
WOAH 0-o It's so awesome!!
by obscura⟢; ; Report
Sino
idk why but this layout feels like an expensive shampoo bottle from 2013 i LOVE it !!
ohh that's so sweet thank uu
by obscura⟢; ; Report
Emeri ✩
HIGH QUALITY STUFF :0 LOVE IT!!!!
OHH TYSM

by obscura⟢; ; Report
DIGI 🌈
I LOVE TV!!!!!!!!!!!!!!
stuff aside i LOVE this omg u did so good on this. ate
omg TYY

by obscura⟢; ; Report
ofc !! <3333
by DIGI 🌈; ; Report
goodbunny
YES
by obscura⟢; ; Report
Skating_stars
it’s T. V. TIME!!!!!!!
by obscura⟢; ; Report