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

★Jae★	1755417738 Using Report Comment
nick	1755058556 using Report Comment
Mizu Reed	1680057469 This is so cute, Hope you don't mind me using it Report Comment
Xenon	1670355874 new to spacehey, this layout looks really nice hope you don't mind me using it ^^ Report Comment
lizzy rae	1642851866 this is so cute!! using xx Report Comment
♡Luna♡	1636938545 Cute Report Comment
domimaggots	1625465707 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; 1625602089; Report aaaa thank you so much !! by domimaggots; 1625618777; Report
melancholyeyes	1614924147 i love this so so much!!! Report Comment I appreciate it thank you!! by Bela; 1616304015; Report
nevershoutseaweed	1614834138 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; 1614842431; Report thank you so much! by nevershoutseaweed; 1614907927; Report
sylvia	1614714412 love it, thank u! Report Comment