css by bug | pet profile code

this is

a simple pet profile template
designed to be highly and easily customizable
based on designs by nobody; coded by bug
currently only for use by creators (bug and nobody). if you see anyone else using this template, please let us know and/or report them for theft.

rules

you can experiment with the code before purchasing. you're allowed to save it as your pet's profile while you do so. please have fun! however, when you are done playing with it for the day, you must remove it from your pet's profile.
the credit must remain visible (no exceptions)

examples

recursion (the default code)
looker (shows friends instead of stats)
more coming soon

prices + ordering info

ordering is currently restricted and by invite only.

you may pay with USD, CSC, and sP. the USD option is discounted because it is preferred.

$1.00 USD (through paypal or venmo)
250 CSC
30 mil sP

these are the prices per pet - not for free use of the code.

the code

reminder: this isn't a free template (sorry!)

I have made this code available here so that you can try out and play with it, to find out if it will suit your needs. please be respectful in return by not using it as your pet's profile without permission. thanks!

<div class="text-section">
<span class="title">Title of section</span>
<p>An example of a non-collapsible content section.</p>
</div>

[spoiler=Another section title!]
<p>This is a collapsible section. Text should still be within p tags, however!</p>
[/spoiler]

::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-button { width: 0px; height: 0px; }
::-webkit-scrollbar-thumb { background: #e1e1e1; border: 0px none #ffffff; border-radius: 0px; }
::-webkit-scrollbar-thumb:hover { background: #ffffff; }
::-webkit-scrollbar-thumb:active { background: #000000; }
::-webkit-scrollbar-track { background: #666666; border: 0px none #ffffff; border-radius: 0px; }
::-webkit-scrollbar-track:hover { background: #666666; }
::-webkit-scrollbar-track:active { background: #333333; }
::-webkit-scrollbar-corner { background: transparent; }

* { box-sizing: border-box; }
html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
body { padding-bottom: 200px; overflow: auto; background-size: cover; background-attachment: fixed; }
a:hover { cursor: pointer; }
#menu, #sidebar, #postcards, #bookmarks, #rightbg, #header div, #column_3 br, #column_3 + br, #stat_hp { display: none !important; }
#header { text-align: center; font-size: 55px; padding-top: 14px; }
#page { position: static; height: 100% !important; }
#page, #page #content { padding: 0; margin: 0; width: 100%; }
#content { height: 100% !important; background: none !important; }
#column_1 br, #column_2 br { display: none; }
#column_1, #column_2, #column_3, .friend_div { float: none !important; }
.pet_image { margin: 0; }
.pet_age_info_date, .pet_wco_info_date { display: none; }
.pet_like, .pet_color_info, .owner { display: block; position: fixed; height: 17px; bottom: 0; text-align: right; padding: 2px; margin: 0; font-size: 10px; color: #fff; text-transform: lowercase; }
.pet_like { z-index: 44; left: 25%; right: 25%; width: 50%; }
.pet_color_info, .owner { z-index: 45; right: 29%; }
.pet_color_info { padding-right: 102px !important; }

#pet_info { position: relative; display: block; width: 50%; min-height: 450px; min-width: 1px !important; height: auto; margin-left: auto; margin-right: auto; margin-bottom: 210px; padding: 25px; padding-bottom: 40px; text-align: justify; }
#pet_info h2 { display: none; }

#column_1 { display: block; }
#pet_minion img { float: right; margin: 10px; }

#column_2 { position: fixed; bottom: 17px; left: 25%; right: 25%; width: 50%; padding-top: 0px !important; padding-bottom: 0px !important; padding-right: 0px !important; padding-left: 30% !important; background-color: #fff; z-index: 33;}
#column_2 h1 { display: none; }
#column_2 #pet_image { margin-left: auto; position: relative; top: 5px; }
#pet_treasure { position: fixed; bottom: 22px; left: 25%; z-index: 44; width: 30%; height: 202px; overflow: auto; padding-bottom: 0px !important; padding-top: 0px !important; }
.treasure_item { padding: 3px; }
.treasure_item img { padding: 2px; border: 1px solid #eee; max-width: 100%; }

#column_1, #pet_treasure, #column_2, #column_3, #pet_desc { padding: 15px; }
#column_1, #column_3 { display: inline-block; vertical-align: top; height: 120px; }
#pet_minion { font-size: 0pt; text-align: center; }
#column_1 { width: 20%; padding: 4px !important; }
#pet_minion img { float: none !important; margin-top: 0 !important; }
#pet_minion b { color: #111 !important; font-size: 10px !important; }
#pet_minion br + b { text-transform: uppercase; color: #111 !important; display: block; text-align: center; }
#pet_minion b:last-of-type::before { content: \'the \'; }

#column_3 { width: 73%; overflow: auto; border: 1px solid #eee; font-size: 10px; padding: 0 !important; text-align: right; }
#column_3 li { display: inline-block; vertical-align: top; padding-left: 7px; padding-right: 7px; width: 30%; text-transform: lowercase; }
#column_3 li .statbar { width: 100%; height: 5px; border: 1px solid #d8d8d8; }
#column_3 li .stat { height: 100%; background-color: #f1edd8; }
#stat_books_read, #stat_food_eaten, #pet_employment { }

#pet_friends { display: inline-block; position: absolute; right: 25px; top: 25px; width: 73%; border: 1px solid #bbb; height: 120px; background-color: #eee; padding: 0px !important; text-align: justify; background-color: #eee; font-size: 13px; color: #111; font-weight: bold; text-transform: lowercase; }
#pet_friends .friend_div { display: inline-block; vertical-align: top; padding: 2px; margin: 0; width: 75px; position: relative; height: 100%; text-align: center; color: #eee; padding-top: 10px; white-space: nowrap;  -webkit-transition: color 0.6s ease; transition: color 0.6s ease; }
#pet_friends .friend_div:hover { color: #111; -webkit-transition: color 0.6s ease; transition: color 0.6s ease; }
#pet_friends .friend_div a { opacity: 0.5;  -webkit-transition: opacity 0.6s ease; transition: opacity 0.6s ease; }
#pet_friends .friend_div:hover a { opacity: 1.0;  -webkit-transition: opacity 0.6s ease; transition: opacity 0.6s ease; }
#pet_friends img { width: 60px; height: 60px; padding: 2px; border: 1px solid #fff; background-color: #eee; border-radius: 50%; }
#pet_friends::before { content: \'friends\'; display: block; padding: 2px; width: 100%; margin: 0; background-color: #bbb; color: #fff; height: 18px; font-size: 10px; box-sizing: border-box; }

#pet_desc { display: inline-block; width: 100%; padding: 0; padding-top: 15px; }
.spoiler, .text-section { border: 1px solid #bbb; padding: 0; margin-bottom: 15px; }
.spoiler_click, .text-section .title { padding: 5px; display: block; text-align: center; color: #fff; letter-spacing: 0.2em; font-size: 12px; text-transform: lowercase; }
.spoiler_click:hover { cursor: pointer; opacity: 0.8; }
.spoiler p, .spoiler li, .text-section p, .text-section li { padding: 5px; margin-left: auto; margin-right: auto; width: 60%; }
.spoiler_text { border: 0 !important; }

.credits { position: fixed; display: block; box-shadow: 0 0 10px #a0a0a0; text-align: center; width: 200px; height: 30px; line-height: 30px; font-size: 11px; opacity: 0.75; }
.credits:hover { opacity: 1.0; }
.credits.top-left { top: 25px; left: -50px; transform: rotate(-45deg); -webkit-transform: rotate(-45deg); }
.credits.top-right { top: 25px; right: -50px; left: auto; transform: rotate(45deg); -webkit-transform: rotate(45deg); }
.credits.bottom-left { top: auto; bottom: 25px; left: -50px; transform: rotate(45deg); -webkit-transform: rotate(45deg); }
.credits.bottom-right { top: auto; right: -50px; bottom: 25px; left: auto; transform: rotate(-45deg); -webkit-transform: rotate(-45deg); }

/* *** CUSTOMIZE BY EDITING THE SECTIONS BELOW *** */

/* Sections below are organized for your convenience: 
              01) header
              02) layout options
              03) text (formatting, colors)
              04) colors & borders
              05) credits
*/

/* ----- [01: header & background] ----- */

/* replace with your pet name */
#header::before { content: \'recursion\'; }

/* header styles (pet name at top of page) */
#header { font-weight: bold; color: #d1e1e5; letter-spacing: 0.2em; text-shadow: -3px 0px 0px #fff; text-transform: lowercase; }

/* replace with background image url */
body { background-image: url(\'http://static.simpledesktops.com/uploads/desktops/2010/05/16/falling-blues.png\'); }

/* ----- [02: layout options] ----- */

/* show stats or pet friends at top of profile? 
    To show STATS: set this to display: none; 
    To show FRIENDS: set this to display: inline-block; */
#pet_friends { display: none; }

/* flips pet image; delete this line if you do not want it flipped */
#pet_image { -webkit-transform: scaleX(-1); transform: scaleX(-1); }

/* ----- [03: text] ----- */

/* fonts: note that some fonts must be imported at the top of the stylesheet in order to work. 
    I have imported Nunito Sans and Raleway as an example. */
body { font-family: \'Nunito Sans\', sans-serif; }
.text-section .title, #header { font-family: \'Raleway\', monospace; }

/* links */
a, a:link { color: #543a3d !important; }
a:hover { color: #babc81 !important; }

/* bold text */
b, strong { font-weight: bold; }

/* italic text */
i, em { font-style: italic; }

/* you can add additional formatting-related styles here */

/* ----- [04: colors & borders] ----- */

/* color of top and bottom borders */
#pet_info { border-top: 17px solid #ddd; }
.pet_like { background-color: #ddd; }

/* main background color: if you would like main content background to be partially transparent, 
    change the last value to the amount of opacity you would like (such as 0.9, 0.75, etc) - 
    a value of 1.0 means 100% opacity (meaning it will not be transparent) */
#pet_info { background-color: rgba(255,255,255,1.0); }

/* background color of section titles */
.spoiler_click, .text-section .title { background-color: #a3c359 !important; }

/* background color of content sections */
.spoiler, .text-section { background-color: #fff; }

/* top border of fixed section (the section containing pet image & treasure) */
#column_2 { border-top: 1px solid #f8d6e0; }

/* border around the minion box */
#column_1 {  border: 1px solid #bbb; }

/* colors for stat bars: statbar is background, stat is the color of the inner bar.
    you can ignore or delete these if pet stats are hidden. */
#column_3 li .statbar { background-color: #edffef; }
#column_3 li .stat { background-color: #d5f459; }

/* ----- [05: credits] ----- */
/* Thank you for using my profile. The credit must remain on the layout and cannot be hidden. 
    However, I want to give you a few options for customizing it so that it matches the look of your page. */

/* position: you can edit this in the html - the credits link is at the very bottom of this code. 
    you can choose which corner to put it in by giving it one of the following classes: 
    top-right, top-left, bottom-right, or bottom-left (it is bottom-left by default) */

/* color: you may change the background color of the credits ribbon here */
.credits { background-color: #fff; }
</style>

<a href="https://subeta.neocities.org/profile.html"><div class="credits bottom-left">css by bug</div></a>

back to subeta

click here to go back to subeta.net