☆!!Super Sonico!!☆

Tags: pink, cute, anime

Description:

I took the funky comment box animation from rex (https://layouts.spacehey.com/layout?id=18913), full credit to them!!!!! I know i keep posting, but making layouts is so fun! :D as always, the float code is at the very bottom staring with " .col, main, footer, nav::before, .online, nav .links, nav .top {" so delete that if u dont like the float! im happy to help if anyone needs it :D just pls dont repost my code without credits ^^;

Preview:

click on the image for a larger preview

Code:

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

<style>* {cursor: url(https://cur.cursors-4u.net/food/foo-6/foo522.cur), auto !important;}</style><a href="https://www.cursors-4u.com/cursor/2012/01/02/pink-strawberry.html" target="_blank" title="Pink Strawberry"><img src="https://cur.cursors-4u.net/cursor.png" alt="Pink Strawberry" style="position:absolute; top: 0px; right: 0px;"/></a>

<style>

body{

background-image: url(https://cdn.discordapp.com/attachments/1002765210932744333/1099324851929481337/Untitled5346_20230422082413.png);
background-color: white;
background-size: 380px;

}

main{

background-color: rgba(255, 255, 255, 0.9);
border: groove #ff309b 6px ;
color: #ff309b;
border-radius: 33px;
font-size: 13px;
 box-shadow: 0px 0px 9px #ff75bc!important;
}

h4{
font-size: 16px;
 background: -webkit-linear-gradient(#ffbade, #ff309b);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
h1{
font-size: 30px!important;
 background: -webkit-linear-gradient(#ffbade, #ff309b);
-webkit-text-stroke: 0.8px #ed5aa6;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.links{
background-image: url(https://64.media.tumblr.com/b342eba187aeab9b8fc8ed1e7589cabd/f4092b33347837fd-98/s1280x1920/164eaf465f8a9e0f1aca7f27f499223125561ea3.jpg);
background-size: 300px;
height: 64px;
border-radius: 33px;
margin: 12px!important;
border: solid #ffa1d1 2px;
outline: groove #ff309b 3px;

}
nav .links a{
 text-shadow: 0px 0px 9px #fff2fe!important;
}

.top{

background-image: -webkit-linear-gradient(#ffbade, #ff309b)!important;
  -webkit-background-clip: text;
border-radius: 33px;
outline: groove #ff309b 3px;
}
.blurbs .heading{

background: -webkit-linear-gradient(#faf2f6,#fffcfe)!important;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
border-bottom: dashed #ffc7e4 2.5px;
}
.blurbs{

border: solid #ffa1d1 2px;
outline: groove #ff309b 3px;
}

.friends{

border: solid #ffa1d1 2px;
outline: groove #ff309b 3px;
}

.friends .heading{

background: -webkit-linear-gradient(#faf2f6,#fffcfe)!important;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
border-bottom: dashed #ffc7e4 2.5px;
}
.contact .heading{

background: -webkit-linear-gradient(#faf2f6,#fffcfe)!important;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
border-bottom: dashed #ffc7e4 2.5px;
}
.col.left:before {
  content: "";
  white-space: pre-wrap;
  display: block;
  height: 34px;
  width: px;
  background-image: url(https://64.media.tumblr.com/fffdc8c4163df9d99f005fb2096849f3/eaec3bdf26d1fdfd-bb/s640x960/72ee911cb06e1591791d123624cb0d7f3ccbc392.pnj);
  background-repeat: no-repeat;
  background-size: 300px;
  background-position-x: center;
}
.col.right:before {
  content: "";
  white-space: pre-wrap;
border-radius: 55px;
  display: block;
  height: 130px;
  width: px;
  background-image: url(https://64.media.tumblr.com/a7a9e5dbafe7b7422e945ba70c788cc0/0f4e8ea94a154f89-37/s250x400/45695b0ff942900ed3b2f6be187fbd0a5584948e.jpg);
  background-repeat: no-repeat;
  background-size: 130px;
  background-position-x: center;

}
.contact{
border: solid #ffa1d1 2px;
outline: groove #ff309b 3px;
}

.table-section{
border: solid #ffa1d1 2px;
outline: groove #ff309b 3px;
}
.table-section .heading{
background: -webkit-linear-gradient(#faf2f6,#fffcfe)!important;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
border-bottom: dashed #ffc7e4 2.5px;
}
:root {
    --logo-blue: none; 
    --darker-blue: #c42778; 
    --lighter-blue: none; 
    --even-lighter-blue: none;
    --lightest-blue: none;
    --dark-orange: red; 
    --light-orange: none; 
    --even-lighter-orange: none; 
    --green: white;
}
footer{
background: -webkit-linear-gradient(#ffbade, #ff309b)!important;
  -webkit-background-clip: text;
color: white;
border-radius: 100px;
outline: groove #ff309b 3px;
}
table.comments-table{

display: block;
height: 250px!important;
overflow-y: scroll;

}

.table-section{

display: block;
height: 250px!important;
overflow-y: scroll;
}
.online{
content: url(https://cdn.discordapp.com/attachments/1002765210932744333/1099330885255434250/glorormr.png);
}

.blurbs:after{
  content: "";
  white-space: pre-wrap;
border-radius: 55px;
  display: block;
  height: 50px;
  width: px;
  background-image: url(https://64.media.tumblr.com/9a5b6aa5ac419d06ead14c27c94ded79/e4ed25d8fb0ed184-dd/s400x600/2467713aafc8766fcbc06c306059b53c9694f660.gifv);
  background-repeat: no-repeat;
  background-size: 200px;
  background-position-x: center;
}
.friends .heading:before{
content: url(https://cdn.discordapp.com/attachments/1002765210932744333/1099501247410733117/sonico_icon_1_1_55.png);


}
.blurbs .heading:before{
content: url(https://cdn.discordapp.com/attachments/1002765210932744333/1099501089847529482/sonico_icon_2_1_55.png);
}
.friends:after{
  content: "";
  white-space: pre-wrap;
border-radius: 55px;
  display: block;
  height: 50px;
  width: px;
  background-image: url(https://64.media.tumblr.com/9a5b6aa5ac419d06ead14c27c94ded79/e4ed25d8fb0ed184-dd/s400x600/2467713aafc8766fcbc06c306059b53c9694f660.gifv);
  background-repeat: no-repeat;
  background-size: 200px;
  background-position-x: center;

}


@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); }
}
.comments-table img,
.person img{

filter: grayscale(100%) blur(1px);
-webkit-mask-image: url(https://cdn.discordapp.com/attachments/1002765210932744333/1093413057243381800/hart.png);

-webkit-mask-size: 100%;

-webkit-mask-repeat: no-repeat;

-webkit-mask-position: center;

transform:scale(1.025,1.025);

position:relative;

top:-0.25em;

}
.general-about .profile-pic img{

-webkit-mask-image: url(https://cdn.discordapp.com/attachments/1002765210932744333/1093413057243381800/hart.png);

-webkit-mask-size: 100%;

-webkit-mask-repeat: no-repeat;

-webkit-mask-position: center;

transform:scale(1.025,1.025);

position:relative;

top:-0.25em;

}
  .profile{
        
    direction: rtl;
    
    }
    .blurbs{
    
    direction: ltr;
        
    }
    .blog-preview{
        
    direction: ltr;
        
    }
    .friends{
    
    direction: ltr;
        
    }
    .general-info{
        
    direction: ltr;
        
    }
    .contact{
        
    direction: ltr;
    
    }
    .url-info{
        
    direction: ltr;
        
    }
    .details-table{
        
    direction: ltr;
        
    }
    .profile .table-section .heading{
    
    direction: ltr;
        
    }
    .details p{

    direction: ltr;

   }
   .mood{

       direction: ltr;

   
}
.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://pixelbank.neocities.org/decome/hearts/2e2814da.gif")
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {
/* Add to Favorites */
content: url("https://pixelbank.neocities.org/decome/hearts/2e2814da.gif")
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
/* Send Message */
content: url("https://pixelbank.neocities.org/decome/swirlys/3d21ef26.gif")
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
/* Forward to Friend */
content: url("https://pixelbank.neocities.org/decome/swirlys/3d21ef26.gif")
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {
/* Instant Message */
content: url("https://pixelbank.neocities.org/decome/sweets/f163080.gif")
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {
/* Block User */
content: url("https://pixelbank.neocities.org/decome/sweets/f163080.gif")
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {
/* Add to Group */
content: url("https://pixelbank.neocities.org/decome/clothing/c25d7d10.gif")
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
/* Report Profile */
content:  url("https://pixelbank.neocities.org/decome/clothing/c25d7d10.gif")
}

img:hover, .friends:hover{
      animation:shake 10s;
      animation-iteration-count:infinite;
filter: none;
}
@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%
   
}
 .col, main, footer, nav::before, .online, nav .links, nav .top {
    animation: float 3s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}
 .col, main, footer, nav::before, .online, nav .links, nav .top {
animation: float 3s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
@keyframes float {
0% { transform: translate(0, 0px);
}
50% {
transform: translate(0, 8px);
}
100% {
transform: translate(0, -0px);
}

<style>
</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 57 comments ( View all | Add Comment )

💤	1731093942 using but my pictures don't load?? Report Comment
taku!	1728710393 Using! Report Comment
sayori	1727450231 using! Report Comment
changing name	1726483184 using! do you mind? Report Comment
0wen	1724342383 Using👍 Report Comment
litzmintd	1723997946 using with adjustments! Report Comment
Sikkl1	1722882838 USINGGG Report Comment
·˚ ༘₊· ͟͟͞͞꒰➳	1722028297 Using 0∆0 Report Comment
𖦹⭒°｡⋆ Ma1ice .ᐟ.ᐟ ( ˶°ㅁ°) !!	1721013848 using !! :3 Report Comment
Strwberri.N3ko_Ju1cee	1719594070 Using Report Comment
Ribbonangelzz	1714088862 heya uuhh..... some of the images are unavailable due to it being from discerd... Report Comment
Monika	1711809492 Using Report Comment
ㅤㅤㅤ	1711358228 Using!! >3< Report Comment
Mantis	1708902383 using :3!! Report Comment
⋆ ๋࣭ ⭑ amii ɞ ༊·˚⋆	1708859721 using ! >_< Report Comment
Mattt!! ;3	1708809707 Usinggg! :D Report Comment
Isa	1708516300 Ima use it! Thxx Report Comment
sab ♡	1708226149 USING!! thanks :3 Report Comment
Wolfgirl₊˚⊹♡	1708140970 Using!! :D Report Comment
५֒☘️᭡ Liam𓂃	1708127545 using,, !! >_< Report Comment