Customizable Pet Profile 04

Customizable Pet Profile 04

Last Updated: June 15 2020

Large Preview

Large Preview

Description:
Customizable minimalist-ish profile. Made with grid and flexbox. Featuring a hover minion area and target links to create multiple desc areas. HTML is required to make this profile work. I recommend having the HTML and Story above the CSS.

Story/Description
For each "page"/section of the pet story/description they will need to be wrapped in the following:

<div class="sg_desc" id="one">
Story Here.
</div>

For each section that you want to have, you will have to change the id to something unique. You cannot have one or more sections with the same id. This is because we will be targeting/linking to each section individually. See below example:

<div class="sg_desc" id="one">
Part One here
</div>

<div class="sg_desc" id="two">
Part Two here
</div>

<div class="sg_desc" id="art">
Art gallery here
</div>

<div class="sg_desc" id="credits">
FallenSamurai is awesome.
</div>


Sidebar Links
Now that the divs now have unique ids, we can now link to them.

First, the links must be inside the following

<div id="sg_nav">
(LINKS GO HERE)
</div>

Sidebar Links - Story/Desc
For the links for the story/description, the URL will be the unique id you choose earlier with a # in front. For example: #one, #two, etc. The link should look like:

<span class="sg_link"><a href="#one">One</a></span>

So for the above sections, the links would look like this:


<span class="sg_link"><a href="#one">One</a></span>
<span class="sg_link"><a href="#two">Two</a></span>
<span class="sg_link"><a href="#art">One</a></span>
<span class="sg_link"><a href="#credits">Two</a></span>



Sidebar Links - Main Sections
For the other sections of the pet profile, such as the stats, treasure, friends, and the pet image sections. If you do not want a section to appear, just don't add the link.

Pet Image, Owner, Gender & Species, Like, Spotlight
<span class="sg_link"><a href="#column_2">About</a></span>

Pet Stats
<span class="sg_link"><a href="#column_3">Stats</a></span>

Pet Treasure
<span class="sg_link"><a href="#pet_treasure">Treasure</a></span>

Pet Friends
<span class="sg_link"><a href="#pet_friends">Friends</a></span>


Sidebar Links - Final Product
Once you have all your links, the final code should look something like this:

<div id="sg_nav">
<span class="sg_link"><a href="#column_2">About</a></span>
<span class="sg_link"><a href="#one">One</a></span>
<span class="sg_link"><a href="#two">Two</a></span>
<span class="sg_link"><a href="#art">Art</a></span>
<span class="sg_link"><a href="#credits">Credits</a></span>
<span class="sg_link"><a href="#column_3">Stats</a></span>
<span class="sg_link"><a href="#pet_treasure">Treasure</a></span>
<span class="sg_link"><a href="#pet_friends">Friends</a></span>
</div>

You can change what the text for the link. This is just an example. However, please keep the text short.


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");
/* --------------------------------
-----------------------------------
A free Pet Profile created by FallenSamurai,
avaliable at https://subetagraphics.proboards.com
This profile uses both flexbox and grid.
-----------------------------------
---------------------------------*/
/* --------------------------------
-----------------------------------
Editable Sections
-----------------------------------
---------------------------------*/
a {
 color: #a2cbd8 !important;  
 }
 
 
/* --------------------------------
Change the main background image and
the overal font size and color.
---------------------------------*/
body {
 background-image: url(https://i.imgur.com/cS83PmS.jpg);
 background-size: cover;
 background-attachment: fixed;
 font-size: 10px !important;
 color: #828282 !important;
 }
 
/* --------------------------------
Change the background color of
the pet info, desc, treasure, etc
-------------------------------- */
#pet_info, div#column_2, div#column_3,
div.sg_desc, div#pet_treasure, div#pet_friends {
 background-color: #fff;
 }
 
/* --------------------------------
Change the background image of the
sidebar
-------------------------------- */
div#pet_info:before {
 background: url(https://mfiles.alphacoders.com/863/863556.jpg);
 background-size: cover;
 background-position: center center;
 }
 
/* --------------------------------
Change the appearnce of the links
in the sidebar
-------------------------------- */
div#sg_nav span.sg_link a {
 color: #fff !important;
 text-decoration: none;
 text-transform: uppercase;
 letter-spacing: 2px;
 }
 
div#sg_nav span.sg_link a:hover {
 background: #a2cbd8;
 }

/* --------------------------------
Change the color of the circle in the
links in the sidebar - Make sure
border and background are same color.
-------------------------------- */

div#sg_nav span.sg_link a:before {
 border-color: #fff;
 background-color: #fff;
 }
 
/* --------------------------------
Change appearance of the minion
hover - background & text.
-------------------------------- */
div#pet_minion {
 background: rgba(214, 226, 230, 0.74);
 color: #505a5d;
 }

/* --------------------------------
Change the color of the triangle
-------------------------------- */

div#column_1:before {
   border-color-bottom: #fff;
}

 
/* --------------------------------
Change appearance of the Pet's Name
-------------------------------- */
#column_2 h1 {
 font-size: 30px !important;
 letter-spacing: 8px;
 text-indent: 8px;
 color: #0786A4;
 }
 
/* --------------------------------
Change appearance of the Pet's
Legacy Name
-------------------------------- */

span.legacy-name {
   font-size: 10px !important;
   color: #828282 !important;
   font-weight: normal !important;
   letter-spacing: 0px;
   line-height: normal !important;
}

span.legacy-name b {
   font-weight: normal !important;
   color: #0786a4;
}

/* --------------------------------
Change appearance of the Pet's Stats
-------------------------------- */
/* Background behind progress bar */
.statbar {
 background-color: #dcedef;
 }
 
/* Progress bar Background */
.statbar div.stat {
 background-color: #02a9ba;
 }
 
/* --------------------------------
Change appearance treasure items
If you want more or less items
per row, adjust the following:
- Margin will change the spacing
around the items.
- Width will change the size of
the items. Max is 64px (native size)
-------------------------------- */
div.treasure_item {
 width: 64px !important;
 outline: 1px solid #eaeaea;
 border: 2px solid #ffffff;
 margin: 8px 12px;
 /* padding: 4px; */
 background-color: transparent;
 }
 
/* --------------------------------
Change appearance of the Credit Bar.
Do not remove, obscure, or make
this unreadable.
-------------------------------- */
body:after {
 background-color: #c7c7c7;
 font-size: 11px;
 color: #2a2a2a !important;
 }
 
/* --------------------------------
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;*/
 }
 
#pet_desc {
 padding: 0px !important;
 }
 
/* --------------------------------
-----------------------------------
Main Structure
-----------------------------------
---------------------------------*/
a {
 /*color: #004AAD !important;*/
 }
 
#main-content {
 background: none;
 }
 
div#content {
 display: block;
 height: 100vh !important;
 }
 
.container-fluid {
 display: flex;
 height: 100vh;
 box-sizing: border-box;
 justify-items: flex-start;
 align-items: center;
 }
 
#pet_info, div#column_2 {
 display: inline-grid;
 position: relative;
 grid-template-columns: 80px 100px 20px 20px 100px 80px;
 grid-template-rows: 200px 75px 25px 100px 400px;
 min-width: 400px !important;
 overflow: hidden;
 height: 400px;
 padding: 0 0 0 200px;
 margin: 0 auto;
 width: 400px;
 }
 
div#column_3,
div.sg_desc,
div#pet_treasure,
div#pet_friends {
 position: absolute;
 grid-column: 1 /span 6;
 grid-row: 5;
 padding: 4px;
 box-sizing: border-box;
 width: 100%;
 margin: 0px auto;
 justify-self: center;
 align-self: start;
 overflow: auto;
 height: 400px;
 z-index: -11;
 }
 
div#column_3:target, div.sg_desc:target,
div#pet_treasure:target,
div#pet_friends:target {
 grid-column: 1 /span 6 !important;
 grid-row: 1 !important;
 z-index: 10;
 }
 
div#pet_info:before {
 position: absolute;
 height: 400px;
 width: 200px;
 content: '';
 }
 
#pet_desc {
 padding: 0px !important;
 grid-column: 1;
 grid-row: 1;
 }
 
div#sg_nav {
 grid-column: 1;
 grid-row: 1;
 position: absolute;
 left: 0px;
 overflow: hidden;
 }
 
div#column_1 h2, div#column_1 br {
 display: none;
 }
 
div#column_1 #pet_minion br {
 display: block;
 }
 
div#column_2 {
 padding: 0px !important;
 }
 
p.pet_spotlight {
 display: flex;
 width: 50% !important;
 justify-content: space-around;
 align-items: center;
 margin: 0 auto;
 }
 
div#sg_nav {
 width: 200px;
 left: -200px;
 padding: 4px;
 box-sizing: border-box;
 position: absolute;
 z-index: 0;
 }
 
div#sg_nav span.sg_link a {
 display: flex;
 width: 124px;
 margin: 4px 0px;
 transition: ease all 300ms;
 overflow: hidden;
 position: relative;
 left: 180px;
 align-items: center;
 }
 
div#sg_nav span.sg_link a:hover {
 left: 72px;
 }
 
div#sg_nav span.sg_link a:before {
   content: '';
   display: inline-flex;
   padding: 0px;
   box-sizing: border-box;
   justify-content: center;
   align-items: center;
   width: 0px;
   border-width: 0.3rem;
   border-style: solid;
   border-radius: 50%;
/*    border-color: #fff;*/
   margin: 0px 8px 0 4px;
/*    background-color: #fff;*/
}
 
div#pet_image {
 margin: 0px auto;
 }
 
div#column_1 {
   z-index: 1;
   position: absolute;
   left: 0px;
   width: 200px;
   margin: 0 auto;
   padding: 0;
   display: block;
   overflow: hidden;
   top: 372px;
   background-color: transparent;
   transition: all ease 300ms;
}
 
div#column_1:before {
   content: '';
   transform: rotate(0deg);
   color: #fff !important;
   padding: 0px;
   display: block;
   width: 0px;
   margin: 6px auto;
   transition: all ease 500ms;
   border-width: 8px;
   border-style: solid;
   border-color: transparent transparent #fff transparent;
}
 
div#column_1:hover:before {
 transform: rotate(180deg);
 }
 
div#column_1:hover {
 transform: translateY(-130px);
 }
 
div#pet_minion {
 padding: 16px 0 0;
 box-sizing: border-box;
 height: 200px;
 }
 
div#column_2 {
 place-items: center center;
 }
 
#column_2 h1 {
 grid-column: 1/span 6;
 grid-row: 2;
 position: relative;
 justify-self: center;
 align-self: center;
 }
 
span.pet_color_info {
 grid-column: 1/span 2;
 grid-row: 3;
 }
 
div#pet_image {
 grid-column: 1 /span 6;
 grid-row: 1;
 }
 
span.owner {
 grid-column: 5 /span 2;
 grid-row: 3;
 }
 
p.pet_age_info_date {
 display: none;
 }
 
.pet_age_info, .pet_wco_info {
 display: none;
 }
 
p.pet_wco_info_date {
 display: none;
 }
 
p.pet_spotlight {
 grid-column: 1 /span 6;
 grid-row: 4;
 }
 
p.pet_like {
 grid-column: 3/span 2;
 grid-row: 3;
 margin: 0;
 padding: 0;
 /* width: 40px; */
 align-self: center;
 justify-self: center;
 }
 
/*  DO NOT REMOVE  */
body:after {
 content: 'Free Profile by FallenSamurai @ subetagraphics.proboards.com';
 padding: 5px;
 width: 100%;
 box-sizing: border-box;
 text-align: center;
 margin-top: 8px;
 position: fixed;
 bottom: 0px;
 }
 
/*  DO NOT REMOVE  */
div#column_3 {
 display: flex;
 padding: 0px;
 margin: 0px auto;
 flex-wrap: wrap;
 justify-content: center;
 align-content: center !important;
 }
 
#column_3 h2 {
 display: none;
 }
 
#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: 100%;
 line-height: 1.5em;
 font-size: 10px;
 display: inline-block;
 margin: 0px;
 padding: 6px 0px;
 }
 
div.statbar {
 width: 90%;
 height: 4px;
 margin: 0px auto !important;
 }
 
.statbar {
 position: relative;
 border: 0px;
 }
 
div.stat {
 height: 100% !important;
 }
 
.statbar div.stat {
 height: 10px;
 }
 
div#pet_desc, div#column_2 {
 grid-column: 1 /span 6;
 grid-row: 1 /span 5;
 }
 
div#pet_treasure {
 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;
 float: none;
 height: fit-content !important;
 }
 
div#pet_treasure h2 {
 display: none;
 }
 
div#pet_friends {
 display: flex;
 flex-direction: row;
 flex-wrap: wrap;
 justify-content: center;
 align-items: flex-start;
 }
 
div#pet_friends h2 {
 display: none;
 }
 
.friend_div {
 float: none;
 height: fit-content !important;
 padding: 4px !important;
 margin: 4px !important;
 width: max-content !important;
 }
 
 

</style>