16bit Wizard

Tags: retro, 16bit, dark fantasy, wizard, fantasy, dnd, dark, moody

Description:

A cool wizard/mage feel with some retro 16bit vibes. If you like this layout please offer some kudos and/or leave a comment! Feel free to send me a friend request as well to know when I make more layouts. I also do take requests so feel free to ask for any layouts you may want!

Preview:

click on the image for a larger preview

Code:

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

<style>
/*this gets the fonts for mobile users*/
@import url('https://fonts.googleapis.com/css2?family=Dhurjati&family=Silkscreen:wght@400;700&display=swap');

/*This next section will allow you to edit different aspects of your profile easily.*/
:root{
     --background: url("https://i.ibb.co/pXsd7dH/wizard-tower.jpg"); /*this is the photo behind the text profile.*/

/*these are the colors. be sure to ONLY change the hex code. the colors wont line up with what they actually are, but if you change the names you'll have to manually find everywhere the name is used and change it. The colors of the profile are effected by hex code only, the names are just to make it easier to remember.*/
     --space-cadet: #232237ff;
     --dark-purple: #422C39ff;
     --wenge: #6D595Bff;
     --eggplant: #473645ff;
     --pale-dogwood: #CBB0A5ff;
     --cambridge-blue: #436C65ff;
     --ash-gray: #9AAEACff;

     --profile-color: rgba(71, 54, 69, .75); /*This is for the text profile background. Change the .8 to anything between 0-1 to increase or decrease the opacity.*/
     --header-color: rgba(71, 54, 69, .75); /*This is for the header background. Same rules for the profile transparency apply.*/
     --nav-color: rgba(71, 54, 69, .75); /*Navigation bar*/
     --footer-color: rgba(35, 34, 55, .75);/*Footer*/

/*this edits the backgrounds of your table of interests and comments.*/
     --table-background: rgba(203, 176, 165, .16);
     --border-color: rgba(71, 54, 69, .8);
     --border-color2: rgba(71, 54, 69, .2);
     --header-color2: rgba(71, 54, 69, .4);
     --curve:3px;

/*edit these to customize your table of interest section*/
     --topic-1:"General";
     --topic-2:"Songs";
     --topic-3:"Flowers";
     --topic-4:"Anime";
     --topic-5:"Pets";
     --topic-6:"DnD";

     --online-icon: url("https://i.ibb.co/8XdL6ny/OIG-9ia7rjv-K0r-TI.png"); /*Edit this to edit the online status*/

     --supporter: url("https://i.ibb.co/Lt7SLtQ/OIG-removebg-preview.png"); /*Edit this to edit the supporter award*/

/*These are the different fonts*/
     --headers:'Silkscreen', sans-serif;
     --body:'Dhurjati', sans-serif;

}

/*this is for the intro animation. Cory is the one who came up with this fantastic css code so go give them a follow if you like this! He has a ton of other super helpful codes and their profile is overall one of the best on spacehey imo https://spacehey.com/cory*/
body:before {
	content: " ";
	height: 100vh;
	width: 100vw;
	position: fixed; 
	top: 0; 
	left: 0; 
	z-index: 100;
	background-image: url('https://i.ibb.co/1q7751s/output-onlinegiftools.gif'); /*this line is the image used for the intro animation*/
	background-size: 100%;
	background-repeat: no-repeat;
background-position:center;
	animation: yourAnimation 4s ease 0s 1 normal forwards;
	pointer-events: none;
}
@keyframes yourAnimation { 0.0%{ opacity: 1;} 75%{ opacity: 1; } 100%{ opacity: 0;} }

/*this adds a grain effect to the whole profile. This css is also from Cory*/
html:before {
  animation: grain 8s steps(10) infinite;
  background-image: url(https://i.ibb.co/93zgmHW/687474703a2f2f692e696d6775722e636f6d2f4f45425a7338422e706e67.png);
  content: "";
  height: 300%;
  left: -50%;
  opacity:.2;
  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%) }
}
/* this is the cursor css. delete this or edit it to be your own if you dont like it. the link for custom cursors is listed before the actual code!*/
/* Start https://www.cursors-4u.com */ * {cursor: url(https://cur.cursors-4u.net/others/oth-3/oth207.cur), auto !important;} /* End https://www.cursors-4u.com */
/*this next bit is the background behind the main profile.*/
body, .bodycontent{
    background:var(--background);
    background-attachment: fixed!important;/*this is what allows the background to scroll with you. change "fixed" to "scroll" if you want this feature turned off*/
    background-size: 100%; /*fits the background to the device being used. Mobile phones will just have a repeating background. if you don't mind it looking stretched out when using phones, add a 100% right before the semicolon.*/
    border-color:#00000000;
    border-width:55px; 
    border-style:dotted;
}
main{
    background:none;
    padding-top:0px!important;
}
.profile{
    background-color:var(--profile-color)!important;
    padding-top: none!important;
    border: ridge 10px;
    border-left: groove 10px;
    border-color:var(--eggplant);
    border-top:none;
    
}

nav ul{
    background-color: var(--nav-color)!important;
    border: ridge;
    padding-top:none!important;
    border-left: groove 10px;
    border-right: ridge 10px;
    border-color:var(--eggplant);
    border-top:none;
    border-bottom:none;
}
.top{
    background-color: var(--nav-color)!important;
     padding-top:none!important;
    border: groove 10px;
    border-right: ridge 10px;
    border-color:var(--eggplant);
    border-bottom:none;
}
footer{
    background:var(--footer-color)!important;
}
footer a{
    color:var(--pale-dogwood)
}
p, .count{
    color:var(--pale-dogwood);
    font-family: var(--body);
    font-size: 15px;
}
a{
    color:var(--ash-gray)!important;
    text-shadow:none!important;
    font-family: var(--body);
}
a:hover, a:active, .blog-entry .kudos-btn:hover, .blog-entry .kudos-btn:active{
	color:var(--cambridge-blue)!important;
}
.container{
color:var(--pale-dogwood)!important;
}
.friends-grid p{
    color:var(--wenge)!important;
text-align:center!important}
.friends-grid img{
    border-radius:500px;
    box-shadow: 3px 3px var(--space-cadet);
    object-fit: cover;
    height:100px;
    width:100px;
}
h1, h2, h3, h4, h5{
    font-family: var(--headers);
    color: var(--wenge);
    text-align: center!important;
}
h1 a, h2 a, h3 a, h4 a, h5 a{
    font-family: var(--headers);
}
td{
    background: var(--table-background)!important;
}
.section h4{
    color:var(--wenge)!important;
}
.blurbs .inner .section:nth-child(1) h4{ 
    font-size:0; 
}
.blurbs .inner .section:nth-child(1) h4:before{ 
    content: "Spell Tomes"; /* put your own "about me" header here*/
    font-size: 18px;
    
}
.blurbs .inner .section:nth-child(2) h4{ 
    font-size:0; 
    
}
.blurbs .inner .section:nth-child(2) h4:before{ 
    content: "Potion Brews"; /*put your own "who id like to meet" header here*/
    font-size: 18px;
    
}
.blurbs .heading{
    display:none;
}
.contact a{
    font-size: 12px;
}
/* this next bit hides the URL info*/
.profile .url-info{
    display:none;
}
/*this gives everything the border and background*/
.contact, .mood, .table-section, .blog-preview, .friends, .profile .blurbs .inner, .profile h1{
    background:var(--header-color)!important;
    border:solid var(--border-color) 2px!important;
    border-radius: var(--curve)!important;
}
/*this is just some fixing things*/
.contact .heading, .friends .heading, .profile .table-section .heading, .profile .friends p{
    background: none!important;
    text-align: center!important;
}
.blog-preview h4{
    background-color:var(--header-color2);
}
.blog-preview, .mood{
    text-align: center;
}
/*this next bit fixes the friends and comments sections from being off center*/
DIV.friends:nth-child(3){
    text-align:center;
}
.profile .friends .heading{
    padding-left:50px;
}
#comments .heading{
    padding-left:0px!important;
}
table.comments-table p{
    text-align:left!important;
}
#comments, .contact{
    border-top:none!important;
    border-bottom:solid 2px var(--border-color)!important;
    border-radius: var(--curve);
    border-top-right-radius: 0px!important;
    border-top-left-radius: 0px!important;
}
.mood, .friends{
    border-bottom:0px!important;
    border-bottom-left-radius: 0px!important;
    border-bottom-right-radius: 0px!important;
}
.contact .heading, .profile .friends .heading h4{
    background-color:var(--header-color2)!important;
}
.profile .friends .heading h4{
    border-radius:3px!important;
}
.profile .friends .heading{
    padding-top:5px;
}
#comments{
   Height:900px;
   Overflow:scroll;
}
.comments-table .report{
    font-size:11px!important;
}
.comments-table .report .icon{
    content: url(https://i.ibb.co/rp8jtXY/output-onlinegiftools-1.gif);
   
}
.comments-table td:last-child img{
    height:12px;
    width:12px;
    Border:0px solid!important;
    Border-radius:0px!important;
}
.comments-table td{
    background-color:var(--header-color2)!important;
}
.comments-table td:first-child img{
    height:90px;
    width:90px!important;
    border-radius: 500px!important;
    Object-fit:cover;
}
.comments-table{
    border-radius:var(--curve)!important;
    border:none;
}
.comments-table td{
    border-color:white;
}
.comments-table p{
Font-size:15px!important;
}
.comments-table td:first-child p{
Font-size:15px!important;
text-align: center!important;
}
.comments-table tr:first-child td:first-child{
    border-top-left-radius: var(--curve);
}
.comments-table td:first-child{
    font-size:15px;
    text-align:center;
Padding:15px;
}
.comment-table tr:last-child img{
Border-radius:0px!important;
Border:none!important;
}
.comments-table tr:first-child td:last-child{   
    border-top-right-radius:var(--curve)!important;
}
.comments-table tr:last-child td:first-child{
    border-bottom-left-radius: var(--curve);
}
.comments-table tr:last-child td:last-child{
    border-bottom-right-radius: var(--curve);
}

/*this next string makes the profile photo into a circle and fits photos into it*/
.profile-pic img{
    height:160px!important;
    width:160px!important;
    border-radius:500px;
    border:var(--border-color) 2px solid;
    object-fit:cover;
    overflow:hidden;
}
.details{
    background-color:var(--header-color);
    border:solid var(--border-color) 2px;
    height:160px;
    border-top-left-radius: 80px;
    border-bottom-left-radius: 80px;
}
/*this next bit is hides the original interest labels*/
.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{
  letter-spacing:normal !important;
  Text-shadow: 2px 2px var(--pale-dogwood);
}
/*and this is what customizes them. it can easily be done in the root*/
.table-section:not(:last-child) .details-table tr:nth-child(1) td:first-child p::after{
  content:var(--topic-1);
}
.table-section:not(:last-child) .details-table tr:nth-child(2) td:first-child p::after{
  content:var(--topic-2)!important;
}
.table-section:not(:last-child) .details-table tr:nth-child(3) td:first-child p::after{
  content:var(--topic-3)!important;
}
.table-section:not(:last-child) .details-table tr:nth-child(4) td:first-child p::after{
  content:var(--topic-4);
}
.table-section:not(:last-child) .details-table tr:nth-child(5) td:first-child p::after{
  content:var(--topic-5);
}
.table-section:not(:last-child) .details-table tr:nth-child(6) td:first-child p::after{
  content:var(--topic-6);
}
/*this is where the online image is changed. it looks funky from your perspective with the edit profile link, but it looks fine from other people's point of view*/
.online img{
font-size: 0;}
.online:before{
display:inline-block;
width:15px;
height:15px;
content:"";
background:var(--online-icon); no-repeat 0 0;
background-size:100%; 
animation: blink 3s;
animation-iteration-count: infinite;}

@keyframes blink{

  0%{opacity:1;}

  50%{opacity:0;}

  100%{opacity:1;}

}
/*This changes the online text color. It can be easily changed in the root.*/
.online {
    Color:var(--space-cadet);
}
.supporter img{
font-size: 0;}



.supporter:before{
display:inline-block;
width:15px;
height:15px;
content:"";
background:var(--supporter); no-repeat 0 0;
background-size:100%;

}
.awards a{
    Color:var(--space-cadet);
}
.mood{
    text-align:center;
padding-left:3px;
}

nav, .col{
color: var(--pale-dogwood)!important;
}
.col, main, footer, nav .links, nav .top {

animation: float 4s;

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>

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

Phoebe! 𓅆	1734574957 using!! Report Comment
↑Mack↓	1734382791 was using, but this background is ai generated... : ( Report Comment
Boots	1734362136 Using! Thank you! Report Comment
Lake	1732117836 Using, and I learned so much about coding with it! Thank you very very much for the wonderful template and for the time you took explaining everything (and I'm loving all the cool features). Wish you all the best, Lake. Report Comment
Matmin :]	1727472932 probably using. :] Report Comment
WizardDude	1724292634 using Report Comment
RemyRemy	1722133907 Using! It's so cute! Report Comment
StoryTeller	1719961308 Using! Love the vibes, thanks :) Report Comment
Somethingnothere?	1718769548 Using Report Comment
Maxximum_Panic	1717534991 This is awesome, thank you for this beautiful layout! Report Comment
juneau🎼🎨🌐🎧	1717031129 (using) Report Comment
juneau🎼🎨🌐🎧	1717031118 thank you for this fine layout my fellow wizard🙏 Report Comment
𝕞𝕒𝕥𝟜𝕒_ℕ𝕚𝕞𝕗𝕠𝟜𝕜𝕒_𝕝𝟘𝕧𝕖	1716679457 using! Report Comment
bloha	1715391814 using!! great job <3 Report Comment
Iwksz	1715370016 using! Report Comment
jake the wizard	1711248188 IM A WIZARD AND I AM SOOOO USING THIS !!!!!!!!!! Report Comment
milica	1710960732 using!!! Report Comment
Francis	1709602155 Using!!! :333 Report Comment
Christo	1707403324 This is awesome !!! Def using ! Report Comment
𝐿𝓊𝓍.𝒿𝓅𝑔♥	1706024246 using^^ good job Report Comment