SKYBERRY (BASE LAYOUT) | super sonicodes

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

Description:

this is my second ever base layout, and unlike the first one; it strays away from the overall spacehey layout!

it's important that you at least have a bit of coding knowledge, it'll be helpful!

oh, and that box SPECIFICALLY for stamps? yeah please don't put anything else there but stamps because it scrolls horizontally (of course it can be removed if you wish). also, please use a SQUARE image (100x100 for example, doesn't have to be that exact size because the layout automatically resizes the image)

here's the code for the bio, PLEASE replace all links that need to be replaced when you use this!!!

recent update: figured out a small issue with one of the boxes , so i changed the width from 434 to 433 , and it works fine now !

<center>

<div>

<div style="width: 1000px; text-align: left;">
<p id="nametext">PUT NAME HERE</p>
</div>

<div style="background-color: white; border: 2px solid black; border-bottom: none; width: 1000px; height: 50px; padding: 5px; border-radius: 10px 10px 0px 0px">
<p id="linktext"><a href="https://spacehey.com/home">home</a> ∘ <a href="https://spacehey.com/browse">browse</a> ∘ <a href="https://spacehey.com/search">search</a> ∘ <a href="https://blog.spacehey.com/">blogs</a> ∘ <a href="https://groups.spacehey.com/">groups</a></p>
</div>

<div style="display: flex; width: 1000px;">

<div style="background-color: white; border: 2px solid black; border-right: none; width: 170px; height: 450px; padding: 5px;">
<p>maybe graphics? or social links?</p>
</div>

<div style="background-color: white; border: 2px solid black; width: 700px; height: 450px; padding: 5px;">

<div style="border: 2px solid black; width: 220px; float: left; height: 100%; margin-right: 5px; padding: 10px; border-radius: 10px;">

<p><img src="YOUR_IMAGE_LINK_HERE" width="120"/></p>

<p><a href="https://spacehey.com/addfriend?id=YOUR_ID_HERE">add</a></p>
<p><a href="https://spacehey.com/unfriend?id=YOUR_ID_HERE">unadd</a></p>
<p><a href="https://spacehey.com/block?id=YOUR_ID_HERE">block</a></p>
<p><a href="https://spacehey.com/report?type=user&id=YOUR_ID_HERE">report</a></p>
<p><a href="https://blog.spacehey.com/entry?id=YOUR_ID_HERE">blogs</a></p>
<p><a href="https://spacehey.com/userbulletins?id=YOUR_ID_HERE">bulletins</a></p>
<p><a href="https://blog.spacehey.com/entry?id=YOUR_ID_HERE">layouts</a></p>
</div>

<div style="border: 2px solid black; width: 433px; float: left; height: 100%; overflow-y: auto; padding: 10px; border-radius: 10px;">
<p>put text into here</p>
</div>

</div>

<div style="background-color: white; border: 2px solid black; border-left: none; width: 170px; height: 450px; padding: 5px;">
<p>maybe graphics? or social links?</p>
</div>

</div>

<div style="background-color: white; border: 2px solid black; border-top: none; width: 1000px; height: 80px; padding: 5px; overflow-y: hidden; overflow-x: scroll; white-space: nowrap; border-radius: 0px 0px 10px 10px">

<p>add (SPECIFICALLY) stamps here</p>

</div>

</div>

</center>

Code:

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

<style>

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

}

p {
color: black /* change this if wanted */;

}

a {
color: skyblue /* change this */;
filter: drop-shadow(1px 1px 0 black) drop-shadow(-1px 1px 0 black) drop-shadow(0 -1px 0 black) drop-shadow(1px 0 black) /* only keep this if you're using a lighter text color it looks weirder with darker ones */;

}

a:hover {
color: skyblue /* also change this */;
font-style: italic;

}

body {
background-color: skyblue;
text-align: center;
font-family: ms gothic;
font-weight: bold;
background-attachment: fixed;

}

.container {
width: 2000px;
padding: 10px;
margin-top: 5px;
background-color: transparent;

}

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

}

</style>

<style>

.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>

@font-face {
font-family:'protomo';
src: url(https://dl.dropbox.com/s/n2rde8xf929fs56/Protomo-Outline.otf); 

}

@font-face {
font-family:'protomo-fill';
src: url(https://dl.dropbox.com/s/p7waq4bof8ne0qt/Protomo.otf); 

}

#nametext {
font-family: protomo;
font-size: 45px;
margin-bottom: -10px;
color: white;
filter: drop-shadow(1px 1px 0 black) drop-shadow(-1px 1px 0 black) drop-shadow(0 -1px 0 black) drop-shadow(1px 0 black) /* don't remove this */;
letter-spacing: 5px;
text-align: center;

}

#linktext {
font-family: protomo-fill;
font-size: 30px;
color: white;
letter-spacing: 4px;

}

</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.