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

Fallen7n7Angel	1755994314 Using (˶˃⤙˂˶) Report Comment
𓍼 𝓕𝓵𝓪𝔀 . . ¿	1755109963 i use Report Comment
Cass	1755108968 Using!!! Report Comment
molly	1754716727 using! Report Comment
boogayman	1754499018 Using :3 Report Comment
MAGZ	1754465393 using Report Comment
jiji	1754449758 using! Report Comment
Lynnzyy☆`°•~	1754325530 using!! tyy :) Report Comment
✮⋆˙𝑴𝒆𝒐𝒘 ฅ(•- •マ˖ ࣪✧˚	1753549474 First layout I'm using :3 The notes in the code are really helpful since I don't understand anything about codes so thank you so much!1!! Report Comment
Face_Smiles	1753025165 using this Report Comment
Frann	1752761828 Using!! Report Comment
✩°｡⋆ 𖦹｡˚ ⋆ ✮KIRA✮ ⋆ ˚｡𖦹 ⋆｡°✩	1752607605 AHHHH THIS IS SOOOO COOOLLL USING Report Comment
RetroSky	1752413270 Thx! Used the code as a starting point Report Comment
wondailas	1752328990 using Report Comment
Susy🖤	1752119575 Totes using Report Comment
kwersyy	1751328331 using Report Comment
M0on_gl1ttr	1750058202 using Report Comment
Saturn	1750035725 Using ✨ Report Comment
Gwen	1749863303 Using, so cute!! Report Comment
Lunar	1748301169 Using! Report Comment