Skip to content

Instantly share code, notes, and snippets.

@lehelmatyus

lehelmatyus/siteskinold.html

Created June 5, 2024 23:15
Show Gist options
  • Save lehelmatyus/e46c7f85794cc9dfe8e7739dac9c87ad to your computer and use it in GitHub Desktop.
Save lehelmatyus/e46c7f85794cc9dfe8e7739dac9c87ad to your computer and use it in GitHub Desktop.
Download ZIP
Raw
siteskinold.html
<!DOCTYPE HTML5>
<html lang="en">
<head>
<!-- QST-version=2> -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Raleway|Roboto" rel="stylesheet">
<link href="https://s3.amazonaws.com/staging-tnew-assets/orgs/DENZ/quick-start-template/v2/css/main.css" rel="stylesheet">
</head>
<body>
<a class="tn-qs-skip-to-main btn btn-primary" href="#tn-page-heading">Skip to Main Content</a>
<noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-WP4TGZ2" height="0" width="0"
style="display:none;visibility:hidden"></iframe></noscript>
<script>(function (w, d, s, l, i) {
w[l] = w[l] || []; w[l].push({
'gtm.start':
new Date().getTime(), event: 'gtm.js'
}); var f = d.getElementsByTagName(s)[0],
j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true; j.src =
'//www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f);
})(window, document, 'script', 'dataLayer', 'GTM-WP4TGZ2');</script>
<header>
<nav id="tn-qs-main-nav" class="responsive-nav" aria-label="Main">
<div class="tn-qs-container">
<div id="tn-qs-main-nav__logo">
<a id="tn-qs-main-nav__logo-link" href="https://denverzoo.org/">
<img src="https://s3.amazonaws.com/staging-tnew-assets/orgs/DENZ/quick-start-template/images/header-logo.png" alt="Denver Zoo Logo">
</a>
</div>
<button id="tn-qs-main-nav__mobile-btn" type="button" class="icon" aria-expanded="false">
<span class="sr-only">Navigation</span>
<span></span>
<span></span>
<span></span>
</button>
<div class="tn-qs-main-nav__menu">
<h2 id="tn-qs-main-menu-secondary-heading" class="sr-only">Secondary Menu</h2>
<ul id="tn-qs-main-nav__menu-secondary" aria-labelledby="tn-qs-main-menu-secondary-heading">
<li class="tn-qs-main-nav__menu-item">
<a class="tn-qs-main-nav__menu-item-link" href="https://denverzoo.org/">SALES HOME</a>
</li>
<li class="tn-qs-main-nav__menu-item">
<a class="tn-qs-main-nav__menu-item-link" href="#">RESCHEDULE MY VISIT</a>
</li>
</ul>
<h2 id="tn-qs-main-menu-primary-heading" class="sr-only">Primary Menu</h2>
<ul id="tn-qs-main-nav__menu-primary" aria-labelledby="tn-qs-main-menu-primary-heading">
<li class="tn-qs-main-nav__menu-item">
<a class="tn-qs-main-nav__menu-item-link" href="https://my.denverzoo.org/events?kid=5">GENERAL ADMISSION</a>
</li>
<li class="tn-qs-main-nav__menu-item">
<a class="tn-qs-main-nav__menu-item-link" href="https://my.denverzoo.org/m/membership/family">MEMBERSHIP</a>
</li>
<li class="tn-qs-main-nav__menu-item">
<a class="tn-qs-main-nav__menu-item-link" href="https://denverzoo.org/events/">EVENTS</a>
</li>
<li class="tn-qs-main-nav__menu-item">
<a class="tn-qs-main-nav__menu-item-link" href="https://my.denverzoo.org/events?kid=11">EXPERIENCES</a>
</li>
<li class="tn-qs-main-nav__menu-item">
<a class="tn-qs-main-nav__menu-item-link" href="https://my.denverzoo.org/events?kid=9">ANIMAL ENCOUNTERS</a>
</li>
<li class="tn-qs-main-nav__menu-item">
<a class="tn-qs-main-nav__menu-item-link" href="https://denverzoo.org/safari-camps/">CAMPS</a>
</li>
</ul>
</div>
</div>
</nav>
<div id="tn-qs-banner-image">
</div>
</header>
<div id="TNEW-container" class="tn-qs-container">
<!-- TNEW CONTENT HERE -->
</div>
<footer>
<h2 class="sr-only">Footer</h2>
<div class="tn-qs-container">
<div class="tn-qs-footer-block">
<div class="tn-qs-footer-block__logo">
<a class="tn-qs-footer-block__logo-link" href="https://denverzoo.org/">
<img src="https://s3.amazonaws.com/staging-tnew-assets/orgs/DENZ/quick-start-template/images/footer-logo.png" alt="Denver Zoo logo">
</a>
</div>
</div>
<div class="tn-qs-footer-block">
<div class="tn-qs-footer-block__location">
<h3>Denver Zoo</h3>
<address>
<span>2300 Steele St.</span><span>Denver, CO 80205</span>
</address>
</div>
</div>
<div class="tn-qs-footer-block">
<div class="tn-qs-footer-block__contact">
<h3>CONTACT</h3>
<div>
<span class="anchor-label">Email:</span>
<a href="mailto:guestcare@denverzoo.org">guestcare@denverzoo.org</a>
</div>
</div>
</div>
<div class="tn-qs-footer-block">
<div class="tn-qs-footer-block__links">
<h3 id="tn-qs-footer-optional-links-heading">More Info</h3>
<ul aria-labelledby="tn-qs-footer-optional-links-heading">
<li><a href="https://www.denverzoo.org/terms-conditions/">Terms & Conditions</a></li><li><a href="https://www.denverzoo.org/privacypolicy/">Privacy Policy</a></li>
</ul>
</div>
</div>
<div id="tn-qs-copyright">
&copy;&nbsp;
<script>document.write(new Date().getFullYear())</script>&nbsp;Denver Zoo
</div>
</div>
</footer>
<script>
(function() {
function setupNav() {
var $btn = document.getElementById('tn-qs-main-nav__mobile-btn');
var $nav = document.getElementById('tn-qs-main-nav');
var isExpanded = $btn.getAttribute('aria-expanded') === 'true';
function toggle(expand) {
if (expand) {
$btn.setAttribute('aria-expanded', 'true');
$nav.classList.add('mobile-open');
} else {
$nav.classList.remove('mobile-open');
$btn.setAttribute('aria-expanded', 'false');
}
isExpanded = expand;
}
$btn.addEventListener('click', function () {
toggle(!isExpanded);
});
window.addEventListener('resize', function () {
if (isExpanded) {
if (document.documentElement.clientWidth > 992) {
toggle(false);
}
}
});
}
function setupSkipToMain() {
var $pageHeading = document.getElementById('tn-page-heading');
if ($pageHeading) {
$pageHeading.setAttribute('tabindex', '-1');
} else {
var $container = document.getElementById('TNEW-container');
var $skipLink = document.querySelector('a.tn-qs-skip-to-main');
$container.setAttribute('tabindex', '-1');
$skipLink.setAttribute('href', '#TNEW-container');
}
}
setupNav();
setupSkipToMain();
})();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment