Customizable Pet Profile 03

Customizable Pet Profile 03

(Larger Preview)

Series: Custom
Featuring: A hover pet image




Directions:

There is some HTML required to operate this profile. I recommend placing the HTML above the CSS.

Pet Descrition/Story

Any text needs to be inside of:

<div id="sg_desc">

</div>

And every paragraph (or group of paragraphs) need to be surrounded by:

<p>TEXT</p>

So for example:


<div id="sg_desc">

<p>Chapter 1</p>

<p>Chapter 2</p>

</div>


Pet Hover & Tags
Please only change the content inside the div with the id sg_inset. The appearance of these tags can be changed in the CSS. You can also swap out the tags for text. Please note that this area does not scroll.

<div id="sg_box">
<div id="sg_hover1"></div>
<div id="sg_inset">
<center>
<span class="sg_tags">pilot</span>
<span class="sg_tags">carrot</span>
<span class="sg_tags">parsnip</span>
<span class="sg_tags">cabbage</span>
</center>
</div>
<div id="sg_hover2"></div>
</div>



CSS:


<style>
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;0,800;1,300;1,400;1,600;1,700;1,800&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Beth+Ellen&display=swap");
/* --------------------------------
-----------------------------------
A free Pet Profile created by FallenSamurai,
avaliable at https://subetagraphics.proboards.com
This profile uses both flexbox and grid.
-----------------------------------
---------------------------------*/
 
/* --------------------------------
-----------------------------------
Editable Sections
-----------------------------------
---------------------------------*/
 
body {
 background-color: #a2a2a2;
 background-image: url(https://i.imgur.com/UJneetp.jpg);
 background-size: cover;
 background-attachment: fixed;
 font-size: 10px !important;
 }
 
/* Links */
 
a {
 color: #723437;
 }
 
/* Change the background of the sidebar
where the hover, minion, spotlight,
stats and treasure */
 

#pet_info {
 background-color: #f4f4f4 !important;
 }
 
/* --------------------------------
Pet Stats
---------------------------------*/
 
/* Pet Stat Bar Background Color*/
 
.statbar {
 background-color: #cacaca;
 }
 
/* Pet Stat Completion Percentage Background Color
Note this is for all stat bars. */
 

.statbar div.stat {
 background-color: #723437;
 }
 
/* --------------------------------
Top Bar & Pet Name
---------------------------------*/
 
/* Background - Change the image
and  the way it is displayed*/
 
#column_2 h1:after {
 background-image: url(https://i.imgur.com/eaup6ja.jpg);
 background-size: 150%;
 background-position: 0% 39%;
 background-color: #fff;
 }
 
/* Pet Name */
 
#column_2 h1 span.pet_name {
 text-transform: uppercase;
 letter-spacing: 20px;
 font-style: italic;
 font-weight: 400;
 color: #9A2117;
 font-size: initial;
 }

 /* Legacy Name */

span.legacy-name {
   color: #9a2117 !important;
   background: rgb(255, 255, 255, 0.4);
   letter-spacing: 2px;
   font-size: 8px !important;
   font-weight: 500 !important;
   text-transform: uppercase;
}

span.legacy-name b {
   font-weight: inherit !important;
}

 
/* --------------------------------
Pet Image Hover
---------------------------------*/
 
/* This changes the image used in
the hover over the pet image.*/
 
div#sg_hover1, div#sg_hover2 {
 background: url(https://mfiles.alphacoders.com/848/848575.jpg);
 }
 
/* This changes the background color
of the area under the pet image*/
 
div#sg_inset {
 background-color: #fff;
 }
 
/* This chnages the apearance of the
tags that appear below the pet image */
 
span.sg_tags {
 padding: 4px;
 background: #9A2117;
 color: #fff;
 margin: 2px;
 text-transform: uppercase;
 font-size: 10px;
 width: 100%;
 }
 
/* --------------------------------
Pet Description
---------------------------------*/
 
/* This changes the colored bar
across the top of the pet desc/story,
where the pet species, color, owner,
and like button are */
 
div#sg_desc {
 border-top-color: #9a2117;
 }
 
/* This changes how the pet gender,
species, and owner are displayed. */
 
span.pet_color_info, span.owner, p.pet_like {
 color: #fff;
 text-transform: uppercase;
 letter-spacing: 2px;
 }
 
/* This changes the color of the heart */
 
i.icon.heart {
 color: #fff;
 }
 
/* This changes the background color
of the pet desc/story */
 
div#sg_desc, div#pet_desc {
 background: #fcfcfc;
 }
 
/* This changes the appearance of
the paragraphs wrapped in <p></p> */
 
div#sg_desc p {
 border: 1px solid #eaeaea;
 background-color: #fff;
 color: #919191 !important;
 }
 
/* Font size for the description*/
 
div#pet_desc {
 font-size: 10px;
 }
 
/* --------------------------------
Pet Treasure
---------------------------------*/
 
/* Scrolling Treasure

To have a scrolling treasure,
set height to desired value (XXXpx)
and set overflow to auto.

To have a non-scrolling treasure,
leave height empty or 100%.
Overflow can remain auto.
*/

div#pet_treasure {
 height: 800px;
 overflow: auto;
}



/* Changes the apearance of the
borders.
outline is the outer border
border is the middle border
background-color is the inner border */
 
div.treasure_item {
 width: 64px !important;
 outline: 1px solid #eaeaea;
 border: 2px solid #fff;
 background-color: transparent;
 }
 
 
/* --------------------------------
Headers
---------------------------------*/
 
/* Change how the headers are displayed.
Affects: pet spotlight, minion, statistics,
& treasure. */
 
p.pet_spotlight:before, div#column_1:before, #column_3 h2, div#column_3:after {
 padding: 4px 0;
 font-size: 8px;
 text-transform: uppercase;
 font-weight: bold;
 text-indent: 4px;
 color: #424242;
 letter-spacing: 4px;
 border-width: 0 0 1px 0;
 border-style: solid;
 border-color: #9a2117;
 margin-bottom: 4px;
 }
 
/* Change text in the pet spotlight
header. Do not remove the " "  */
 
p.pet_spotlight:before {
 content: "Award";
 text-align: right;
 }
 
/* Change text in the treasure header
Do not remove the " "  */
 
div#column_3:after {
 content: "a few of my favorite things";
 text-align: center;
 }
 
/* Change text in the minion header
Do not remove the " "  */
 
div#column_1:before {
 content: 'Minion';
 text-align: left;
 }
 
/* --------------------------------
CAUTION *** CAUTION *** CAUTION ***
-----------------------------------
Below is all the code that makes
everything work. Edit at your
own risk.
-----------------------------------
CAUTION *** CAUTION *** CAUTION ***
---------------------------------*/
 
/* --------------------------------
-----------------------------------
Remove Formatting
-----------------------------------
---------------------------------*/
 
html, body, #page, #main-content, #content {
 position: static !important;
 }
 
.container-fluid {
 position: absolute;
 top: 0px;
 left: 0;
 right: 0;
 bottom: 0;
 }
 
body {
 background-color: #fff;
 }
 
#postcards {
 display: none;
 }
 
#header {
 display: none;
 }
 
#menu {
 display: none;
 }
 
#sidebar {
 display: none;
 }
 
#bookmarks {
 display: none;
 }
 
#rightbg {
 display: none;
 }
 
.hustler {
 display: none;
 }
 
#page {
 position: initial !important;
 margin: 0 !important;
 width: 100% !important;
 }
 
#content {
 margin: 0 !important;
 padding: 0px !important;
 position: initial !important;
 zoom: initial !important;
 background-color: transparent !important;
 }
 
#pet_info {
 margin: 24px auto;
 /*width: 100% !important;*/
 
 }
 
/* --------------------------------
-----------------------------------
Main Structure
-----------------------------------
---------------------------------*/
 
body {
 /*background-color: #a2a2a2;*/
 
 /*background-image: url(https://imgur.com/ZiuzkDp.png);*/
 
 /*background-size: cover;*/
 
 }
 
a {
 /*color: #004AAD !important;*/
 
 }
 
#main-content {
 background: none;
 }
 
div#content {
 display: block;
 height: 100vh !important;
 }
 
.container-fluid {
 display: grid;
 height: 100vh;
 box-sizing: content-box;
 }
 
#pet_info, div#column_2 {
 width: 800px !important;
 display: inline-grid;
 position: relative;
 grid-template-columns: 141px 141px 4px 1fr;
 grid-template-rows: 100px 18px 22px 200px 168px 20px 16px 160px 0fr 1fr;
 }
 
div#column_1 {
 position: relative;
 grid-column: 1;
 grid-row: 8;
 padding: 0px;
 /* box-sizing: content-box; */
 
 width: 125px;
 margin: 0px auto;
 justify-self: center;
 align-self: start;
 background-color: transparent;
 /*font-size: 10px;*/
 
 }
 
div#column_1 h2, div#column_1 br {
 display: none;
 }
 
div#column_1 #pet_minion br {
 display: block;
 }
 
div#column_2 {
 padding: 0px !important;
 }
 
div#pet_image {
 z-index: 2;
 grid-column: 1 /span 2;
 grid-row: 4;
 margin: 0px auto;
 }
 
#column_2 h1 {
 grid-row: 1;
 grid-column: 1 /span 4;
 }
 
#column_2 h1 span.pet_name {
 text-align: left;
 position: absolute;
 left: 0px;
 bottom: 0px;
 width: 100%;
 /* height: 100px; */
 
 padding: 8px 16px;
 margin: 0px;
 box-sizing: border-box;
 z-index: 1;
 }
 
#column_2 h1:after {
 content: '';
 overflow: hidden;
 display: flex;
 height: 100px !important;
 position: absolute;
 bottom: 0px;
 width: 100%;
 padding: 0px;
 margin: 0px;
 box-sizing: content-box;
 opacity: 1;
 }
 
span.pet_color_info {
 text-align: left;
 }
 
span.owner {
 text-align: right;
 }
 
span.owner a {
 color: #fff !important;
 }
 
.pet_age_info_date, .pet_wco_info, .pet_wco_info_date {
 display: none !important;
 }
 
span.pet_color_info, span.owner, p.pet_like {
 grid-column: 4 /span 5;
 grid-row: 2;
 width: 100%;
 line-height: 18px;
 padding: 0 4px;
 display: inline;
 box-sizing: border-box;
 font-size: 8px;
 margin: 0px !important;
 }
 
p.pet_like {
 text-align: center;
 }
 
i.icon.heart {
 opacity: 1 !important;
 }
 
i.icon.heart:hover {
 opacity: 0.5;
 text-decoration: none !important;
 }
 
p.pet_spotlight {
 position: relative;
 grid-column: 2;
 grid-row: 8;
 padding: 0px;
 /* box-sizing: content-box; */
 
 width: 125px;
 margin: 0px auto;
 background-color: transparent;
 /*font-size: 10px;*/
 
 }
 
p.pet_spotlight:before, div#column_1:before, #column_3 h2, div#column_3:after {
 display: block;
 width: 100%;
 height: fit-content !important;
 }
 
/*  DO NOT REMOVE  */
 
body:after {
 content: 'Free Profile by FallenSamurai @ subetagraphics.proboards.com';
 padding: 5px;
 width: 100%;
 background-color: #941B29;
 box-sizing: border-box;
 font-size: 11px;
 text-align: center;
 margin-top: 8px;
 position: fixed;
 bottom: 0px;
 color: #fff !important;
 }
 
/*  DO NOT REMOVE  */
 
div#column_3 {
 display: flex;
 grid-column: 1 /span 2;
 grid-row: 9;
 padding: 0px;
 margin: 0px auto;
 width: 266px;
 flex-wrap: wrap;
 justify-content: center;
 align-content: flex-start !important;
 }
 
#column_3 br {
 display: none;
 }
 
#column_3 ul {
 padding: 0 !important;
 display: flex;
 flex-direction: row;
 flex-wrap: wrap;
 justify-content: space-around;
 align-items: center;
 margin: 0px;
 }
 
#column_3 a {
 font-size: 10px;
 }
 
#pet_info li {
 list-style: none;
 width: 90%;
 line-height: 1.5em;
 font-size: 10px;
 display: inline-block;
 margin: 0px;
 padding: 2px 0px;
 }
 
div.statbar {
 width: 90%;
 height: 4px;
 margin: 0px auto !important;
 }
 
.statbar {
 position: relative;
 /*background-color: #cacaca;*/
 
 border: 0px;
 }
 
div.stat {
 height: 100% !important;
 }
 
.statbar div.stat {
 /*background-color: #000;*/
 
 height: 10px;
 }
 
div#pet_desc {
 grid-row: 2 /span 9;
 overflow: visible;
 min-height: max-content;
 grid-column: 4;
 box-sizing: border-box;
 padding: 0;
 margin: 0;
 background-color: #fcfcfc;
 /*font-size: 12px;*/
 
 }
 
div#sg_desc p {
 margin: 0px;
 padding: 8px;
 box-sizing: border-box;
 margin: 8px;
 }
 
div#pet_treasure {
 grid-row: 10;
 grid-column: 1 /span 2;
 overflow-y: auto;
 padding: 4px;
 box-sizing: content-box;
 overflow-x: hidden;
 display: inline-flex;
 flex-wrap: wrap;
 flex-direction: row;
 justify-content: center;
 align-content: flex-start;
 }
 
div.treasure_item {
 display: inline-block;
 width: 64px !important;
 max-height: 64px !important;
 float: none;
 height: fit-content !important;
 outline: 1px solid #eaeaea;
 border: 2px solid #fff;
 padding: 4px;
 margin: 4px;
 }
 
div#pet_treasure h2 {
 display: none;
 }
 
div#pet_friends {
 display: none;
 }
 
div#sg_box {
 /* margin: 8px; */
 
 width: 266px;
 height: 416px;
 position: absolute;
 left: 8px;
 top: 108px;
 background: #fafafa;
 display: inline-block;
 /* padding: 8px; */
 
 outline: 1px solid #eaeaea;
 border: 2px solid #fff;
 }
 
div#sg_hover1, div#sg_hover2 {
 grid-row: 1;
 height: 400px;
 width: 250px;
 position: absolute;
 left: 8px;
 top: 8px;
 background-position: center center;
 background-size: cover !important;
 align-content: center;
 transition: opacity ease-in 500ms;
 }
 
div#sg_hover1 {
 z-index: 3;
 }
 
div#sg_hover1:hover {
 opacity: 0;
 }
 
div#sg_hover2 {
 opacity: 0.5;
 }
 
div#sg_desc {
 border-top-width: 18px;
 border-top-style: solid;
 font-size: inherit !important;
 padding: 8px;
 }
 
div#sg_inset {
 background-color: inherit;
 position: absolute;
 top: 230px;
 left: 31px;
 z-index: 2;
 width: 200px;
 height: 160px;
 box-sizing: border-box;
 padding: 4px;
 overflow: hidden;
 }
 
div#sg_inset center {
 display: flex;
 justify-content: space-evenly;
 flex-wrap: wrap;
 box-sizing: border-box;
 padding: 4px;
 }
 

span.legacy-name {
   position: absolute;
   /*padding: 0px;*/
   /*color: #9a2117 !important;*/
   z-index: 1;
   text-align: right;
   right: 0px;
   top: 0px;
   padding: 0px 8px;
   /*background: rgb(255, 255, 255, 0.4);*/
   /*letter-spacing: 2px;*/
   /*font-size: 8px !important;*/
   /*font-weight: 500 !important;*/
   text-transform: uppercase;
}

span.legacy-name b {
   font-weight: inherit !important;
}


div#column_3:after {
   padding-top: 40px;
}
</style>