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 𝄢✧　🜲　❝　MX. SUN　❞ (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.