Kawaii Wonderland Animated
Adorable kawaii wonderland theme perfect for cute and colorful profiles. Features an animated kawaii background GIF, soft pink color scheme (#f4bbd3), and playful design elements. This layout includes custom cursor, pink scrollbar, flipped RTL profile layout, emoji contact icons, black heart headers, rounded borders, gradient profile picture border, hover effects on friends, and scrollable comments. Created by SpaceHeyLayouts.com & TimeToGoBack.com. Perfect for kawaii enthusiasts who love cute Japanese aesthetics and want a fun, bubbly profile design.
📋 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: #f4bbd3;
border-radius: 10px;
border: 3px solid #fff;
}
</style>
<style>/* Profile Design Info */
:root {
--logo-blue: #f4bbd3;
--darker-blue: #f4bbd3;
--lighter-blue: #f4bbd3;
}
.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/kawaii-wonderland.gif');}
.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: #f4bbd3;
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: #f4bbd3;
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: #f4bbd3 !important;
text-shadow: none !important;
font-weight: bolder !important;
}
nav .links a:hover {
color: #db89cd !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 #f4bbd3;
background-color: #fff !important;
}
</style>
<style>/* Links */
.links {
color: #f4bbd3 !important;
font-weight: normal !important;
text-align: center !important;
letter-spacing: .5px !important;
margin-botto-9m: 0 !important;
}
.links a:hover {
color: #db89cd !important;
font-weight: normal !important;
letter-spacing: .5px !important;
}
a:hover, a:active, .blog-entry .kudos-btn:hover, .blog-entry .kudos-btn:active {
color: #db89cd;
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: #f4bbd3;
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(219,137,205), rgb(219,137,205)) 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: #f4bbd3 !important;
color: #fff !important;
text-align: center;
border-bottom: 2px solid white;
border-radius: 10px 10px 10px 10px;
}
.profile .blurbs .section h4{color: #f4bbd3; 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: #f4bbd3 !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: #f4bbd3 !important;}
.blog-preview p a:hover,
.blog-preview p a:active,
.blog-preview p a:focus{
color: #db89cd !important;
}
</style>
<style>/* Friends Info */
.profile .friends .heading{color: #ffffff;}
.profile .friends{text-align: center;}
.count {color: #f4bbd3; font-size: 12px;}
.profile .friends .person p{color: #f4bbd3 !important; font-size: 10px;}
.profile .friends .person p a: hover {color: #db89cd !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>