📄 Layout
Kawaii Butterflies

ID #196 · Added 2025-11-01
Categories:
Cute Kawaii Pink
Colors:
Pink Purple
Creator: AshBo
HTML/CSS Code

Copied!
<!-- (c) Layout created by SpaceHeyLayouts and TimetoGoBack.com -->

<style>
@import url('https://fonts.googleapis.com/css2?family=Balsamiq+Sans:wght@400;700&family=Chicle&display=swap');
</style>
<style>


/*PFP BORDER AND ANIMATION*/
.profile-pic img {
    padding: 6px;
    width: 200px;
    margin-right: 10px;
    margin-left: 10px;
    border-radius: 150px;}
.profile-pic img {
    margin: 0px;
    width: 200px;
    height: 200px;
    background: #ceaefd;
    border: 4px double #ffffff;}
img:hover {
  animation: shake 0.5s;
  animation-iteration-count: infinite;}
@keyframes shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }}

/*BACKGROUND IMAGE*/
    body
        {background-image: url(https://assets.spaceheylayouts.com/backgrounds/kawaii-butterflies.png);}


body {
    text-transform: lowercase;
    image-rendering: pixelated;
    line-height: 1.225;}

main .left, main .right {
    padding: 20px;}

.online {
    content: url(https://64.media.tumblr.com/0056fc98aeec0f7fdf715d1388dce5f5/286321d930b41110-5f/s75x75_c1/039b240d19ff1fd49661a717f46f1b3942a56394.gifv);}

.profile .blurbs .inner, .profile .friends .inner, .blog-entry .comments .inner, .bulletin .comments .inner, ul.links {text-align: center;}


div.table-section {display: none !important;}





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


.profile .contact .heading, .profile .table-section .heading, .home-actions .heading {background-color: #ffffff;}

.profile .blurbs .heading, .profile .friends .heading {  border-radius: 25px;
  background-color: #Ffdbe5;
  padding: 3px;
  text-align: center;
  color: #fff;}

footer {background-color: #ceaefd;
    width: 100%;
    border: 6px solid #ffffff;
    margin: 10px 0;
    border-radius: 0px 20px;}

a {color: #ceaefd;}
    a:hover { 
        text-transform: uppercase;
        text-decoration-style: none;
        color: #Ffdbe5!important;
        border: none;}

.profile .blurbs .section h4, .count, .profile-info {color: #ceaefd;
      font-weight: bold;
  text-shadow: 2px 2px #fed9e0;}

* {
    cursor: url(https://cur.cursors-4u.net/others/oth-6/oth589.cur), auto !important;}

.blog-preview {text-align: center;}

ul.links {background-color: #ceaefd;}
div.top {background-color: #fed9e0;}
nav .top a, label {color: #ceaefd;
font-weight: bold;}

footer .links {background-color: transparent !important;}




profile .contact {
margin-bottom: 20px;}

.profile .contact, .profile .url-info, .profile .table-section, .home-actions {
    width: 100%;
    border: 6px solid #ffffff;
    margin: 4px 0;
    border-radius: 0px 20px;
   background-color: #ffffff;
}

div.url-info {display: none !important;}
.friends b{font-weight: normal !important;}
.friends-grid{display: none !important;}

footer a {color: #fff;}

div.top{
border: 6px solid #ffffff;
    margin: 10px 0;
    border-radius: 0px 20px;}

ul.links, main {border-radius: 25px;     margin: 10px 0;}

*, ul.links {text-shadow: 0px 0px 2px #FF8CBA;}

* {font-family: 'Balsamiq Sans', cursive;}

.profile h1 {font-family: 'Chicle', cursive !important; font-size: 37px; text-align: center;}
.profile h1::after {content: " 💎"; font-size: 30px !important;}
.profile-info {border: transparent !important;}


button, input {background: rgba(255, 255, 255, 0.84) !important; border: 2px solid #fed9e0; border-radius: 20px 20px 20px 20px;}

.profile h1 {
 text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000, 0 0;
 color: #ffffff;
 text-transform: uppercase !important;}
</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>