css by bug | pet profile code

glider by bug

glider is a simple pet profile designed to be highly (and easily) customizable.

<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.net/users/Bug" target="_blank"><div class="credits bottom-left">css by bug</div></a>