Aesthetic Vibes - Space Hey Layouts

← Back to All Layouts
A stunning aesthetic vibes layout with dreamy pink gradients (#ff93e1), custom diamond emoji headers, emoji contact icons, smooth hover animations, flipped profile design, custom cursor, styled scrollbar, rounded buttons, decorative Rugakile font, circular profile picture with pink gradient frame, custom online badge, and scrollable comments section. This layout creates a modern, aesthetic atmosphere perfect for expressing your creative side. Created by SpaceHeyLayouts.com & TimeToGoBack.com. Simply copy the code below and paste it into your SpaceHey profile's CSS section.
📋 Layout Code

<!-- (c) Layout created by SpaceHeyLayouts.com & TimeToGoBack.com -->

<style>/* Cursor and Scrollbar */
	* {cursor: url('https://cur.cursors-4u.net/nature/nat-11/nat1021.cur'), auto;}
	
	 /* Chrome, Edge, and Safari */
	*::-webkit-scrollbar {width: 18px;}

	*::-webkit-scrollbar-track {background: #fff;}

	*::-webkit-scrollbar-thumb {
    background-color: #ff93e1;
    border-radius: 10px;
    border: 3px solid #fff;
	}
</style>

<style>/* Profile Design Info */
    :root {
        --logo-blue: #ff93e1;
        --darker-blue: #ff93e1;
        --lighter-blue: #ff93e1;
	}

    .top {border-radius: 25px 25px 0 0;}

    main {
        letter-spacing: .2px !important;
        border-radius: 25px 25px 25px 25px !important;
	padding: 0px 0px;
        }

	* {font-family: Monospace;}

	body
        {background: url(https://www.spaceheylayouts.com/backgrounds/aesthetic-vibes.png);}
     
    .profile {
        background-color: #fff; 
        color: #000; 
        border-radius: 0 0 25px 25px !important;
font-size: 12px !important;
        }

    .container {
        border-radius: 25px;
        overflow: hidden;
        margin-top: 30px;
        padding: 10px;
        width: 860px;
        }


    footer {
        border-radius: 15px;
        background: #ff93e1;
        color: #fff !important;
        display: block !important;
    }
	
	footer .links a{color: #fff !important; font-size: 9px !important;}
	
    footer .links a:hover{color: #000 !important; font-weight: bolder !important;}

footer .copyright a{color: #ffffff !important; font-size: 8px !important;}
	
	.profile .contact,
    .profile .url-info,
    .profile .table-section,
    .home-actions {
        border: none;
    }
	
	a.addme {
        font-size: 2rem;
        font-weight: bold;
        margin-bottom: 15px;
        display: block;
    }
</style>

<style>/*Search Users Box (Background Color/Background Image)*/
    .top input{border-radius: 15px 15px 15px 15px;}
</style>

<style>/*Buttons (Background Color/Background Image)*/
    button{
    border-radius: 25px 25px 25px 25px !important;
	color: #ff93e1;
	font-weight: bold;
    background-color: white !important;
	}
</style>

<style>/* Navigation */
    nav {
        border-radius: 15px 15px 0 0;
        overflow: hidden;
        }

    nav .links li:not(:last-child)::after, footer .links li:not(:last-child)::after {
        content: " • ";
        color: #000;
        font-size: 9px !important;
        }

    nav .links a{
        color: #ff93e1 !important;
        text-shadow: none !important;
        font-weight: bolder !important;
        }
    
    nav .links a:hover {
    	color: #8a96a2 !important;
    	text-decoration: none;
        font-weight: bolder !important; 
        }
    
    nav .links {
        text-align: center;
        padding: 3.5px 3.5px 3.5px 3.5px;
	font-family: monospace !important;
        font-size: 4px !important;
        border: none;
        border-bottom: 3px ridge #ff93e1;
        background-color: #fff !important;
        }
</style>
    
<style>/* Links */
    .links {
	color: #ff93e1 !important;
	font-weight: normal !important;
	text-align: center !important;
	letter-spacing: .5px !important;
	margin-botto-9m: 0 !important;
	}

    .links a:hover {
	color: #8a96a2 !important;
	font-weight: normal !important;
	letter-spacing: .5px !important;
	}

    a:hover, a:active, .blog-entry .kudos-btn:hover, .blog-entry .kudos-btn:active {
    	color: #8a96a2;
    	text-decoration: none;
	}
</style>

<style>/* Flip Profile */
    .profile{direction: rtl;}
.blog-preview{direction: ltr; text-align: center;}
    .blurbs{direction: ltr;}
.profile-info {display: none;}
    .friends{direction: ltr;}
    .general-info{direction: ltr;}
.profile .left h1{direction: ltr;}
    .details-table{direction: ltr;}
    .profile .table-section .heading{direction: ltr;}
    .details p{direction: ltr;}
	.mood{direction: ltr; text-align: right;}
.contact .heading {display: none !important;}
.contact {direction: ltr; text-align: center;}
.url-info{display: none;}
</style>

<style>/* Profile Name, Profile Picture, General Details, and Contact */
    @import url('https://fonts.cdnfonts.com/css/rugakile');
    .profile .left h1 {
	font-family: 'rugakile', cursive; 
	font-size: 50px !important; 
	font-weight: 700 !important;
	direction: ltr; 
	text-align: center; 
	color: #ff93e1; 
	letter-spacing: 1px;
	}

    .profile h1 {
	margin: 0 0 5px 0;
	font-family: !important;
	font-size: !important;
	font-weight: !important;
	text-align: center !important;
	padding-bottom: 5.5px !important;
	padding-top: 5.5px !important;
	}

    .general-about {
    	padding: 10px 10px 0 10px !important;
    	text-align: center !important;
    	position: relative;
    	margin-top: 5px;
    	margin-bottom: 0;
	}

    .general-about .profile-pic img {
    	max-width: 160px;
    	max-height: 160px;
	}

    .general-about .profile-pic {
    	display: block;
   	float: left;
    	margin: 0 15px 8px 0;
    	height: 160px;
	}

    .general-about .profile-pic img {
    	border-width: 10px; 
    	border-style: solid; 
    	border-image: linear-gradient(45deg, rgb(255,174,225), rgb(255,174,225)) 1; 
    	}

    .profile-pic {
    	width: 100% !important;
    	border-radius: 100px;
    	overflow: hidden;
	}

    .online {visibility: hidden;} 
    .online img { 
        content: url("https://ct.pimp-my-profile.com/online/26.gif"); 
        animation-name: none; 
        visibility: visible; 
        height: 15px; 
        width: 70px;
        display: block;
        margin-left: auto;
        margin-right: auto;
        }

    .mood {
    	text-align: center !important;
    	margin-top: 0 !important;
    	margin-bottom: 10px !important;
    	padding-top: 5px !important;
    	padding-bottom: 5px !important;
    	}

    .profile .contact {border: none;}
</style>

<style>/* Contact Icons */
    .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 Profile */
	content: "🚩"
    	}
</style>   

<style>/* Headers Colors */
    .heading {
        padding: 5px 0 !important;
        margin-top: 15px;
        margin-bottom: 10px;
        background-color: #ff93e1 !important;
        color: #fff !important;
        text-align: center;
        border-bottom: 2px solid white;
        border-radius: 10px 10px 10px 10px;
    }
	
	.profile .blurbs .section h4{color: #ff93e1; font-weight: 800;}
</style>

<style>/* Interests Table Info */
    table.details-table {border-collapse: collapse;}
    table.details-table td {background-color: #fff !important;}
.details-table td:first-child {color: #ff93e1 !important; font-weight: 800;}
</style>

<style>/* Blog Info */
.blog-preview h4 {color: #000;}

    .blog-preview p {
        background-color: none;
        padding: 5px 10px;
        border-radius: 10px;
        color: #000;
        font-weight: bolder;
        }
	
    .blog-preview p a{color: #ff93e1 !important;}
	
    .blog-preview p a:hover,
    .blog-preview p a:active,
    .blog-preview p a:focus{
        color: #8a96a2 !important;
        }
</style>
    
<style>/* Friends Info */
    .profile .friends .heading{color: #ffffff;}
    .profile .friends{text-align: center;}
    .count {color: #ff93e1; font-size: 12px;}
    .profile .friends .person p{color: #ff93e1 !important; font-size: 10px;}
.profile .friends .person p a: hover {color: #8a96a2 !important;}
	.profile .friends .person img {border-radius: 500px;}

    .profile .friends .person img:not(.icon) {
        border-radius:15px;
        box-shadow: 1px 0px 7px 2px rgba(80,149,178, 0.71);
        border: 2px solid rgba(255,255,255, 1);
    }
    
    .profile .friends .person img:not(.icon):hover {
        transform: scale(1.1);
        transition: 0.5s ease;
    }
    
    .profile .friends .person img:not(.icon) {transition: 0.5s ease}
</style>

<style>/* Comments Info */
.profile .friends p {font-size: 11px;}

    table.comments-table td {
        background-color: #fff !important;
        border: none;
    }

    .comments-table td:first-child img {
        width: 80px;
        border-radius: 500px;
    }
	
	.comments-table{
        display: block;
        height: 450px;
        overflow-y: scroll;
        border: none;
    }
</style>

<style>/* Custom Profile Headers */
.contact .heading{ font-size:0; }
.contact .heading:before{ content: "💎 Contact Me 💎"; font-size:1rem; font-weight: bolder; }

.w-40 .table-section:nth-last-child(2) .heading h4{ font-size:0;}
.w-40 .table-section:nth-last-child(2) .heading:before{content: "💎 What I Like 💎"; font-size:1rem; font-weight: bolder; }

.w-40 .table-section:last-child .heading h4{ font-size:0; }
.w-40 .table-section:last-child .heading:before{ content: "💎 Follow Me 💎"; font-size:1rem; font-weight: bolder; }

.blog-preview h4{ font-size:0; }
.blog-preview h4 a{font-size:.8rem;margin-left:5px; }
.blog-preview h4:before{ content: "💎 My Blogs 💎"; font-size:1rem; font-weight: bolder; }

.blurbs .heading{ font-size:0; }
.blurbs .heading:before{ content: "💎 My Life 💎"; font-size:1rem; font-weight: bolder; }

.blurbs .inner .section:nth-child(1) h4{ font-size:0; }
.blurbs .inner .section:nth-child(1) h4:before{ content: "About Me:"; font-size:.9rem; }

.blurbs .inner .section:nth-child(2) h4{ font-size:0; }
.blurbs .inner .section:nth-child(2) h4:before{ content: "Who I'd Like To Meet:"; font-size:.9rem; }

.friends .heading{ font-size:0; }
.friends .heading:before{ content: "💎 The Friends 💎"; font-size:1rem; font-weight: bolder;}

.friends#comments .heading{ font-size:0; }
.friends#comments .heading:before{ content: "💎 Leave Me A Comment 💎"; font-size:1rem; font-weight: bolder;}
</style>


<a href="https://www.spaceheylayouts.com" target="_blank"><div style="position:fixed; top:0; left: 0; z-index: 9; background-color: #000; width: 125px; height: 16px;">SpaceHeyLayouts.com</div></a>