Whispers in the Mist

Tags: black, simple, bela

Description:

Copy the code that's in the box below and test it out in the Profile Editor in Friends View.

I have the blog version for this layout HERE

I truly appreciate your comments and thank you so much for using this layout. To keep things organized and prevent spam, I only check My Layouts blog for messages. If you have any questions, feedback, concerns, or suggestions, please leave them there, and I will do my best to respond. I may take up to 2 weeks to reply sometimes so I apologize in advance. But you may also find the answer for any questions you have there if someone else already commented. 💜

Image Credits —
⇘ Profile Background: https://i.ibb.co/NL0q5jQ/ad.jpg
⇘ Online Icon: https://img.icons8.com/pulsar-line/20/crown.png
⇘ Contact Icon: https://img.icons8.com/ios/20/410e0a/magical-scroll.png
⇘ URL info div: https://i.pinimg.com/750x/d6/b6/f5/d6b6f53f82e33141dced59bdf2bb2a47.jpg

[last updated March.20.2025]

Preview:

click on the image for a larger preview

Code:

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

<style>
@import url('https://fonts.googleapis.com/css2?family=Monsieur+La+Doulaise&family=Qwigley&family=Tangerine&display=swap');
</style>

<style>
/* cursors */
a:hover{
 cursor: url('https://cur.cursors-4u.net/cursors/cur-7/cur613.cur'), auto!important;
}
*{
 cursor: url('https://cur.cursors-4u.net/cursors/cur-7/cur610.cur'), auto!important;
}
/* --- */

body{
    background-color: white;
    background-image: url("https://i.ibb.co/NL0q5jQ/ad.jpg");
    background-size: 100%100%;
    background-attachment: fixed;
    text-align: right;
}
.icon{
    font-size: 12px;
}
a, p, b, .count, nav label, .logout-btn{
    color:#410E0A!important;
    text-shadow: 1px 1px 4px #000;
    font-family: 'Qwigley', cursive;
    font-size: 20px!important;
    font-weight: 1;
}
h1{
    font-family: 'Monsieur La Doulaise', cursive;
    font-size: 40px!important;
    text-shadow: 1px 1px 3px #000;
    font-weight: 1;
}
h2, h3, h4, .section h4:not(.profile-info h3){
    color:#410E0A!important;
    text-shadow: 1px 1px 3px #000;
    font-family: 'Tangerine', cursive;
    font-size: 25px!important;
    text-align: center;
}
.heading{
    background-color: transparent!important;
}
/* navigation */
nav .top, nav .links{
    background-color: transparent;
}
nav .top{
    color:black;
}
nav .links{
    text-align: center;
}
nav .links a{
    text-shadow: none;
}
/* change the color at https://codepen.io/sosuke/pen/Pjoqqp */
nav img.logo{
    filter: brightness(0) saturate(100%) invert(13%) sepia(10%) saturate(4691%) hue-rotate(323deg) brightness(99%) contrast(108%) drop-shadow(1px 1px 3px #000)!important;
    height:30px;
}
/* search box and button */
.search-wrapper input[type=text] {
    background-color: transparent!important;
    border:none!important;
    border-radius: 3px;
    box-shadow: 0px 0px 5px black;
    color:#410E0A!important;
}
nav button{
    background-color: transparent;
    border:none;
    color:#410E0A!important;
    text-shadow: 1px 1px 4px #000;
    font-family: 'Qwigley', cursive;
    font-size: 20px!important;
    font-weight: 1;
}
/* ---- */

main{
    background-color: transparent;
}
.profile-pic img{
    border-radius:10px;
    box-shadow: 0px 0px 10px black;
    outline: 1px solid black;
    outline-offset: -5px;
}

/* custom online */
.online{
    font-family: 'Tangerine', cursive;
    text-transform: lowercase;
    letter-spacing: 1px;
}
.online img{
    content:url('https://img.icons8.com/pulsar-line/20/crown.png');
    filter:drop-shadow(1px 1px 3px #000);
    height: 1.3em;
    animation: none;
    vertical-align: middle;
}
/* contact */
.f-row{
    margin:0px!important;
}
.contact .inner{
    padding-right:10px;
}
.contact{
    border:none!important;
}
/* custom contact icons */
.contact .inner a img {
 font-size: 0;
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(1) a:after {
	/* add to friends */
	content: url("https://img.icons8.com/ios/20/410e0a/magical-scroll.png");
	filter:drop-shadow(1px 1px 3px #000);
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:after {
	/* add to favorites */
	content: url("https://img.icons8.com/ios/20/410e0a/magical-scroll.png");
	filter:drop-shadow(1px 1px 3px #000);
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:after {
	/* send message */
	content: url("https://img.icons8.com/ios/20/410e0a/magical-scroll.png");
	filter:drop-shadow(1px 1px 3px #000);
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:after {
	/* forward to friend */
	content: url("https://img.icons8.com/ios/20/410e0a/magical-scroll.png");
	filter:drop-shadow(1px 1px 3px #000);
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:after {
	/* instant message */
	content: url("https://img.icons8.com/ios/20/410e0a/magical-scroll.png");
	filter:drop-shadow(1px 1px 3px #000);
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:after {
	/* block user */
	content: url("https://img.icons8.com/ios/20/410e0a/magical-scroll.png");
	filter:drop-shadow(1px 1px 3px #000);
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:after {
	/* add to group */
	content: url("https://img.icons8.com/ios/20/410e0a/magical-scroll.png");
	filter:drop-shadow(1px 1px 3px #000);
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:after {
	/* report user */
	content: url("https://img.icons8.com/ios/20/410e0a/magical-scroll.png");
	filter:drop-shadow(1px 1px 3px #000);
}
/* url box */
.url-info{
    background-image: url("https://i.pinimg.com/750x/d6/b6/f5/d6b6f53f82e33141dced59bdf2bb2a47.jpg");
    background-size: 100%100%;
    border:none!important;
    border-radius:10px;
    box-shadow: 0px 0px 10px black;
    outline: 1px solid black;
    outline-offset: -5px;
    height:400px;
}
.url-info p{
    opacity: 0.0;
}
.table-section{
    border:none!important;
}
.details-table{
    border-spacing: 10px;
}
.details-table td{
    background-color: rgba(0,0,0,0.2)!important;
    box-shadow: 0px 0px 5px black;
    border-radius: 10px;
    padding: 5px;
}

/* right side */
.profile-info{
    border:none;
    padding:0px;
    justify-content: right;
}
.profile-info h3, .profile-info p{
    margin:0px;
    padding: 0px;
    font-family: 'Qwigley', cursive;
    font-weight: 1;
    text-shadow: 1px 1px 4px #000;
}
.blog-preview h4{
    text-align: right;
    font-weight: 1;
    font-size: 23px!important;
    margin:0px;
}
.blurbs .heading h4{
    font-weight: 1;
}
.friends img:not(.icon){
    border-radius:10px;
    box-shadow: 0px 0px 10px black;
    outline: 1px solid black;
    outline-offset: -5px;
}
.friends .heading a{
    margin:5px; /* fixes the view all link */
}
/* comments table */
.comments-table{
    border:none;
    border-spacing:10px 20px;
}
.comments-table td{
    background-color: rgba(0,0,0,0.2)!important;
    border:none;
    box-shadow: 0px 0px 5px black;
    border-radius: 10px;
}
.comment-replies{
    border:none;
    box-shadow: 0px 0px 5px black;
    border-radius: 10px;
    margin:10px;
}
/* line in between comment replies*/
.comment-reply:not(:first-child){
    border-top: 1px dotted black;
}
.comments-table button{
    background-color: transparent;
    border:none;
    color:#410E0A!important;
    text-shadow: 1px 1px 4px #000;
    font-family: 'Qwigley', cursive;
    font-size: 20px!important;
}
/* footer */
footer{
    background-color: transparent;
}
footer p, footer a{
    color:#B9B9B7!important;
}
</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 7 of 7 comments ( View all | Add Comment )

majorofda534	1744657399 using! Report Comment
maryy¬_¬	1741267127 Using:) Report Comment
yvii <3	1739647583 using!!!!! Report Comment
𝖓𝖆𝕿𝖚 ♰⠀ 𓈒	1739018041 using!!! Report Comment
Neela	1737572551 usinn Report Comment
MINT	1722287752 it is really cool omg Report Comment
.ihrthell0k1tty	1701651139 Why is no one using this!!! Report Comment