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

jake the wizard	1711248188 IM A WIZARD AND I AM SOOOO USING THIS !!!!!!!!!! Report Comment
,ivo !!	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
AkuDeLioncourt	1705936191 Using!!!! ^⁠_⁠^ Report Comment
4xol	1705816438 using! :D Report Comment
Elias	1705433012 using! Report Comment
D33r1nth3f0r3st	1705127514 Using! Report Comment
obscure 'hollow	1705010155 Using. Report Comment
UlcerousSpiv	1704009163 Definitely using this as a base for my profile! Thank you so much! Added for sure! Report Comment
Sam <33	1703964770 using!! I appreciate how clean the code is sm <33 Report Comment
▀▄▀▄▀▄ D̴R̴A̴K̴E̴ ̴S̴K̴V̴L̴L̴ ▄▀▄▀▄▀	1703806243 using Report Comment
Kate	1703709183 this is probably the cleanest code i've seen on Spacehey. Kudos 2 u :3 Report Comment