Grem2 Code

<!-- USAGE RULES //////////

///// Thank you so much for choosing to use my code!
///// I have done my best to add comments and white space to make editing easier, but if you have problems please look towards the forums/google-
///// I don't check TH regularly so I won't be answering questions about this template on here.

///// General Rules:
1. You may edit this code as much as you want. There are obviously no limits on adding/removing/editing elements.
2. You may splice this code with other templates if their creators allow you to do so. You must also add credit to them at the end of the code.
3. Make sure you have permission to use all images you put into this template; be sure to follow the Toyhouse guidelines for images as well.
4. Do not redistribute and claim this code as your own. You may pull elements from it, but if you pull significant amounts of structure and design you must credit me.
5. In general, make sure you are following Toyhouse's TOS with regard to the content you put into this template.

///// NOTE: This code was intended for use with characters of the Grem2 species, but you're welcome to
///// edit and use it for other characters as well.

-->


<!-- BACKGROUND IMAGE ////////// **Thank you to SweetChimera < https://toyhou.se/sweetchimera > for helping with this snippet!**
////// Edit the url of the background freely. Make sure the url stays within the single quotation marks.
////// You can also adjust the blur or add more filters in the style section.
-->
<div class="container-fluid" style="position:absolute; top:0; bottom:0; left:0; width:100%; z-index:-1;

background: url('https://images.unsplash.com/photo-1595154038281-4beb9195415b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1352&q=80')

no-repeat fixed center; background-size: cover; filter: blur(3px) brightness(90%);"></div>



<div class="mt-5 mb-3 card rounded p-3 col-lg-6" style="margin: auto; background-color: white; color: black; font-family: 'Roboto Slab'; box-shadow: 0px 0px 10px black;">
    <!-- HEADER ////////// DON'T EDIT -->
    <div class="row justify-content-between w-100 h-100 mb-3" style="margin: auto;">
        <a href="https://www.deviantart.com/gremcorps/"><img src="https://cdn.discordapp.com/attachments/267752601167200256/741433283686170704/gremcorps_logo_2_watermark_version.png" style="height: 50px;"></a>
        <img src="https://i.imgur.com/7y98SRn.png" style="height: 50px;">
    </div>

    <!-- HEADER TITLE ////////// -->
    <h1 class="mb-3" style="text-align: center; font-weight: bold;">Grem2 Specimen Report.</h1>

    <div class="d-flex mb-3">
        <hr class="my-auto w-100" style="border-top: 4px double black;">
        <i class="fa fa-times mr-2 ml-2"></i>
        <hr class="my-auto w-100" style="border-top: 4px double black;">
    </div>

    <!-- ROW ONE ////////// -->
    <div class="row justify-content-between w-100 h-100 mb-3 p-0" style="margin: auto;">
        <div class="col-lg-4 p-0" style="margin: auto;">

            <!-- PROFILE IMAGE //////////
            ///// To edit this, change the url within the background in the style section. Make sure it stays within single quotations.
            ///// You may need to play around with the image's crop ratio to get it to fit;
            ///// Right now, it automatically scales the image so it matches the height of the div, so things may get cut off.

            ///// Make sure you add image credit in the title if it's not your art!
            -->
            <div class="rounded bg-primary p-0 mb-3" style="

            background: url('#')

            no-repeat center; background-size: cover; height: 20rem;"

            title="image credit">

                <!-- DECEASED STAMP //////////
                ///// Just un-comment the below line of code to add a nice little DECEASED on top of the profile image.
                ///// If you want to make the image behind it darker, add "filter: brightness(#%);" into the "style:" section of the <div> above, after "height: 20rem;".
                -->

                <!-- <img src="https://cdn.discordapp.com/attachments/492906160849027085/741418583896358993/iu.png" style="filter: brightness(100%);"> -->

            </div>

            <!-- PROFILE IMAGE CAPTION ////////// -->
            <p class="text-muted d-none d-md-block" style="font-size: 0.8rem; text-align: center;">Photograph of specimen.</p>

        <!-- SPECIMEN OVERVIEW SECTION //////////
        ///// Edit the appropriate text to fill in this information.
        -->
        </div>
        <div class="col">
            <h5 class="mb-3" style="font-weight: bold; text-align: center;"><i class="fa fa-info-circle"></i> Specimen Overview.</h5>

            <div class="justify-content-between d-flex">
                <span class="text-muted">Alias</span>Name
            </div>
            <hr style="border-top: 1px dashed gray;">

            <div class="justify-content-between d-flex">
                <span class="text-muted">Identification Number</span>#xxxx
            </div>
            <hr style="border-top: 1px dashed gray;">

            <div class="justify-content-between d-flex">
                <span class="text-muted">Masterlist Reference</span><a href="#"><i class="fa fa-link"></i></a>
            </div>
            <hr style="border-top: 1px dashed gray;">

            <div class="justify-content-between d-flex">
                <span class="text-muted">Subspecies Type</span>growl/mantagrem/cypherus/mutated/normal
            </div>
            <hr style="border-top: 1px dashed gray;">

            <div class="justify-content-between d-flex">
                <span class="text-muted">Height</span>Name
            </div>
            <hr style="border-top: 1px dashed gray;">

            <div class="justify-content-between d-flex">
                <span class="text-muted">Date of Release</span>Name
            </div>
            <hr style="border-top: 1px dashed gray;">

            <div class="justify-content-between d-flex">
                <span class="text-muted">Pronouns</span>Name
            </div>
        </div>
    </div>

    <div class="d-flex mb-3">
        <hr class="my-auto w-100" style="border-top: 4px double black;">
        <i class="fa fa-times mr-2 ml-2"></i>
        <hr class="my-auto w-100" style="border-top: 4px double black;">
    </div>


    <!-- ROW TWO ////////// -->
    <div class="row justify-content-between w-100 mb-3" style="margin: auto;">

        <!-- BLOOD COLOR SECTION //////////
        ///// To edit the blood color, change the relevant hex codes of background-color and the text within the boxes to match the hex codes.
        ///// You may need to change the text color (just color: X;) to be black if the contrast is too low with either blood colors.
        -->
        <div class="col-4 d-none d-md-block" style="margin:auto;">
            <div class="row mb-4">
                <div class="w-100 col p-0 mr-2">
                    <div class="col-lg rounded p-3" style="

                    background-color: black;

                    color: white;

                    text-align: center;">#XXXXXX</div>
                    <p class="text-muted mt-2" style="font-size: 0.8rem; text-align: center;">Dominant Blood.</p>
                </div>

                <div class="w-100 col p-0">
                    <div class="col-lg rounded p-3" style="

                    background-color: gray;

                    color: white;

                    text-align: center;">#XXXXXX</div>
                    <p class="text-muted mt-2" style="font-size: 0.8rem; text-align: center;">Recessive Blood.</p>
                </div>
            </div>

            <!-- THUMB PRINT SECTION ////////// DON'T EDIT
            ///// You can change the image in here if you want, but it's not necessary.
            ///// This was mostly a filler image.
            -->
            <div>
                <img class="mt-3" src="https://cdn.discordapp.com/attachments/492906160849027085/741406590305042462/iu.png" style="margin: auto;">
                <p class="text-muted mt-2" style="font-size: 0.8rem; text-align: center;">Right Thumb Print.</p>
            </div>
        </div>

        <!-- TRAITS SECTION //////////
        ///// Like the overview section, change the relevant text to fill in this information.
        ///// You can put "N/A" if the grem has no applicable traits (i.e. mutations).
        -->
        <div class="col">
            <h5 class="mb-3" style="font-weight: bold; text-align: center;"><i class="fa fa-list"></i> Specimen Traits.</h5>
            <div class="justify-content-between d-flex">

                <span class="text-muted">Ear Amount</span>#
            </div>
            <hr style="border-top: 1px dashed gray;">

            <div class="justify-content-between d-flex">
                <span class="text-muted">Ear Trait(s)</span>X
            </div>
            <hr style="border-top: 1px dashed gray;">

            <div class="justify-content-between d-flex">
                <span class="text-muted">Neck Trait(s)</span>X
            </div>
            <hr style="border-top: 1px dashed gray;">

            <div class="justify-content-between d-flex">
                <span class="text-muted">Tail Amount</span>#
            </div>
            <hr style="border-top: 1px dashed gray;">

            <div class="justify-content-between d-flex">
                <span class="text-muted">Tail Trait(s)</span>X
            </div>
            <hr style="border-top: 1px dashed gray;">

            <div class="justify-content-between d-flex">
                <span class="text-muted">Mutation(s)</span>X
            </div>
        </div>
    </div>

    <div class="d-flex mb-3">
        <hr class="my-auto w-100" style="border-top: 4px double black;">
        <i class="fa fa-times mr-2 ml-2"></i>
        <hr class="my-auto w-100" style="border-top: 4px double black;">
    </div>

    <!-- HISTORY SECTION ////////// -->
    <div class="row justify-content-between w-100 mb-3" style="margin: auto;">
        <div class="col">
            <h5 class="mb-3" style="font-weight: bold; text-align: center;"><i class="fa fa-book"></i> Specimen History.</h5>

            <!-- EDIT THE TEXT IN THIS:
            ///// You can add as much text as you'd like to this section--
            ///// it'll expand and scroll with however much you have.
            ///// To add breaks in a paragraph, close the <p> tag with </p> and then start a new one, OR
            ///// add "<br><br>" between paragraphs.
            ///// (<br> breaks the paragraph, then another <br> adds the space between a paragraph.)

            ///// Feel free to also change the alignment of the text by editing "text-align: (justify/left/right/center);"
            -->
            <div class="p-3 card bg-light" style="overflow: auto; height: 20rem; text-align: justify">
                <P>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Pellentesque elit ullamcorper dignissim cras tincidunt. Sapien et ligula ullamcorper malesuada proin. Nulla facilisi nullam vehicula ipsum a arcu. Venenatis lectus magna fringilla urna porttitor rhoncus. Neque volutpat ac tincidunt vitae semper quis lectus nulla. Imperdiet nulla malesuada pellentesque elit eget gravida cum sociis. Consequat mauris nunc congue nisi vitae. Orci ac auctor augue mauris. Tellus orci ac auctor augue mauris augue neque gravida in. Felis imperdiet proin fermentum leo. Ultricies leo integer malesuada nunc vel risus commodo viverra maecenas. Eu nisl nunc mi ipsum faucibus vitae aliquet.

                <br><br>

                In est ante in nibh mauris. Nulla aliquet enim tortor at auctor urna. Donec pretium vulputate sapien nec sagittis aliquam malesuada bibendum. Nulla facilisi nullam vehicula ipsum a arcu cursus vitae. Eget aliquet nibh praesent tristique magna. Elementum nisi quis eleifend quam adipiscing vitae proin sagittis nisl. Eleifend donec pretium vulputate sapien nec sagittis aliquam malesuada bibendum. Odio pellentesque diam volutpat commodo sed egestas egestas fringilla phasellus. Commodo ullamcorper a lacus vestibulum sed arcu. Dignissim diam quis enim lobortis scelerisque fermentum dui faucibus in. Aliquet sagittis id consectetur purus ut faucibus pulvinar. Nibh sed pulvinar proin gravida hendrerit lectus. Et malesuada fames ac turpis. Ut tellus elementum sagittis vitae et leo duis. Turpis egestas integer eget aliquet nibh praesent. Scelerisque felis imperdiet proin fermentum. Ac felis donec et odio pellentesque diam volutpat.

                <br><br>

                Lectus quam id leo in vitae turpis massa sed. Blandit turpis cursus in hac habitasse platea dictumst quisque. Morbi quis commodo odio aenean sed adipiscing diam donec. Ultrices in iaculis nunc sed augue lacus viverra vitae. Viverra tellus in hac habitasse platea dictumst vestibulum rhoncus est. Volutpat odio facilisis mauris sit amet massa vitae tortor. In ornare quam viverra orci sagittis eu volutpat odio facilisis. Amet massa vitae tortor condimentum lacinia. Mattis nunc sed blandit libero volutpat sed cras ornare arcu. Vel quam elementum pulvinar etiam non quam lacus. Non odio euismod lacinia at quis risus sed vulputate odio.</P>
            </div>

        </div>
    </div>

    <!-- FOOTER ////////// DON'T EDIT -->
    <p class="text-muted mt-2" style="font-size: 0.8rem; text-align: center;">Specimen data &#169; Gremcorporation.</p>

</div>

<!-- CODE CREDIT ////////// DO NOT REMOVE. -->
<div class="col-lg-6 p-0 mb-5"  style="margin: auto; text-align: left;"><a href="https://toyhou.se/hatchl/" title="Code credit: Hatchl"><i class="fa fa-link"></i></a></div>