SUPER SONiCO | super sonicodes

Tags: super sonicodes, pink, cute, super sonico, sonico, anime

Description:

a sonico layout! wippee!

this layout was made on firefox, and is not suited for mobile!

p.s. i would like to state that everything in your about me should be place in your "Who I'd Like to Meet" section with the way this layout is constructed!!

Preview:

click on the image for a larger preview

Code:

<!-- (c) Layout created by ✚༏ིྀ ┈ morguen . ( not mobile friendly ) (https://layouts.spacehey.com/layout?id=90164) -->

<style>

:root {
--logo-blue: transparent;
--lighter-blue: transparent;
--even-lighter-blue: transparent;
--lightest-blue: transparent!important;
--dark-orange: white!important;
--light-orange: transparent;
--even-lighter-orange: transparent;

}

p, details, summary {
font-weight: bold;
text-align: center;

}

a, .count {
color: #ff84a5;

}

a, .col.left h1 {
transition: .2s ease;

}

a:hover, .col.left h1:hover {
font-style: italic;
color: #ff396e!important;


}

.container {
width: 1140px;
padding: 20px;
margin-top: 5px;
background-image: url('https://i.ibb.co/vXt3vk0/checker-gif.gif');
background-color: #ffacc2;
box-shadow: inset 0px 0px 0px 1px white;
border: 4px solid #ff6f95!important;
border-radius: 10px;

}

@font-face{
font-family: peaberry mono;
src: url(https://dl.dropbox.com/scl/fi/mxc1ybby9kocntozld1y3/Peaberry-Mono.otf?rlkey=f6b7bf67h80rdnvf5400x30cx);

}

body {
font-family: ms gothic;
background: repeating-linear-gradient(45deg, #ffa5cf, #ffa5cf 10px, #ff6aaf 10px, #ff6aaf 20px);

}

h1, h2, h3, h4, h5, h6 {
font-family: peaberry mono;
font-weight: regular;

}

.general-about, .contact, .table-section, .blurbs, #comments {
border: 1.5px solid #ff6f95!important;
border-radius: 3px;
background: rgb(255,191,208);
background: linear-gradient(180deg, rgba(255,191,208,0.7) 10%, rgba(255,255,255,0.7) 100%); 
padding: 5px; 

}

.profile .blurbs .section {
background: white;
height: 447px;
padding: 10px;
margin-bottom: 0px;
border: 1px solid #ff6f95;
overflow-y: auto;
box-shadow: 0px 0px 0px .9px white;

}

.profile .blurbs .section:nth-child(1) {
display: none;

}

.col.left h1 {
position: relative;
background: #ffffff;
filter: drop-shadow(0.6px 0.6px 0 #ff6f95) drop-shadow(-0.6px 0.6px 0 #ff6f95) drop-shadow(0 -0.6px 0 #ff6f95) drop-shadow(0.6px 0 #ff6f95);
padding: 10px;
margin-bottom: 50px;
text-align: center;
font-size: 50px;
color: #ff84a5;

}

.col.left h1:after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
width: 0;
height: 0;
border: 20px solid transparent;
border-top-color: #ffffff;
border-bottom: 0;
border-right: 0;
margin-left: -90px;
margin-bottom: -20px;

}

.mood {
position: relative;
background: #ffffff;
filter: drop-shadow(0.6px 0.6px 0 #ff6f95) drop-shadow(-0.6px 0.6px 0 #ff6f95) drop-shadow(0 -0.6px 0 #ff6f95) drop-shadow(0.6px 0 #ff6f95);
padding: 10px;
text-align: center;
scale: .970;
margin-top: -10px;
margin-bottom: 4px;

}

.mood:after {
content: '';
position: absolute;
top: 0;
left: 50%;
width: 0;
height: 0;
border: 20px solid transparent;border-bottom-color: #ffffff;
border-top: 0;
border-right: 0;
margin-left: -10px;
margin-top: -20px;
-webkit-transform: scaleX(-1);
transform: scaleX(-1);

}

main {
background: transparent;
z-index: 10px;
border-radius: 0px 0px 10px 10px;
padding: 15px;
overflow-y: hidden;

}

nav {
border-radius: 10px;

}

.general-about {
margin-bottom: -60px!important;
height: 260px;
text-align: center;

}

FOOTER > UL.links {
display: none;

}

FOOTER > P:nth-child(1) {
display: none;

}

FOOTER > P:nth-child(2) {
display: none;

}

P.copyright {
display: none;

}

footer {
height: 5px;
background-color: transparent;
background-position: center;
margin-top: -10px;

}

a:hover, a:active, a:visited, nav .links a:hover {
text-decoration: none;

}

a, nav .links a, .special {
text-shadow: none;

}

.friends:not(#comments.friends), .blog-preview, .url-info, .logo, .christmas, .top .left, .top .center, .search-wrapper, .top .right, .blurbs .section h4, .profile-info, .contact, .award {
display: none!important

}

.contact {
text-align: center;

}

.contact a {
font-family: peaberry mono;
font-weight: normal;
filter: drop-shadow(1px 1px 0 black) drop-shadow(-1px 1px 0 black) drop-shadow(0 -1px 0 black) drop-shadow(1px 0 black);
color: white;
font-size: 13px;
margin-left: -20px!important;

}

.contact .inner {
background-color: white!important;
padding: 10px;
border: 1px solid #ff6f95;
box-shadow: 0px 0px 0px .9px white;
margin-top: 5px;

}

.heading {
background: rgb(255,191,208)!important;
background: linear-gradient(180deg, rgba(255,191,208,1) 10%, rgba(255,255,255,1) 100%)!important; 
font-family: peaberry mono;
padding: 10px;
box-shadow: inset 0px 1px 1px 0px white;
font-size: 20px;
border: 0.6px solid #ff6f95;

}

.heading h4 {
filter: drop-shadow(1px 1px 0 black) drop-shadow(-1px 1px 0 black) drop-shadow(0 -1px 0 black) drop-shadow(1px 0 black);
font-weight: normal;

}

.blurbs {
height: 502px;
overflow-y: hidden;
margin-top: 0px!important;

}

.comments-table p {
margin-bottom: 5px!important;

}

.comments-table, .comments-table {
display: block;
overflow-y: auto;
height: 471px;
background-color: white;
padding: 10px;
border: 1px solid #ff6f95;
box-shadow: 0px 0px 0px .9px white;

}

.table-section {
overflow-y: auto;
height: 505px;

}

</style>

<style>

/* header->sidebar */
@media(min-width:810px) {
nav {
float: right;
width: 190px;
margin-top: 9.8px;

}

/* fix header */
nav > .top {
flex-direction: column;
align-items: center;
}
nav form {
margin-top: 10px !important;
}
nav form * {
width: 140px;
}
nav .left {
display: flex !important;
transform: translateX(-20px);
}

/* fix links */
nav .links {
display: flex;
flex-direction: column;
transform: translateX(100px);
margin: 0px -98px;
position: relative;
width: 160px;

}

nav .links a {
line-height: 2.2;
font-size: 20px;

}

.col.left {
float: right

}

.col.right {
float: left;
width: 498.2px;

}

.online {
display: none;

}

</style>

<style>

.table-section td {
display: grid;

}

.table-section td:last-child {
height: 200px;
overflow-y: scroll;
overflow-x: hidden;
padding: 10px;
border: 1px solid #ff6f95;
box-shadow: 0px 0px 0px .9px white;
background-color: white;

}

.table-section:not(:last-child) .details-table tr:nth-child(1) td:first-child p {
display: none;

}

.table-section:not(:last-child) .details-table tr:nth-child(7) td:first-child p {
display: none;

}

.table-section:not(:last-child) .details-table tr:nth-child(2) td:first-child p {
display: none;

}

.table-section:not(:last-child) .details-table tr:nth-child(3) td:first-child p {
display: none;

}

.table-section:not(:last-child) .details-table tr:nth-child(4) td:first-child p {
display: none;

}

.table-section:not(:last-child) .details-table tr:nth-child(5) td:first-child p {
display: none;

}

.table-section:not(:last-child) .details-table tr:nth-child(6) td:first-child p {
display: none;

}

.table-section:nth-of-type(even) {
display: none;

}

</style>

<style>

.links a {
background: rgb(255,191,208);
background: linear-gradient(180deg, rgba(255,191,208,1) 10%, rgba(255,255,255,1) 100%); 
font-family: peaberry mono;
padding: 10px;
box-shadow: inset 0px 1px 1px 0px white;
border: 0.6px solid #ff6f95;

}

nav .links a {
line-height: 2.6;
color: #ff84a5;

}

button {
color: #ff84a5;
background: rgb(255,191,208);
background: linear-gradient(180deg, rgba(255,191,208,1) 10%, rgba(255,255,255,1) 100%); 
font-family: peaberry mono;
padding: 10px;
box-shadow: inset 0px 1px 1px 0px white;
border: 0.6px solid #ff6f95;

}

nav .links li:not(:last-child)::after, footer .links li:not(:last-child)::after{
content: " ";
padding-left: 4px !important;

}

.details {
background: white;
height: 236px;
padding: 10px;
border: 1px solid #ff6f95;
box-shadow: 0px 0px 0px .9px white;

</style>

<style>
.profile-pic:before, .comments-table td:first-child img, main:before  {
box-shadow: inset 13px 0px 6px -10px rgb(66 66 66 / 56%), inset -13px 0px 6px -10px rgb(66 66 66 / 56%), inset 0px 13px 6px -10px #ffffff, inset 0px -13px 6px -10px rgb(66 66 66 / 38%);
-webkit-filter: drop-shadow(0px 0px 3px #424242);
border-radius: 0.5rem;

}

nav {
border: 1px solid #ff6f95;
box-shadow: 0px 0px 0px .9px white;
background: white;
height: 900px;

}

#comments b {
color: white;
font-weight: bold;
filter: drop-shadow(1px 1px 0 black) drop-shadow(-1px 1px 0 black) drop-shadow(0 -1px 0 black) drop-shadow(1px 0 black);
font-size: 14px;

}

.comments-table .comment-replies .comment-reply {
margin-bottom: 10px;
border-radius: 10px;
padding: 15px;
margin-top: 10px;
height: auto;
max-height: 250px;
overflow-y: auto;
overflow-x: auto;
border: 1px solid #ff6f95;
box-shadow: 0px 0px 0px .9px white;
background: white;

}

li.active .icon, .contact img.icon, .links .icon, .comments-table a .icon {
display: none;

}

.comments-table td:first-child {
background-color: #ffd1dc;
border-right: 3px solid #ff6f95;
padding: 5px;
border-bottom: none;
margin-bottom: -5px;

}

.comments-table td {
background-size: cover;
background-position: center;
border: transparent;
border-bottom: 3px solid #ff6f95;

}

::selection {
color: #fff;
background: #ffacc2;

}

</style>

<style>

main:before {
width: 100%;
height: 300px;
display: block;
content: "";
background-image: url('https://i.ibb.co/TLcwcgD/super-sonico.jpg');
background-position: center;
background-size: 830px;
border-radius: 10px;
}
@media only screen and (max-width: 600px) {
main:before{
height: 200px;
}
}

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

pancakes :3	1735074459 using !! Report Comment
Luka <3	1734976905 USINGZ Report Comment
✞Opal_lottie✩	1724600332 usinnggg!!!!~ Report Comment
Kishibe Lover	1723613569 using! Report Comment
Jay	1716167818 using thank you ! Report Comment
l4in-1waKur4	1714324670 using(? Report Comment
Rangel	1711809809 Using! Report Comment
Dolly	1708183639 using Report Comment
Momo🍇🕷️	1703621541 TOTALLY USINGGGG Report Comment
xinyu!!	1703196334 Using ! Report Comment
ノ sean ⦻	1703021612 using Report Comment
.	1702799703 using! Report Comment
.	1702799702 using! Report Comment
☆	1702308411 USING :3 Report Comment
Candy!!	1702250467 Using!! Report Comment
JeCkA_oF_09~	1702155058 using! Report Comment
jubi?!	1702129609 using!! Report Comment
PrettyPinkGlitter	1701981507 using Report Comment
mimi	1701904175 using !!!!!! Report Comment