Blue Frames Simple

Tags: black, blue, frames, simple, 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 —

⇘ Image Border Top Left: https://i.imgur.com/6VvnJxG.png?1

⇘ Image Border Bottom Right: https://i.imgur.com/wLhHIUd.png?1

Layout Preview:

Preview:

click on the image for a larger preview

Code:

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

<style>
@import url('https://fonts.googleapis.com/css2?family=Cookie&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Style+Script&display=swap');
</style>

<style>
/* mobile code. don't delete */

@media (max-width: 600px){

.container{
    width:100%!important;
}
main .left{
    padding:0px!important;
}
main .right{
    padding:0px!important;
}
}
</style>

<style>
:root{
    --headers: #5473A7;
    --text: #5473A7; 
    --names: #5473A7;
    --links: #5473A7;
    --font-family: 'Style Script', cursive;
}
a, p, .section{
    font-family: var(--font-family);
    font-size: 16px!important;
    letter-spacing: .5px;
}
h2, h3, h4, h5{
    font-family: 'Cookie', cursive;
    font-size: 20px!important;
    letter-spacing: 1px;
}

h2, h3, h4, h5{color: var(--headers)!important;} /* headings*/
a{color: var(--links) !important;} /* color of links */
p, .count {color: var(--text)!important;} /* color of text */
.profile .friends .person p{color: var(--names)!important;} /* color of names, and friends counter */
nav label{color: var(--links)!important;} /* color of search */
.section h4 {color: var(--headers)!important;} /* aboutme & want2meet headings */
.details p:last-child{color: var(--text)!important;} /* where the last login and status appears */
hr{
    height:1px;
    background: var(--links);
    border: none;
}
.icon{font-size:12px;}

.container{
    width:80%;
}
main .left{
    padding:80px;
}
main .right{
    padding:80px;
}

body{
    background-color: black;
}
main {
  background-color: transparent;
}
.search-wrapper input[type=text] {
    background-color: transparent;
    border-top:none;
    border-left:none;
    border-right:none;
    border-bottom: 5px double var(--headers);
    color:var(--text);
    border-radius: 0px;
}
button{
    border-radius: 0px;
    border: 0px solid var(--text);
    font-family: var(--font-family);
    background-color: transparent;
    color:var(--text);
}

/* navigation */

nav .top, nav .links{
    background-color: transparent;
    text-align: center;
}
nav .top{
    color: var(--links);
}

/* this is the spacehey logo color.
you can change it at https://codepen.io/sosuke/pen/Pjoqqp */

nav img.logo{
    filter: brightness(0) saturate(100%) invert(47%) sepia(26%) saturate(807%) hue-rotate(179deg) brightness(87%) contrast(92%) !important;
    width:120px!important;
}
/* this is the line that appears between links in the header and footer.
you can add an emoji or symbol instead of the default line it has */

nav .links li:not(:last-child)::after,
footer .links li:not(:last-child)::after{
    content: " ║";
    color: var(--links);
}

/* left side */

h1{
    color:var(--headers);
    background-color: transparent;
    background-image: url('https://i.imgur.com/6VvnJxG.png?1'), url('https://i.imgur.com/wLhHIUd.png?1');
    background-position: top left, bottom right;
    background-repeat: no-repeat;
    background-size: 100px 130px;
    text-align: center;
    padding: 20px;
    font-family: 'Cookie', cursive;
    font-size: 30px!important;
    letter-spacing: 1px;
    margin-bottom: 30px!important;
}
.online{
    color: var(--links) !important;
    text-transform: lowercase;
    text-align: right;
} 
.online img{
    filter: brightness(0) saturate(100%) invert(47%) sepia(26%) saturate(807%) hue-rotate(179deg) brightness(87%) contrast(92%) !important;
}
.general-about .details{
    background-color: transparent;
    background-image: url('https://i.imgur.com/6VvnJxG.png?1');
    background-position: top left;
    background-repeat: no-repeat;
    background-size: 150px 200px;
    text-align: center;
    padding-bottom: 100px;
    margin-bottom:-10px!important;
}
.profile-pic{
    margin-left:27px!important;
    margin-top:27px!important;
    clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%);
}
.mood{
    background-color: transparent;
    background-image: url('https://i.imgur.com/wLhHIUd.png?1');
    background-position: bottom right;
    background-repeat: no-repeat;
    background-size: 150px 200px;
    padding: 30px;
    margin-bottom: 20px;
}
.contact a{text-transform: lowercase;}
.contact .heading{display:none;}
.contact{
    background-color: transparent;
    background-image: url('https://i.imgur.com/6VvnJxG.png?1'), url('https://i.imgur.com/wLhHIUd.png?1');
    background-position: top left, bottom right;
    background-repeat: no-repeat;
    background-size: contain;
    padding: 30px;
    border: none!important;
}

.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: "დ"
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {
	/* add to favorites */
	content: "დ"
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
	/* Send Message */
	content: "დ"
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
	/* forward to friend */
	content: "დ"
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {
	/* instant message */
	content: "დ"
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {
	/* block user */
	content: "დ"
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {
	/* add to group */
	content: "დ"
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
	/* report user */
	content: "დ"
} 

.url-info{display: none;}
.profile .table-section .heading{display:none;}
.table-section td, .table-section td:first-child{background-color:transparent;}
.details-table td:first-child{display:none;} /* hides general, music, etc titles */
.profile .table-section{
    background-color: transparent;
    background-image: url('https://i.imgur.com/6VvnJxG.png?1'), url('https://i.imgur.com/wLhHIUd.png?1');
    background-position: top left, bottom right;
    background-repeat: no-repeat;
    background-size: 150px 200px;
    padding: 30px;
    border: none!important;
}
.profile .left .table-section:last-child {display:none;}

/* right side */

/* this is the box that says "Edit Info" when you're logged in,
and to your friends it says "Profile Name is your friend". */

.profile-info {
    background-color: transparent;
    background-image: url('https://i.imgur.com/6VvnJxG.png?1'), url('https://i.imgur.com/wLhHIUd.png?1');
    background-position: top left, bottom right;
    background-repeat: no-repeat;
    background-size: 100px 130px;
    text-align: center;
    padding: 20px;
}

.blog-preview{
    background-color: transparent;
    background-image: url('https://i.imgur.com/6VvnJxG.png?1'), url('https://i.imgur.com/wLhHIUd.png?1');
    background-position: top left, bottom right;
    background-repeat: no-repeat;
    background-size: 150px 200px;
    text-align: center;
    padding: 20px;
}

/* blurbs section */

.blurbs .heading{display: none;}
.profile .blurbs .section:nth-child(1){
    background-color: transparent;
    background-image: url('https://i.imgur.com/6VvnJxG.png?1'), url('https://i.imgur.com/wLhHIUd.png?1');
    background-position: top left, bottom right;
    background-repeat: no-repeat;
    background-size: 150px 200px;
    text-align: center;
    padding:30px;
    margin-bottom:40px;
}
/* who I'd like to meet section */
.profile .blurbs .section:nth-child(2){
    background-color: transparent;
    background-image: url('https://i.imgur.com/6VvnJxG.png?1'), url('https://i.imgur.com/wLhHIUd.png?1');
    background-position: top left, bottom right;
    background-repeat: no-repeat;
    background-size: 150px 200px;
    text-align: center;
    padding:30px;
    margin-bottom:30px;
}

/* friends section */ 

.profile .friends .heading{
    background-color: transparent;
}
.profile .friends .heading h4:not(.profile #comments .heading h4){
    opacity: 0.0;
    letter-spacing: -100px;
}
/* use a different heading for your friends list */
.profile .friends .heading:not(.profile #comments .heading):after{
    content: "Be My Friend ~";
    color: var(--headers);
    font-family: 'Cookie', cursive;
    font-size:20px;
    font-weight: bold;
    letter-spacing: 1px;
    text-align: center;
}
.profile .friends .person p{
    text-transform: lowercase;
}
.friends{
    background-color: transparent;
    background-image: url('https://i.imgur.com/6VvnJxG.png?1'), url('https://i.imgur.com/wLhHIUd.png?1');
    background-position: top left, bottom right;
    background-repeat: no-repeat;
    background-size: 150px 200px;
    text-align: center;
    padding:10px;
    margin-bottom: 30px;
}
.friends-grid img:not(.icon){
    width: 90px;
    height:90px;
    clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%);
}

/* comments section */

.comment-replies{border:2px solid var(--headers);} /* this is the border around the replies */
.comment-reply:not(:first-child){border-top: 2px solid var(--links);} /* line in between comment replies*/

#comments{
    background-color: transparent;
    background-image: url('https://i.imgur.com/6VvnJxG.png?1'), url('https://i.imgur.com/wLhHIUd.png?1');
    background-position: top left, bottom right;
    background-repeat: no-repeat;
    background-size: 150px 200px;
    padding:20px;
}
.profile #comments .heading{
    background-color: transparent;
}
#comments > div.inner:nth-child(2) > p:first-child > b:first-child{
    background-color: transparent;
}
.comments-table{
    background-color: transparent;
    padding:6px;
    border:none;
    display: block;
    height: 300px;
    overflow-y: scroll;
}
.comments-table td, .comments-table td:first-child{
    background-color: transparent;
    border: none;
}
.comments-table td:first-child img{
    width: 90px;
    height:90px;
    clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%);
}

/* footer */
footer{
    background-color: transparent;
}
/* Scrollbar styles */
::-webkit-scrollbar {
    width: 3px;
    height: 5px;
}
::-webkit-scrollbar-track {
    border-radius: 0px;
    border: 1px solid transparent;
}
::-webkit-scrollbar-thumb {
    background: var(--headers); 
    border-radius: 0px;
}
::-webkit-scrollbar-thumb:hover {
    background: #CDC4E2;  
}
</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 23 comments ( View all | Add Comment )

tay (fxkk!)	1702944360 using! Report Comment
twistingGuts	1702333665 using! Report Comment
Sal>3<!	1695348976 using Report Comment
ニコル˚₊‧꒰ა ☆ ໒꒱ ‧₊˚	1683551418 ˖⁺‧₊˚♡˚₊‧⁺˖In love with this layout! ˖⁺‧₊˚♡˚₊‧⁺˖ Report Comment
Liliwyn	1683149670 new here and using this layout, thank you! Report Comment
tobi ^_^	1679877452 i love this !! Report Comment
jules	1662086092 So pretty! I love it ♡ Report Comment
jade ♡	1660389321 prettyyyy Report Comment
Karmic Pus Junipur	1651348261 LOVE IT Report Comment
☆erza☆	1647814447 how do i change the background image? Report Comment
SplitSoul	1642730185 trying to figure out how to put together a layout and love this style none of the old myspace generators seem to work though and only add the background and nothing else no transparency or font and border color change either Report Comment
♡Luna♡	1637263725 simple and cute Report Comment
Jess Kieffer	1637201915 love this Report Comment
Pagan Miss	1637183638 Love this. Thank you! Report Comment
sheisschelle	1637092354 ohh super cuteee Report Comment
Melrose	1636852337 I love this one, so beautiful! Report Comment
Dennica	1636339692 Love it, bringing back so many old good memories Report Comment
Pilgrim	1635925957 love how cute and simple this is! Easy to read as well Report Comment
sinister	1634310037 this layout is super cute thank you! Report Comment