Retro Revival Design
Nostalgic throwback to the early 2000s web design with retro aesthetics. Features a vintage blue and black color scheme with custom cursor, rounded borders, and a retro revival background pattern. Perfect for those who love Y2K internet culture and want a clean, nostalgic profile design. Created by SpaceHeyLayouts.com & TimeToGoBack.com. This layout includes custom headers with black hearts, emoji contact icons, flipped profile layout, and special styling for all profile sections.
📋 Layout Code
<!-- (c) Layout created by SpaceHeyLayouts.com & TimeToGoBack.com -->
<style>/* Cursor and Scrollbar */
* {cursor: url('https://cur.cursors-4u.net/nature/nat-10/nat994.cur'), auto;}
/* Chrome, Edge, and Safari */
*::-webkit-scrollbar {width: 18px;}
*::-webkit-scrollbar-track {background: #fff;}
*::-webkit-scrollbar-thumb {
background-color: #5095b2;
border-radius: 10px;
border: 3px solid #fff;
}
</style>
<style>/* Profile Design Info */
:root {
--logo-blue: #5095b2;
--darker-blue: #5095b2;
--lighter-blue: #5095b2;
}
.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/retro-revival.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: #5095b2;
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: #5095b2;
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: #5095b2 !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 #5095b2;
background-color: #fff !important;
}
</style>
<style>/* Links */
.links {
color: #5095b2 !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: #5095b2;
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(80,149,178), rgb(138,150,162)) 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: #5095b2 !important;
color: #fff !important;
text-align: center;
border-bottom: 2px solid white;
border-radius: 10px 10px 10px 10px;
}
.profile .blurbs .section h4{color: #5095b2; 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: #5095b2 !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: #5095b2 !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: #5095b2; font-size: 12px;}
.profile .friends .person p{color: #5095b2 !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>