Astral Arcanum

Tags: space, scifi, alternative, purple, blue, stars, layout, layouts, dark

Description:

I went for a mystical vibe with my "Astral Arcanum" skin, mixing dark, cosmic colors and cool magic symbols to create a laid-back, enchanting space. It's like a starry night filled with magic.
Enjoy!

The skin is fully customisable or usable as is.

NOTES:
1. IMPORTANT! make sure to read the instructions in the beginning of the code to make sure you get the blinkies as interest titles.
2. I changed out the television interest for series and heroes for hobbies.
3. Check out notes all over the code to costumise things.
4. Fully functional on mobile!
5. Put the layout code in 'Who i'd like to meet' for the best results as that box is removed from the page with this layout.

To test this layout use this site and follow the instructions

If you have any bugs or issues please let me know in the comments ✦
Thanks!

Preview:

click on the image for a larger preview

Code:

<!-- (c) Layout created by ⋅⊰∙∘☽ the Fairy Gothmother ☾∘∙⊱⋅ (https://layouts.spacehey.com/layout?id=103119) -->

<!-- (c) Layout created by The Fairy Gothmother (https://spacehey.com/thefairygothmother) -->

<!-- RESOURCES:
BLINKIES ----- https://blinkies.cafe/
COLOR CODES ----- https://html-color.codes/
HTML IMAGE UPLOAD ----- https://imgbb.com/
SYMBOLS ----- https://www.symbolspy.com/
FONTS ----- https://fonts.google.com/
-->

<!-- IMPORTANT:
!! in order to get the costum blinkie titles for the interests
!! put the following under each interest topic on https://spacehey.com/edit
!! just put the text you want in the box behind it
General: <img src="https://i.ibb.co/F0QQYPd/blinkies-Cafe-5-C.gif" alt="blinkies-Cafe-5-C"/>
Music: <img src="https://i.ibb.co/0rTG82d/blinkies-Cafe-YM.gif" alt="blinkies-Cafe-YM"/>
Movies: <img src="https://i.ibb.co/QJtmkd7/blinkies-Cafe-Q7.gif" alt="blinkies-Cafe-Q7"/>
Television: <img src="https://i.ibb.co/WynJXzc/blinkies-Cafe-pr.gif" alt="blinkies-Cafe-pr"/>
Books: <img src="https://i.ibb.co/kGrWtZY/blinkies-Cafe-P9.gif" alt="blinkies-Cafe-P9"/>
Heroes: <img src="https://i.ibb.co/TcDysqc/blinkies-Cafe-MB.gif" alt="blinkies-Cafe-MB"/>

!! to make your own go to https://blinkies.cafe/ and select the 'sparkle' tags
!! select the stargazer blinkie, add your own text and use the 'moonaco' font
!! select '1x (150x20 px)' for scale and then generate and download
!! after downloading upload it to https://imgbb.com/ and use the link it provides in stead of one of the above
 --> 

<style>
	/* import your fonts here */
	@import url('https://fonts.googleapis.com/css2?family=Kode+Mono:wght@400..700&family=Kumar+One&family=Kumar+One+Outline&display=swap'); 
</style>

<style>

	* { /* this rule sets the colours for the scrollbars */
		scrollbar-color: #32174d #080808;
	}

	a:hover { /* this rule sets your cursor style for links when hovered over */
		cursor: url('https://cur.cursors-4u.net/others/oth-6/oth659.cur'), auto !important;
	}
	
	* { /* this rule sets your cursor style for the whole page */
		cursor: url('https://cur.cursors-4u.net/symbols/sym-2/sym188.ani'), url('https://cur.cursors-4u.net/symbols/sym-2/sym188.png'), auto !important;
	}
		
	/* this sets the style for mobile devices */
	@media (max-width: 600px) {
		.container {
			width: 100% !important;
		}
	}
	
	:root { /* Colors */
		--headers: #6c3483;
		--text: #cf3476;
		--names: #9b59b6;
		--links: #2980b9;
	}
	
	body { /* Main text settings */
		font-family: 'Kode Mono', monospace;
		font-weight: 400;
		font-style: normal;
	}
	
	.blog-preview h4,
	.blog-preview h2,
	.blog-preview h3,
	.blog-preview h5 {	/* Styles for headings */
		color: var(--headers) !important;
	}

	.profile .right .blurbs .inner .section h4 {
		color: #9457EB;
		font-family: 'Kumar One', system-ui;
		text-shadow: 2px 2px 3px #4B0082;
	}

	a { /* Styles for links */
		color: var(--links) !important;
	}
	
	a:hover { /* Styles for links on hover */
		color: #9457EB !important;
	}
	
	p, .count { /* Styles for text */
		color: var(--text);
	}
	
	.profile .friends .person p { /* Styles for names and friends counter */
		color: var(--names);
		font-weight: 1;
	}
	
	nav label { /* Styles for search */
		color: var(--links);
	}
	
	.details p:last-child { /* Styles for last login and status */
		color: var(--text);
	}
	
	.container { /* Additional styles */
		width: 75%;
	}
	
	body { /* Styles for the body */
		position: relative;
		background-image: url('https://pixeljoint.com/files/icons/full/space__r1437994661.gif');
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center;
		text-align: center;
	}
	
	/* Overlay to create the black transparent layer */
	body::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.3); /* Black with 30% opacity */
		z-index: -1;
	}

	h1 { /* Styles for the user's name */
		color: #9457EB;
		font-style: normal;
		font-weight: 400;
		font-family: 'Kumar One Outline', system-ui;
		font-size: 40px !important;
		text-shadow: 2px 2px 3px #4B0082;
	}

	nav{ /* the navigation is adjusted here */
		background-color: transparent;
		border: none;
		text-align: center;
	}

	nav .top{ /* line that appears between help/login/signup */
		color: #7B4A63;
	}

	nav .top, nav .links {
		background-color: transparent;
	}

	nav .links{
		border-top:1px solid #7B4A63;
		border-bottom:1px solid #7B4A63;
	}

	nav .links li:not(:last-child)::after,
	footer .links li:not(:last-child)::after{ /* this is the line that appears between links in the header and footer. you can add an emoji or symbol instead */
		content: "✧";
		color: #7B4A63;
	}

	a[title="Notifications"] img.icon { /* Hide the original bell icon image */
		display: none;
	}
	
	a[title="Notifications"]::before { /* Adds a new icon in the bell's stead*/
		content: "\263D \2709 \263E"; /* Unicode of the symbols ☽ ✉ ☾ */
	}
	
	a[title="Notifications"] { /* Styles for the new notification icon */
		display: inline-block;
		width: 50px;
		height: 30px;
		font-size: 24px; /* Adjust the size of the symbols */
		text-align: center; /* Center the symbols horizontally */
		line-height: 30px; /* Center the symbols vertically */
		color: #000; /* Color of the symbols */
	}

	nav img.logo { /* Styles the spacehey logo itself */
		filter: brightness(0) saturate(150%) invert(10%) sepia(74%) saturate(5025%) hue-rotate(200deg) brightness(120%) contrast(121%) !important;
		height: 30px;
	}

	.search-wrapper input[type=text] { /* the search wrapper and button */
		background-color: rgba(0, 0, 0, 0.5) !important;
		border: 1px solid #007fbf!important;
		color:#007fbf!important;
	}

	button {
		border: 2px solid #002e63!important;
		font-family: 'Kumar One Outline', system-ui important;
		background-color:rgba(0, 0, 0, 0.0) !important;
		color: #007fbf!important;
	}

	.online { /* the online symbol and text */
		margin: auto;
		padding-bottom: 5px;
		content: url(https://i.ibb.co/1mscxz1/blinkies-Cafe-pw.gif);
		width: 200px;
	}

	a, p, nav label, .section { /* font family for the headers, navigtion links, links, body text */
		font-family: var(--font-family);	
		font-size: 12px!important;
		font-weight: 1;
	}
	
	h2, h3, h5 {
		font-family: var(--font-family);
		font-size: 12px!important;
		font-weight: 1;
	}

	hr { /* the hr code. the hr is the horizontal line when you want to separate important info or add a break in your paragraphs*/
		height:2px;
		background: #002e63;
		border: none!important;
	}

	.blurbs,
	.mood,
	.contact,
	.profile .table,
	.blog-preview,
	.profile .table-section { /* this is where you adjust the borders and background */
		border: var(--borders) !important;
		background-color: rgba(0, 0, 0, 0.3) !important;
	}
	
	.friends {
		border: var(--borders) !important;
		background-color: rgba(0, 0, 0, 0.0) !important;
	}
	
	.comment-replies { /* this is the border around the replies */
		border:1px solid #702963;
	}

	.comment-reply:not(:first-child) { /* line in between comment replies*/
		border-top: 4px double #702963;
	}

	.comment-reply p {
		margin: 0;
		text-align: left;
	}

	td { /* your interest and comments table row background color */
		background-color: transparent!important;
	}

	main { /* the middle section of your profile background color*/
		background: transparent;
		border: transparent;
		outline: none;
	}

	.table-section { /* the interest table */
		border:none !important;
	}


	.profile .contact .heading, .profile .table-section .heading,.home-actions .heading, .profile .friends .heading { /* the header section of the boxes */
		background: rgba(0, 0, 0, 0.8); /* Black background with 80% opacity */
		border:none !important;
		font-family: 'Kumar One Outline', system-ui;
		font-size: 16px !important;
		font-weight: bold;
		color: #9457eb;
		text-align: center;
		text-shadow: 1px 1px 5px #4b0082;
		padding: 10px 25px 5px;
		border-radius: 2px;
		display: inline-block;
	}

	.profile-info { /* this is the box that says "Edit Info" when you're logged in, and to your friends it says "Profile Name is your friend". */
		background: rgba(0, 0, 0, 0.8) !important;
		border:none !important;
		font-family: 'Kumar One Outline', system-ui;
		text-align: center;
		padding: 10px 25px 5px;
		border-radius: 2px;
		display: inline-block;
	}

	.profile-pic img { /* adjusting images borders and adding styling if you want to */
		background: url('https://i.pinimg.com/originals/a6/ab/7b/a6ab7b6b75c343970e20d9dc8dbd0386.gif');
		background-size: 100%100%;
		padding: 7px;
		border-radius: 2px;
		display: inline-block;
	}

	.profile-pic {
		margin:auto;
		padding: 10px 25px 5px;
		border-radius: 2px;
		display: inline-block;
	}

	friends-grid{ /* you can add text-align:center; if you want your friends to be centered */
		text-align: center;
	}

	.profile .friends .person img:not(.icon) {
		border-radius: 25px !important;
		height:50px;
		width:50px;
		filter: grayscale(80%) blur(2px) brightness(50%) drop-shadow(0 0 5px #4b0082);
	}
	
	.profile .friends .person img:not(.icon):hover {
		filter: grayscale(0%) blur(0px) brightness(100%) drop-shadow(0 0 10px #9457eb);
	}

	.contact .inner a img { /* custom contact */
		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 me */
		content: "＋"
	}
	.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before { /* faves? */
		content: "❥"
	}
	.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before { /* chit chat */
		content: "➣"
	}
	.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before { /* forwardd */
		content: "»"
	}
	.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before { /* instant chat */
		content: "…"
	}
	.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before { /* block */
		content: "■"
	}
	.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before { /* group me */
		content: "☽"
	}
	.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before { /* report */
		content: "⊗"
	}

	.comments-table { /* this is the comments table scroll code. you can delete this if you don't want a scroll box */
		display: block;
		height: 600px!important;
		overflow-y: scroll;
		border:none !important;
		outline: none !important;
		border-radius: 2px;
		padding: 10px 25px 5px;
		display: inline-block;
		background: rgba(0, 0, 0, 0.5) !important;
		text-align: center;
	}

	.comments-table td:first-child * {
		color: var(--text);
	}
	
	.comments-table td {
		border: 2px solid black;
		padding:10px;
		border-radius: 0px;
		filter: grayscale(80%) brightness(50%) drop-shadow(0 0 5px #4B0082);
	}

	.comments-table td:hover {
		filter: grayscale(0%) brightness(100%) drop-shadow(0 0 5px #9457EB);
	}

	footer {
		background: transparent;
	}
	footer a {
		color: #4b0082;
	}
	footer p {
		color: #9457eb;
	}
	
	.blurbs .heading { /* hides the blurbs title */
		display:none;
	}

	/* edits the links section */
	.profile .left .table-section {
		padding-left: 20px;
	}
	
	.profile .left .table-section .inner a::before {
		margin-right: 5px;
		content: "Other \2726";
		padding-top: 1px;
		padding-right: 5px;
		display: inline-block;
		max-width: 130px;
		max-height: 17px;
		width: 100%;
		height: 100%;
		background-image: url("https://i.ibb.co/VtKzfGY/blinkies-Cafe-uy.gif"); /* button background image */
		background-size: 100% 100%;
		color: lightgrey;
		text-align: right;
		
	}

	.profile .left .table-section .inner a:hover::before {
		color: #9457EB;
	}

	.profile .left .table-section .inner {
		text-align: left;
		background-color: rgba(0, 0, 0, 0.3);
		border-radius: 2px;
		max-width: calc(100% - 20px);
		min-height: 17px;
	}
	
	.profile .left .table-section .inner a[href^="https://"] { /* manually add site referenced in https://spacehey.com/editlinks under 'website' behind the https:// */
		content: ""; /* manually input your own website name between the quotes to display */
	}

	.profile .left .table-section .inner a[href^="https://www.instagram.com"]::before {
		content: "Instagram \2726";
	}

	.profile .left .table-section .inner a[href^="https://x.com"]::before {
		content: "X \2726";
	}

	.profile .left .table-section .inner a[href^="https://www.youtube."]::before {
		content: "Youtube \2726";
	}

	.profile .left .table-section .inner a[href^="https://www.youtube."] {
		content: ""; /* manually input username between the quotes to display */
	}

	.profile .left .table-section .inner a[href^="https://www.tumblr.com"]::before {
		content: "Tumblr \2726";
	}

	.profile .left .table-section .inner a[href^="https://www.tumblr.com"] {
		content: ""; /* manually input username between the quotes to display */
	}

	.profile .left .table-section .inner a[href^="https://www.twitch.tv"]::before {
		content: "Twitch \2726";
	}

	.profile .left .table-section .inner a[href^="https://www.facebook.com"]::before {
		content: "Facebook \2726";
	}

	.profile .left .table-section .inner a[href^="https://www.tiktok.com"]::before {
		content: "TikTok \2726";
	}

	.profile .left .table-section .inner a[href^="https://github.com"]::before {
		content: "Github \2726";
	}

	.profile .left .table-section .inner a[href^="https://www.reddit.com/u"]::before {
		content: "Reddit \2726";
	}

	.profile .left .table-section .inner a[href^="https://www.snapchat.com/add"]::before {
		content: "Snapchat \2726";
	}

	.profile .left .table-section .inner a[href^="https://dribbble.com/"]::before {
		content: "Dribble \2726";
	}

	.profile .left .table-section .inner a[href^="https://www.pinterest.com"]::before {
		content: "Pinterest \2726";
	}

	.profile .left .table-section .inner a[href^="https://open.spotify.com/user"]::before {
		position: absolute;
		content: "Spotify \2726";
	}
	.profile .left .table-section .inner a[href^="https://open.spotify.com/user"] {
		content: ""; /* manually input username between the quotes to display */
	}

	.profile .left .table-section .inner a[href^="https://soundcloud.com"]::before {
		content: "Soundcould \2726";
	}

	.profile .left .table-section .inner a[href^="https://www.last.fm/user"]::before {
		content: "Last.fm \2726";
	}

	.profile .left .table-section .inner a[href^="https://www.deviantart.com"]::before {
		content: "DeviantArt \2726";
	}

	.profile .left .table-section .inner a[href^="https://www.behance.net"]::before {
		content: "Behance \2726";
	}

	.profile .left .table-section .inner a[href^="https://vsco.co"]::before {
		content: "VSCO \2726";
	}

	.profile .left .table-section .inner a[href^="https://ello.co"]::before {
		content: "Ello \2726";
	}

	.profile .left .table-section .inner a[href^="https://letterboxd.com"]::before {
		content: "Letterboxd \2726";
	}

	.profile .left .table-section .inner a[href^="https://BeRe.al/"]::before {
		content: "Be Real \2726";
	}

	.profile .left .table-section .inner a[href^="https://mastodon.social"]::before {
		content: "Mastodon \2726";
	}

	.profile .left .table-section .inner a[href^="https://www.threads.net"]::before {
		content: "Threads \2726";
	}

	.profile .left .table-section .inner a[href^="https://bsky.app/profile"]::before {
		content: "Bluesky \2726";
	}

	.profile .left .table-section .inner a[href^="https://linktr.ee"]::before {
		content: "Linktree \2726";
	}

	.profile .left .table-section .inner a[href^="https://producthunt.com/"]::before {
		content: "ProductHunt \2726";
	}

	.profile .left .table-section .inner a[href^="https://telegram.me"]::before {
		content: "Telegram \2726";
	}

	.profile .left .table-section .inner a[href^="https://www.patreon.com"]::before {
		content: "Patreon \2726";
	}

	.profile .left .table-section .inner a[href^="https://paypal.me"]::before {
		content: "Paypal \2726";
	}

	.profile .left .table-section .inner a[href^="https://www.buymeacoffee.com"]::before {
		content: "Buy Me a Coffee \2726";
	}

	.profile .left .table-section .inner a[href^="https://ko-fi.com"]::before {
		content: "Ko-fi \2726";
	}

	.url-info { /* hides url box */
		display:none;
	}

	.details-table td:first-child { /* hides general, music, etc titles */
		display: none;
	}

	.blurbs .inner .section:nth-child(2) { /* hides the "who I'd like to meet" */
		display:none;
	}

	.blog-preview h4 { /*hides blog names */
		display:none;
	}
	
</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 179 comments ( View all | Add Comment )

JayJay >:]	1791591458 Using Report Comment
baphomet blood	1787966226 USING !! Report Comment
Luma<3	1787610432 usinggg!! :D Report Comment
Lucinda Despair Queen	1786332536 Using this, but is there any way friends pfps from being with the blurry effect? Report Comment
Lee ☆	1783151245 I love love lovee this layout im def using Report Comment
Galaxy	1782702362 im sorry but im so confused 0_0 i just learned abt these codes Report Comment
emma claire	1781206324 using! thank you! Report Comment
𝓙𝓪𝓬𝓴 𝓣𝔀𝓲𝓼𝓽	1779438938 Using Report Comment
Qu!x_Th3_W@nd3rer_	1779405446 Using!! (this is so cool btw) Report Comment
Rivvvverrrr☆`°•~	1779069521 using! Report Comment
smoochy	1777180237 using! Report Comment
SOMNiVAR	1776020074 using Report Comment
◡◡ 。angel .ᐟ.ᐟ 𐂯、	1773716951 using ! Report Comment
⋆˚࿔ venus𝜗𝜚˚⋆	1773701048 Using!! Report Comment
suzie	1773230855 this is so cool! using it now Report Comment
XxToastyxX	1772420900 Thank u this is so cool I'm using rn :3 Report Comment
XxToastyxX	1772420900 Thank u this is so cool I'm using rn :3 Report Comment
DragunAce	1771897467 Using just slightly modified! Ty! Report Comment
StarsTheMutt	1771351598 BLESS!!! This layout is so cute, tysm!! Report Comment
Sharr <3	1770509635 using , thankyouu sm Report Comment