Pink Cherry Blossom Cat Layout!

Tags: pink, cat, kawaii, simple, cherry blossom, kitten, animation, autoplay, cute

Description:

Includes: Music autoplay, cat loading screen, cherry blossom overlay, cat cursor, online blinkie status, circular pfp and friend pfps, transparent nav bar/links, etc! Anyone can use just let me know in the comments :3

Preview:

click on the image for a larger preview

Code:

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

<style>

/*GRADIENT HEADINGS+BORDERS*/
.profile .table-section, .profile .url-info, .profile .contact {
    border: 2px solid white;
border-radius: 5px;
box-shadow: 0px 0px 7px 5px #ff61a8;
}
.profile .table-section .heading, .profile .contact .heading {
   color: white;
   text-shadow: -1px 1px 1px pink;
   background: linear-gradient(#ff61a8, white);
   border-bottom: 2px solid white;
   border-radius: 5px;
}
.profile .blurbs .heading, .profile .friends .heading{
   color: white;
   text-shadow: -1px 1px 1px white;
   background: linear-gradient(#ff61a8, white);
   border: 2px solid white;
   border-radius: 5px;}

/*HEADINGS FONT*/
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
   h1, h2, h3, h4{font-family: 'Press Start 2P', cursive;
   color: white;
   text-shadow: 2px 2px 3px #FFFFFF, 0 0 25px #c167b5, 0 0 5px #FFFFFF}

/*BODY FONT*/
@import url('https://fonts.googleapis.com/css2?family=Cedarville+Cursive&display=swap');
   .table-section td, body{font-family: 'Cedarville Cursive', cursive;
   color: white;
   text-shadow: 2px 2px 3px #FFFFFF, 0 0 25px #FFFFFF, 0 0 5px white;}

/*BODY TEXT SETTINGS*/
main p{
    letter-spacing: 2px;
    font-weight: 700; 
    line-height: 1.5;}

/*FONT COLOURS*/
p{color: white}
.count {color: white}
.profile .blurbs .section h4{color: #ff61c2}
.contact a{color: white}
.mood a, .mood p, .mood{#ff61c2}

/*VERY BACK BACKGROUND*/
body{
   background: url(https://i.ibb.co/Mf3h7g2/XaeHmEy.gif);  
   background-size: 50%}

/*PROFILE BCKGROUND*/
.profile{
   background-image: url(https://i.ibb.co/hmrdgSh/uS7w1Am.gif);
   background-size: 100%;
   border-radius: 12px;
   box-shadow: 0px 0px 9px 7px #ff61a8;
   color: white}

/*FOOTER*/
footer {
border-radius: 15px;
background-image: url(https://i.ibb.co/0Fhmx4k/XvI21K4.gif);
background-size: 50%;
box-shadow: 0px 0px 9px 7px #ff61a8}

/*CIRCULAR PFP*/
.profile-pic {
   border-radius: 500px;
   overflow: hidden;
   box-shadow: 0px 0px 7px 5px white}

/*TOP BAR*/
.top{
   background:  !important;
   background-image: url("https://i.ibb.co/BNHZ0j0/9u7dMUp.gif") !important;
   background-size: cover !important;
   border-radius: 15px;
   box-shadow: 0px 0px 9px 7px #ff61a8}

/*LOGO*/
.logo{ 
   filter: sepia(100%) hue-rotate(200deg) saturate(100);
   box-shadow: 0px 0px 7px 5px pink}

/*TRANSPARENT NAV BAR*/
.links{opacity: 0.01}

/*FRIENDS NAMES COLOUR*/
.friends-grid a{color: #ff61a8}

/*FRIENDS BACKGROUND*/
.friends{
   background-image: url(https://i.ibb.co/YRH3nh3/Z3V70wm.gif);
   border-style:Double; 
   border-width:6px; 
   border-radius: 5px;
   border-color: white}

/*TRANSPARENT INTERESTS GRID*/
:root{
   --even-lighter-blue: pink, opacity:0.01;
   --lightest-blue: pink, opacity:0.01;

/*FRIENDS-GRID*/
--light-orange: linear-gradient(#ff61a8, white);
--even-lighter-orange: linear-gradient(#ff61a8, white)}

.friends-grid img{ 
 border-radius: 500px;
   overflow: hidden;
   box-shadow: 0px 0px 7px 5px white}

/*DOUBLE BORDERS*/
.profile .contact, .profile .table-section,
   DIV.blog-preview{ 
   border-style: Double;
   border-radius: 5px; 
   border-width:6px; 
   border-color: white; 
   text-shadow: 0 0 9px white;
   linear-gradient(#ff61a8, white)}

/*ONLINE*/
.online{content: url(https://i.ibb.co/WHXfn3W/eIIMNl7.gif)}

/*IMAGE ABOVE BLURBS*/
.profile-info {
   font-size: 0px;
   border: 4px dashed #FFFFFF;
   border-radius: 5px;
   background: url(https://i.ibb.co/km8PD0L/Ij5bz3f.gif);
   width: cover!important;
   position: centre;
   height: 130px;
   box-shadow: 0px 0px 7px 5px #ff61a8}

/*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: url("https://i.ibb.co/KXVwDyv/SPutgDg.gif")
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {
/* add to favorite */
content: url("https://i.ibb.co/KXVwDyv/SPutgDg.gif")
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
/* send a message */
content: url("https://i.ibb.co/KXVwDyv/SPutgDg.gif")
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
/* foward to friend*/
content: url("https://i.ibb.co/KXVwDyv/SPutgDg.gif")
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {
/* instant message */
content: url("https://i.ibb.co/KXVwDyv/SPutgDg.gif")
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {
/* block user */
content: url("https://i.ibb.co/KXVwDyv/SPutgDg.gif")
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {
/* add 2 group  */
content: url("https://i.ibb.co/KXVwDyv/SPutgDg.gif")
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
/* report */
content: url("https://i.ibb.co/KXVwDyv/SPutgDg.gif")}

/*LINK COLOURS*/
a{
   color: white !important;}
a:hover{
    color: #ff61a8 !important;}
a:visited{
    color: white !important;}
    
.top a{
    color: white !important;}
.top a:hover{
    color: #ff61a8 !important;}
.top a:visited{
    color: white !important;}
    
.links a{
    color: white !important;}
.links a:hover{
    color: #ff61a8 !important;}
.links a:visited{
    color: white !important;}
   
.friends-grid p{
    color: white !important;}

footer .links a{
    color: white !important;}
footer .links a:hover{
    color: #ff61a8 !important;}
footer .links a:visited{
    color: white !important;}

/*SAKURA BLOSSOM ANIMATION OVERLAY*/
html:before {
  animation: grain 8s steps(10) infinite;
  background-image: url(https://i.ibb.co/wyvnsYb/NaDPdZJ.gif);
  content: "";
  height: 200%;
  left: -50%;
  opacity:.5;
  position: fixed;
  top: -110%;
  width: 200%;
  pointer-events:none;}

/*CAT CURSOR*/
*{cursor: url(http://www.rw-designer.com/cursor-extern.php?id=128573), auto !important}

/*LINKS ICONS*/
  .icon, .award img {
        content: url(https://i.ibb.co/KXVwDyv/SPutgDg.gif);
        display: inline-block;
        height: 2.0em;
        width: 2.0em;
        margin: 0 .05em 0 .1em;
        vertical-align: -0.3em;
        color: rgba(0,0,0,0);}

/*TRANSPARENT FOOTER LINKS*/
footer .links {
   background: rgba(0, 0, 0, 0);
   border: 0px;}
.inner {color: #fffFFF;}

/*BUTTONS*/
button {
   color: #fff;
   background: #000 url(https://i.ibb.co/68Zy9Gk/l19p5xL.gif); 
   border: 2px solid #FFFFFF;}
button:hover {
   color: #FFFFFF;
   background: #ff0000;}

/*TOP SEARCH BAR*/
  .search-wrapper input[type=text] {
    background-color: #ff61a8 !important;
    border: 1px dotted white var(--headers) !important;
    border-radius: 10px !important}
 button{
    border-radius: 10px !important;
    border: 1px dotted var(--headers) !important;
    background-color: #ff61a8 !important;
    color:var(--headers) !important}

/*loading page!*/
body:before {
	content: " ";
	height: 100vh;
	width: 100vw;
	display: block;
	position: fixed; 
	top: 0; 
	left: 0; 
	z-index: 100;
	background-image: url('https://i.ibb.co/5cvkHGw/qPbUlcu.gif');
	background-size: 40%;
	background-repeat: repeat;
    background-position:center;
    background-color: black;
	animation: yourAnimation 2s ease 0s 1 normal forwards;
	pointer-events: none;
}
@keyframes yourAnimation { 0.0%{ opacity: 1;} 75%{ opacity: 1; } 100%{ opacity: 0;} }  

/*SONG AUTOPLAY - to change the song, copy in the link AFTER THE = SIGN of any youtube video into the spot after the /embed/and before the slashes*/
</style>

<iframe width="0" height="0" src="https://www.youtube.com/embed/cwyTleTL06Y//?&;amp;;autoplay=1&;loop=infinite&;controls=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" loading="lazy">

</iframe>

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 46 comments ( View all | Add Comment )

aimee / jake :3	1730829200 using <3 Report Comment
🌸Cherri Blossom 🌸	1728926535 using! Report Comment
Sera 🪭	1722565661 Using Report Comment
lominixx	1719419088 Using Report Comment
🪷Isa🪷	1716705490 using!! Report Comment
𝘚𝘮𝘢𝘴𝘩𝘪	1713787305 using Report Comment
Snoesie	1706913413 Usinggg!! :D :0 Report Comment
jupiter / sinclair	1705704390 Using this!! Thx >:D Report Comment
✩‧₊˚࿐ˡʸⁿ!	1704780606 using!! :3 Report Comment
loki	1703109981 usingggg!! Report Comment
tori	1703021353 using!! Report Comment
dina 🎻‧₊˚ ִֶָ	1702734624 using ! ^^ Report Comment
rune : winnie — semiactive	1697054127 using :33 Report Comment
clue	1695923285 using Report Comment
eclipse	1691149972 usinggg'n Report Comment
eclipse	1691149972 usinggg'n Report Comment
JellieTaffy	1690542867 So cute! Using! Report Comment Switched the music to Sakura kiss from OHSHC by JellieTaffy; 1690542893; Report
ophelia	1690084469 hi hi ^^ what site do u use to test layouts? Report Comment just a separate account! by arlo atomickk; 1690134938; Report
Adrien💋	1689812022 Using Report Comment