hello kitty

Tags: hello kitty, pink, black, frank ocean, cute, girly, minimal, sanrio, glow text

Description:

IF YOU USE MY LAYOUT PLEASE COMMENT!

this layout contains: font, text colour, glow text, hover text colour change, hover image shakes, autoplay, notification bell changed, top, footer, link divider stars, contact box icons, interest box titles changed, body background image, translucent black profile background, borders removed, comments scroll box with colours changed, count colour changed, cutsom cursor, custom online icon.

Preview:

click on the image for a larger preview

Code:

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

<style>
@import url('https://fonts.googleapis.com/css2?family=DynaPuff&display=swap');

.icon, .award img {
        content: url(https://64.media.tumblr.com/eec89ad5a2c5de9256fbf244a6de6b1d/c4f9c60699228397-37/s100x200/e5920c89a216f086dd0e749d5cfb8bde64a006f0.gifv);
        display: inline-block;
        height: 1.5em;
        width: 1.5em;
        margin: 0 .05em 0 .1em;
        vertical-align: -0.3em;
        color: rgba(0,0,0,0);
    }

nav .top {
color: white;
    text-shadow: 0 0 5px  black, 0 0 10px  black, 0 0 10px  black, 0 0 20px  black, 0 0 25px  black;
background-image: url();
border-radius: 10px;
}
nav .links a {
color: white;
    text-shadow: 0 0 5px  black, 0 0 10px  black, 0 0 10px  black, 0 0 20px  black, 0 0 25px  black;
}
nav .links .special a {
color: white;
}
nav .links li:not(:last-child)::after, footer .links li:not(:last-child)::after {
    content: " ★ ";
    color:  white;
    text-shadow: 0 0 5px  black, 0 0 10px  black, 0 0 10px  black, 0 0 20px  black, 0 0 25px  black;
}
nav .links a:hover {
    color: #ff6bad;
    font-weight: bolder;
    text-decoration: line-under;
}
img:hover , .url-info:hover , .online:hover {
  animation: shake 1s;
  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); }
}

button, input {
    overflow: visible;
    border: 0px solid #000000;
    box-shadow: 6px 4px black;
    background: white;
    color: black;
}
a:hover {
    color: #ff6bad;
    font-weight: bolder;
    text-decoration: line-under; }

a{
    color: white;
    text-shadow: 0 0 5px  black, 0 0 10px  black, 0 0 10px  black, 0 0 20px  black, 0 0 25px  black;
}
p {
font-size: 130%;
font-family: 'DynaPuff', cursive;
color: white;
    text-shadow: 0 0 5px  black, 0 0 10px  black, 0 0 10px  black, 0 0 20px  black, 0 0 25px  black;
}
 h1, h2,h3,h4,h5{
  font-size: 140%; 
font-family: 'DynaPuff', cursive;
color: white;
    text-shadow: 0 0 5px  black, 0 0 10px  black, 0 0 10px  black, 0 0 20px  black, 0 0 25px  black;
}

.logout-btn {
font-family: 'DynaPuff', cursive;
}
.logout-btn, .logout-form {
background: white;
color: white;
    text-shadow: 0 0 5px  black, 0 0 10px  black, 0 0 10px  black, 0 0 20px  black, 0 0 25px  black;
}
  body {
   background-image: url(https://64.media.tumblr.com/1609b56814d7f9fcc53f558b009e6e23/f3b508113e46afc3-13/s1280x1920/15d637dc158e54ed83ea2b6f1d0fa2f3473b34d6.jpg);
font-family: 'DynaPuff', cursive;
cursor: url(http://www.rw-designer.com/cursor-view/17815.png), auto;
}
main {
background: none;
color: transparent;
padding: 0px
}
.profile {
   background: rgba(0, 0, 0, 0.7);
   border-color: ;
   border-radius: 10px;
}
.profile-info {
border: none;
}
.profile .url-info {
border: none;
}
.profile table-section {
border: none;
}
.contact {
border: none;
}
/* change all headings on page to different colors. */
  .profile .blurbs .heading,
  .profile .friends .heading{
   background-color: transparent;
color: ;
}
/* change all headings on page to different colors. */
  .profile .contact .heading,
  .profile .table-section .heading{
   background-color: ;
   color: ;
}
.online { visibility: hidden; } .online img { content: url(https://64.media.tumblr.com/3e7e46039149103b8b623ba171672f5a/1e1dfad25fc22e16-25/s75x75_c1/0bca76f618884d995edb343db16785e338bdbd27.gifv); animation-name: none; visibility: visible; height: 20px; width: 80px; }

button {
background: white;
color: white;
    text-shadow: 0 0 5px  black, 0 0 10px  black, 0 0 10px  black, 0 0 20px  black, 0 0 25px  black;
border: none; }

table, th, td {

  border: 0px solid;

     }

:root {

  --topic1: "★likes★";
  --topic2: "★music★";
  --topic3: "★film★";
  --topic4: "★tv★";
  --topic5: "★style★";
  --topic6: "★misc★";

 }
table.comments-table{
display: block;
height: 300px!important;
background: url(https://i.pinimg.com/564x/3c/0d/26/3c0d26dbb3e3d2efee7dbbf7a9a9c290.jpg);
color: ;
overflow-y: scroll;
}
::-webkit-scrollbar
{
  width: 15px;
}

/*Customizes color of the direction buttons*/  
::-webkit-scrollbar-button:start {
    background-color: rgb(241, 165, 250);
}

::-webkit-scrollbar-button:end {
    background-color: rgb(241, 165, 250);
}

::-webkit-scrollbar-thumb
{
  background-color: #9e9e9e;
  border-radius: 0px;
}

::-webkit-scrollbar-thumb:hover {
  background: #ff6bad;
}  
  
::-webkit-scrollbar-track
{
  -webkit-box-shadow: inset 0 0 0px black;
  background-color: rgb(241, 165, 250);
  border-radius: 0px;
}
/* Scrollbar Buttons */
/*Width*/  
::-webkit-scrollbar-button
{
  height: 16px;
  width: 16px;
}

/* Up */
::-webkit-scrollbar-button:vertical:decrement
{
    height: 16px;
    width: 16px;
    background-position: center center;
    background-image: url("https://i.ibb.co/0yt2dVc/Arrow-Up.png");
}

/*Up Hover*/  
::-webkit-scrollbar-button:vertical:decrement:hover
{
    height: 16px;
    width: 16px;
    background-position: center center;
    background-image: url("https://i.ibb.co/Fn2qWmj/Arrow-Up-hover.png");
}


/* Down */
::-webkit-scrollbar-button:vertical:increment
{
    height: 16px;
    width: 16px;
    background-position: center center;
    background-image: url("https://i.ibb.co/rGMFVKm/Arrow-Down.png");
}

/*Down Hover*/  
::-webkit-scrollbar-button:vertical:increment:hover
{
    height: 16px;
    width: 16px;
    background-position: center center;
    background-image: url("https://i.ibb.co/PYWv05Q/Arrow-Down-hover.png");
}


.table-section:not(:last-child) .details-table tr td:first-child p{color:transparent !important;text-shadow: none !important;letter-spacing: -100px;}

.details-table tr td:first-child p::after{
    
    
letter-spacing:normal !important;
color: white;
    text-shadow: 0 0 5px  black, 0 0 10px  black, 0 0 10px  black, 0 0 20px  black, 0 0 25px  black;
filter: brightness(95%) !important;
   
}
.table-section:not(:last-child) .details-table tr:nth-child(1) td:first-child p::after{
  content: var(--topic1);
}
.table-section:not(:last-child) .details-table tr:nth-child(2) td:first-child p::after{
  content: var(--topic2);
}
.table-section:not(:last-child) .details-table tr:nth-child(3) td:first-child p::after{
  content: var(--topic3);
}
.table-section:not(:last-child) .details-table tr:nth-child(4) td:first-child p::after{
  content: var(--topic4);
}
.table-section:not(:last-child) .details-table tr:nth-child(5) td:first-child p::after{
  content: var(--topic5);
}
.table-section:not(:last-child) .details-table tr:nth-child(6) td:first-child p::after{
  content: var(--topic6);
}


nav .top {
background: rgba(0, 0, 0, 0.7);
   border-color: ;
   border-radius: 10px;
}
nav .links {
background: rgba(0, 0, 0, 0.7);
   border-color: ;
   border-radius: 10px;
}
nav, footer, .profile .contact {
border: none;
}
.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: "★"
}

footer {
    background: rgba(0, 0, 0, 0.7);
   border-color: ;
   border-radius: 10px;
   margin: 0px;
}

table.comments-table td {
    color: black;
    border:none;
}
.count {
    color: #ff6bad;
}
.profile .friends .person p {
color: white;
    text-shadow: 0 0 5px  black, 0 0 10px  black, 0 0 10px  black, 0 0 20px  black, 0 0 25px  black;
}
table.comments-table, table.music-table, table.bulletin-table, table.forum-table, table.groups-table {
border: none;
}

:root {
    --logo-blue: ;
    --darker-blue: ;
    --lighter-blue: ;
    --even-lighter-blue: ;
    --lightest-blue: ;
    --dark-orange: white;
    --light-orange: ;
    --even-lighter-orange:  ;
    --green: ;
    --strange-yellow: ;
    </style>

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

heartfuii	1747196269 usinggg Report Comment
shannon	1741622176 usinggggggg Report Comment
Livvy 🖤	1737143360 used for the online icon. LUV x Report Comment
🪳★piyavicaa★🪳	1729235305 using for the comments scrollbox code tyyyy Report Comment
☆ Dаlidа ☆	1724345802 How did you make the backround half-transparent ? Report Comment Go to the part where you select the bg color and, when u put the hex code, just add the opacity number u want. Like let's suppose u want this shade of pink #e600ff. If you put 50 at the end of the code, so it's #e600ff50, it will be half opacity. Hope this helps by vinnythestrange; 1724974328; Report Thank you!! by ☆ Dаlidа ☆; 1725014954; Report
CuteAdventures	1721987041 using Report Comment
KAIDOOOO	1692382670 Using this >w< Report Comment
Ama <3	1687903873 using <3 thanks it's so cute Report Comment
Jye	1686115062 Ty <3 Report Comment
angelbaby <3	1686099252 using!! Report Comment
Angie	1685613901 Using !!! I love it <<3 Report Comment
BYRONSWAGLORD420XX	1685586428 usinggg Report Comment
zeioos	1684818965 I'll fs be using this for my fluttershy theme, It's amazing!! Report Comment LOOKS SO CUTE W UR PFP AAA by tie; 1685041229; Report
♩﹒ kaiden. 𓋜	1684797397 using Report Comment
5tarsho	1684796179 SOO CUTE. fs using Report Comment
hannah <3	1684780288 i used it and i love it !! Report Comment
sai	1684701588 using ur layout but how do u change the bg.. Report Comment body { background: } after colon add colour or url() with image address inside thank u for using!!! by tie; 1684716755; Report thanks n dw x by sai; 1684765736; Report i tried it with this tumblr image https://64.media.tumblr.com/386bede14d5b32e1e4353f708ecc2729/662b8a7af52de790-96/s250x400/2767755ce9f53b96ff863dd764f327a9941bf4f0.gifv didn't work by sai; 1684766083; Report PM me ill sort it for u x3 by tie; 1685041180; Report