-
Notifications
You must be signed in to change notification settings - Fork 77
/
index.html
73 lines (64 loc) · 2.37 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
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<!DOCTYPE html>
<head>
<meta http-equiv='Content-type' content='text/html; charset=utf-8'>
<title>PopBox</title>
<link rel='stylesheet' href='popbox.css' type='text/css' media='screen' charset='utf-8'>
<script type='text/javascript' charset='utf-8' src='../jquery.js'></script>
<script type='text/javascript' charset='utf-8' src='popbox.js'></script>
<style type='text/css' media='screen'>
body {
text-align:center;
background:#f7f7f7;
font-family:georgia;
font-size:22px;
text-shadow:1px 1px 1px #FFF;
margin:200px;
}
a { color:#999; text-decoration:none; }
label { display: block; }
form { margin: 25px; text-align:left }
form input[type=text] { padding:5px; width:90%; border:solid 1px #CCC;}
form textarea { padding:5px; width:90%; border:solid 1px #CCC; height:100px;}
.box { width:350px; }
footer {
font-size:12px;
}
form a, footer a { color:#40738d; }
</style>
<script type='text/javascript' charset='utf-8'>
$(document).ready(function(){
$('.popbox').popbox();
});
</script>
</head>
<body>
<h1>PopBox</h1>
<div class='popbox'>
<a class='open' href='#'>
<img src='plus.png' style='width:14px;position:relative;'> Click Here!
</a>
<div class='collapse'>
<div class='box'>
<div class='arrow'></div>
<div class='arrow-border'></div>
<form action="http://gristmill.createsend.com/t/j/s/nklki/" method="post" id="subForm">
<p><small>Please complete the form to sign up for the <a href="http://gristmill.io" target="_blank">Gristmill.io</a> mailing list!</small></p>
<div class="input">
<input type="text" name="cm-name" id="name" placeholder="Name" />
</div>
<div class="input">
<input type="text" name="cm-nklki-nklki" id="nklki-nklki" placeholder="Email" />
</div>
<div class="input">
<textarea name="cm-f-tlhll" id="Message" placeholder="Comments"></textarea>
</div>
<input type="submit" value="Get In Touch" /> <a href="#" class="close">Cancel</a>
</form>
</div>
</div>
</div>
<p>jQuery PopBox is a simple, HighRise inspired balloon UI element.</p>
<footer>
Developed by <a href="http://twitter.com/_sbehan">Sean Behan</a> at <a href="http://gristmill.io">Gristmill</a>
</footer>
</body>