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

Navsie	1743413733 THIS IS SOO COOL IM USING IT TYY Report Comment
SP4C3SH0TR	1742426690 THIS IS RLLY COOL IM USING IT THANK YOU SO MUCH <3 Report Comment
vampirax_	1742235007 really cool layout! im gonna use it :3 Report Comment
CR0XX3Z	1742084795 Using! This looks amazingg Report Comment
ναℓєηтιηє !! ⤜♡→ cяєѕcєηт.	1741885374 Used, thank you so much for sharing. :) Report Comment
xeph	1741717315 using Report Comment
_xxBl0ødy_kiTtYxx_	1741355167 using Report Comment
annanaan	1740840533 using Report Comment
Pastelloz (#1 wheeljack fan)	1740330610 using Report Comment
DarkAngel92	1740187111 Using!! Report Comment
0ZZI3	1740156895 omg using !!!! Report Comment
allpanicnodisco	1739812006 using! Report Comment
debzie	1739424456 usinggg Report Comment
Mav	1739374111 Using! Report Comment
Lana	1739324544 using!! Report Comment
Haruko Aizawa	1739227974 using!! Big thank you :D Report Comment
RaghadWho ♡	1738843186 using. thanks! Report Comment
Toaster!	1738162187 using! Report Comment
Elena	1738016577 using ^^ Report Comment
Martta	1737761777 Using! Report Comment