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

Vanessa	1781154874 Using! Report Comment
zara_monkichi	1780925225 using :) Report Comment
zara_monkichi	1780925068 using :) Report Comment
♱ʚ𝓐𝓷𝓰𝓮𝓵𝓭𝔁𝓼𝓽ɞ♱	1760658122 does anyone know how to just use the contact box icons and nothing else, i tried it and i just ended up with the original icons but with stars next to them. Report Comment idk if you'll see this but you can use this code: .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/> by bluemochii*; 1780685665; Report
☆Leona☆	1752546952 usiing Report Comment
kaylafart	1751524326 using !! Report 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