BASE LAYOUT W/ BIO! | super sonicodes

Tags: super sonicodes, base, base layout, layout base

Description:

THIS LAYOUT IS CURRENTLY BROKEN FROM WHAT I'VE BEEN HEARING, PLEASE USE MY BASE LAYOUT SKYBERRY INSTEAD

my first ever base layout!!! it's important that you at least have some coding knowledge ^__^

it's important that you change the inner border colors to the same color as the background of the container that each inner div element is in, and PLEASE make sure you change the links of the buttons (specifically the ones that say: add me, unadd me, block me, report me, my blogs, my bulletins, my layouts, add comment & view comments)!!!

here's the bio code itself

<center>

<div style="display: flex; margin-top: -50px; margin-bottom: 10px;">
<div style="background: repeating-linear-gradient(45deg, white, white 10px, black 10px, black 20px); width: 160px; height: 45px; font-family: voc-it; font-size: 35px; border-radius: 10px; filter: drop-shadow(1px 1px 0 black) drop-shadow(-1px 1px 0 black) drop-shadow(0 -1px 0 black) drop-shadow(1px 0 black); margin-right: 7px; margin-bottom: 5px;">
<p style="filter: drop-shadow(1px 1px 0 black) drop-shadow(-1px 1px 0 black) drop-shadow(0 -1px 0 black) drop-shadow(1px 0 black);"><a style="color: white" href="https://spacehey.com/home">home</a></p>
</div>

<div style="background: repeating-linear-gradient(45deg, white, white 10px, black 10px, black 20px); width: 160px; height: 45px; font-family: voc-it; font-size: 35px; border-radius: 10px; filter: drop-shadow(1px 1px 0 black) drop-shadow(-1px 1px 0 black) drop-shadow(0 -1px 0 black) drop-shadow(1px 0 black); margin-right: 7px; margin-bottom: 5px;">
<p style="filter: drop-shadow(1px 1px 0 black) drop-shadow(-1px 1px 0 black) drop-shadow(0 -1px 0 black) drop-shadow(1px 0 black);"><a style="color: white" href="https://spacehey.com/browse">browse</a></p>
</div>

<div style="background: repeating-linear-gradient(45deg, white, white 10px, black 10px, black 20px); width: 160px; height: 45px; font-family: voc-it; font-size: 35px; border-radius: 10px; filter: drop-shadow(1px 1px 0 black) drop-shadow(-1px 1px 0 black) drop-shadow(0 -1px 0 black) drop-shadow(1px 0 black); margin-right: 7px; margin-bottom: 5px;">
<p style="filter: drop-shadow(1px 1px 0 black) drop-shadow(-1px 1px 0 black) drop-shadow(0 -1px 0 black) drop-shadow(1px 0 black);"><a style="color: white" href="https://spacehey.com/search">search</a></p>
</div>

<div style="background: repeating-linear-gradient(45deg, white, white 10px, black 10px, black 20px); width: 160px; height: 45px; font-family: voc-it; font-size: 35px; border-radius: 10px; filter: drop-shadow(1px 1px 0 black) drop-shadow(-1px 1px 0 black) drop-shadow(0 -1px 0 black) drop-shadow(1px 0 black); margin-right: 7px; margin-bottom: 5px;">
<p style="filter: drop-shadow(1px 1px 0 black) drop-shadow(-1px 1px 0 black) drop-shadow(0 -1px 0 black) drop-shadow(1px 0 black);"><a style="color: white" href="https://blog.spacehey.com/">blogs</a></p>
</div>

<div style="background: repeating-linear-gradient(45deg, white, white 10px, black 10px, black 20px); width: 160px; height: 45px; font-family: voc-it; font-size: 35px; border-radius: 10px; filter: drop-shadow(1px 1px 0 black) drop-shadow(-1px 1px 0 black) drop-shadow(0 -1px 0 black) drop-shadow(1px 0 black); margin-right: 7px; margin-bottom: 5px;">
<p style="filter: drop-shadow(1px 1px 0 black) drop-shadow(-1px 1px 0 black) drop-shadow(0 -1px 0 black) drop-shadow(1px 0 black);"><a style="color: white" href="https://groups.spacehey.com/">groups</a></p>
</div>
</div>

<div style="background-color: black; box-shadow: inset 0px 0px 0px 1px white; border: 2px solid black!important; border-bottom: none!important; width: 700px; height: 367px; padding: 2px; border-radius: 10px 10px 0px 0px;">
<div class="inner" style="height: 370px; border-radius: 10px 10px 0px 0px!important; display: flex;">
<p><img id="z-index1" style="float: right;" src="https://i.ibb.co/fp6VKhj/icon.png" width="400"/></p>

<div style="float: left;">
<div style="background: repeating-linear-gradient(45deg, white, white 10px, black 10px, black 20px); width: 300px; height: 45px; font-family: voc-it; font-size: 35px; border-radius: 10px; filter: drop-shadow(1px 1px 0 black) drop-shadow(-1px 1px 0 black) drop-shadow(0 -1px 0 black) drop-shadow(1px 0 black); margin-right: 7px; margin-bottom: 5px;">
<p style="filter: drop-shadow(1px 1px 0 black) drop-shadow(-1px 1px 0 black) drop-shadow(0 -1px 0 black) drop-shadow(1px 0 black);"><a style="color: white" href="BLOG LINK HERE">my blogs</a></p>
</div>

<div style="background: repeating-linear-gradient(45deg, white, white 10px, black 10px, black 20px); width: 300px; height: 45px; font-family: voc-it; font-size: 35px; border-radius: 10px; filter: drop-shadow(1px 1px 0 black) drop-shadow(-1px 1px 0 black) drop-shadow(0 -1px 0 black) drop-shadow(1px 0 black); margin-right: 7px; margin-bottom: 5px;">
<p style="filter: drop-shadow(1px 1px 0 black) drop-shadow(-1px 1px 0 black) drop-shadow(0 -1px 0 black) drop-shadow(1px 0 black);"><a style="color: white" href="BULLETIN LINK HERE">my bulletins</a></p>
</div>

<div style="background: repeating-linear-gradient(45deg, white, white 10px, black 10px, black 20px); width: 300px; height: 45px; font-family: voc-it; font-size: 35px; border-radius: 10px; filter: drop-shadow(1px 1px 0 black) drop-shadow(-1px 1px 0 black) drop-shadow(0 -1px 0 black) drop-shadow(1px 0 black); margin-right: 7px; margin-bottom: 5px;">
<p style="filter: drop-shadow(1px 1px 0 black) drop-shadow(-1px 1px 0 black) drop-shadow(0 -1px 0 black) drop-shadow(1px 0 black);"><a style="color: white" href="LAYOUT LINK HERE">my layouts</a></p>
</div>

<div style="background: repeating-linear-gradient(45deg, white, white 10px, black 10px, black 20px); width: 300px; height: 45px; font-family: voc-it; font-size: 35px; border-radius: 10px; filter: drop-shadow(1px 1px 0 black) drop-shadow(-1px 1px 0 black) drop-shadow(0 -1px 0 black) drop-shadow(1px 0 black); margin-right: 7px; margin-bottom: 5px;">
<p style="filter: drop-shadow(1px 1px 0 black) drop-shadow(-1px 1px 0 black) drop-shadow(0 -1px 0 black) drop-shadow(1px 0 black);"><a style="color: white" href="ADD FRIEND LINK HERE">add me</a></p>
</div>

<div style="background: repeating-linear-gradient(45deg, white, white 10px, black 10px, black 20px); width: 300px; height: 45px; font-family: voc-it; font-size: 35px; border-radius: 10px; filter: drop-shadow(1px 1px 0 black) drop-shadow(-1px 1px 0 black) drop-shadow(0 -1px 0 black) drop-shadow(1px 0 black); margin-right: 7px; margin-bottom: 5px;">
<p style="filter: drop-shadow(1px 1px 0 black) drop-shadow(-1px 1px 0 black) drop-shadow(0 -1px 0 black) drop-shadow(1px 0 black);"><a style="color: white" href="UNFRIEND LINK HERE">unadd me</a></p>
</div>

<div style="background: repeating-linear-gradient(45deg, white, white 10px, black 10px, black 20px); width: 300px; height: 45px; font-family: voc-it; font-size: 35px; border-radius: 10px; filter: drop-shadow(1px 1px 0 black) drop-shadow(-1px 1px 0 black) drop-shadow(0 -1px 0 black) drop-shadow(1px 0 black); margin-right: 7px; margin-bottom: 5px;">
<p style="filter: drop-shadow(1px 1px 0 black) drop-shadow(-1px 1px 0 black) drop-shadow(0 -1px 0 black) drop-shadow(1px 0 black);"><a style="color: white" href="BLOCK LINK HERE">block me</a></p>
</div>

<div style="background: repeating-linear-gradient(45deg, white, white 10px, black 10px, black 20px); width: 300px; height: 45px; font-family: voc-it; font-size: 35px; border-radius: 10px; filter: drop-shadow(1px 1px 0 black) drop-shadow(-1px 1px 0 black) drop-shadow(0 -1px 0 black) drop-shadow(1px 0 black); margin-right: 7px; margin-bottom: 5px;">
<p style="filter: drop-shadow(1px 1px 0 black) drop-shadow(-1px 1px 0 black) drop-shadow(0 -1px 0 black) drop-shadow(1px 0 black);"><a style="color: white" href="REPORT LINK HERE">report me</a></p>
</div>

</div>
</div>
</div>

<div id="z-index2" style="background-color: black; box-shadow: inset 0px 0px 0px 1px white; border: 2px solid black!important; height: 1393px; padding: 2px; border-radius: 10px;">

<div class="inner" style="height: 379px; width: 310px; border-radius: 10px!important; float: left; border: 2px solid black!important; overflow-y: auto;">
<p>put something here, maybe like a dni/dnfi or whatever or like a before you interact thingamajig</p>
</div>

<div class="inner" style="height: 379px; width: 422px; border-radius: 10px!important; float: left; border: 2px solid black!important; overflow-y: auto;">
<p>tell about yourself here</p>
</div>

<div class="inner" style="height: 379px; width: 422px; border-radius: 10px!important; float: left; border: 2px solid black!important; overflow-y: auto;">
<p>add playlists here</p>
</div>

<div class="inner" style="height: 379px; width: 310px; border-radius: 10px!important; float: left; border: 2px solid black!important; overflow-y: auto;">
<p>add more stuff here. if u want an update log on your profile then you can add that</p>
</div>

<div class="inner" style="height: 250px; width: 100%; border-radius: 10px!important; float: left; border: 2px solid black!important; overflow-y: auto;">
<p>feel free to add one of those favorite users thingamajigs OR you can remove it</p>
</div>

<div class="inner" style="height: 379px; width: 310px; border-radius: 10px!important; float: left; border: 2px solid black!important; overflow-y: auto;">
<p>maybe add blinkies here?</p>
</div>

<div class="inner" style="height: 379px; width: 422px; border-radius: 10px!important; float: left; border: 2px solid black!important; overflow-y: auto;">
<p>maybe add stamps? i personally added photos of my cat here but whateva floats yur boat :3</p>
</div>

</div>

<div style="margin-top: 20px; margin-bottom: -55px; display: flex;">
<div style="background: repeating-linear-gradient(45deg, white, white 10px, black 10px, black 20px); width: 450px; height: 45px; font-family: voc-it; font-size: 35px; border-radius: 10px; filter: drop-shadow(1px 1px 0 black) drop-shadow(-1px 1px 0 black) drop-shadow(0 -1px 0 black) drop-shadow(1px 0 black); margin-right: 40px; margin-bottom: 5px;">
<p style="filter: drop-shadow(1px 1px 0 black) drop-shadow(-1px 1px 0 black) drop-shadow(0 -1px 0 black) drop-shadow(1px 0 black);"><a style="color: white" href="ADD COMMENTS LINK">add comment</a></p>
</div>

<div style="background: repeating-linear-gradient(45deg, white, white 10px, black 10px, black 20px); width: 450px; height: 45px; font-family: voc-it; font-size: 35px; border-radius: 10px; filter: drop-shadow(1px 1px 0 black) drop-shadow(-1px 1px 0 black) drop-shadow(0 -1px 0 black) drop-shadow(1px 0 black); margin-right: 7px; margin-bottom: 5px;">
<p style="filter: drop-shadow(1px 1px 0 black) drop-shadow(-1px 1px 0 black) drop-shadow(0 -1px 0 black) drop-shadow(1px 0 black);"><a style="color: white" href="VIEW COMMENTS LINK">view comments</a></p>
</div>
</div>

</center>

<style>

#z-index1 {
z-index: 1;
position: relative;

}

#z-index2 {
z-index: 999!important;
position: relative;

}

@font-face{
font-family: voc-it;
src: url(https://dl.dropbox.com/s/nxyqf1nfcnvuei4/VOC-IT.ttf);

}

</style>

Code:

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

<style>

/* main stuff, DONT customize root. */

: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;

}

body {
background-color: white /* change this */;
text-align: center;
font-family: ms gothic;
font-weight: bold;
background-attachment: fixed;

}

.container {
width: 800px /* customize this if you want, not recommended unless you're willing to adjust the designated bio for it */;
padding: 10px;
margin-top: 5px;
background-color: black;
box-shadow: inset 0px 0px 0px 1px white /* customize this if you want, not recommended though */;
border: 2px solid black!important /* customize this if you want */;
border-radius: 10px /* customize this if you want */;

}

main {
z-index: 10;
border-radius: 0px;
overflow-y: hidden;
background-color: white;
border: 2px solid black /* customize this if you want */;
border-radius: 10px;
margin-bottom: -30px;
margin-top: -30px;

}

a:hover {
font-style: italic;
color: INSERT HEX CODE/COLOR NAME HERE /* color this anything you want */;

}

a {
color: INSERT HEX CODE/COLOR NAME HERE /* color this anything you want */;

}

p {
color: black /* recolor this anything you want */; 

}

.blurbs .inner {
border-radius: 0px!important;
border: none!important;

}

.blurbs {
height: auto;

}

.inner {
border-radius: 10px!important;
background-color: white;

}

</style>

<style>

/* hidden shit */

.friends, .blog-preview, .url-info, .logo, .christmas, .top .left, .top .center, .search-wrapper, .top .right, .blurbs .section h4, .heading, .profile-info, .table-section, .col.left, nav .links {
display: none!important;

}

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

}

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;

}

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

}

</style>

<style>

/* scrollbar stuff, do NOT edit unless you're changing the entire scrollbar itself and switching it out for a new one */

::-webkit-scrollbar {
width: 16px
}
 
::-webkit-scrollbar:horizontal {
height: 17px
}
 
::-webkit-scrollbar-corner {
background: #eee
}
 
::-webkit-scrollbar-track:vertical {
background: linear-gradient(90deg, #e5e5e5, #f0f0f0 20%)
}
 
::-webkit-scrollbar-track:horizontal {
background: linear-gradient(180deg, #e5e5e5, #f0f0f0 20%)
}
 
::-webkit-scrollbar-thumb {
border: 1.5px solid #888;
border-radius: 3px;
box-shadow: inset 0 -1px 1px #fff, inset 0 1px 1px #fff;
background-color: #eee;
}
 
::-webkit-scrollbar-thumb:vertical {
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAKCAIAAADpZ+PpAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAEnQAABJ0Ad5mH3gAAADrSURBVChTTc5LboJQGAXguyoCu4ERCzAGlRk7UOwGWIDh0s4M4kxb06RSq/jAB6AxJkJ4lTDrue3AnvyzP+fLId+/yfM8juP7PQmCCOf7B3e+ZD+O40RRVFW12VQUpd3r9U3T2m4OpKoqWZYNwzBZLEqfh0N7NnvfrPcEWlEUWZb9mWF4Ph6D0ylcLbfM5HkeJrhGA2hb15/QXnv+w7RYXsDatjOdvnmrHSnLEizMNE2v11sUXQBCnn98kbquBUGQJAlmq9WB2e3qg4HJdqKkaRql1HGc0WgMcDJ5dd0F24kediZJ8t/ELT69H+8py0CYSIO5AAAAAElFTkSuQmCC") no-repeat 50%, linear-gradient(90deg, #eee 45%, #ddd 0, #bbb)
}
 
::-webkit-scrollbar-thumb:horizontal {
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAJCAYAAAALpr0TAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAEnQAABJ0Ad5mH3gAAADcSURBVChTNZBLqoUwEEQrURQUxZGCvy24ACfiityJi7tv8GauQoPxk5tquA2RQ9vVVYk6z9NZaxFFEe77htYazjk8z4MwDIVZ+rourOuKaZrwvi+WZcE8z1BKCbPPCjk4DAO2bRP1OI7wLiL6Mbd7J408z1GWpQwWRYGqqiQG+03TgMu0MacfUN4qANmn8UOv9MjW3sKaSm7iIdOSlziOQ3LScd93aPonSYK6riVLlmVo21aYfVqzND9pmqLrOlGT+76XbcxLZkb19/l3fEP+oF0cx8KMEASBsDEGX2/CgZCHkg+8AAAAAElFTkSuQmCC") no-repeat 50%, linear-gradient(180deg, #eee 45%, #ddd 0, #bbb)
}
 
::-webkit-scrollbar-button:horizontal:end:increment,
::-webkit-scrollbar-button:horizontal:start:decrement,
::-webkit-scrollbar-button:vertical:end:increment,
::-webkit-scrollbar-button:vertical:start:decrement {
display: block
}
 
::-webkit-scrollbar-button:vertical {
height: 17px
}
 
::-webkit-scrollbar-button:vertical:start:decrement {
background: white;
background-image: url("https://cdn.discordapp.com/attachments/904308736712138793/1001299199633141851/download.png");
background-repeat: no-repeat;
background-position: center;
-moz-background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
 
::-webkit-scrollbar-button:vertical:start:increment {
display: none;
}
 
::-webkit-scrollbar-button:vertical:end:decrement {
display: none;
}
 
::-webkit-scrollbar-button:vertical:end:increment {
background: white;
background-image: url("https://cdn.discordapp.com/attachments/904308736712138793/1001299200052576387/87ae92e1-3894-4469-b1b9-aedf5f04975c.png");
background-repeat: no-repeat;
background-position: center;
-moz-background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
 
</style>

<p style="position: fixed; right: 20px; top: 10px;">made by pompadorks, do NOT remove</p>

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

Stanley H. (layout better viewed on PC)	1714938945 i should've told you sooner but i figured out the problem! i just had to adjust the scroll boxes a little!! some were to big to the point where it sorta broke it! Report Comment got that ^__^ by ✚༏ིྀ ┈ morguen . ( not mobile friendly ); 1714938972; Report
Stanley H. (layout better viewed on PC)	1710025104 hey mine seems to be broken, do you know what could be wrong? Report Comment i'm unsure, let me recheck the code real quick by ✚༏ིྀ ┈ morguen . ( not mobile friendly ); 1710025155; Report k!! by Stanley H. (layout better viewed on PC); 1710025182; Report there might be a few factors but heres two of them 1. the layout is originally designed for 1920 x 1080 screens, however since my laptop is connected to a large monitor that doesn't fit those dimensions, it does look a bit wonky 2. it was made on firefox, and i usually make all my layouts on firefox, so i don't know what my layouts look like on any chromium-run browsers i might make an improved version of this layout but until my laptop gets fixed i don't really know Anything for now by ✚༏ིྀ ┈ morguen . ( not mobile friendly ); 1710025532; Report i see! by Stanley H. (layout better viewed on PC); 1710025622; Report
Lee {wip}	1707494372 it's not working. well, for me, anyways. Report Comment
ノ sean ⦻	1702064992 BRO ITS SO AMAMZING ZAAMN??????? Report Comment