-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
59 lines (50 loc) · 1.93 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>Smart Outline</title>
<style>
body {
text-align: center;
}
#wrapper {
text-align: left;
margin: 20px auto;
width: 600px;
}
label {
}
input, textarea {
display: block;
width: 100%;
border: 1px solid #ccc;
padding: 8px;
margin-bottom: 15px;
}
</style>
</head>
<body>
<div id="wrapper">
<h1>Smart Outline</h1>
<p>Below you can test out the effect of using smart outline on your project. Try to use the keyboard and the mouse to navigate the form and see how the outline is hidden without breaking the accessibility for keyboard users.<p>
<h2>Links Example</h2>
<p>Lorem ipsum dolor sit amet, <a href="#">consectetur adipiscing</a> elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud <a href="#">exercitation ullamco</a> laboris nisi ut aliquip ex ea commodo consequat.</p>
<h2>Form Example</h2>
<label for="firstname">First Name</label>
<input type="text" name="firstname" id="firstname" placeholder="John" />
<label for="lastname">Last Name</label>
<input type="text" name="lastname" id="lastname" placeholder="Doe" />
<label for="email">Email</label>
<input type="email" name="email" id="email" placeholder="[email protected]" />
<label for="message">Message</label>
<textarea name="message" id="message"></textarea>
<button>Send Message</button>
</div>
<script src="main.js" async defer></script>
<script>
window.onload = function() {
smartOutline.init();
}
</script>
</body>
</html>