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

𝘚𝘮𝘢𝘴𝘩𝘪	1713787305 using Report Comment
YRL	1710631843 Using !!! Report Comment
Snoesie	1706913413 Usinggg!! :D :0 Report Comment
Calypso / Komet	1705704390 Using this!! Thx >:D Report Comment
lynn	1704780606 using!! :3 Report Comment
loki	1703109981 usingggg!! Report Comment
tori	1703021353 using!! Report Comment
dina 🎻‧₊˚ ִֶָ	1702734624 using ! ^^ Report Comment
꒰୨୧◞ 。AKI / SKYLAR⠀.ᐟ	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
Douma	1687249102 Using :) Report Comment
Cluxless_	1687151306 using TwT Report Comment
slayernet	1686448628 usingg Report Comment
Royal knight	1686351327 using Report Comment