crab_anatomy.html

---
layout: base
css: [/css/crab_anatomy.css]
js: [/js/crab_anatomy.js]
---

<nav class="navbar sticky-top navbar-light bg-light">
    <a class="navbar-brand" href="{{ site.baseurl }}/">
        <img src="{{ site.baseurl }}/img/crabnottext.svg" height="30px">
        Dr. Dorothy E. Bliss
    </a>
    <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav">
            <li class="nav-item active">
                <a class="nav-link" href="{{ site.baseurl }}/">Return Home</a>
            </li>
        </ul>
    </div>
</nav>

<div>
    <div class="instructions">
        <h1>Instructions</h1>
        <p class="lead">Explore the anatomy of a crab</p>
        <p>Click different parts of the crab to read about them!</p>
    </div>

    <div class="crab-box">
        <div id="crab-eyes"></div>
        <div id="crab-legs-left"></div>
        <div id="crab-legs-right"></div>
        <div id="crab-pincher-left"></div>
        <div id="crab-pincher-right"></div>
    </div>
</div>

<div class="modal" tabindex="-1" role="dialog" id="eyes-modal">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Eyestalks</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <p>Dr. Bliss was one of the first scientists to research crustacean hormones with the eyestalks of crabs. Bliss was able to discover the X-organ-sinus-gland complex located in the eyestalk. This complex allows hormones to be released into the bloodstream which affects molting, water balance, blood glucose, limb regeneration, and the position of retinal pigments.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

<div class="modal" tabindex="-1" role="dialog" id="pinchers-modal">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Chelipeds</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <p>Chelipeds are a limb on the crab that contains the first pair of legs and the claw. They are used for self defense and to obtain food.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

<div class="modal" tabindex="-1" role="dialog" id="legs-modal">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Legs</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <p>Crabs often move sideways, as that is how their bodies were built to move. Crabs have multiple legs with joints that outwards. This makes it more efficient and natural for the crabs to move sideways.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>