Periwinkle Glow

Tags: purple, cyan, bela

Description:

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

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 1: https://media.giphy.com/media/7zrin3TafdW1ph1TLL/giphy.gif
⇘ Profile Background 2: https://wallpaperaccess.com/full/3490459.jpg
⇘ Contact Images https://i.ibb.co/xKDsCwz9/LkXUxMr.gif
⇘ .url-info: https://i.pinimg.com/736x/00/1c/1d/001c1da60ac054b9d7039dee289bcc04.jpg
⇘ Blog Preview: https://i.ibb.co/LdfxQ3RC/on.gif
⇘ Image Before Blog Post: https://i.ibb.co/SXfhP1pR/JwARK9h.png
⇘ Friends Hover Image: https://media.giphy.com/media/NzSUEgbTWB7TW/giphy.gif
⇘ Comments: https://media.giphy.com/media/NzSUEgbTWB7TW/giphy.gif

[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=2185) -->

<style>
/* font */
@font-face { font-family: "MyLastBreathRegular-0WD8G"; src: url('//dl.dropbox.com/s/ccog5qawj7h6idr/MyLastBreathRegular-0WD8G.ttf'); }
</style>

<style>
/* google fonts separate from other font */
@import url('https://fonts.googleapis.com/css2?family=Kavivanar&display=swap');
</style>

<style>
body{
   background-color: #412977; 
   background: url('https://media.giphy.com/media/7zrin3TafdW1ph1TLL/giphy.gif'), url("https://wallpaperaccess.com/full/3490459.jpg");
   background-attachment: fixed;
   background-size: 20%, cover;
}
main{
    background: linear-gradient(to right, transparent, 5%, rgba(10,12,94,0.5), 95%, transparent);
    padding:20px;
}
.heading, .blog-preview h4{
    background-color: transparent!important;
    padding:10px!important;
    text-align: center;
}

/* fonts and color */
a{
    color: #795DB5!important;
    font-family: 'Kavivanar', cursive;
    font-size: 13px!important;
    text-shadow: 2px 2px 4px black;
}
.section, p, b, nav label, form button{ 
    color: MediumPurple;
    font-family: 'Kavivanar', cursive;
    text-shadow: 2px 2px 4px black;
    font-size: 13px!important;
}
.friends .person p, .count{ 
    color: plum!important;
    font-family: 'Kavivanar', cursive;
    font-size: 13px!important;
}
h1{
    color: plum;
    font-family: "MyLastBreathRegular-0WD8G";
    font-size: 30px!important;
    font-weight: 1;
    text-shadow: 2px 2px 4px black;
}
h2, h3, h4, h5{ 
    color: cyan!important;
    font-family: "MyLastBreathRegular-0WD8G";
    font-size: 20px!important;
    font-weight: 1;
    text-shadow: 2px 2px 4px black;
}
.mood P:nth-child(1) B, P:nth-child(2) B{ /* this changes the font for "View my" under the mood section */
    color: MediumPurple!important;
    font-family: "MyLastBreathRegular-0WD8G";
    font-size: 20px!important;
}
form button{ /* search button */
    background-color: transparent;
    border:none;
}
[id='q']{ /* search bar */
    border:1px solid DarkOrchid;
    background-color: transparent;
}
button{
    background-color: transparent;
    border: none;
    color: DarkOrchid;
    font-family: 'Kavivanar', cursive;
    text-shadow: 2px 2px 4px black;
}
nav .top, nav .links{
    background: linear-gradient(to right, transparent, 5%, rgba(10,12,94,0.5), 95%, transparent);
    text-align: center;
    color:DarkOrchid;
    text-shadow: 2px 2px 4px black;
}
nav img.logo{ filter: brightness(0) saturate(100%) invert(37%) sepia(69%) saturate(407%) hue-rotate(218deg) brightness(96%) contrast(97%)!important;}

.online{
    color: #795DB5!important;
    text-align: right;
    font-family: 'Kavivanar', cursive;
    text-transform: lowercase;
} 
.online img { filter: brightness(0) saturate(100%) invert(92%) sepia(7%) saturate(2302%) hue-rotate(8deg) brightness(99%) contrast(102%)!important;}

/* line that appears between links in navigation */

nav .links li:not(:last-child)::after,
footer .links li:not(:last-child)::after{
    content: " | ";
    color: plum;
    font-family: "MyLastBreathRegular-0WD8G"; /* you don't need a font here, I added this because the imported font changes certain symbols to hearts */
}

/* left side */

.mood{
    border: 5px double MediumPurple;
    margin-top:20px;
    margin-bottom:20px;
    padding:5px;
}
.contact{
    border: 5px double MediumPurple!important;
    border-spacing:5px;
}
.f-row{
    margin:0px!important; /* this margin keeps the links from popping out of contact box */
}

.contact .inner a img {
    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 to friends */
	content: url('https://i.imgur.com/LkXUxMr.gif');
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {
	/* add to favorites */
	content: url('https://i.imgur.com/LkXUxMr.gif');
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
	/* Send Message */
	content: url('https://i.imgur.com/LkXUxMr.gif');
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
	/* forward to friend */
	content: url('https://i.imgur.com/LkXUxMr.gif');
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {
	/* instant message */
	content: url('https://i.imgur.com/LkXUxMr.gif');
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {
	/* block user */
	content: url('https://i.imgur.com/LkXUxMr.gif');
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {
	/* add to group */
	content: url('https://i.imgur.com/LkXUxMr.gif');
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
	/* report user */
	content: url('https://i.imgur.com/LkXUxMr.gif');
}

/* url info */

.url-info{
    border: 5px double MediumPurple!important;
    margin-top:20px!important;
    margin-bottom:20px!important;
    background-image: url('https://i.pinimg.com/736x/00/1c/1d/001c1da60ac054b9d7039dee289bcc04.jpg');
    background-size: 100%100%;
    height: 180px;
}

/* interests table */

.table-section{
    border: 5px double MediumPurple!important;
    margin-bottom:20px!important;
}
.details-table{
    border-spacing: 0px 15px;
}
.details-table td{
    border-top: 1px solid DarkOrchid;
    border-bottom:1px solid DarkOrchid;
    background-color: transparent!important;
}

/* right side */

.profile-info{
    border: 5px double MediumPurple;
    margin-bottom:20px!important;
}
.blog-preview{
    border: 5px double MediumPurple;
    padding:10px;
    background: url('https://i.ibb.co/LdfxQ3RC/on.gif');
    background-repeat: repeat-x;
    background-size: 40%;
    background-position: top;
    text-align: center;
}

/* image before blog post */

.blog-preview :not(:first-child) {
    width: 110px;
    text-align: center;
    display: inline-block;
    padding-right: 15px;
}
.blog-preview :not(:first-child):before {
    content: "";
    display: block;
    width: 96px;
    height: 60px;
    background: url('https://i.ibb.co/SXfhP1pR/JwARK9h.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}
.blurbs .heading{display: none;}
.blurbs{
    border: 5px double MediumPurple;
    padding-top:5px;
}
.friends:not(#comments){
    border: 5px double MediumPurple;
    margin-bottom:20px;
}
.friends-grid{
    text-align: center;
}

.friends-grid img:not(.icon){
    padding:2px;
    background-color: plum;
}

/* hover over friends effect */

.profile .friends .person{
  transition: 0.5s;
}
.profile .friends .person{
    max-width: 25%;
    display: inline-grid;
    width: calc( 24% - 6px );
    padding: 10px;
}
.profile .friends .person img:not(.icon){
    width: calc( 100% );
}
.profile .friends .person:hover {
    border-radius: 0px;
    transform: scale(1.2);
    animation: wob .5s linear infinite;
    background: url('https://media.giphy.com/media/NzSUEgbTWB7TW/giphy.gif'), black;
    background-size: cover;
    box-shadow: 0 0 1rem plum;
    transition: 0.5s;
}
#comments{
    border: 5px double MediumPurple;
}
.comments-table{
    border:1px solid darkorchid;
    border-spacing: 10px;
    background: url('https://media.giphy.com/media/NzSUEgbTWB7TW/giphy.gif');
    background-color: rgba(0,0,0,0.5);
}
.comments-table td{
    background-color: transparent!important;
    border: 1px solid darkorchid;
}
.comments-table td:first-child img {
    clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);
    padding-left: 2px;
    padding-top: 2px;
    padding-bottom: 2px;
    background-color: plum;
}
.comment-replies{
    border:2px dotted darkorchid; /* this is the border around the replies */
} 
.comment-reply:not(:first-child){
    border-top: 2px dotted cyan; /* line in between comment replies*/
} 
footer{
    background: linear-gradient(to right, transparent, 5%, rgba(10,12,94,0.5), 95%, transparent);
    margin:0px;
}
hr{
    border: 1px solid cyan;
    width: 50%;
}
::-webkit-scrollbar {width: 12px;height: 12px;}
::-webkit-scrollbar-track {
    border-radius: 10px;
    width: 2px;
    border: 1px solid MediumPurple;}
::-webkit-scrollbar-thumb {background: plum;border-radius: 10px;}
::-webkit-scrollbar-thumb:hover {background: pink;}
</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 8 of 8 comments ( View all | Add Comment )

Mizu Reed	2 years ago This is so cute, Hope you don't mind me using it Report Comment
Xenon	2 years ago new to spacehey, this layout looks really nice hope you don't mind me using it ^^ Report Comment
lizzy rae	3 years ago this is so cute!! using xx Report Comment
♡Luna♡	3 years ago Cute Report Comment
domimaggots	3 years ago i absolutely love this !! thank you so much for sharing it !! i've edited the codes to match my style more but i'm currently a bit lost trying to figure out how to change the color of my border when i reply :0 do you happen to know how it works ?? Report Comment it looks amazing! as for the code its .comment-replies{border: 2px solid MediumPurple;} by Bela; 3 years ago; Report aaaa thank you so much !! by domimaggots; 3 years ago; Report
melancholyeyes	4 years ago i love this so so much!!! Report Comment I appreciate it thank you!! by Bela; 4 years ago; Report
nevershoutseaweed	4 years ago tysm this is precious! quick question tho how do i change the cute gif as my profile photo? or is that supposed to stay there cus i dont mind! but if possible to change it that'd be nice uwu Report Comment if you want a different one change the background of the .profile-pic but if you don't want a gif as a profile pic then just delete the code altogether :) by Bela; 4 years ago; Report thank you so much! by nevershoutseaweed; 4 years ago; Report
sylvia	4 years ago love it, thank u! Report Comment