Purple and Cyan

Tags: purple, cyan, bela

Description:

Feel free to customize as you wish.
If you have any questions, please comment below or go to my blog here.
✧ I appreciate your comments ٩(๑❛ᴗ❛๑)۶

Background 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.imgur.com/LkXUxMr.gif

    ⇘ .url-info: https://i.pinimg.com/736x/00/1c/1d/001c1da60ac054b9d7039dee289bcc04.jpg

    ⇘ Blog Preview: https://img.wattpad.com/312d78a38fa8e83b0dd5d648b3909ee27d875a32/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f776174747061642d6d656469612d736572766963652f53746f7279496d6167652f5a315039556b59395662614573673d3d2d3932313236373337332e313632323136396532373939613238383839393933333734383536332e676966?s=fit&w=720&h=720

    ⇘ Image Before Blog Post: https://i.imgur.com/JwARK9h.png

    ⇘ Friends Hover Image: https://media.giphy.com/media/NzSUEgbTWB7TW/giphy.gif

    ⇘ Comments: https://media.giphy.com/media/NzSUEgbTWB7TW/giphy.gif

Layout Preview:

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://img.wattpad.com/312d78a38fa8e83b0dd5d648b3909ee27d875a32/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f776174747061642d6d656469612d736572766963652f53746f7279496d6167652f5a315039556b59395662614573673d3d2d3932313236373337332e313632323136396532373939613238383839393933333734383536332e676966?s=fit&w=720&h=720');
    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.imgur.com/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	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