-
Notifications
You must be signed in to change notification settings - Fork 28
/
Copy pathqa-test.html
91 lines (91 loc) · 4.22 KB
/
qa-test.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
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
<!DOCTYPE html>
<html>
<head>
<title>Wonderful Kitty Co. | Offering the most wonderful experiences about kitty cats on the web | video audio twitter texting and more | Contact Us</title>
<link rel="stylesheet" href="css/normalization.css" />
<link rel="stylesheet" href="css/base.css" />
<link rel="stylesheet" type="text/css" href="css/qa-test.css">
</head>
<body>
<div class="container">
<div class="page-wrapper" id="main" role="main">
<p class="title h1">Contact Us</p>
<div class="p">This is a fake form. But do submit it. It will only return a validation message.</div>
<div class="p">
We're glad you are interested in Wonderful Kitty Co. We are here to help you enjoy this fuzzy little world.
<br />
<br />
Fill out the form below to let us kow what we can do for you.
</div>
<h3>Happy Kitty Pictures</h3>
<img src="http://dreamatico.com/data_images/kitten/kitten-1.jpg" width="200" />
<img src="http://theheightsanimalhospital.com/clients/15389/images/playful-kitten-6683.jpg" width="200" alt="" />
<p>Visit Google by clicking <a href="http://www.google.com" class="remove-outline">here</a>.</p>
<p><a href="#" class="launch-modal btn btn-primary">Open more pics</a></p>
<form>
<label id="errorMsg"></label>
<p class="h3">What's your name?</p>
<div class="p">
<span style="display: inline-block; width: 7em; margin-right: 2em;">First Name</span><input id="firstName" type="text" />
</div>
<div class="p">
<label for="lastName">*Last Name</label><input id="lastName" type="text" class="remove-outline" />
</div>
<p class="h3">What month was your kitty born?</p>
<div class="p">
<input type="text" id="birthMonth" placeholder="Birth Month" data-placeholder="Birth Month" />
<p>Type out the month like "May".</p>
</div>
<div class="p screen-reader-text">
<input type="text" id="birthDate" />
<p>Two digit number like "30".</p>
</div>
<div class="fieldset">
<h3>How many kitties are too many kitties?</h3>
<div class="p">
<input type="radio" name="howMany" id="one" />
<label>No kitties</label>
</div>
<div class="p">
<input type="radio" name="howMany" id="two" />
<label>More than one</label>
</div>
<div class="p">
<input type="radio" name="howMany" id="three" />
<label>More than two</label>
</div>
<div class="p">
<input type="radio" name="howMany" id="four" />
<label>You can never have enough kitties</label>
</div>
<p class="h3">Prove you are not a kitty</p>
<div style="position: relative;" class="p">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 29 29" role="presentation" focusable="false" class="svg-checkbox" id="human">
<rect class="stroke" x="3" y="3" fill="#FFFFFF" stroke="#000000" stroke-width="2" stroke-miterlimit="10" width="23" height="23"></rect>
<polygon class="center" fill="#000000" points="13,13 4,5 3,5 3,6 12,23 14,23 29,1 29,0 28,0"></polygon>
</svg>
<label for="human">No, I am not a kitty.</label>
<input type="checkbox" id="human" name="human" style="display: none;" />
</div>
</div>
<div class="btn btn-primary" id="submit">Submit</div>
</form>
</div>
<div class="modal">
<a class="btn svg close-dialog" href="#">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 70 70" focusable="false" role="presentation" class="svg-close">
<circle cx="35" cy="35" r="35"/>
<path fill="#FFFFFF" d="M43.7,54.9L39,47.7c-1.9-2.8-3.1-4.8-4.5-7.2h-0.2c-1.1,2.3-2.3,4.4-3.9,7.2l-4.1,7.2H13l14.7-20.2 L13.5,15.1h13.2l4.5,7.3c1.6,2.5,2.6,4.4,3.9,6.7h0.2c1.2-2.5,2.2-4.4,3.4-6.7l4.4-7.3h13.2L41.8,34.5L57,54.9H43.7z"/>
</svg>
</a>
<h2>One more cute kitty picture</h2>
<img src="https://my.vetmatrixbase.com/clients/12679/images/cats-animals-grass-kittens--800x960.jpg" width="300" alt="Picture of a cute little fuzzy baby" />
</div>
<div class="block-screen"></div>
</div>
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="js/namespacing.js"></script>
<script type="text/javascript" src="js/accessibility-helpers.js"></script>
<script type="text/javascript" src="js/qa-test.js"></script>
</body>
</html>