☆!!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 73 comments ( View all | Add Comment )

ᘛ⁐̤ᕐᐷ✰𝕋𝕙𝕖ℝ𝕒𝕥𝕫𝕋𝕣𝕒𝕡✰ᑅᕈ⁐ᘚ	1775186230 ꧁༒☬𝖔𝖇𝖘𝖘𝖊𝖘𝖘𝖊𝖉☬༒꧂ Report Comment
Dayuv	1768143906 Cute layout, using the parts of it for my own. It's helped me learn html more! Report Comment
ignap ᶻ 𝗓 𐰁 .ᐟ	1767475822 usando!!! Report Comment
ベティ(*≧∀≦)	1761930335 using!! Report Comment
iinqly 🜬	1761786090 using, such a cute layout omg!! Report Comment
Sashaz ^_^	1760851440 using tyy Report Comment
yuleen	1760245653 using Report Comment
ɢ0ʀʏɢᴜᴍᴍɪɪ!!!	1757861474 using!! Report Comment
SEER SCHOLAR	1753595462 just a note, the background in the og screenshot no longer is there proobably bc it is no longer avaliable from whatever platform it was sourced ^_^ also, most elements dont show up on switch Report Comment
kitzmintd	1748229915 usandom Report Comment
Lane (^_-) ~ ☆	1747345658 USINGGG Report Comment
Skull ✩	1742717454 using! Report Comment
ＳｔａｒＫｉｔｔｙ★	1739232911 using 👍 Report Comment
Oliwia-Chan	1735906389 using :3!!! Report Comment
ajša / parker ᯓ★ (account in progress!!)	1735897295 any reason why my pfp wont how on this layout? :< tried changing it too but it didnt fix anythingg Report Comment
D	1734740358 using:p Report Comment
𓏲˚ ۪𝓒𝖺𝗆𝗂 ꨄ︎ ⊹ .	1734659036 Using :3 Report Comment
💤	1731093942 using but my pictures don't load?? Report Comment
taku!	1728710393 Using! Report Comment
sayori	1727450231 using! Report Comment