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">
<!-- search-->
<section class="global-searchbar" id="global-searchbar">
<div class="container-fluid blue-bg">
<!-- Do not update any ids without consulting the developer, js may depend on it -->
<form action="#search" class="search-form" id="cse-search-box">
<div class="row d-flex align-items-center buttons-bg-wrapper">
<div class="col-9 col-sm-10">
<input name="cx" type="hidden" value="000238266656426684962:mzli4pte7ko" />
<input name="cof" type="hidden" value="FORID:11" />
<label for="searchField">
<span class="visually-hidden-focusable text-white">Search Bar</span>
</label>
<input tabindex="-1" class="form-control global-searchfield" id="searchField" name="q" onblur="if (this.value == '') {this.value = 'Search UT San Antonio';}" onfocus="if (this.value == 'Search UT San Antonio') {this.value = '';}" size="15" type="text" value="Search UT San Antonio" />
</div>
<div class="col-3 col-sm-2">
<button class="btn btn-secondary btn-search" type="submit" id="search-button" tabindex="-1">
<span class="visually-hidden-focusable">Search</span>
</button>
</div>
</div>
</form>
</div>
</section>
<!-- .search -->
<!-- top-bar -->
<section class="top-bar primary">
<div class="container-fluid g-0">
<div class="row align-items-center">
<div class="col-4">
<a href="https://www.utsa.edu" title="UT San Antonio" class="tb-logo">
<!-- old classes: logo-full d-none d-sm-block -->
<img src="../../college-dls/utsa/images/ut-san-antonio-horizontal.svg" width="333px" height="20px" class="" alt="The University of Texas at San Antonio" />
</a>
</div>
<div class="col-8">
<nav class="quick-links-container">
<ul class="quick-links">
<li><a href="https://utsa.edu/today/" id="a-header-topbar-utsa-today" aria-label="UT San Antonio News">News</a></li>
<li><a href="https://my.utsa.edu/" id="a-header-topbar-myutsa">myUTSA</a></li>
<li class="search-toggle">
<a href="#" class="global-search" id="search" role="button"><span class="fas fa-search"></span> <span class="visually-hidden" id="search-title">Search</span></a>
</li>
</ul>
</nav>
</div>
</div>
</div>
</section>
<!-- 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"> </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 secondary-footer">
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-4 pb-4">
<div class="pb-3 footer-logo">
<a href="https://www.utsa.edu/">
<img src="../../college-dls/utsa/images/ut-san-antonio-horizontal-ow.svg" height="32px" width="auto" alt="UT San Antonio" />
</a>
</div>
<div class="footer-text">
<p>One UTSA Circle San Antonio, TX 78249</p>
<p>Information: <a href="tel:+12104584011">210-458-4011</a></p>
</div>
</div>
<div class="col-sm-12 col-lg-8">
<div class="secondary-footer-social">
<a class="facebook" href="https://facebook.com/utsa" aria-label="UT San Antonio on Facebook"><i class="fab fa-facebook-f" aria-hidden="true"></i></a>
<a class="twitter" href="https://x.com/utsa" aria-label="UT San Antonio on Twitter"><i class="fa-brands fa-x-twitter" aria-hidden="true"></i></a>
<a class="youtube" href="https://youtube.com/user/utsa" aria-label="UT San Antonio on 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="UT San Antonio on Linkedin"><i class="fab fa-linkedin" aria-hidden="true"></i></a>
<a class="instagram" href="https://instagram.com/utsa/" aria-label="UT San Antonio on Instagram"><i class="fab fa-instagram" aria-hidden="true"></i></a>
</div>
<nav class="secondary-footer-links">
<ul class="list-unstyled">
<li>
<a href="https://utsa.edu/about/careers#_ga=2.180574631.1891322053.1753909729-1983867998.1741794788">Careers</a>
</li>
<li>
<a href="https://map.utsa.edu">Campus Map</a>
</li>
<li>
<a href="https://utsa.edu/about/directories">Directories</a>
</li>
<li>
<a href="https://utsa.edu/about/university-organization">University Organization</a>
</li>
</ul>
</nav>
</div>
</div>
<hr>
<div class="copyright-subfooter">
<div class="row">
<div class="col-sm-12">
<nav class="subfooter-links">
<ul class="list-unstyled">
<li class="nav-item">
<div class="utsa-copyright">© 2025 The University of Texas at San Antonio
</div>
</li>
<li class="nav-item">
<a href="https://www.utsa.edu/ba-administration-operations/services/risk-emergency-management/business-continuity-emergency-management/emergency-response-guide.html" id="s-footer-response-guide">Emergency Response Guide</a>
</li>
<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>
/* 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 */
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)
<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--rebrand' }}
{{ 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--rebrand-secondary' }}
</div>