College Design Language System

500 Internal Error Page

No notes defined.

<div id="body-wrapper">
    <div id="skip-content"><a class="Skip-btn" href="#skipToContent">Skip To Main Content</a></div>
    <!-- Header Section -->
    <header id="header" class="main-header sticky-header">
        <!-- Top Header -->
        <div id="top-header">
            <div class="top-header-left">
                <a title="UTSA Home" href="https://www.utsa.edu">
                    <img width="250px" height="12px" class="logo-full d-none d-sm-block" src="../../college-dls/utsa/images/utsa-logo-full.svg" alt="The University of Texas at San Antonio" />
                    <img width="72px" height="25px" class="logo-short d-block d-sm-none" src="../../college-dls/utsa/images/utsa-logo.svg" alt="The University of Texas at San Antonio" />
                </a>
            </div>
            <div class="top-header-right">
                <form class="top-header-form">
                    <div class="language-select">
                        <label for="select-lang" class="d-none">Select Language</label>
                        <select id="select-lang" class="js-example-disabled-results" aria-labelledby="select-lang">
                            <option>Select Language</option>
                            <option>English</option>
                        </select>
                    </div>
                    <div class="myutsa-link">
                        <a title="MyUTSA" href="https://my.utsa.edu"><i class="fas fa-globe-americas"></i> <span class="myutsa-text">myUTSA</span></a>
                    </div>
                    <div class="search">
                        <button type="button" class="search-btn dropdown-toggle show" data-bs-toggle="dropdown" aria-expanded="true">
                            <span class="search-icon"><i class="fas fa-search" aria-hidden="true"></i></span>
                            <span class="search-text">Search</span>
                        </button>
                        <div class="dropdown-menu " style="position: absolute; inset: 0px auto auto 0px; margin: 0px; transform: translate3d(274px, 122px, 0px);" data-popper-placement="bottom-end">
                            <label for="q" class="d-none">Search</label>
                            <input type="search" placeholder="Search" id="q" tabindex="0" onblur="if (this.value == '') {this.value = 'Search UTSA';}" onfocus="if (this.value == 'Search UTSA') {this.value = '';}" value="Search UTSA" />
                            <button type="submit" class="search-input-icon" aria-label="Search"><i class="fas fa-search" aria-hidden="true"></i></button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <!-- End Top Header -->

        <!-- Sticky Header -->
        <div class="top-navigation">
            <!-- Main Header -->
            <div id="main-header">
                <div class="container">
                    <nav class="navbar navbar-expand-md">
                        <a class="navbar-brand p-2" href="#" aria-label="Logo Image">
                            <img class="college-logo" width="265px" height="33px" alt="Full College Name Goes Here" src="../../college-dls/college/images/logo-hcap-2color-formal-single-short.svg" /></a>
                        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapsibleNavbar4" aria-label="Toggle">
                            <span class="navbar-toggler-icon"><i class="fal fa-bars"></i></span>
                            <span class="navbar-toggler-close-icon" style="display: none;"><i class="fal fa-times"></i></span>
                        </button>
                        <div class="collapse navbar-collapse justify-content-end" id="collapsibleNavbar4">
                            <ul class="navbar-nav">
                                <li class="nav-item">
                                    <a class="nav-link" href="#" aria-label="College Admissions">Admissions</a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#">Programs</a>
                                    <div class="dropdown-menu">
                                        <a class="dropdown-item" href="#" aria-label="Undergraduate Programs">Undergraduate</a>
                                        <a class="dropdown-item" href="#" aria-label="Graduate Programs">Graduate</a>
                                        <a class="dropdown-item" href="#" aria-label="Certificate Programs">Certificate</a>
                                        <a class="dropdown-item" href="#" aria-label="another link option for testing">Testing a long link to make sure it wraps on mobile</a>
                                    </div>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" href="#" aria-label="Faculty & Research">Faculty & Research </a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown" aria-label="Student Success">Student Success</a>
                                    <div class="dropdown-menu">
                                        <a class="dropdown-item" href="#" aria-label="Undergraduate Student Resources">Undergraduate</a>
                                        <a class="dropdown-item" href="#" aria-label="Graduate Student Resources">Graduate</a>
                                        <a class="dropdown-item" href="#" aria-label="Certificate Resources">Certificate</a>
                                    </div>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown" aria-label="College Departments">Departments</a>
                                    <div class="dropdown-menu">
                                        <a class="dropdown-item" href="#" aria-label="Another sub menu item">Undergraduate</a>
                                    </div>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown" aria-label="About the College">About</a>
                                    <div class="dropdown-menu">
                                        <a class="dropdown-item" href="#" aria-label="About Undergraduate Programs">Undergraduate</a>
                                        <a class="dropdown-item" href="#" target="_parent">This is a longer link for testing</a>
                                    </div>
                                </li>

                                <li class="nav-item mobile-nav-btns">
                                    <a href="#" class="action-btn">Apply <i class="fas fa-arrow-right"></i></a>
                                    <a href="#" class="action-btn">Visit <i class="fas fa-arrow-right"></i></a>
                                    <a href="#" class="action-btn">Request Info <i class="fas fa-arrow-right"></i></a>
                                </li>
                            </ul>
                        </div>
                    </nav>
                </div>
            </div>
            <!--End Main Header -->
            <!-- Request Apply Header -->
            <div class="bottom-absolute-header d-flex flex-row-reverse">
                <div id="orange-bg-header">
                    <div class="container">
                        <ul class="orange-header-list">
                            <li class="nav-item"><a class="nav-link" href="#">Request Info</a></li>
                            <li class="nav-item"><a class="nav-link" href="#">Visit</a></li>
                            <li class="nav-item"><a class="nav-link" href="#">Apply</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <!-- End Sticky Header -->

    </header>
    <!-- Header Section End -->
    <!-- Main Content Body -->
    <main>
        <!--Slider -->
        <!--<section class="slider-wrapper" id="main-slider-wrapper">
      <section class="banner">
         <div class="single-title-wrapper">
            <div class="container">
               <h1 class="single-title-heading">500 Internal Error</h1>
            </div>
         </div>
      </section>    </section>-->
        <!-- End Slider -->

        <section class="page-text-wrapper internal-error-wrapper" id="skipToContent">
            <div class="container">
                <div class="row">
                    <div class="col-12">
                        <button class="error-code mx-auto">
                            <div class="number five">
                                <div class="cell filled">
                                    <div class="bug"></div>
                                </div>
                                <div class="cell filled">
                                    <div class="bug"></div>
                                </div>
                                <div class="cell filled">
                                    <div class="bug"></div>
                                </div>
                                <div class="cell filled">
                                    <div class="bug"></div>
                                </div>
                                <div class="cell filled">
                                    <div class="bug"></div>
                                </div>
                                <div class="cell empty"></div>
                                <div class="cell empty"></div>
                                <div class="cell empty"></div>
                                <div class="cell filled">
                                    <div class="bug"></div>
                                </div>
                                <div class="cell filled">
                                    <div class="bug"></div>
                                </div>
                                <div class="cell filled">
                                    <div class="bug"></div>
                                </div>
                                <div class="cell empty"></div>
                                <div class="cell empty"></div>
                                <div class="cell empty"></div>
                                <div class="cell empty"></div>
                                <div class="cell filled">
                                    <div class="bug"></div>
                                </div>
                                <div class="cell filled">
                                    <div class="bug"></div>
                                </div>
                                <div class="cell empty"></div>
                                <div class="cell empty"></div>
                                <div class="cell filled">
                                    <div class="bug"></div>
                                </div>
                                <div class="cell empty"></div>
                                <div class="cell filled">
                                    <div class="bug"></div>
                                </div>
                                <div class="cell filled">
                                    <div class="bug"></div>
                                </div>
                                <div class="cell empty"></div>
                            </div>
                            <div class="number zero">
                                <div class="cell empty"></div>
                                <div class="cell filled">
                                    <div class="bug"></div>
                                </div>
                                <div class="cell filled">
                                    <div class="bug"></div>
                                </div>
                                <div class="cell empty"></div>
                                <div class="cell filled">
                                    <div class="bug"></div>
                                </div>
                                <div class="cell empty"></div>
                                <div class="cell empty"></div>
                                <div class="cell filled">
                                    <div class="bug"></div>
                                </div>
                                <div class="cell filled">
                                    <div class="bug"></div>
                                </div>
                                <div class="cell empty"></div>
                                <div class="cell filled">
                                    <div class="bug"></div>
                                </div>
                                <div class="cell filled">
                                    <div class="bug"></div>
                                </div>
                                <div class="cell filled">
                                    <div class="bug"></div>
                                </div>
                                <div class="cell filled">
                                    <div class="bug"></div>
                                </div>
                                <div class="cell empty"></div>
                                <div class="cell filled">
                                    <div class="bug"></div>
                                </div>
                                <div class="cell filled">
                                    <div class="bug"></div>
                                </div>
                                <div class="cell empty"></div>
                                <div class="cell empty"></div>
                                <div class="cell filled">
                                    <div class="bug"></div>
                                </div>
                                <div class="cell empty"></div>
                                <div class="cell filled">
                                    <div class="bug"></div>
                                </div>
                                <div class="cell filled">
                                    <div class="bug"></div>
                                </div>
                                <div class="cell empty"></div>
                            </div>
                            <div class="number zero">
                                <div class="cell empty"></div>
                                <div class="cell filled">
                                    <div class="bug"></div>
                                </div>
                                <div class="cell filled">
                                    <div class="bug"></div>
                                </div>
                                <div class="cell empty"></div>
                                <div class="cell filled">
                                    <div class="bug"></div>
                                </div>
                                <div class="cell empty"></div>
                                <div class="cell empty"></div>
                                <div class="cell filled">
                                    <div class="bug"></div>
                                </div>
                                <div class="cell filled">
                                    <div class="bug"></div>
                                </div>
                                <div class="cell empty"></div>
                                <div class="cell filled">
                                    <div class="bug"></div>
                                </div>
                                <div class="cell filled">
                                    <div class="bug"></div>
                                </div>
                                <div class="cell filled">
                                    <div class="bug"></div>
                                </div>
                                <div class="cell filled">
                                    <div class="bug"></div>
                                </div>
                                <div class="cell empty"></div>
                                <div class="cell filled">
                                    <div class="bug"></div>
                                </div>
                                <div class="cell filled">
                                    <div class="bug"></div>
                                </div>
                                <div class="cell empty"></div>
                                <div class="cell empty"></div>
                                <div class="cell filled">
                                    <div class="bug"></div>
                                </div>
                                <div class="cell empty"></div>
                                <div class="cell filled">
                                    <div class="bug"></div>
                                </div>
                                <div class="cell filled">
                                    <div class="bug"></div>
                                </div>
                                <div class="cell empty"></div>
                            </div>
                        </button>

                    </div>

                </div>
            </div>
        </section>

    </main>
    <div aria-label="Back to Top" role="navigation">
        <a href="#top-area" id="top-link" title="To top of page"><em class="back-to-top">&nbsp;</em><span class="top-link-text">Back to Top</span></a>
    </div>

    <!--The below is only for the DLS for the button to show-->
    <script>
        document.getElementById("top-link").style.display = "block";
    </script>
    <!-- End Main Content Body -->
    <!-- Footer -->
    <footer id="footer">
        <div class="container">
            <div class="row">
                <div class="col-sm-12 col-md-6 col-lg-4">
                    <div class="footer-logo">
                        <img width="231px" height="75px" alt="UTSA - Creating Bold Futures" src="../../college-dls/utsa/images/utsa-cbf.svg" />
                    </div>
                    <div class="footer-text">
                        <p>
                            <span class="footer-first-text">One UTSA Circle San Antonio, TX 78249</span>
                            <span class="footer-second-text">Information <a href="tel:+12104584011" class="">210-458-4011</a></span>
                        </p>
                    </div>
                    <div class="footer-social">
                        <a class="facebook" href="https://facebook.com/utsa" aria-label="Facebook"><i class="fab fa-facebook-f" aria-hidden="true"></i></a>
                        <a class="twitter" href="https://x.com/utsa" aria-label="Twitter"><i class="fa-brands fa-x-twitter" aria-hidden="true"></i></a>
                        <a class="youtube" href="https://youtube.com/user/utsa" aria-label="Youtube"><i class="fab fa-youtube" aria-hidden="true"></i></a>
                        <a class="linkedin" href="https://linkedin.com/school/the-university-of-texas-at-san-antonio/" aria-label="Linkedin"><i class="fab fa-linkedin" aria-hidden="true"></i></a>
                        <a class="instagram" href="https://instagram.com/utsa/" aria-label="Instagram"><i class="fab fa-instagram" aria-hidden="true"></i></a>
                    </div>
                </div>
                <div class="col-sm-12 col-md-6 col-lg-2">
                    <ul class="list-unstyled">
                        <li class="nav-item">
                            <a href="https://www.utsa.edu/locations" id="s-footer-locations">Locations</a>
                        </li>
                        <li class="nav-item">
                            <a href="https://www.utsa.edu/visit" id="s-footer-visit" aria-label="Visit UTSA">Visit UTSA</a>
                        </li>
                        <li class="nav-item">
                            <a href="https://www.utsa.edu/today" id="s-footer-utsa-today">UTSA Today</a>
                        </li>
                        <li class="nav-item">
                            <a href="https://www.utsa.edu/jobs" id="s-footer-jobs">Jobs</a>
                        </li>
                        <li class="nav-item">
                            <a href="https://alerts.utsa.edu/utsa-community-emergency-response" id="s-footer-emergency-contacts">Emergency Contacts</a>
                        </li>
                    </ul>
                </div>
                <div class="col-sm-12 col-md-6 col-lg-2">
                    <ul class="list-unstyled">
                        <li class="nav-item">
                            <a href="https://www.utsa.edu/directory" id="s-footer-directory">Directory</a>
                        </li>
                        <li class="nav-item">
                            <a href="https://www.utsa.edu/Compliance/Hotline.html" id="s-footer-report-fraud">Report
                                Fraud</a>
                        </li>
                        <li class="nav-item">
                            <a href="https://www.utsa.edu/eos/title-ix" id="s-footer-title-ix-reporting">Title IX
                                Reporting</a>
                        </li>
                        <li class="nav-item">
                            <a href="https://www.utsa.edu/ada" id="s-footer-ada-resources">ADA Resources</a>
                        </li>
                        <li class="nav-item">
                            <a href="https://www.utsa.edu/publicsafety/pd/clery_compliance" id="s-footer-clery-info">Clery
                                Information</a>
                        </li>
                    </ul>
                </div>
                <div class="col-sm-12 col-md-6 col-lg-4">
                    <ul class="list-unstyled">
                        <li class="nav-item">
                            <a href="https://www.utsa.edu/remembrance" id="s-footer-rr-remembrance">Roadrunner
                                Remembrance</a>
                        </li>
                        <li class="nav-item">
                            <a href="https://www.utsa.edu/mental-health-resources" id="s-footer-mental-health">Counseling/Mental Health</a>
                        </li>

                        <li class="nav-item">
                            <a href="https://www.utsa.edu/heerf/#reports-disclosure" id="s-footer-cares-act-reports">CARES
                                Act Reports &amp; Disclosure</a>
                        </li>
                        <li class="nav-item">
                            <a href="https://www.utsa.edu/hop/chapter9/9.24.html" id="s-footer-sexual-harassment">Sexual
                                Harassment and Sexual Misconduct Policy</a>
                        </li>
                    </ul>
                </div>
            </div>

            <div class="row">
                <div class="col-sm-12">
                    <hr />
                </div>
            </div>
        </div>
        <div class="copyright-subfooter">
            <div class="row">
                <div class="col-sm-12 col-md-6">
                    <div class="utsa-copyright">
                        <p>&copy; 2024 The University of Texas at San Antonio</p>
                    </div>
                </div>
                <div class="col-sm-12 col-md-6">
                    <nav class="subfooter-links">
                        <ul class="list-unstyled">
                            <li class="nav-item">
                                <a href="https://utsa.edu/policies" id="s-footer-policies">Policies</a>
                            </li>
                            <li class="nav-item">
                                <a href="https://utsa.edu/policies/accessibility" id="s-footer-web-accessibility">Web
                                    Accessibility</a>
                            </li>
                            <li class="nav-item">
                                <a href="https://utsa.edu/policies/reqlinks.html" id="s-footer-required-links">Required
                                    Links</a>
                            </li>
                            <li class="nav-item">
                                <a href="https://utsystem.edu/" id="s-footer-ut-system">UT System</a>
                            </li>
                        </ul>
                    </nav>
                </div>
            </div>
        </div>
    </footer>
    <!--End Footer -->
</div>
  • Content: 
    /* components/04-reference-pages/14-internal-error-page/internal-error-page.scss */
/* BEGIN internal-error-page.scss */

.internal-error-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  overflow: hidden;
  background: $white;
}

.error-code {
  display: flex;
  grid-gap: 4vw;
  position: relative;
  border: 0;
  background: none;
  font-family: "Nunito", sans-serif;
  font-weight: 600;
  letter-spacing: 0.1em;
  white-space: nowrap;
  padding: 0;
  justify-content: center;
  transition: all 250ms ease;
}

.error-code:after {
  content: "Looks like you found a bug.";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 4vw;
  color: $blue;
  opacity: 0;
  transition: all 500ms ease;
  transition-delay: 1000ms;
}

.error-code:hover:after {
  opacity: 1;
}

.error-code:hover .cell.filled:nth-child(1) {
  transform: rotate(15deg);
}

.error-code:hover .cell.filled:nth-child(2) {
  transform: rotate(30deg);
}

.error-code:hover .cell.filled:nth-child(3) {
  transform: rotate(45deg);
}

.error-code:hover .cell.filled:nth-child(4) {
  transform: rotate(60deg);
}

.error-code:hover .cell.filled:nth-child(5) {
  transform: rotate(75deg);
}

.error-code:hover .cell.filled:nth-child(6) {
  transform: rotate(90deg);
}

.error-code:hover .cell.filled:nth-child(7) {
  transform: rotate(105deg);
}

.error-code:hover .cell.filled:nth-child(8) {
  transform: rotate(120deg);
}

.error-code:hover .cell.filled:nth-child(9) {
  transform: rotate(135deg);
}

.error-code:hover .cell.filled:nth-child(10) {
  transform: rotate(150deg);
}

.error-code:hover .cell.filled:nth-child(11) {
  transform: rotate(165deg);
}

.error-code:hover .cell.filled:nth-child(12) {
  transform: rotate(180deg);
}

.error-code:hover .cell.filled:nth-child(13) {
  transform: rotate(195deg);
}

.error-code:hover .cell.filled:nth-child(14) {
  transform: rotate(210deg);
}

.error-code:hover .cell.filled:nth-child(15) {
  transform: rotate(225deg);
}

.error-code:hover .cell.filled:nth-child(16) {
  transform: rotate(240deg);
}

.error-code:hover .cell.filled:nth-child(17) {
  transform: rotate(255deg);
}

.error-code:hover .cell.filled:nth-child(18) {
  transform: rotate(270deg);
}

.error-code:hover .cell.filled:nth-child(19) {
  transform: rotate(285deg);
}

.error-code:hover .cell.filled:nth-child(20) {
  transform: rotate(300deg);
}

.error-code:hover .cell.filled:nth-child(21) {
  transform: rotate(315deg);
}

.error-code:hover .cell.filled:nth-child(22) {
  transform: rotate(330deg);
}

.error-code:hover .cell.filled:nth-child(23) {
  transform: rotate(345deg);
}

.error-code:hover .cell.filled:nth-child(24) {
  transform: rotate(360deg);
}

.error-code:hover .number {
  grid-gap: 2vw;
}

.error-code:hover .bug {
  transform: translateY(-200vh);
  transition-delay: 500ms;
}

.error-code:hover .bug:before {
  top: -0.5vw;
}

.error-code:hover .bug:after {
  left: -0.75vw;
  right: -0.75vw;
  height: 1.5vw;
}

.number {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(6, 1fr);
  transition: all 500ms ease;
  grid-gap: 0.25vw;
  margin: auto 2vw;
}

.cell.filled {
  transition: all 500ms ease;
}

.bug {
  background: $orange-a11y;
  transition: transform 4000ms ease;
  width: 2.25vw;
  height: 2.5vw;
  position: relative;
  border-radius: 100%;
  transition-delay: 0;
}

.bug:before {
  content: "";
  height: 1.5vw;
  width: 1.5vw;
  display: block;
  position: absolute;
  top: 0;
  left: 0.375vw;
  background: $orange-a11y;
  border-radius: 100%;
  z-index: -1;
  transition: all 1000ms ease;
}

.bug:after {
  content: "";
  display: block;
  position: absolute;
  left: 0.5vw;
  right: 0.5vw;
  bottom: 0.5vw;
  height: 0;
  transition: all 250ms ease;
  animation: infinite skitter 100ms ease;
  background: top left/100% 100% linear-gradient(transparent, transparent 45%, $orange-a11y 45%, $orange-a11y 55%, transparent 55%), top left/100% 100% linear-gradient(to bottom right, transparent, transparent 45%, $orange-a11y 45%, $orange-a11y 55%, transparent 55%), top left/100% 100% linear-gradient(to bottom left, transparent, transparent 45%, $orange-a11y 45%, $orange-a11y 55%, transparent 55%);
}

@keyframes skitter {

  0%,
  100% {
    transform: rotate(-35deg);
  }

  50% {
    transform: rotate(35deg);
  }
}

/* END internal-error-page.scss */
  • URL: /components/raw/500-internal-error-page/internal-error-page.scss
  • Filesystem Path: components/04-reference-pages/16-internal-error-page/internal-error-page.scss
  • Size: 4.5 KB
  • Content: 
    This reference page uses the following components in the following order:

1. [Global Header](https://utsa-asc.github.io/college-dls/components/detail/global-header.html)
1. [Site Navigation](https://utsa-asc.github.io/college-dls/components/detail/site-navigation--default.html)
1. [Banner - Slim](https://utsa-asc.github.io/college-dls/components/detail/banner--slim.html)
2. [Global Footer](https://utsa-asc.github.io/college-dls/components/detail/global-footer.html)
  • URL: /components/raw/500-internal-error-page/internal-error-page.md
  • Filesystem Path: components/04-reference-pages/16-internal-error-page/internal-error-page.md
  • Size: 471 Bytes 
<div id="body-wrapper">
  <div id="skip-content"><a class="Skip-btn" href="#skipToContent">Skip To Main Content</a></div>
  <!-- Header Section -->
  <header id="header" class="main-header sticky-header">
    {{ render '@global-header' }}
    {{ render '@site-navigation' }}
  </header>
  <!-- Header Section End -->
  <!-- Main Content Body -->
  <main>
    <!--Slider -->
    <!--<section class="slider-wrapper" id="main-slider-wrapper">
      {{> @banner--slim}}
    </section>-->
    <!-- End Slider -->

    <section class="page-text-wrapper internal-error-wrapper" id="skipToContent">
      <div class="container">
        <div class="row">
          <div class="col-12">
            <button class="error-code mx-auto">
  <div class="number five">
  <div class="cell filled"><div class="bug"></div></div><div class="cell filled"><div class="bug"></div></div><div class="cell filled"><div class="bug"></div></div><div class="cell filled"><div class="bug"></div></div><div class="cell filled"><div class="bug"></div></div><div class="cell empty"></div><div class="cell empty"></div><div class="cell empty"></div><div class="cell filled"><div class="bug"></div></div><div class="cell filled"><div class="bug"></div></div><div class="cell filled"><div class="bug"></div></div><div class="cell empty"></div><div class="cell empty"></div><div class="cell empty"></div><div class="cell empty"></div><div class="cell filled"><div class="bug"></div></div><div class="cell filled"><div class="bug"></div></div><div class="cell empty"></div><div class="cell empty"></div><div class="cell filled"><div class="bug"></div></div><div class="cell empty"></div><div class="cell filled"><div class="bug"></div></div><div class="cell filled"><div class="bug"></div></div><div class="cell empty"></div></div><div class="number zero"><div class="cell empty"></div><div class="cell filled"><div class="bug"></div></div><div class="cell filled"><div class="bug"></div></div><div class="cell empty"></div><div class="cell filled"><div class="bug"></div></div><div class="cell empty"></div><div class="cell empty"></div><div class="cell filled"><div class="bug"></div></div><div class="cell filled"><div class="bug"></div></div><div class="cell empty"></div><div class="cell filled"><div class="bug"></div></div><div class="cell filled"><div class="bug"></div></div><div class="cell filled"><div class="bug"></div></div><div class="cell filled"><div class="bug"></div></div><div class="cell empty"></div><div class="cell filled"><div class="bug"></div></div><div class="cell filled"><div class="bug"></div></div><div class="cell empty"></div><div class="cell empty"></div><div class="cell filled"><div class="bug"></div></div><div class="cell empty"></div><div class="cell filled"><div class="bug"></div></div><div class="cell filled"><div class="bug"></div></div><div class="cell empty"></div></div><div class="number zero"><div class="cell empty"></div><div class="cell filled"><div class="bug"></div></div><div class="cell filled"><div class="bug"></div></div><div class="cell empty"></div><div class="cell filled"><div class="bug"></div></div><div class="cell empty"></div><div class="cell empty"></div><div class="cell filled"><div class="bug"></div></div><div class="cell filled"><div class="bug"></div></div><div class="cell empty"></div><div class="cell filled"><div class="bug"></div></div><div class="cell filled"><div class="bug"></div></div><div class="cell filled"><div class="bug"></div></div><div class="cell filled"><div class="bug"></div></div><div class="cell empty"></div><div class="cell filled"><div class="bug"></div></div><div class="cell filled"><div class="bug"></div></div><div class="cell empty"></div><div class="cell empty"></div><div class="cell filled"><div class="bug"></div></div><div class="cell empty"></div><div class="cell filled"><div class="bug"></div></div><div class="cell filled"><div class="bug"></div></div><div class="cell empty"></div></div></button>

          </div>
          
        </div>
      </div>
    </section>


    
  </main>
  {{ render '@back-to-top' }}  
  <!-- End Main Content Body -->
  {{ render '@global-footer' }}
</div>