454 lines
17 KiB
HTML
454 lines
17 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||
|
|
<link rel="canonical" href="/patterns/landmarks/example2/">
|
||
|
|
<link href="https://fonts.googleapis.com/css?family=Miriam+Libre:700&text=ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz%26" rel="stylesheet">
|
||
|
|
<link href="https://fonts.googleapis.com/css?family=PT+Sans:400,400i,700" rel="stylesheet">
|
||
|
|
<link rel="stylesheet" href="/css/prism.css" />
|
||
|
|
<link rel="stylesheet" type="text/css" href="/css/styles.css">
|
||
|
|
<title>
|
||
|
|
|
||
|
|
Footer | Inclusive Pattern Docs
|
||
|
|
|
||
|
|
</title>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<svg style="display: none">
|
||
|
|
<symbol id="bookmark">
|
||
|
|
<g transform="translate(2266 3206.2)">
|
||
|
|
<path style="stroke:currentColor;stroke-width:3.2637;fill:none" d="m-2262.2-3203.4-.2331 42.195 16.319-16.318 16.318 16.318.2331-42.428z"/>
|
||
|
|
</g>
|
||
|
|
</symbol>
|
||
|
|
|
||
|
|
<symbol id="w3c">
|
||
|
|
<text font-size="83" style="font-size:83px;font-family:Trebuchet;letter-spacing:-12;fill-opacity:0" letter-spacing="-12" y="67.609352" x="-26.782778">W3C</text>
|
||
|
|
<text font-size="83" style="font-size:83px;font-weight:bold;font-family:Trebuchet;fill-opacity:0" y="67.609352" x="153.21722" font-weight="bold">SVG</text>
|
||
|
|
<path style="fill:#111111;image-rendering:optimizeQuality;shape-rendering:geometricPrecision" d="m33.695.377 12.062 41.016 12.067-41.016h8.731l-19.968 67.386h-.831l-12.48-41.759-12.479 41.759h-.832l-19.965-67.386h8.736l12.061 41.016 8.154-27.618-3.993-13.397h8.737z"/>
|
||
|
|
<path style="fill:#111111;image-rendering:optimizeQuality;shape-rendering:geometricPrecision" d="m91.355 46.132c0 6.104-1.624 11.234-4.862 15.394-3.248 4.158-7.45 6.237-12.607 6.237-3.882 0-7.263-1.238-10.148-3.702-2.885-2.47-5.02-5.812-6.406-10.022l6.82-2.829c1.001 2.552 2.317 4.562 3.953 6.028 1.636 1.469 3.56 2.207 5.781 2.207 2.329 0 4.3-1.306 5.909-3.911 1.609-2.606 2.411-5.738 2.411-9.401 0-4.049-.861-7.179-2.582-9.399-1.995-2.604-5.129-3.912-9.397-3.912h-3.327v-3.991l11.646-20.133h-14.062l-3.911 6.655h-2.493v-14.976h32.441v4.075l-12.31 21.217c4.324 1.385 7.596 3.911 9.815 7.571 2.22 3.659 3.329 7.953 3.329 12.892z"/>
|
||
|
|
<path style="fill:#111111;image-rendering:optimizeQuality;shape-rendering:geometricPrecision" d="m125.21 0 1.414 8.6-5.008 9.583s-1.924-4.064-5.117-6.314c-2.693-1.899-4.447-2.309-7.186-1.746-3.527.73-7.516 4.938-9.258 10.13-2.084 6.21-2.104 9.218-2.178 11.978-.115 4.428.58 7.043.58 7.043s-3.04-5.626-3.011-13.866c.018-5.882.947-11.218 3.666-16.479 2.404-4.627 5.954-7.404 9.114-7.728 3.264-.343 5.848 1.229 7.841 2.938 2.089 1.788 4.213 5.698 4.213 5.698l4.94-9.837z"/>
|
||
|
|
<path style="fill:#111111;image-rendering:optimizeQuality;shape-rendering:geometricPrecision" d="m125.82 48.674s-2.208 3.957-3.589 5.48c-1.379 1.524-3.849 4.209-6.896 5.555-3.049 1.343-4.646 1.598-7.661 1.306-3.01-.29-5.807-2.032-6.786-2.764-.979-.722-3.486-2.864-4.897-4.854-1.42-2-3.634-5.995-3.634-5.995s1.233 4.001 2.007 5.699c.442.977 1.81 3.965 3.749 6.572 1.805 2.425 5.315 6.604 10.652 7.545 5.336.945 9.002-1.449 9.907-2.031.907-.578 2.819-2.178 4.032-3.475 1.264-1.351 2.459-3.079 3.116-4.108.487-.758 1.276-2.286 1.276-2.286l-1.276-6.644z"/>
|
||
|
|
</symbol>
|
||
|
|
|
||
|
|
<symbol id="tag">
|
||
|
|
<g transform="translate(0 -875.2)">
|
||
|
|
<path style="fill-rule:evenodd;stroke-width:0;fill:#111111" d="m159.9 894.3-68.79 8.5872-75.42 77.336 61.931 60.397 75.429-76.565 6.8495-69.755zm-31.412 31.835a10.813 10.813 0 0 1 1.8443 2.247 10.813 10.813 0 0 1 -3.5174 14.872l-.0445.0275a10.813 10.813 0 0 1 -14.86 -3.5714 10.813 10.813 0 0 1 3.5563 -14.863 10.813 10.813 0 0 1 13.022 1.2884z"/>
|
||
|
|
</g>
|
||
|
|
</symbol>
|
||
|
|
</svg>
|
||
|
|
|
||
|
|
<div class="wrapper">
|
||
|
|
<header class="intro-and-nav" role="banner">
|
||
|
|
<div>
|
||
|
|
<div class="intro">
|
||
|
|
<a class="logo" href="/" aria-label="Inclusive Pattern Docs pattern library home page">
|
||
|
|
<img src="/images/logo.png" alt="">
|
||
|
|
</a>
|
||
|
|
<p class="library-desc">Documentation for the <strong>Inclusive Pattern Docs</strong> pattern library builder. This documentation is constructed using the builder itself.</p>
|
||
|
|
</div>
|
||
|
|
<nav class="patterns" role="navigation">
|
||
|
|
|
||
|
|
|
||
|
|
<ul>
|
||
|
|
|
||
|
|
<li class="pattern">
|
||
|
|
<a href="/patterns/example1/" >
|
||
|
|
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||
|
|
<span>Collapsible region</span>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
</li>
|
||
|
|
|
||
|
|
<li class="pattern">
|
||
|
|
<a href="/patterns/example2/" >
|
||
|
|
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||
|
|
<span>Tab interface</span>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
</li>
|
||
|
|
|
||
|
|
|
||
|
|
<li>
|
||
|
|
<h3>Landmarks</h3>
|
||
|
|
<ul>
|
||
|
|
|
||
|
|
<li class="pattern">
|
||
|
|
<a href="/patterns/landmarks/example2/" aria-current="page">
|
||
|
|
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||
|
|
<span>Footer</span>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
|
||
|
|
<li class="pattern">
|
||
|
|
<a href="/patterns/landmarks/example-one/" >
|
||
|
|
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||
|
|
<span>Page region navigation landmark</span>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
|
||
|
|
<li>
|
||
|
|
<h3>Widgets</h3>
|
||
|
|
<ul>
|
||
|
|
|
||
|
|
<li class="pattern">
|
||
|
|
<a href="/patterns/widgets/example1/" >
|
||
|
|
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||
|
|
<span>Card</span>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
|
||
|
|
<li class="pattern">
|
||
|
|
<a href="/patterns/widgets/example2/" >
|
||
|
|
<svg class="bookmark" aria-hidden="true" height="50" width="40" viewBox="0 0 40 50"><use xlink:href="#bookmark"></use></svg>
|
||
|
|
<span>Menu button and menu</span>
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
|
||
|
|
</ul>
|
||
|
|
|
||
|
|
</nav>
|
||
|
|
</div>
|
||
|
|
</header>
|
||
|
|
<div class="main-and-footer">
|
||
|
|
<div>
|
||
|
|
|
||
|
|
<main id="main">
|
||
|
|
<h1>Footer</h1>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<p>Nulla vel magna sit amet dui lobortis commodo vitae vel nulla sit amet ante hendrerit tempus. Maecenas sit amet tellus nec mi gravida posuere non pretium magna. <strong>Donec a congue leo. </strong></p>
|
||
|
|
|
||
|
|
|
||
|
|
<iframe height='300' scrolling='no' title="code demonstration with codePen" src='//codepen.io/heydon/embed/VpVNKW/?height=265&theme-id=dark&default-tab=result,result&embed-version=2' frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>
|
||
|
|
<div>
|
||
|
|
<a href="//codepen.io/heydon/pen/VpVNKW">See the demo on codePen</a>
|
||
|
|
</div>
|
||
|
|
</iframe>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit <em>amet tellus</em> nec mi gravida posuere non <a href='#'>pretium magna</a>. Nulla vel magna sit amet dui lobortis commodo vitae vel nulla sit amet ante hendrerit tempus. Donec tempus tempus tellus, ac <abbr title='Hypertext Markup Language'>HTML</abbr> lacinia turpis mattis ac. Suspendisse potenti. Nunc iaculis risus vel orci ornare dignissim sed vitae nulla. Donec a congue leo? Fusce ac sodales <abbr title='Cascading Style Sheets'>CSS</abbr> magna. </p>
|
||
|
|
|
||
|
|
<p><a href="/patterns/widgets/example1/">Link to widgets example 1</a></p>
|
||
|
|
|
||
|
|
<h2 id="figure-example">Figure example</h2>
|
||
|
|
|
||
|
|
|
||
|
|
<figure role="group" aria-describedby="WW91IGFyZSA8ZW0+d3Jv">
|
||
|
|
<p>I LOVE FASCISM!?</p>
|
||
|
|
|
||
|
|
<figcaption id="WW91IGFyZSA8ZW0+d3Jv">
|
||
|
|
You are <em>wrong</em>.
|
||
|
|
</figcaption>
|
||
|
|
</figure>
|
||
|
|
|
||
|
|
|
||
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit <em>amet tellus</em> nec mi gravida posuere non <a href='#'>pretium magna</a>. Nulla vel magna sit amet dui lobortis commodo vitae vel nulla sit amet ante hendrerit tempus. Donec tempus tempus tellus, ac <abbr title='Hypertext Markup Language'>HTML</abbr> lacinia turpis mattis ac. Suspendisse potenti. Nunc iaculis risus vel orci ornare dignissim sed vitae nulla. Donec a congue leo? Fusce ac sodales <abbr title='Cascading Style Sheets'>CSS</abbr> magna. </p>
|
||
|
|
|
||
|
|
|
||
|
|
<figure role="group" aria-describedby="VGhpcyBpcyBnb29kIG5l">
|
||
|
|
<p>I HATE FASCISM!?</p>
|
||
|
|
|
||
|
|
<figcaption id="VGhpcyBpcyBnb29kIG5l">
|
||
|
|
This is good news.
|
||
|
|
</figcaption>
|
||
|
|
</figure>
|
||
|
|
|
||
|
|
|
||
|
|
<h2 id="code-block-example">Code block example</h2>
|
||
|
|
|
||
|
|
<pre class="language-css line-numbers"><code class="language-css" data-codeblock-shortcode>
|
||
|
|
.expandable + .expandable {
|
||
|
|
margin-top: 1.5rem;
|
||
|
|
padding-top: 1.5rem;
|
||
|
|
border-top: 2px solid;
|
||
|
|
}
|
||
|
|
</code></pre>
|
||
|
|
|
||
|
|
|
||
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit <em>amet tellus</em> nec mi gravida posuere non <a href='#'>pretium magna</a>. Nulla vel magna sit amet dui lobortis commodo vitae vel nulla sit amet ante hendrerit tempus. Donec tempus tempus tellus, ac <abbr title='Hypertext Markup Language'>HTML</abbr> lacinia turpis mattis ac. Suspendisse potenti. Nunc iaculis risus vel orci ornare dignissim sed vitae nulla. Donec a congue leo? Fusce ac sodales <abbr title='Cascading Style Sheets'>CSS</abbr> magna. </p>
|
||
|
|
|
||
|
|
<h2 id="external-refs-examples">External refs examples</h2>
|
||
|
|
|
||
|
|
<h3 id="wcag">WCAG</h3>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<ul class="wcag with-desc">
|
||
|
|
|
||
|
|
|
||
|
|
<li>
|
||
|
|
<strong><a href="https://www.w3.org/TR/WCAG20/#text-equiv-all">
|
||
|
|
<svg height="67.763" width="127.1" viewBox="0 0 127.09899 67.763" aria-hidden="true"><use xlink:href="#w3c"></use></svg>
|
||
|
|
1.1.1 Non-text Content</a> (level A)
|
||
|
|
:
|
||
|
|
</strong>
|
||
|
|
|
||
|
|
All non-text content that is presented to the user has a text alternative that serves the equivalent purpose, except for the situations listed below. (
|
||
|
|
|
||
|
|
<ul>
|
||
|
|
|
||
|
|
<li><strong>Controls, Input:</strong>
|
||
|
|
If non-text content is a control or accepts user input, then it has a name that describes its purpose. (Refer to Guideline 4.1 for additional requirements for controls and content that accepts user input.)
|
||
|
|
</li>
|
||
|
|
|
||
|
|
<li><strong>Time-Based Media:</strong>
|
||
|
|
If non-text content is time-based media, then text alternatives at least provide descriptive identification of the non-text content. (Refer to Guideline 1.2 for additional requirements for media.)
|
||
|
|
</li>
|
||
|
|
|
||
|
|
<li><strong>Test:</strong>
|
||
|
|
If non-text content is a test or exercise that would be invalid if presented in text, then text alternatives at least provide descriptive identification of the non-text content.
|
||
|
|
</li>
|
||
|
|
|
||
|
|
<li><strong>Sensory:</strong>
|
||
|
|
If non-text content is primarily intended to create a specific sensory experience, then text alternatives at least provide descriptive identification of the non-text content.
|
||
|
|
</li>
|
||
|
|
|
||
|
|
<li><strong>CAPTCHA:</strong>
|
||
|
|
If the purpose of non-text content is to confirm that content is being accessed by a person rather than a computer, then text alternatives that identify and describe the purpose of the non-text content are provided, and alternative forms of CAPTCHA using output modes for different types of sensory perception are provided to accommodate different disabilities.
|
||
|
|
</li>
|
||
|
|
|
||
|
|
<li><strong>Decoration, Formatting, Invisible:</strong>
|
||
|
|
If non-text content is pure decoration, is used only for visual formatting, or is not presented to users, then it is implemented in a way that it can be ignored by assistive technology.
|
||
|
|
</li>
|
||
|
|
|
||
|
|
</ul>
|
||
|
|
|
||
|
|
|
||
|
|
</li>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<li>
|
||
|
|
<strong><a href="https://www.w3.org/TR/WCAG20/#content-structure-separation-programmatic">
|
||
|
|
<svg height="67.763" width="127.1" viewBox="0 0 127.09899 67.763" aria-hidden="true"><use xlink:href="#w3c"></use></svg>
|
||
|
|
1.3.1 Info and Relationships</a> (level A)
|
||
|
|
:
|
||
|
|
</strong>
|
||
|
|
|
||
|
|
Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text.
|
||
|
|
|
||
|
|
|
||
|
|
</li>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<li>
|
||
|
|
<strong><a href="https://www.w3.org/TR/WCAG20/#ensure-compat-rsv">
|
||
|
|
<svg height="67.763" width="127.1" viewBox="0 0 127.09899 67.763" aria-hidden="true"><use xlink:href="#w3c"></use></svg>
|
||
|
|
4.1.2 Name, Role, Value</a> (level A)
|
||
|
|
:
|
||
|
|
</strong>
|
||
|
|
|
||
|
|
For all user interface components (including but not limited to: form elements, links and components generated by scripts), the name and role can be programmatically determined; states, properties, and values that can be set by the user can be programmatically set; and notification of changes to these items is available to user agents, including assistive technologies.
|
||
|
|
|
||
|
|
|
||
|
|
</li>
|
||
|
|
|
||
|
|
|
||
|
|
</ul>
|
||
|
|
|
||
|
|
|
||
|
|
<h3 id="inclusive-design-principles">Inclusive Design Principles</h3>
|
||
|
|
|
||
|
|
<p>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<ul class="principles with-desc">
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<li>
|
||
|
|
<strong><a href="https://inclusivedesignprinciples.org#be-consistent">Be consistent</a>:</strong> <em>Use familiar conventions and apply them consistently.</em>
|
||
|
|
|
||
|
|
<p>Familiar interfaces borrow from well-established patterns. These should be used consistently within the interface to reinforce their meaning and purpose. This should be applied to functionality, behavior, editorial, and presentation. You should say the same things in the same way and users should be able to do the same things in the same way.</p>
|
||
|
|
|
||
|
|
</li>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
<li>
|
||
|
|
<strong><a href="https://inclusivedesignprinciples.org#add-value">Add value</a>:</strong> <em>Consider the value of features and how they improve the experience for different users.</em>
|
||
|
|
|
||
|
|
<p>Features should add value to the user experience by providing efficient and diverse ways to find and interact with content. Consider device features such as voice, geolocation, camera and vibration API's, and how integration with connected devices or a second screen could provide choice.</p>
|
||
|
|
|
||
|
|
</li>
|
||
|
|
|
||
|
|
|
||
|
|
</ul>
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<div class="expandable-section">
|
||
|
|
|
||
|
|
<h2>
|
||
|
|
|
||
|
|
<button aria-expanded="false" data-expands="expandable-PHA+PHA+TG9yZW0gaXBz">
|
||
|
|
<span class="expandable-label">Another expandable</span>
|
||
|
|
<svg aria-hidden="true" focusable="false" height="20mm" width="20mm" viewBox="0 0 70.866142 70.866141">
|
||
|
|
<g transform="translate(0 -981.5)">
|
||
|
|
<rect style="stroke-width:0;fill:currentColor" ry="5" height="60" width="9.8985" y="987.36" x="30.051" class="up-strut" />
|
||
|
|
<rect style="stroke-width:0;fill:currentColor" ry="5" height="10" width="60" y="1012.4" x="5"/>
|
||
|
|
</g>
|
||
|
|
</svg>
|
||
|
|
</button>
|
||
|
|
|
||
|
|
</h2>
|
||
|
|
|
||
|
|
<div id="expandable-PHA+PHA+TG9yZW0gaXBz" hidden>
|
||
|
|
<p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit <em>amet tellus</em> nec mi gravida posuere non <a href='#'>pretium magna</a>. Nulla vel magna sit amet dui lobortis commodo vitae vel nulla sit amet ante hendrerit tempus. Donec tempus tempus tellus, ac <abbr title='Hypertext Markup Language'>HTML</abbr> lacinia turpis mattis ac. Suspendisse potenti. Nunc iaculis risus vel orci ornare dignissim sed vitae nulla.</p></p>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
</main>
|
||
|
|
|
||
|
|
<footer role="contentinfo">
|
||
|
|
By Heydon Pickering
|
||
|
|
</footer>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script src="/js/prism.js"></script>
|
||
|
|
|
||
|
|
<script src="/js/dom-scripts.js"></script>
|
||
|
|
</body>
|
||
|
|
</html>
|