Profile
<!----- KEYWORDS FOR EACH SECTION; click on this code box and hit ctrl+f and search the terms between the ' ' to quick jump to them; --------------------------
(also feel free to delete this whole heyword section, I know it's an eye sore and makes an already long code even longer)
-- 'LARGE CHARACTER ART PIECE' = change the big character image on the left side (needs to be TALL)
-- 'PLAYER WOLF INFO' = change the player wolf name, gender, pack name, and location
==== 'APPEARANCE TAB'; first tab, appearance ==================================================
-- 'COAT TYPE' = change the name of your wolf's coat; line below it changes the locus
-- 'REFERENCE IMAGE' = change the small image in the appearance tab to a fullbody red or additional character art (needs to be WIDE)
-- 'COLOR PALETTE' = change the 6 boxes under the reference image (can be deleted if you don't need it!)
-- 'EYE COLORS' = change the two eye color boxes (can be deleted and replaced with code provided below if you don't want to use exact hexes!)
-- 'PUT EYE NOTES HERE' = where to write out any other notes about eyes you have (i.e. missing, scarred, etc.)
-- 'ADD OTHER FEATURE NOTES BELOW' = where you can list all the other important physical features (i.e. ears, tail, body, etc.)
==== 'BIOGRAPHY TAB'; second tab, stats and bio ================================================
-- 'ATRRIBUTES BLOCK' = below are the values for the four stats, just change the number under each one
-- 'PUT BACKSTORY HERE' = where you can describe your wolf's backstory (i.e. history before starting the game)
==== 'TIMELINE TAB'; third tab, age perks and in-game events for each year =====================
-- 'YEAR 1', 'YEAR 2', 'YEAR 3', etc. = each individual year box; EACH YEAR CAN BE DELETED if you wolf didn't live that long
-- 'Y# AGE PERKS' = the start of the age perks for each year; replace # with 3-8, depending on the year
-- 'Y# AGE PERK ONE/TWO/THREE COLOR' = where you can change the Age Perk color; ONE takes you to the first, TWO takes you to the second, etc.
NOTE: the rgba values for each Age Perk type (i.e. Clout, Wisdom, or Physical Attrbite) is provided at the start of Age Perks!
-- 'Y# AGE PERK ONE/TWO/THREE NAME' = where you write out the name of the Age Perk, or say 'None' if there isn't any
-- 'PUT Y# IN-GAME EVENTS HERE' = where you write out everything that happend during that year
==== 'PERSONALITY TAB'; fourth tab, personality sliders and blurb ============================
-- 'PERSONALITY SLIDERS' = start of the sliders section; each of the 3 personality traits are below
-- 'IN-DEPTH PERSONALITY' = where you describe your wolf's personality in detail
==== 'FAMILY TAB'; fifth and final tab, your wolf's relationships ============================
-- 'MATES TAB', 'PUPS TAB', and 'EXTENDED FAMILY TAB' = individual content sections; one for Mates, one for Pups, and one for other family members
-- 'LEFT/RIGHT-ALIGNED MATE CARD' = the whole element for one mate in the Mates tab; copy and paste to add more; choose left or right
-- 'LITTER BLOCK' = the whole element for a litter in the Pups tab; copy and paste to add more;
just below this is litter info (litter # and other parent)
-- 'LEFT/RIGHT-ALIGNED PUP CARD' = the whole element for one pup in the Pups tab, contained inside a Litter Block; copy and paste to add more
-- 'LEFT/RIGHT-ALIGNED FAMILY CARD' = the whole element for one family member in the Extended Family tab; copy and paste to add more
-- 'MATE/PUP/WOLF IMAGE' = inside relationship cards, little images next to each relationship, position will change depending on left/right-align, must be TALL
-- 'MATE/PUP/WOLF INFO' = inside relationship cards, below is the information you fill out for each individual; NOTE this info is different depneding on card type
(i.e. Mate, Pup, or Family)
-- 'EXTENDED MATE/PUP/WOLF INFO' = inside relationship cards, a little blurb to describe anything you want about this wolf
-------------------------------------------------------------------------------------------------------------------------------------------------------------------->
<!--- CODE START; url in the middle here is the bg image, you can change it if you want --------------------------------------------->
<div class="m-auto" style="background-image: url(
https://i.postimg.cc/6qVfnM3s/Screenshot-10.png
); background-repeat: no-repeat; background-size: cover; background-color: pink; width: 1100px; height: auto; border-radius: 2%">
<img src="https://i.postimg.cc/VkvXkfjP/backdrop.png" style="position:absolute; width:670px; height: 270px; margin-left:430px;">
<div class="container p-2" width="100%">
<!-- LEFT COLUMN; LOGO AND IMAGE -->
<div class="row">
<div class="col p-3 ml-4">
<div class="container mb-2 mx-5"><img src="https://i.postimg.cc/W1ygDBnF/Wolf-Quest-Anniversary-Title.png" style="width:310px; margin-top: 5px; margin-left:40px;"></div>
<div class="container" align="center">
<!-- LARGE CHARACTER ART PIECE ON LEFT SIDE -- change middle url here; SHOULD BE A TALL IMAGE -->
<div class="flex-grow-1 ml-3" style="height: 620px; background-image: url(
https://i.postimg.cc/sX4MJqpJ/wolf-on-a-transparent-background-by-prussiaart-dbgfod9-fullview.png
);
background-size: contain; background-position: center; background-repeat: no-repeat;"></div>
</div>
</div>
<!-- RIGHT COLUMN; PLAYER WOLF INFO & TABBED BOX -->
<div class="col-6 p-3 align-self-center">
<div class="container px-4" style="height:170px; overflow: hidden;">
<div class="container ml-3 mt-5 mb-4 pt-3 px-3 text-truncate" style="color: black;">
<div style="font-size: 40px; font-weight: 600;">
<!-- PLAYER WOLF NAME HERE; can fit a max of about 15-17 characters -->
Luna Moonbeam III
<!-- PLAYER WOLF GENDER SYMBOL; use 'fa-mars' for male & 'fa-venus' for female -->
<i class="fas fa-venus" style="font-size: 35px;"></i>
</div><div style="font-size: 16.5px;"><i>of the
<font style="font-weight: 600; text-transform: uppercase;">
<!-- PLAYER PACK NAME HERE; can fit a max of about 21 characters, 'pack' included -->
Silver Crescent Pack
</font><font style="font-weight: 500; color: #707070;">
<!-- PACK LOCATION HERE -->
(Amethyst Mountain)
</font>
</i></div>
</div>
</div>
<!-- BOX AND TABS CONTAINER -->
<div class="container py-2 px-3 mr-5" style="color: white;">
<ul class="nav nav-tab nav-justified">
<li class="nav-item col">
<a class="bt bt-default border-0 nav-link" data-toggle="tab" href="#appearance" style="background-color: #221b06; color: white; font-size: 18px; border-top-left-radius: 5%; border-top-right-radius: 5%;"><i class="fas fa-eye"></i></a>
</li>
<li class="nav-item col">
<a class="bt bt-default border-0 nav-link" data-toggle="tab" href="#bio" style="background-color: #221b06; color: white; font-size: 18px; border-top-left-radius: 5%; border-top-right-radius: 5%;"><i class="fas fa-address-book"></i></a>
</li>
<li class="nav-item col">
<a class="bt bt-default border-0 nav-link" data-toggle="tab" href="#timeline" style="background-color: #221b06; color: white; font-size: 18px; border-top-left-radius: 5%; border-top-right-radius: 5%;"><i class="fas fa-hourglass"></i></a>
</li>
<li class="nav-item col">
<a class="bt bt-default border-0 nav-link" data-toggle="tab" href="#personality" style="background-color: #221b06; color: white; font-size: 18px; border-top-left-radius: 5%; border-top-right-radius: 5%;"><i class="fas fa-sliders"></i></a>
</li>
<li class="nav-item col">
<a class="bt bt-default border-0 nav-link" data-toggle="tab" href="#pack" style="background-color: #221b06; color: white; font-size: 18px; border-top-left-radius: 5%; border-top-right-radius: 5%;"><i class="fas fa-heart"></i></a>
</li>
</ul>
<!-- BEGINNING OF BLACK BOX CONTENT -->
<div class="containter" style="background-color: rgba(34,27,6,0.9); text: white; height: 520px; border-radius: 1%;">
<div class="tab-content">
<!-- --------------------- APPEARANCE TAB ------------------------------------------------------------------------------------------ -->
<div class="tab-pane in active show justify-content-center" style="height:520px;overflow:auto;" id="appearance">
<div class="row no-gutters justify-content-between py-2 px-3 mb-4" style="background-image: linear-gradient(rgb(56,52,36), rgb(51,46,27)); border-radius: 2px;">
<div class="col-auto align-self-center" style="font-size: 25px; font-weight: 400;">Coat</div>
<div class="col-auto align-self-center pt-2" style="font-size: 15px;">
<!-- COAT TYPE; intended to feature the in-game coat name, tint, shade, etc. but you can call it whatever you want -->
'LiR Pack 1, Coat 2' • No Tint • Light Shade
<font style="color: #a8a7a5;"><i>
<!-- LOCUS TYPE -->
(Kk/Gray)
</i></font>
</div>
</div>
<!-- REFERENCE AND COLOR PALETTE -->
<div class="card d-flex m-auto align-self-center" style="width: 335px; overflow: hidden; background-color: #221b06;">
<div class="body">
<div class="row">
<!-- REFERENCE IMAGE/CHARACTER ART; replace the URL in the middle; image NEEDS TO BE WIDE -->
<div class="container" style="background-image: url(
https://upload.wikimedia.org/wikipedia/commons/6/68/Eurasian_wolf_2.jpg
); width: 334px; height: 220px; background-size: cover; background-position: center; background-repeat: no-repeat; border: 2px solid #edca6d;"></div>
</div>
<!-- COLOR PALLETE; change the hex codes in the middle; YOU CAN DELETE IF YOU DON'T NEED IT/HAVE HEXES -------------------------------------------->
<div class="row no-gutters mt-2" style="height: 40px; width: auto;">
<div class="col h-100 pr-1">
<!--- FIRST BOX ----->
<div style="background-color:
#4b4138
;border: 2px solid #edca6d; height: 40px;"></div>
</div>
<div class="col h-100 px-1">
<!--- SECOND BOX ----->
<div style="background-color:
#715f4f
;border: 2px solid #edca6d; height: 40px;"></div>
</div>
<div class="col h-100 px-1">
<!--- THIRD BOX---->
<div style="background-color:
#887761
; border: 2px solid #edca6d; height: 40px;" ></div>
</div>
<div class="col h-100 px-1">
<!--- FOURTH BOX ----->
<div style="background-color:
#aa9886
; border: 2px solid #edca6d; height: 40px;"></div>
</div>
<div class="col h-100 px-1">
<!--- FIFTH BOX ----->
<div style="background-color:
#b6a899
; border: 2px solid #edca6d; height: 40px;" ></div>
</div>
<div class="col h-100 pl-1">
<!--- SIXTH BOX ----->
<div style="background-color:
#c8c9cd
; border: 2px solid #edca6d; height: 40px;"></div>
</div>
</div>
<!--- END OF COLOR PALLETE ------------------------------------------------------------------------>
</div>
</div>
<!-- EYES -->
<div class="row no-gutters justify-content-between py-2 px-3 mb-3 mt-4" style="background-image: linear-gradient(rgb(56,52,36), rgb(51,46,27)); border-radius: 2px;">
<div class="col-auto mr-5 align-self-center" style="font-size: 25px; font-weight: 400;">Eyes</div>
<!-- EYE COLORS; change the middle hex color ----------------------------------->
<!--- YOU CAN DELETE THIS AND REPLACE WITH;
<div class="col-auto align-self-center pt-2 mr-3" style="font-size: 15px;">
EYE COLOR HERE
</div>
if you don't have hexes/would rather say it as a written word (i.e. Light Amber) -->
<div class="col-sm align-self-center py-2 pl-2 pr-1">
<!-- LEFT EYE -->
<div style="background-color:
#ffb224
;border: 2px solid #edca6d; height: 40px;"></div>
</div><div class="col-sm align-self-center py-2 pl-1 pr-2">
<!-- RIGHT EYE -->
<div style="background-color:
#ffb224
; border: 2px solid #edca6d; height: 40px;"></div>
</div>
<!----- END OF EYE COLORS ----------------------------------------------------->
</div>
<!-- EYE NOTES -->
<div class="container m-auto px-5 pb-4 pt-3 align-self-center text-center" style="font-size: 15px;">
<!-- PUT EYE NOTES HERE; seperate paragraphs with <p> tags -->
<p>Enter some notes about your character's eyes; namely, if they're both in tact or if they're missing, scarred, etc. <b>Bold</b> things to add emphasis.</p>
<p>Luna's <b>Left Eye</b> is in perfect shape, but her <b>Right Eye</b> is <b>blind</b>, injured in a fight with a cougar. It is <b>scarred</b> and misted over.</p>
</div>
<!-- NOTES ABOUT OTHER FEATURES -->
<div class="row no-gutters justify-content-between py-2 px-3 my-3" style="background-image: linear-gradient(rgb(56,52,36), rgb(51,46,27)); border-radius: 2px;">
<div class="col-auto mr-5 align-self-center" style="font-size: 25px; font-weight: 400;">Other Features</div></div>
<div class="container m-auto pr-5 pl-3 pb-4 pt-3 align-self-center" style="font-size: 15px;">
<ul class="text-justify">
<!-- ADD OTHER FEATURE NOTES BELOW; copy the exact li code per item -->
<li class="mb-2">And here's where you can add any extra info, like body proportions, ears, scars, radio collar, etc.</li>
<li class="mb-2">Luna has a <b>slim build</b> with a <b>very fluffy neck rough</b> and <b>fluffy tail.</b></li>
<li class="mb-2">Her <b>right ear</b> is <b>torn</b>; a scar she got in a fight with a cougar.</li>
</ul>
</div>
</div>
<!-- ------------------------ END OF APPEARANCE TAB ------------------------------------------------------------------------------------- -->
<!-- ----------------------- BIOGRAPHY TAB ------------------------------------------------------------------------------------------------>
<div class="tab-pane show justify-content-center" style="height:520px;overflow:auto;" id="bio">
<div class="row no-gutters justify-content-between py-2 px-3 mb-2" style="background-image: linear-gradient(rgb(56,52,36), rgb(51,46,27)); border-radius: 2px;">
<div class="col-auto align-self-center" style="font-size: 25px; font-weight: 400;">Attributes</div></div>
<!-- ATTIRBUTES BLOCK; intended to show your wolf's base stats; age perks w/ enhanced stats will be in the next tab -->
<div class="container" align="center">
<div class="row no-gutters justify-content-center py-2 px-3">
<div class="col align-self-center">
<div style="font-size: 20px; font-weight: 450;">STR</div>
<div style="font-size: 15px;">
<!-- STRENGTH STAT -->
0
</div>
</div>
<div class="col align-self-center">
<div style="font-size: 20px; font-weight: 450;">HLTH</div>
<div style="font-size: 15px;">
<!-- HEALTH STAT -->
2
</div>
</div>
<div class="col align-self-center">
<div style="font-size: 20px; font-weight: 450;">SPD</div>
<div style="font-size: 15px;">-
<!-- SPEED STAT -->
1
</div>
</div>
<div class="col align-self-center">
<div style="font-size: 20px; font-weight: 450;">STM</div>
<div style="font-size: 15px;">
<!--- STAMINA STAT --->
-1
</div>
</div>
</div>
</div>
<div class="row no-gutters justify-content-between py-2 px-3 mt-2 mb-1" style="background-image: linear-gradient(rgb(56,52,36), rgb(51,46,27)); border-radius: 2px;">
<div class="col-auto align-self-center" style="font-size: 25px; font-weight: 400;">Backstory</div></div>
<!-- BACKSTORY BLURB -->
<div class="container px-4 py-1 mt-3 align-self-center" align="center">
<div class="container align-self-center" style="height: 265px; overflow: auto; font-size: 15px; text-align: justify;">
<!-- PUT BACKSTORY HERE; enclouse new paragraphs in the <p> tag -->
<p>Use this section to explain your wolf's backstory; that is, their life before starting the game. Where they come from, what their birth pack was like (if they had one), why they have a radio collar (again, if they have one, etc.). This box will scroll.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla condimentum ac nisl quis vehicula. Nam sed elementum dui. Donec finibus vulputate varius. Vivamus lobortis tempor nibh eu laoreet. Donec suscipit vestibulum tellus id ullamcorper. Etiam vel mattis magna, ac hendrerit justo. Ut commodo hendrerit magna, ac consequat ipsum malesuada vel. Nam gravida mi a tortor aliquam iaculis. Quisque consectetur augue vitae ante convallis, quis lobortis ipsum placerat. Mauris euismod arcu at scelerisque tempor.</p>
</div>
</div>
</div>
<!-- ----------------------- END OF BIOGRAPHY TAB --------------------------------------------------------------------------------------- -->
<!-- ----------------------- TIMELINE TAB ------------------------------------------------------------------------------------------------ -->
<div class="tab-pane show justify-content-center" id="timeline">
<div class="row no-gutters justify-content-between py-2 px-3 mb-2" style="background-image: linear-gradient(rgb(56,52,36), rgb(51,46,27)); border-radius: 2px;">
<div class="col-auto align-self-center" style="font-size: 25px; font-weight: 400;">Timeline</div>
</div>
<!-- ENTIRE ACCORDIAN PANE -->
<div class="container accordian" id="expand" style="height: 450px;overflow-y:scroll;">
<!--- YEAR BLOCKS; if your wolf died and didn't make it to certain years, you can delete the blocks for those years -->
<!------------- YEAR TWO BLOCK ------------------------------------------------------------------------------------------------------------->
<div class="card text-center display-4 pt-2" style="background-color: #221b06; text-transform: uppercase; font-size: 20px; height: 40px;">
<a class="align-items-center justify-content-center" data-toggle="collapse" data-target="#y02">
Year 2 <i class="fas fa-angle-down fa-xs mx-2"></i>
</a>
</div>
<div class="collapse" id="y02" data-parent="#expand">
<!-- ENTIRE Y2 CONTENT SECTION -->
<div class="container pr-2">
<!--- Y2 EVENTS --->
<div class="container px-3 py-1 mt-2 mb-3 align-self-center" align="center">
<div class="container align-self-center" style="font-size: 15px; text-align: justify;">
<!-- PUT Y2 IN-GAME EVENTS HERE; enclouse new paragraphs in the <p> tag -->
<p>Use each of these tabs to explain the wolf's in-game timeline of events. This tab doesn't have a section for Age Perks, since Year 2 is techincally just you finding a mate and territory; Year 3 (and choosing Age Perks) doesn't start until you have pups.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla condimentum ac nisl quis vehicula. Nam sed elementum dui. Donec finibus vulputate varius. Vivamus lobortis tempor nibh eu laoreet. Donec suscipit vestibulum tellus id ullamcorper. Etiam vel mattis magna, ac hendrerit justo. Ut commodo hendrerit magna, ac consequat ipsum malesuada vel. Nam gravida mi a tortor aliquam iaculis. Quisque consectetur augue vitae ante convallis, quis lobortis ipsum placerat. Mauris euismod arcu at scelerisque tempor.</p>
</div>
</div>
</div>
</div>
<!------------- END OF YEAR TWO BLOCK ---------------------------------------------------------------------------------------------------------->
<!------------- YEAR THREE BLOCK --------------------------------------------------->
<div class="card text-center display-4 pt-2" style="background-color: #221b06; text-transform: uppercase; font-size: 20px; height: 45px;">
<a class="align-items-center justify-content-center" data-toggle="collapse" data-target="#y03">
Year 3 <i class="fas fa-angle-down fa-xs mx-2"></i>
</a>
</div>
<div class="collapse" id="y03" data-parent="#expand">
<!-- ENTIRE Y3 CONTENT SECTION -->
<div class="container pr-2">
<!-- Y3 AGE PERKS; change the BACKGROUND-COLOR to the values below, depending on Age Perk type;
PHYSICAL ATTRIBUTE (red) = rgba(143, 21, 21, 0.7)
CLOUT (green) = rgba(60, 97, 26, 0.7)
WISDOM (blue) = rgba(25, 58, 112, 0.7)
NO PERK (black) = rgba(34, 27, 6, 0.7) px-3 py-3 py-2
-->
<div class="container p-0 my-2 mx-4" align="center" style="height: 100px; width: 362px; background-image: url(https://i.postimg.cc/gcKhyXsP/perks-bg-2.jpg); background-repeat: no-repeat; background-size: cover; background-position: center;">
<div class="row no-gutters justify-content-center" style="height: 100px; border-top: 1px solid black; border-bottom: 1px solid black; overflow: hidden;">
<!---- Y3 PERK ONE COLOR ------->
<div class="d-flex-inline h-100 align-items-center justify-content-center p-3" style="width: 119px; font-size: 18px; font-weight: 500; border-left: 1px solid black; border-right: 1px solid black; background-color:
rgba(143, 21, 21, 0.7)
">
<!-- Y3 PERK ONE NAME -->
Stamina (+1)
</div>
<!--- Y3 PERK TWO COLOR ------->
<div class="d-flex-inline h-100 align-items-center justify-content-center p-3" style="width: 121px; font-size: 18px; font-weight: 500; border-right: 1px solid black; background-color:
rgba(60, 97, 26, 0.7)
;">
<!---- Y3 PERK TWO NAME ---->
Health Perception
</div>
<!--- Y3 PERK THREE COLOR ----->
<div class="d-flex-inline h-100 align-items-center justify-content-center p-3" style="width: 122px; font-size: 18px; font-weight: 500;border-right: 1px solid black; background-color:
rgba(25, 58, 112, 0.7)
">
<!---- Y3 PERK THREE NAME ------>
Territorial Might
</div>
</div>
</div>
<hr>
<!-- END OF Y3 AGE PERKS ------------------------------------------------------------------->
<!--- Y3 EVENTS --->
<div class="container px-3 py-1 mt-2 mb-3 align-self-center" align="center">
<div class="container align-self-center" style="font-size: 15px; text-align: justify;">
<!-- PUT Y3 IN-GAME EVENTS HERE; enclouse new paragraphs in the <p> tag -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla condimentum ac nisl quis vehicula. Nam sed elementum dui. Donec finibus vulputate varius. Vivamus lobortis tempor nibh eu laoreet. Donec suscipit vestibulum tellus id ullamcorper. Etiam vel mattis magna, ac hendrerit justo. Ut commodo hendrerit magna, ac consequat ipsum malesuada vel. Nam gravida mi a tortor aliquam iaculis. Quisque consectetur augue vitae ante convallis, quis lobortis ipsum placerat. Mauris euismod arcu at scelerisque tempor.</p>
<p>Proin sit amet faucibus leo. Nam efficitur, nibh eget ornare faucibus, odio neque scelerisque nisl, id auctor ligula augue nec arcu. Fusce condimentum suscipit congue. Quisque condimentum enim sit amet orci tincidunt, quis facilisis justo ultricies. Ut dictum feugiat eros, vel tempus neque lacinia eget. Phasellus elit mauris, ornare sed porttitor ac, dapibus in dui. Cras quis dictum quam. Phasellus euismod nec arcu quis ultricies. In id suscipit felis. Vivamus at lacus lacinia, ornare urna id, condimentum felis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div>
</div>
</div>
</div>
<!------------- END OF YEAR THREE BLOCK -------------------------------------------->
<!------------- YEAR FOUR BLOCK --------------------------------------------------->
<div class="card text-center display-4 pt-2" style="background-color: #221b06; text-transform: uppercase; font-size: 20px; height: 45px;">
<a class="align-items-center justify-content-center" data-toggle="collapse" data-target="#y04">
Year 4 <i class="fas fa-angle-down fa-xs mx-2"></i>
</a>
</div>
<div class="collapse" id="y04" data-parent="#expand">
<!-- ENTIRE Y4 CONTENT SECTION -->
<div class="container pr-2">
<!-- Y4 AGE PERKS; change the BACKGROUND-COLOR to the values below, depending on Age Perk type;
PHYSICAL ATTRIBUTE (red) = rgba(143, 21, 21, 0.7)
CLOUT (green) = rgba(60, 97, 26, 0.7)
WISDOM (blue) = rgba(25, 58, 112, 0.7)
NO PERK (black) = rgba(34, 27, 6, 0.7) px-3 py-3 py-2
-->
<div class="container p-0 my-2 mx-4" align="center" style="height: 100px; width: 362px; background-image: url(https://i.postimg.cc/gcKhyXsP/perks-bg-2.jpg); background-repeat: no-repeat; background-size: cover; background-position: center;">
<div class="row no-gutters justify-content-center" style="height: 100px; border-top: 1px solid black; border-bottom: 1px solid black; overflow: hidden;">
<!---- Y4 PERK ONE COLOR ------->
<div class="d-flex-inline h-100 align-items-center justify-content-center p-3" style="width: 119px; font-size: 18px; font-weight: 500; border-left: 1px solid black; border-right: 1px solid black; background-color:
rgba(143, 21, 21, 0.7)
">
<!-- Y4 PERK ONE NAME -->
Stamina (+1)
</div>
<!--- Y4 PERK TWO COLOR ------->
<div class="d-flex-inline h-100 align-items-center justify-content-center p-3" style="width: 121px; font-size: 18px; font-weight: 500; border-right: 1px solid black; background-color:
rgba(60, 97, 26, 0.7)
;">
<!---- Y4 PERK TWO NAME ---->
Health Perception
</div>
<!--- Y4 PERK THREE COLOR ----->
<div class="d-flex-inline h-100 align-items-center justify-content-center p-3" style="width: 122px; font-size: 18px; font-weight: 500;border-right: 1px solid black; background-color:
rgba(25, 58, 112, 0.7)
">
<!---- Y4 PERK THREE NAME ------>
Territorial Might
</div>
</div>
</div>
<hr>
<!-- END OF Y4 AGE PERKS ------------------------------------------------------------------->
<!--- Y4 EVENTS --->
<div class="container px-3 py-1 mt-2 mb-3 align-self-center" align="center">
<div class="container align-self-center" style="font-size: 15px; text-align: justify;">
<!-- PUT Y4 IN-GAME EVENTS HERE; enclouse new paragraphs in the <p> tag -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla condimentum ac nisl quis vehicula. Nam sed elementum dui. Donec finibus vulputate varius. Vivamus lobortis tempor nibh eu laoreet. Donec suscipit vestibulum tellus id ullamcorper. Etiam vel mattis magna, ac hendrerit justo. Ut commodo hendrerit magna, ac consequat ipsum malesuada vel. Nam gravida mi a tortor aliquam iaculis. Quisque consectetur augue vitae ante convallis, quis lobortis ipsum placerat. Mauris euismod arcu at scelerisque tempor.</p>
<p>Proin sit amet faucibus leo. Nam efficitur, nibh eget ornare faucibus, odio neque scelerisque nisl, id auctor ligula augue nec arcu. Fusce condimentum suscipit congue. Quisque condimentum enim sit amet orci tincidunt, quis facilisis justo ultricies. Ut dictum feugiat eros, vel tempus neque lacinia eget. Phasellus elit mauris, ornare sed porttitor ac, dapibus in dui. Cras quis dictum quam. Phasellus euismod nec arcu quis ultricies. In id suscipit felis. Vivamus at lacus lacinia, ornare urna id, condimentum felis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div>
</div>
</div>
</div>
<!------------- END OF YEAR FOUR BLOCK -------------------------------------------->
<!------------- YEAR FIVE BLOCK --------------------------------------------------->
<div class="card text-center display-4 pt-2" style="background-color: #221b06; text-transform: uppercase; font-size: 20px; height: 45px;">
<a class="align-items-center justify-content-center" data-toggle="collapse" data-target="#y05">
Year 5 <i class="fas fa-angle-down fa-xs mx-2"></i>
</a>
</div>
<div class="collapse" id="y05" data-parent="#expand">
<!-- ENTIRE Y5 CONTENT SECTION -->
<div class="container pr-2">
<!-- Y5 AGE PERKS; change the BACKGROUND-COLOR to the values below, depending on Age Perk type;
PHYSICAL ATTRIBUTE (red) = rgba(143, 21, 21, 0.7)
CLOUT (green) = rgba(60, 97, 26, 0.7)
WISDOM (blue) = rgba(25, 58, 112, 0.7)
NO PERK (black) = rgba(34, 27, 6, 0.7) px-3 py-3 py-2
-->
<div class="container p-0 my-2 mx-4" align="center" style="height: 100px; width: 362px; background-image: url(https://i.postimg.cc/gcKhyXsP/perks-bg-2.jpg); background-repeat: no-repeat; background-size: cover; background-position: center;">
<div class="row no-gutters justify-content-center" style="height: 100px; border-top: 1px solid black; border-bottom: 1px solid black; overflow: hidden;">
<!---- Y5 PERK ONE COLOR ------->
<div class="d-flex-inline h-100 align-items-center justify-content-center p-3" style="width: 119px; font-size: 18px; font-weight: 500; border-left: 1px solid black; border-right: 1px solid black; background-color:
rgba(143, 21, 21, 0.7)
">
<!-- Y5 PERK ONE NAME -->
Stamina (+1)
</div>
<!--- Y5 PERK TWO COLOR ------->
<div class="d-flex-inline h-100 align-items-center justify-content-center p-3" style="width: 121px; font-size: 18px; font-weight: 500; border-right: 1px solid black; background-color:
rgba(60, 97, 26, 0.7)
;">
<!---- Y5 PERK TWO NAME ---->
Health Perception
</div>
<!--- Y5 PERK THREE COLOR ----->
<div class="d-flex-inline h-100 align-items-center justify-content-center p-3" style="width: 122px; font-size: 18px; font-weight: 500;border-right: 1px solid black; background-color:
rgba(25, 58, 112, 0.7)
">
<!---- Y5 PERK THREE NAME ------>
Territorial Might
</div>
</div>
</div>
<hr>
<!-- END OF Y5 AGE PERKS ------------------------------------------------------------------->
<!--- Y5 EVENTS --->
<div class="container px-3 py-1 mt-2 mb-3 align-self-center" align="center">
<div class="container align-self-center" style="font-size: 15px; text-align: justify;">
<!-- PUT Y5 IN-GAME EVENTS HERE; enclouse new paragraphs in the <p> tag -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla condimentum ac nisl quis vehicula. Nam sed elementum dui. Donec finibus vulputate varius. Vivamus lobortis tempor nibh eu laoreet. Donec suscipit vestibulum tellus id ullamcorper. Etiam vel mattis magna, ac hendrerit justo. Ut commodo hendrerit magna, ac consequat ipsum malesuada vel. Nam gravida mi a tortor aliquam iaculis. Quisque consectetur augue vitae ante convallis, quis lobortis ipsum placerat. Mauris euismod arcu at scelerisque tempor.</p>
<p>Proin sit amet faucibus leo. Nam efficitur, nibh eget ornare faucibus, odio neque scelerisque nisl, id auctor ligula augue nec arcu. Fusce condimentum suscipit congue. Quisque condimentum enim sit amet orci tincidunt, quis facilisis justo ultricies. Ut dictum feugiat eros, vel tempus neque lacinia eget. Phasellus elit mauris, ornare sed porttitor ac, dapibus in dui. Cras quis dictum quam. Phasellus euismod nec arcu quis ultricies. In id suscipit felis. Vivamus at lacus lacinia, ornare urna id, condimentum felis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div>
</div>
</div>
</div>
<!------------- END OF YEAR FIVE BLOCK -------------------------------------------->
<!------------- YEAR SIX BLOCK --------------------------------------------------->
<div class="card text-center display-4 pt-2" style="background-color: #221b06; text-transform: uppercase; font-size: 20px; height: 45px;">
<a class="align-items-center justify-content-center" data-toggle="collapse" data-target="#y06">
Year 6 <i class="fas fa-angle-down fa-xs mx-2"></i>
</a>
</div>
<div class="collapse" id="y06" data-parent="#expand">
<!-- ENTIRE Y6 CONTENT SECTION -->
<div class="container pr-2">
<!-- Y6 AGE PERKS; change the BACKGROUND-COLOR to the values below, depending on Age Perk type;
PHYSICAL ATTRIBUTE (red) = rgba(143, 21, 21, 0.7)
CLOUT (green) = rgba(60, 97, 26, 0.7)
WISDOM (blue) = rgba(25, 58, 112, 0.7)
NO PERK (black) = rgba(34, 27, 6, 0.7)
-->
<div class="container p-0 my-2 mx-4" align="center" style="height: 100px; width: 362px; background-image: url(https://i.postimg.cc/gcKhyXsP/perks-bg-2.jpg); background-repeat: no-repeat; background-size: cover; background-position: center;">
<div class="row no-gutters justify-content-center" style="height: 100px; border-top: 1px solid black; border-bottom: 1px solid black; overflow: hidden;">
<!---- Y6 PERK ONE COLOR ------->
<div class="d-flex-inline h-100 align-items-center justify-content-center p-3" style="width: 119px; font-size: 18px; font-weight: 500; border-left: 1px solid black; border-right: 1px solid black; background-color:
rgba(143, 21, 21, 0.7)
">
<!-- Y6 PERK ONE NAME -->
Stamina (+1)
</div>
<!--- Y6 PERK TWO COLOR ------->
<div class="d-flex-inline h-100 align-items-center justify-content-center p-3" style="width: 121px; font-size: 18px; font-weight: 500; border-right: 1px solid black; background-color:
rgba(60, 97, 26, 0.7)
;">
<!---- Y6 PERK TWO NAME ---->
Health Perception
</div>
<!--- Y6 PERK THREE COLOR ----->
<div class="d-flex-inline h-100 align-items-center justify-content-center p-3" style="width: 122px; font-size: 18px; font-weight: 500;border-right: 1px solid black; background-color:
rgba(25, 58, 112, 0.7)
">
<!---- Y6 PERK THREE NAME ------>
Territorial Might
</div>
</div>
</div>
<hr>
<!-- END OF Y6 AGE PERKS ------------------------------------------------------------------->
<!--- Y6 EVENTS --->
<div class="container px-3 py-1 mt-2 mb-3 align-self-center" align="center">
<div class="container align-self-center" style="font-size: 15px; text-align: justify;">
<!-- PUT Y6 IN-GAME EVENTS HERE; enclouse new paragraphs in the <p> tag -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla condimentum ac nisl quis vehicula. Nam sed elementum dui. Donec finibus vulputate varius. Vivamus lobortis tempor nibh eu laoreet. Donec suscipit vestibulum tellus id ullamcorper. Etiam vel mattis magna, ac hendrerit justo. Ut commodo hendrerit magna, ac consequat ipsum malesuada vel. Nam gravida mi a tortor aliquam iaculis. Quisque consectetur augue vitae ante convallis, quis lobortis ipsum placerat. Mauris euismod arcu at scelerisque tempor.</p>
<p>Proin sit amet faucibus leo. Nam efficitur, nibh eget ornare faucibus, odio neque scelerisque nisl, id auctor ligula augue nec arcu. Fusce condimentum suscipit congue. Quisque condimentum enim sit amet orci tincidunt, quis facilisis justo ultricies. Ut dictum feugiat eros, vel tempus neque lacinia eget. Phasellus elit mauris, ornare sed porttitor ac, dapibus in dui. Cras quis dictum quam. Phasellus euismod nec arcu quis ultricies. In id suscipit felis. Vivamus at lacus lacinia, ornare urna id, condimentum felis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div>
</div>
</div>
</div>
<!------------- END OF YEAR SIX BLOCK -------------------------------------------->
<!------------- YEAR SEVEN BLOCK --------------------------------------------------->
<div class="card text-center display-4 pt-2" style="background-color: #221b06; text-transform: uppercase; font-size: 20px; height: 45px;">
<a class="align-items-center justify-content-center" data-toggle="collapse" data-target="#y07">
Year 7 <i class="fas fa-angle-down fa-xs mx-2"></i>
</a>
</div>
<div class="collapse" id="y07" data-parent="#expand">
<!-- ENTIRE Y7 CONTENT SECTION -->
<div class="container pr-2">
<!-- Y7 AGE PERKS; change the BACKGROUND-COLOR to the values below, depending on Age Perk type;
PHYSICAL ATTRIBUTE (red) = rgba(143, 21, 21, 0.7)
CLOUT (green) = rgba(60, 97, 26, 0.7)
WISDOM (blue) = rgba(25, 58, 112, 0.7)
NO PERK (black) = rgba(34, 27, 6, 0.7) px-3 py-3 py-2
-->
<div class="container p-0 my-2 mx-4" align="center" style="height: 100px; width: 362px; background-image: url(https://i.postimg.cc/gcKhyXsP/perks-bg-2.jpg); background-repeat: no-repeat; background-size: cover; background-position: center;">
<div class="row no-gutters justify-content-center" style="height: 100px; border-top: 1px solid black; border-bottom: 1px solid black; overflow: hidden;">
<!---- Y7 PERK ONE COLOR ------->
<div class="d-flex-inline h-100 align-items-center justify-content-center p-3" style="width: 119px; font-size: 18px; font-weight: 500; border-left: 1px solid black; border-right: 1px solid black; background-color:
rgba(143, 21, 21, 0.7)
">
<!-- Y7 PERK ONE NAME -->
Stamina (+1)
</div>
<!--- Y7 PERK TWO COLOR ------->
<div class="d-flex-inline h-100 align-items-center justify-content-center p-3" style="width: 121px; font-size: 18px; font-weight: 500; border-right: 1px solid black; background-color:
rgba(60, 97, 26, 0.7)
;">
<!---- Y7 PERK TWO NAME ---->
Health Perception
</div>
<!--- Y7 PERK THREE COLOR ----->
<div class="d-flex-inline h-100 align-items-center justify-content-center p-3" style="width: 122px; font-size: 18px; font-weight: 500;border-right: 1px solid black; background-color:
rgba(25, 58, 112, 0.7)
">
<!---- Y7 PERK THREE NAME ------>
Territorial Might
</div>
</div>
</div>
<hr>
<!-- END OF Y7 AGE PERKS ------------------------------------------------------------------->
<!--- Y7 EVENTS --->
<div class="container px-3 py-1 mt-2 mb-3 align-self-center" align="center">
<div class="container align-self-center" style="font-size: 15px; text-align: justify;">
<!-- PUT Y7 IN-GAME EVENTS HERE; enclouse new paragraphs in the <p> tag -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla condimentum ac nisl quis vehicula. Nam sed elementum dui. Donec finibus vulputate varius. Vivamus lobortis tempor nibh eu laoreet. Donec suscipit vestibulum tellus id ullamcorper. Etiam vel mattis magna, ac hendrerit justo. Ut commodo hendrerit magna, ac consequat ipsum malesuada vel. Nam gravida mi a tortor aliquam iaculis. Quisque consectetur augue vitae ante convallis, quis lobortis ipsum placerat. Mauris euismod arcu at scelerisque tempor.</p>
<p>Proin sit amet faucibus leo. Nam efficitur, nibh eget ornare faucibus, odio neque scelerisque nisl, id auctor ligula augue nec arcu. Fusce condimentum suscipit congue. Quisque condimentum enim sit amet orci tincidunt, quis facilisis justo ultricies. Ut dictum feugiat eros, vel tempus neque lacinia eget. Phasellus elit mauris, ornare sed porttitor ac, dapibus in dui. Cras quis dictum quam. Phasellus euismod nec arcu quis ultricies. In id suscipit felis. Vivamus at lacus lacinia, ornare urna id, condimentum felis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div>
</div>
</div>
</div>
<!------------- END OF YEAR SEVEN BLOCK -------------------------------------------->
<!------------- YEAR EIGHT BLOCK --------------------------------------------------->
<div class="card text-center display-4 pt-2" style="background-color: #221b06; text-transform: uppercase; font-size: 20px; height: 45px;">
<a class="align-items-center justify-content-center" data-toggle="collapse" data-target="#y08">
YEAR 8 <i class="fas fa-angle-down fa-xs mx-2"></i>
</a>
</div>
<div class="collapse" id="y08" data-parent="#expand">
<!-- ENTIRE Y8 CONTENT SECTION -->
<div class="container pr-2">
<!-- Y8 AGE PERKS; change the BACKGROUND-COLOR to the values below, depending on Age Perk type; -------------------------------
PHYSICAL ATTRIBUTE (red) = rgba(143, 21, 21, 0.7)
CLOUT (green) = rgba(60, 97, 26, 0.7)
WISDOM (blue) = rgba(25, 58, 112, 0.7)
NO PERK (black) = rgba(34, 27, 6, 0.7) px-3 py-3 py-2
-->
<div class="container p-0 my-2 mx-4" align="center" style="height: 100px; width: 362px; background-image: url(https://i.postimg.cc/gcKhyXsP/perks-bg-2.jpg); background-repeat: no-repeat; background-size: cover; background-position: center;">
<div class="row no-gutters justify-content-center" style="height: 100px; border-top: 1px solid black; border-bottom: 1px solid black; overflow: hidden;">
<!---- Y8 PERK ONE COLOR ------->
<div class="d-flex-inline h-100 align-items-center justify-content-center p-3" style="width: 119px; font-size: 18px; font-weight: 500; border-left: 1px solid black; border-right: 1px solid black; background-color:
rgba(143, 21, 21, 0.7)
">
<!-- Y8 PERK ONE NAME -->
Stamina (+1)
</div>
<!--- Y8 PERK TWO COLOR ------->
<div class="d-flex-inline h-100 align-items-center justify-content-center p-3" style="width: 121px; font-size: 18px; font-weight: 500; border-right: 1px solid black; background-color:
rgba(60, 97, 26, 0.7)
;">
<!---- Y8 PERK TWO NAME ---->
Health Perception
</div>
<!--- Y8 PERK THREE COLOR ----->
<div class="d-flex-inline h-100 align-items-center justify-content-center p-3" style="width: 122px; font-size: 18px; font-weight: 500;border-right: 1px solid black; background-color:
rgba(25, 58, 112, 0.7)
">
<!---- Y8 PERK THREE NAME ------>
Territorial Might
</div>
</div>
</div>
<hr>
<!-- END OF Y8 AGE PERKS ------------------------------------------------------------------->
<!--- Y8 EVENTS --->
<div class="container px-3 py-1 mt-2 mb-3 align-self-center" align="center">
<div class="container align-self-center" style="font-size: 15px; text-align: justify;">
<!-- PUT Y8 IN-GAME EVENTS HERE; enclouse new paragraphs in the <p> tag -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla condimentum ac nisl quis vehicula. Nam sed elementum dui. Donec finibus vulputate varius. Vivamus lobortis tempor nibh eu laoreet. Donec suscipit vestibulum tellus id ullamcorper. Etiam vel mattis magna, ac hendrerit justo. Ut commodo hendrerit magna, ac consequat ipsum malesuada vel. Nam gravida mi a tortor aliquam iaculis. Quisque consectetur augue vitae ante convallis, quis lobortis ipsum placerat. Mauris euismod arcu at scelerisque tempor.</p>
<p>Proin sit amet faucibus leo. Nam efficitur, nibh eget ornare faucibus, odio neque scelerisque nisl, id auctor ligula augue nec arcu. Fusce condimentum suscipit congue. Quisque condimentum enim sit amet orci tincidunt, quis facilisis justo ultricies. Ut dictum feugiat eros, vel tempus neque lacinia eget. Phasellus elit mauris, ornare sed porttitor ac, dapibus in dui. Cras quis dictum quam. Phasellus euismod nec arcu quis ultricies. In id suscipit felis. Vivamus at lacus lacinia, ornare urna id, condimentum felis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div>
</div>
</div>
</div>
<!------------- END OF YEAR EIGHT BLOCK -------------------------------------------->
</div>
</div>
<!-- ----------------------- END OF TIMELINE TAB --------------------------------------------------------------------------------------- -->
<!-- ----------------------- PERSONALITY TAB ------------------------------------------------------------------------------------------------>
<div class="tab-pane show justify-content-center" style="height:520px;overflow:auto;" id="personality">
<div class="row no-gutters justify-content-between py-2 px-3 mb-2" style="background-image: linear-gradient(rgb(56,52,36), rgb(51,46,27)); border-radius: 2px;">
<div class="col-auto align-self-center" style="font-size: 25px; font-weight: 400;">Personality</div>
</div>
<!-- PERSONALITY SLIDERS -->
<div class="container px-5 mt-4 mb-2" align="center">
<div class="row no-gutters justify-content-between my-4 px-1">
<div class="col text-right text-truncate pr-4" style="font-size: 16px;">Cautious</div>
<div class="col-6 order-1 order-lg-0">
<div class="progress w-100 bg-white mt-2" style="overflow: visible; height: 5px;">
<!-- CAUTIOUS & BOLD SLIDER; change percent from 1-100% to adjust-->
<div class="progress justify-content-end bg-transparent" style="height: 5px; width:
1%
;overflow: visible">
<i class="fas fa-circle" style="font-size: 25px; color: #edca6d; margin-right: -8px; margin-top: -8px;"></i>
</div>
</div>
</div>
<div class="col text-left text-truncate pl-3" style="font-size: 16px;">Bold</div>
</div>
<div class="row no-gutters justify-content-between mb-4 px-1">
<div class="col text-right text-truncate pr-4" style="font-size: 16px;">Loner</div>
<div class="col-6 order-1 order-lg-0">
<div class="progress w-100 bg-white mt-2" style="overflow: visible; height: 5px;">
<!-- LONER & SOCIAL SLIDER; change percent from 1-100% to adjust-->
<div class="progress justify-content-end bg-transparent" style="height: 5px; width:
50%
;overflow: visible">
<i class="fas fa-circle" style="font-size: 25px; color: #edca6d; margin-right: -8px; margin-top: -8px;"></i>
</div>
</div>
</div>
<div class="col text-left text-truncate pl-3" style="font-size: 16px;">Social</div>
</div>
<div class="row no-gutters justify-content-between mb-2 px-1">
<div class="col text-right text-truncate pr-4" style="font-size: 16px;">Lazy</div>
<div class="col-6 order-1 order-lg-0">
<div class="progress w-100 bg-white mt-2" style="overflow: visible; height: 5px;">
<!-- LAZY & ENERGETIC SLIDER; change percent from 1-100% to adjust-->
<div class="progress justify-content-end bg-transparent" style="height: 5px; width:
100%
; overflow: visible">
<i class="fas fa-circle" style="font-size: 25px; color: #edca6d; margin-right: -8px; margin-top: -8px;"></i>
</div>
</div>
</div>
<div class="col text-left text-truncate pl-3" style="font-size: 16px;">Energetic</div>
</div>
</div>
<!-- EXPANDED PERSONALITY SECTION -->
<div class="container px-4 py-2 mb-3 mt-1 align-self-center" align="center">
<hr>
<div class="container align-self-center" style="height: 245px; overflow: auto; font-size: 15px; text-align: justify;">
<!-- PUT IN-DEPTH PERSONALITY HERE; enclouse new paragraphs in the <p> tag -->
<p>Use this section to explain your wolf's in-depth personality, for three measley sliders surely isn't enough! This section will expand, just like backstory, so write as little or as much as you want.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla condimentum ac nisl quis vehicula. Nam sed elementum dui. Donec finibus vulputate varius. Vivamus lobortis tempor nibh eu laoreet. Donec suscipit vestibulum tellus id ullamcorper. Etiam vel mattis magna, ac hendrerit justo. Ut commodo hendrerit magna, ac consequat ipsum malesuada vel. Nam gravida mi a tortor aliquam iaculis. Quisque consectetur augue vitae ante convallis, quis lobortis ipsum placerat. Mauris euismod arcu at scelerisque tempor.</p>
</div>
</div>
</div>
<!-- ----------------------- END OF PERSONALITY TAB ------------------------------------------------------------------------------------------ -->
<!-- ----------------------- FAMILY TAB -------------------------------------------------------------------------------------------------->
<div class="tab-pane show justify-content-center" id="pack">
<div class="row no-gutters justify-content-between py-2 px-3 mb-2" style="background-image: linear-gradient(rgb(56,52,36), rgb(51,46,27)); border-radius: 2px;">
<div class="col-auto align-self-center" style="font-size: 25px; font-weight: 400;">Family</div>
<!---- FAMILY TREE LINK; if you have a proper family tree you've made somewhere and want to link; replace url in the middle
YOU CAN DELETE THIS ENTIRE SECTION if you don't have one and don't want this here ---->
<div class="col-auto align-self-center pt-2 mr-3" style="font-size: 24px;">
<a href="
https://toyhou.se/19428953.-f2u-wolfquest-ae-profile
" class="text-warning" style="text-decoration: none;"><i class="fas fa-bezier-curve"></i></a>
</div>
<!-------------- END OF FAMILY TREE LINK----------------------------------------------->
</div>
<!--- BEGINNING OF ACCORDIAN CONTENT --->
<div class="container accordian" id="expand2" style="height: 450px;overflow-y:scroll;">
<!---- MATES TAB ---------------------------------------------------------------------------------------------------------------------------->
<div class="card text-center display-4 pt-2" style="background-color: #221b06; text-transform: uppercase; font-size: 20px; height: 40px;">
<a class="align-items-center justify-content-center" data-toggle="collapse" data-target="#mates">Mates <i class="fas fa-angle-down fa-xs mx-2"></i>
</a>
</div>
<div class="collapse" id="mates" data-parent="#expand2">
<!---------- ENTIRE MATES TAB CONTENT -------------------------------------------------------------------------------->
<div class="container pb-2 pt-0 px-0">
<!---- LEFT-ALIGNED MATE CARD ---------------------------------------------------------------->
<div class="container my-2 mx-0 py-1">
<div class="row my-1" style="height: 193px;">
<div class="col-auto p-0">
<!---- MATE IMAGE; replace URL in the middle; image needs to be TALL ----->
<div class="d-flex-inline align-items-center h-100 p-0" style="width: 140px; background-repeat: no-repeat; background-position: center; background-size: cover; background-image: url(
https://thumbs.dreamstime.com/b/timber-wolf-vertical-close-up-canis-lupus-fall-day-format-110203085.jpg
);"></div>
</div>
<div class="col pl-2 pr-0" style="width: 300px;">
<!--- MATE INFO ---->
<div class="d-flex align-itmes-center mb-4" style="height: 50px;">
<div class="container">
<div class="row align-items-center" style="font-weight: 400;">
<div class="d-flex-inline align-items-center" style="font-size: 20px;">
<!--- MATE NAME HERE; put <s></s> tags around if deceased ---->
<s>Prince Solaris IIV</s>
</div>
<div class="d-flex-inline align-items-center ml-1" style="font-size: 18px;">
<!-- GENDER SYMBOL; use 'fa-mars' for male & 'fa-venus' for female -->
<i class="fas fa-mars mx-1"></i>
<font style="color: #a8a7a5;"><i>
<!--- MATE COAT LOCUS ----->
(Kk)
</i></font>
</div>
</div>
<div class="row" style="font-size: 10px;">
<div class="d-flex-inline align-items-center">
<!----- DIVERISTY RATING; use 'fas fa-star' to fill and 'far fa-star' for empty --->
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="far fa-star"></i>
<i class="far fa-star mr-1"></i>
<font style="font-size: 13px;">•
<!---- MATE'S ORIGINAL PACK ---->
Hayden
</font>
</div>
</div>
</div>
</div>
<!--- EXTENDED MATE INFO -------->
<div class="d-flex h-50 w-100 align-items-center" style="height: 125px;">
<div class="container p-1" style="height: 133px; overflow: auto; text-align: justify; line-height: 1;">
<!--- EXTENDED MATE INFO HERE; whatever else you want to say about them; enclose new paragraphs in <p> tag ----->
<p>Use this bit to say whatever else you want about the mate. Personality (that you've observed or headcannn), how they met, any backstory you've come up with for the mate, etc. Box will scroll.</p>
<p>RIP Sol, died in Year 3. All the noble genes in the world didn't save him from being stupid; really should've just let the grizzly enjoy it's meal.</p>
</div>
</div>
</div>
</div>
</div>
<!----- LEFT-ALIGN MATE CARD END --------------------------------------------------------------->
<!---- RIGHT-ALIGNED MATE CARD ----------------------------------------------------------------->
<div class="container mb-2 mx-0 py-1">
<div class="row my-1" style="height: 193px;">
<div class="col pr-2 pl-0" style="width: 300px;">
<!--- MATE INFO ---->
<div class="d-flex align-itmes-center mb-4" style="height: 50px;">
<div class="container">
<div class="row align-items-center" style="font-weight: 400;">
<div class="d-flex-inline align-items-center" style="font-size: 20px;">
<!--- MATE NAME HERE; put <s></s> tags around if deceased ---->
Mr. Marshmellow
</div>
<div class="d-flex-inline align-items-center ml-1" style="font-size: 18px;">
<!-- GENDER SYMBOL; use 'fa-mars' for male & 'fa-venus' for female -->
<i class="fas fa-mars mx-1"></i>
<font style="color: #a8a7a5;"><i>
<!--- MATE COAT LOCUS ----->
(Kk)
</i></font>
</div>
</div>
<div class="row" style="font-size: 10px;">
<div class="d-flex-inline align-items-center">
<!----- DIVERISTY RATING; use 'fas fa-star' to fill and 'far fa-star' for empty --->
<i class="fas fa-star"></i>
<i class="far fa-star"></i>
<i class="far fa-star"></i>
<i class="far fa-star mr-1"></i>
<font style="font-size: 13px;">•
<!---- MATE'S ORIGINAL PACK ---->
Crevice Lake
</font>
</div>
</div>
</div>
</div>
<!--- EXTENDED MATE INFO -------->
<div class="d-flex h-50 w-100 align-items-center" style="height: 125px;">
<div class="container p-1" style="height: 133px; overflow: auto; text-align: justify; line-height: 1;">
<!--- EXTENDED MATE INFO HERE; whatever else you want to say about them; personality, how they met, etc. ----->
<p>He's not the stepdad, he's the dad that stepped up.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla condimentum ac nisl quis vehicula. Nam sed elementum dui. Donec finibus vulputate varius. Vivamus lobortis tempor nibh eu laoreet. Donec suscipit vestibulum tellus id ullamcorper. Etiam vel mattis magna, ac hendrerit justo. Ut commodo hendrerit magna, ac consequat ipsum malesuada vel. Nam gravida mi a tortor aliquam iaculis. Quisque consectetur augue vitae ante convallis, quis lobortis ipsum placerat. Mauris euismod arcu at scelerisque tempor.</p>
</div>
</div>
</div>
<div class="col-auto p-0">
<!---- MATE IMAGE; replace URL in the middle; needs to be TALL ----->
<div class="d-flex-inline align-items-center h-100 p-0" style="width: 140px; background-repeat: no-repeat; background-position: center; background-size: cover; background-image: url(
https://i.pinimg.com/736x/89/4f/1a/894f1a7ebe4a094145923e96871d2ed9.jpg
);"></div>
</div>
</div>
</div>
<!----- END OF RIGHT-ALIGHNED MATE CARD -------------------------------------------------->
<!---- COPY + PASTE new relationship card on this line to add more ----->
</div>
<!---------- END OF ENTIRE MATES TAB CONTENT ------------------------------------------------------------------------->
</div>
<!---- END OF MATES TAB --------------------------------------------------------------------------------------------------------------------->
<!---- PUPS TAB ----------------------------------------------------------------------------------------------------------------------------->
<div class="card text-center display-4 pt-2" style="background-color: #221b06; text-transform: uppercase; font-size: 20px; height: 40px;">
<a class="align-items-center justify-content-center" data-toggle="collapse" data-target="#pups">Pups <i class="fas fa-angle-down fa-xs mx-2"></i>
</a>
</div>
<div class="collapse" id="pups" data-parent="#expand2">
<!---------- ENTIRE PUPS TAB CONTENT -------------------------------------------------------------------------------->
<div class="container pb-2 pt-0 px-0">
<!-- LITTER BLOCK ---------------------------------------------------------------------------------------->
<div class="container px-0">
<div class="container py-2 px-0" style="font-size: 23px; border-bottom: 1px solid white;">
<!--- LITTER NUMBER --------------->
Litter 1
<font style="color: #a8a7a5;">
<!----- OTHER PARENT OF LITTER -------------->
(Prince Solaris IIV)
</font>
</div>
<!---- LEFT-ALIGNED PUPS CARD --------------------------------------------------------------------->
<div class="container my-2 mx-0 py-1">
<div class="row my-1" style="height: 193px;">
<div class="col-auto p-0">
<!---- PUP IMAGE; replace URL in the middle; image needs to be TALL ----->
<div class="d-flex-inline align-items-center h-100 p-0" style="width: 140px; background-repeat: no-repeat; background-position: center; background-size: cover; background-image: url(
https://0da7576c6af8dc90a8d9-cca51b9f97dde420bbbf39cd61d520a5.ssl.cf1.rackcdn.com/gray-wolf-up-close-vertical.jpg
);"></div>
</div>
<div class="col pl-2 pr-0" style="width: 300px;">
<!--- PUP INFO ---->
<div class="d-flex align-itmes-center mb-4" style="height: 50px;">
<div class="container">
<div class="row align-items-center" style="font-weight: 400;">
<div class="d-flex-inline align-items-center" style="font-size: 20px;">
<!--- PUP NAME HERE;
use:
<a href="URL" class="text-warning" style="text-decoration: none;">Name</a>
instead to link to another profile
add <s></s> tags around the name to indicate they died ---->
<a href="URL" class="text-warning" style="text-decoration: none;">Prince Dusk</a>
</div>
<div class="d-flex-inline align-items-center ml-1" style="font-size: 18px;">
<!-- GENDER SYMBOL; use 'fa-mars' for male & 'fa-venus' for female -->
<i class="fas fa-mars mx-1"></i>
<font style="color: #a8a7a5;"><i>
<!--- BIRTH PACK NUMBER ----->
(M2)
</i></font>
</div>
</div>
<div class="row" style="font-size: 13px;">
<div class="d-flex-inline align-items-center">
<!---- PUP'S AGE; current or at death ---->
Juvenille
•
<!--- PUP'S CURRENT STATUS (ex. Dispersed, in 'Name' Pack, Deceased ------------------>
Silver Crescent Pack
</div>
</div>
</div>
</div>
<!--- EXTENDED PUP INFO -------->
<div class="d-flex h-50 w-100 align-items-center" style="height: 125px;">
<div class="container p-1" style="height: 133px; overflow: auto; text-align: justify; line-height: 1;">
<!--- EXTENDED PUP INFO HERE; whatever else you want to say about them; enclose new paragraphs in <p> tag ----->
<p>Use this bit to say whatever else you want about the pup. Personality (that you've observed or headcannn), interesting things they did as pups, what they've done since dispersing (if they did), relationship with this wolf, etc. Box will scroll.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla condimentum ac nisl quis vehicula. Nam sed elementum dui. Donec finibus vulputate varius. Vivamus lobortis tempor nibh eu laoreet. Donec suscipit vestibulum tellus id ullamcorper. Etiam vel mattis magna, ac hendrerit justo. Ut commodo hendrerit magna, ac consequat ipsum malesuada vel. Nam gravida mi a tortor aliquam iaculis. Quisque consectetur augue vitae ante convallis, quis lobortis ipsum placerat. Mauris euismod arcu at scelerisque tempor.</p>
</div>
</div>
</div>
</div>
</div>
<!----- END OF LEFT-ALIGN PUPS CARD --------------------------------------------------------------->
<!---- RIGHT-ALIGNED PUPS CARD -------------------------------------------------------------------->
<div class="container mb-2 mx-0 py-1">
<div class="row my-1" style="height: 193px;">
<div class="col pl-0 pr-2" style="width: 300px;">
<!--- PUP ---->
<div class="d-flex align-itmes-center mb-4" style="height: 50px;">
<div class="container">
<div class="row align-items-center" style="font-weight: 400;">
<div class="d-flex-inline align-items-center" style="font-size: 20px;">
<!--- PUP NAME HERE;
use:
<a href="URL" class="text-warning" style="text-decoration: none;">Name</a>
instead to link to another profile
add <s></s> tags around the name to indicate they died---->
Princeess Moon Moon
</div>
<div class="d-flex-inline align-items-center ml-1" style="font-size: 18px;">
<!-- GENDER SYMBOL; use 'fa-mars' for male & 'fa-venus' for female -->
<i class="fas fa-venus mx-1"></i>
<font style="color: #a8a7a5;"><i>
<!--- BIRTH PACK NUMBER ----->
(F2)
</i></font>
</div>
</div>
<div class="row" style="font-size: 13px;">
<div class="d-flex-inline align-items-center">
<!---- PUP'S AGE; current or at death ---->
Juvenille
•
<!--- PUP'S CURRENT STATUS (ex. Dispersed, in 'Name' Pack, Deceased ------------------>
Silver Crescent Pack
</div>
</div>
</div>
</div>
<!--- EXTENDED INFO -------->
<div class="d-flex h-50 w-100 align-items-center" style="height: 125px;">
<div class="container p-1" style="height: 133px; overflow: auto; text-align: justify; line-height: 1;">
<!--- EXTENDED PUP INFO HERE; whatever else you want to say about them; enclose new paragraphs in <p> tag ----->
<p>Use this bit to say whatever else you want about the pup. Personality (that you've observed or headcannn), interesting things they did as pups, what they've done since dispersing (if they did), relationship with this wolf, etc. Box will scroll.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla condimentum ac nisl quis vehicula. Nam sed elementum dui. Donec finibus vulputate varius. Vivamus lobortis tempor nibh eu laoreet. Donec suscipit vestibulum tellus id ullamcorper. Etiam vel mattis magna, ac hendrerit justo. Ut commodo hendrerit magna, ac consequat ipsum malesuada vel. Nam gravida mi a tortor aliquam iaculis. Quisque consectetur augue vitae ante convallis, quis lobortis ipsum placerat. Mauris euismod arcu at scelerisque tempor.</p>
</div>
</div>
</div>
<div class="col-auto p-0">
<!---- PUP IMAGE; replace URL in the middle; needs to be TALL ----->
<div class="d-flex-inline align-items-center h-100 p-0" style="width: 140px; background-repeat: no-repeat; background-position: center; background-size: cover; background-image: url(
https://i0.hippopx.com/photos/426/65/109/wolf-animal-zoo-preview.jpg
);"></div>
</div>
</div>
</div>
<!----- END OF RIGHT-ALIGHNED PUPS CARD ----------------------------------------------------------->
<!---- LEFT-ALIGNED PUPS CARD --------------------------------------------------------------------->
<div class="container my-2 mx-0 py-1">
<div class="row my-1" style="height: 193px;">
<div class="col-auto p-0">
<!---- PUP IMAGE; replace URL in the middle; image needs to be TALL ----->
<div class="d-flex-inline align-items-center h-100 p-0" style="width: 140px; background-repeat: no-repeat; background-position: center; background-size: cover; background-image: url(
https://images.squarespace-cdn.com/content/v1/55525830e4b0ac0977512301/1597934448282-IWUZ4L2ELHU5C5KTWDXK/Adoption%252BKit%252B-%252BRuffian.jpg
);"></div>
</div>
<div class="col pl-2 pr-0" style="width: 300px;">
<!--- PUP INFO ---->
<div class="d-flex align-itmes-center mb-4" style="height: 50px;">
<div class="container">
<div class="row align-items-center" style="font-weight: 400;">
<div class="d-flex-inline align-items-center" style="font-size: 20px;">
<!--- PUP NAME HERE;
use:
<a href="URL" class="text-warning" style="text-decoration: none;">Name</a>
instead to link to another profile
add <s></s> tags around the name to indicate they died ---->
<s>Princeess Sunny</s>
</div>
<div class="d-flex-inline align-items-center ml-1" style="font-size: 18px;">
<!-- GENDER SYMBOL; use 'fa-mars' for male & 'fa-venus' for female -->
<i class="fas fa-venus mx-1"></i>
<font style="color: #a8a7a5;"><i>
<!--- BIRTH PACK NUMBER ----->
(F3)
</i></font>
</div>
</div>
<div class="row" style="font-size: 13px;">
<div class="d-flex-inline align-items-center">
<!---- PUP'S AGE; current or at death ---->
Pup
•
<!--- PUP'S CURRENT STATUS (ex. Dispersed, in 'Name' Pack, Deceased ------------------>
Deceased
</div>
</div>
</div>
</div>
<!--- EXTENDED PUP INFO -------->
<div class="d-flex h-50 w-100 align-items-center" style="height: 125px;">
<div class="container p-1" style="height: 133px; overflow: auto; text-align: justify; line-height: 1;">
<!--- EXTENDED PUP INFO HERE; whatever else you want to say about them; enclose new paragraphs in <p> tag ----->
<p>Use this bit to say whatever else you want about the pup. Personality (that you've observed or headcannn), interesting things they did as pups, what they've done since dispersing (if they did), relationship with this wolf, etc. Box will scroll.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla condimentum ac nisl quis vehicula. Nam sed elementum dui. Donec finibus vulputate varius. Vivamus lobortis tempor nibh eu laoreet. Donec suscipit vestibulum tellus id ullamcorper. Etiam vel mattis magna, ac hendrerit justo. Ut commodo hendrerit magna, ac consequat ipsum malesuada vel. Nam gravida mi a tortor aliquam iaculis. Quisque consectetur augue vitae ante convallis, quis lobortis ipsum placerat. Mauris euismod arcu at scelerisque tempor.</p>
</div>
</div>
</div>
</div>
</div>
<!----- END OF LEFT-ALIGN PUPS CARD --------------------------------------------------------------->
<!---- COPY + PASTE NEW PUP CARD HERE TO ADD MORE IN THIS LITTER ------>
</div>
<!-- END OF LITTER BLOCK ------------------------------------------------------------------------------------>
<!-- LITTER BLOCK ---------------------------------------------------------------------------------------->
<div class="container px-0">
<div class="container py-2 px-0" style="font-size: 23px; border-bottom: 1px solid white;">
<!--- LITTER NUMBER --------------->
Litter 2
<font style="color: #a8a7a5;">
<!----- OTHER PARENT OF LITTER -------------->
(Mr. Marshmellow)
</font>
</div>
<!---- LEFT-ALIGNED PUPS CARD --------------------------------------------------------------------->
<div class="container my-2 mx-0 py-1">
<div class="row my-1" style="height: 193px;">
<div class="col-auto p-0">
<!---- PUP IMAGE; replace URL in the middle; image needs to be TALL ----->
<div class="d-flex-inline align-items-center h-100 p-0" style="width: 140px; background-repeat: no-repeat; background-position: center; background-size: cover; background-image: url(
https://coolwildlife.com/wp-content/uploads/2019/12/Maynard-25-Timber-Wolf-Pup-Howl.jpg
);"></div>
</div>
<div class="col pl-2 pr-0" style="width: 300px;">
<!--- PUP INFO ---->
<div class="d-flex align-itmes-center mb-4" style="height: 50px;">
<div class="container">
<div class="row align-items-center" style="font-weight: 400;">
<div class="d-flex-inline align-items-center" style="font-size: 20px;">
<!--- PUP NAME HERE;
use:
<a href="URL" class="text-warning" style="text-decoration: none;">Name</a>
instead to link to another profile
add <s></s> tags around the name to indicate they died ---->
Graham
</div>
<div class="d-flex-inline align-items-center ml-1" style="font-size: 18px;">
<!-- GENDER SYMBOL; use 'fa-mars' for male & 'fa-venus' for female -->
<i class="fas fa-mars mx-1"></i>
<font style="color: #a8a7a5;"><i>
<!--- BIRTH PACK NUMBER ----->
(M3)
</i></font>
</div>
</div>
<div class="row" style="font-size: 13px;">
<div class="d-flex-inline align-items-center">
<!---- PUP'S AGE; current or at death ---->
Pup
•
<!--- PUP'S CURRENT STATUS (ex. Dispersed, in 'Name' Pack, Deceased ------------------>
Silver Crescent Pack
</div>
</div>
</div>
</div>
<!--- EXTENDED PUP INFO -------->
<div class="d-flex h-50 w-100 align-items-center" style="height: 125px;">
<div class="container p-1" style="height: 133px; overflow: auto; text-align: justify; line-height: 1;">
<!--- EXTENDED PUP INFO HERE; whatever else you want to say about them; enclose new paragraphs in <p> tag ----->
<p>Use this bit to say whatever else you want about the pup. Personality (that you've observed or headcannn), interesting things they did as pups, what they've done since dispersing (if they did), relationship with this wolf, etc. Box will scroll.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla condimentum ac nisl quis vehicula. Nam sed elementum dui. Donec finibus vulputate varius. Vivamus lobortis tempor nibh eu laoreet. Donec suscipit vestibulum tellus id ullamcorper. Etiam vel mattis magna, ac hendrerit justo. Ut commodo hendrerit magna, ac consequat ipsum malesuada vel. Nam gravida mi a tortor aliquam iaculis. Quisque consectetur augue vitae ante convallis, quis lobortis ipsum placerat. Mauris euismod arcu at scelerisque tempor.</p>
</div>
</div>
</div>
</div>
</div>
<!----- END OF LEFT-ALIGN PUPS CARD --------------------------------------------------------------->
<!---- RIGHT-ALIGNED PUPS CARD -------------------------------------------------------------------->
<div class="container mb-2 mx-0 py-1">
<div class="row my-1" style="height: 193px;">
<div class="col pl-0 pr-2" style="width: 300px;">
<!--- PUP INFO ---->
<div class="d-flex align-itmes-center mb-4" style="height: 50px;">
<div class="container">
<div class="row align-items-center" style="font-weight: 400;">
<div class="d-flex-inline align-items-center" style="font-size: 20px;">
<!--- PUP NAME HERE;
use:
<a href="URL" class="text-warning" style="text-decoration: none;">Name</a>
instead to link to another profile
add <s></s> tags around the name to indicate they died---->
Cocoa
</div>
<div class="d-flex-inline align-items-center ml-1" style="font-size: 18px;">
<!-- GENDER SYMBOL; use 'fa-mars' for male & 'fa-venus' for female -->
<i class="fas fa-venus mx-1"></i>
<font style="color: #a8a7a5;"><i>
<!--- BIRTH PACK NUMBER ----->
(F4)
</i></font>
</div>
</div>
<div class="row" style="font-size: 13px;">
<div class="d-flex-inline align-items-center">
<!---- PUP'S AGE; current or at death ---->
Pup
•
<!--- PUP'S CURRENT STATUS (ex. Dispersed, in 'Name' Pack, Deceased ------------------>
Silver Crescent Pack
</div>
</div>
</div>
</div>
<!--- EXTENDED PUP INFO -------->
<div class="d-flex h-50 w-100 align-items-center" style="height: 125px;">
<div class="container p-1" style="height: 133px; overflow: auto; text-align: justify; line-height: 1;">
<!--- PUP INFO HERE; whatever else you want to say about them; enclose new paragraphs in <p> tag ----->
<p>Use this bit to say whatever else you want about the pup. Personality (that you've observed or headcannn), interesting things they did as pups, what they've done since dispersing (if they did), relationship with this wolf, etc. Box will scroll.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla condimentum ac nisl quis vehicula. Nam sed elementum dui. Donec finibus vulputate varius. Vivamus lobortis tempor nibh eu laoreet. Donec suscipit vestibulum tellus id ullamcorper. Etiam vel mattis magna, ac hendrerit justo. Ut commodo hendrerit magna, ac consequat ipsum malesuada vel. Nam gravida mi a tortor aliquam iaculis. Quisque consectetur augue vitae ante convallis, quis lobortis ipsum placerat. Mauris euismod arcu at scelerisque tempor.</p>
</div>
</div>
</div>
<div class="col-auto p-0">
<!---- PUP IMAGE; replace URL in the middle; needs to be TALL ----->
<div class="d-flex-inline align-items-center h-100 p-0" style="width: 140px; background-repeat: no-repeat; background-position: center; background-size: cover; background-image: url(
https://i.pinimg.com/originals/82/01/0b/82010b4fe713aee606a9e8cff5bac126.png
);"></div>
</div>
</div>
</div>
<!----- END OF RIGHT-ALIGHNED PUPS CARD ----------------------------------------------------------->
<!---- COPY + PASTE NEW PUP CARD HERE TO ADD MORE IN THIS LITTER ------>
</div>
<!-- END OF LITTER BLOCK ------------------------------------------------------------------------------------>
<!---- COPY + PASTE LITTER BLOCK HERE to add more --------------->
</div>
<!---------- END OF ENTIRE PUPS TAB CONTENT ------------------------------------------------------------------------->
</div>
<!---- END OF PUPS TAB ----------------------------------------------------------------------------------------------------------------------->
<!---- EXTENDED FAMILY TAB ------------------------------------------------------------------------------------------------------------------->
<div class="card text-center display-4 pt-2" style="background-color: #221b06; text-transform: uppercase; font-size: 20px; height: 40px;">
<a class="align-items-center justify-content-center" data-toggle="collapse" data-target="#exfam">Extended <i class="fas fa-angle-down fa-xs mx-2"></i>
</a>
</div>
<div class="collapse" id="exfam" data-parent="#expand2">
<div class="container pb-2 pt-0 px-0">
<!---------- ENTIRE EXTENDED FAM TAB CONTENT ------------------------------------------------------------------------------------->
<!---- LEFT-ALIGNED FAMILY CARD ---------------------------------------------------------------->
<div class="container my-2 mx-0 py-1">
<div class="row my-1" style="height: 193px;">
<div class="col-auto p-0">
<!---- WOLF IMAGE; replace URL in the middle; image needs to be TALL ----->
<div class="d-flex-inline align-items-center h-100 p-0" style="width: 140px; background-repeat: no-repeat; background-position: center; background-size: cover; background-image: url(
https://psycatgames.com/magazine/quotes/wolf-quotes/feature-image_hue34f702eaab51e8b0d82ffcaa64f4761_4635171_1200x1200_fill_q100_box_smart1.jpg
);"></div>
</div>
<div class="col pl-2 pr-0" style="width: 300px;">
<!--- WOLF INFO ---->
<div class="d-flex align-itmes-center mb-4" style="height: 50px;">
<div class="container">
<div class="row align-items-center" style="font-weight: 400;">
<div class="d-flex-inline align-items-center" style="font-size: 20px;">
<!--- WOLF NAME HERE; use:
<a href="URL" class="text-warning" style="text-decoration: none;">Name</a>
instead to link to another profile
put <s></s> tags around if deceased ---->
Cassiopea
</div>
<div class="d-flex-inline align-items-center ml-1" style="font-size: 18px;">
<!-- GENDER SYMBOL; use 'fa-mars' for male & 'fa-venus' for female -->
<i class="fas fa-venus mx-1"></i>
</div>
</div>
<div class="row" style="font-size: 13px;">
<div class="d-flex-inline align-items-center">
<!---- RELATIONSHIP TO PLAYER WOLF; ex. mother, father, sibling, etc. ---->
Mother
•
<!--- AGE; at death or current ------------------>
Elder
•
<!--- CURRENT STATUS (ex. Dispersed, in 'Name' Pack, Deceased ------------------>
Starry Skies Pack
</div>
</div>
</div>
</div>
<!--- EXTENDED WOLF INFO -------->
<div class="d-flex h-50 w-100 align-items-center" style="height: 125px;">
<div class="container p-1" style="height: 133px; overflow: auto; text-align: justify; line-height: 1;">
<!--- EXTENDED WOLF INFO HERE; whatever else you want to say about them; enclose new paragraphs in <p> tag ----->
<p>Use this bit to say whatever else you want about the family member. Since interacting with extended family isn't really a thing in WQ (bar puppy siblings), feel free to get creative.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla condimentum ac nisl quis vehicula. Nam sed elementum dui. Donec finibus vulputate varius. Vivamus lobortis tempor nibh eu laoreet. Donec suscipit vestibulum tellus id ullamcorper. Etiam vel mattis magna, ac hendrerit justo. Ut commodo hendrerit magna, ac consequat ipsum malesuada vel. Nam gravida mi a tortor aliquam iaculis. Quisque consectetur augue vitae ante convallis, quis lobortis ipsum placerat. Mauris euismod arcu at scelerisque tempor.</p>
</div>
</div>
</div>
</div>
</div>
<!----- LEFT-ALIGN FAMILY CARD END --------------------------------------------------------------->
<!---- RIGHT-ALIGNED FAMILY CARD ----------------------------------------------------------------->
<div class="container mb-2 mx-0 py-1">
<div class="row my-1" style="height: 193px;">
<div class="col pr-2 pl-0" style="width: 300px;">
<!--- WOLF INFO ---->
<div class="d-flex align-itmes-center mb-4" style="height: 50px;">
<div class="container">
<div class="row align-items-center" style="font-weight: 400;">
<div class="d-flex-inline align-items-center" style="font-size: 20px;">
<!--- WOLF NAME HERE; use:
<a href="URL" class="text-warning" style="text-decoration: none;">Name</a>
instead to link to another profile
put <s></s> tags around if deceased ---->
Astraeia
</div>
<div class="d-flex-inline align-items-center ml-1" style="font-size: 18px;">
<!-- GENDER SYMBOL; use 'fa-mars' for male & 'fa-venus' for female -->
<i class="fas fa-venus mx-1"></i>
</div>
</div>
<div class="row" style="font-size: 13px;">
<div class="d-flex-inline align-items-center">
<!---- RELATIONSHIP TO PLAYER WOLF; ex. mother, father, sibling, etc. ---->
Sibling
•
<!--- AGE; at death or current ------------------>
Adult
•
<!--- CURRENT STATUS (ex. Dispersed, in 'Name' Pack, Deceased ------------------>
Dispersed
</div>
</div>
</div>
</div>
<!--- EXTENDED WOLF INFO -------->
<div class="d-flex h-50 w-100 align-items-center" style="height: 125px;">
<div class="container p-1" style="height: 133px; overflow: auto; text-align: justify; line-height: 1;">
<!--- EXTENDED WOLF INFO HERE; whatever else you want to say about them; personality, how they met, etc. ----->
<p>Use this bit to say whatever else you want about the family member. Since interacting with extended family isn't really a thing in WQ (bar puppy siblings), feel free to get creative.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla condimentum ac nisl quis vehicula. Nam sed elementum dui. Donec finibus vulputate varius. Vivamus lobortis tempor nibh eu laoreet. Donec suscipit vestibulum tellus id ullamcorper. Etiam vel mattis magna, ac hendrerit justo. Ut commodo hendrerit magna, ac consequat ipsum malesuada vel. Nam gravida mi a tortor aliquam iaculis. Quisque consectetur augue vitae ante convallis, quis lobortis ipsum placerat. Mauris euismod arcu at scelerisque tempor.</p>
</div>
</div>
</div>
<div class="col-auto p-0">
<!---- WOLF IMAGE; replace URL in the middle; needs to be TALL ----->
<div class="d-flex-inline align-items-center h-100 p-0" style="width: 140px; background-repeat: no-repeat; background-position: center; background-size: cover; background-image: url(
https://cdn2.picryl.com/photo/2015/01/01/grey-wolf-denali-national-park-and-preserve-2015-a9ca27-1024.jpg
);"></div>
</div>
</div>
</div>
<!----- END OF RIGHT-ALIGHNED FAMILY CARD -------------------------------------------------->
<!---- COPY + PASTE new relationship card on this line to add more ----->
<!---------- REAL END OF ENTIRE EXTENDED FAM TAB CONTENT ------------------------------------------------------------------------>
</div>
</div>
<!---- END OF EXTENDED FAMILY TAB ------------------------------------------------------------------------------------------------------------->
</div>
</div>
<!-- ----------------------- END OF FAMILY TAB ------------------------------------------------------------------------------------------------ -->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- CREDIT DO NOT DELETE ---->
<div class="container justify-content-center m-auto pr-5" style="text-shadow: -1px 1px 0 black, 1px 1px 0 black, 1px -1px 0 black, -1px -1px 0 black; width: 1000px; font-size: 25px; font-weight: 500px;">
<a href="https://toyhou.se/19428953.-f2u-wolfquest-ae-profile" class="text-warning"><i class="fas fa-code"></i></a>
<a href="https://www.wolfquest.org/" class="text-warning"><i class="fas fa-gamepad ml-2"></i></a></div>
<!------- CODE END ---------------------------------------------------------------------------------------------------------->
Recent Images
No images.