-
Notifications
You must be signed in to change notification settings - Fork 1
/
book.html
128 lines (121 loc) · 6.09 KB
/
book.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
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>SpareSpace</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="shortcut icon" href="ico/favicon.png">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap-responsive.css" rel="stylesheet">
<link href="css/book.css" rel="stylesheet">
<link href="css/jquery-ui-humanity.min.css" rel="stylesheet">
<!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/jquery-ui-1.10.2.min.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/knockout-2.2.1.js"></script>
<script src="js/book.js"></script>
<style type="text/css">
.modal {
width: 600px;
margin-left: -300px;
}
.right { float: right; }
.left { float: left; }
.clear { clear: both; }
.padder { padding: 20px; }
.ib { display: inline-block; }
</style>
</head>
<body>
<div class="container content">
<div class="brand">
<div class="logo">
<img src="img/logo.png" />
</div>
</div>
<div class="map-area">
<div id="map-canvas" style="height: 250px;"></div>
</div>
<div class="row-fluid">
<div class="span9">
<img class="" src="img/ui1.png" alt="space" />
<div class="text pad gray">
<h4 class="orange">Dry Basement for Rent</h4>
<p class="address">419 Edmond St Pittsburgh PA 15224 - Bloomfield</p>
<p>Duis ullamcorper lectus elit. Vestibulum feugiat dolor felis. Ut lectus nisi, pulvinar eu eleifend eu, commodo ac diam. Fusce sit amet enim quam. Vestibulum fermentum venenatis turpis, id pellentesque mauris tempor sit amet. Phasellus quis felis id lectus sagittis mattis vitae venenatis felis. Fusce luctus laoreet facilisis. Praesent sed dolor non dui mollis adipiscing sit amet id metus. Donec hendrerit justo eu purus elementum porttitor faucibus leo interdum. Quisque nec dui interdum quam adipiscing euismod vulputate ut lacus. Nunc eros justo, bibendum id faucibus nec, dapibus sit amet neque. Nunc auctor placerat tortor in pharetra. Aliquam fringilla tristique lorem, et auctor diam cursus in.</p>
<p>Donec ac turpis quis nulla bibendum laoreet. Nunc dictum odio sed arcu cursus fermentum. Nam sodales turpis ac justo ornare in mollis urna viverra. Cras eleifend tempus lectus, non auctor ante hendrerit ac. Proin mauris urna, posuere sit amet hendrerit vel, scelerisque sed libero. Fusce ac pharetra dolor. Aliquam ut leo non odio elementum porttitor. Donec ac nunc nulla.</p>
</div>
</div>
<div class="span3">
<div class="spacer"></div>
<div class="rounded gray pad padt dark">
<span class="big">$20</span>
<span>per month</span>
<div class="mtop">
<input class="input-block-level date" type="text" placeholder="Check In" value="04/15/2013" />
<input class="input-block-level date" type="text" placeholder="Check Out" value="04/26/2013" />
</div>
<a href="#" class="btn input-block-level bgg" data-toggle="modal" data-target="#modaler">BOOK SPACE NOW</a>
</div>
<div class="spacer"></div>
<div class="rounded gray pad padt dark">
<div class="center">
<img class="bordered" src="img/ui2.png" alt="alex" />
</div>
<div class="mtop">
<p class="sbig">Alex Hendershott</p>
<p>Verified: Yes</p>
<p>Review: <span class="green">26 Positive</span> <span class="red">0 Negative</span></p>
</div>
<a href="#" class="btn input-block-level bgo">Contact Host</a>
</div>
</div>
</div>
<footer>
<!-- TODO: implement footer links -->
<p>© 2013 SpareSpace · <a href="#">Privacy</a> · <a href="#">Terms</a></p>
</footer>
<div class="modal hide fade" id="modaler">
<div class="brand">
<div class="logo">
<img src="img/logo.png" />
</div>
</div>
<div class="pad">
<div class="center">
<h1 class="orange">SpareSpace Terms of Service and Insurance Policy</h1>
<div style="height: 10px;"></div>
<h2>We Want to Protect You!</h2>
<h2>Read this and check a box below!</h2>
</div>
<div style="height: 10px;"></div>
<p>Postea euismod consequuntur no qui, error nihil prodesset at his, esse accusam electram vel eu. Mel vivendo platonem ei, omnesque invenire assueverit sed id, duo id stet iusto vitae. Usu quem congue expetendis eu, mel at dolorem explicari argumentum. Habeo errem melius an eum. Tantas copiosae no pri. Sit amet dolore ut. Per ea debitis disputando.</p>
<p>Usu ut atqui quidam, iudico partem mei an. Est petentium elaboraret an, qui quas prodesset vituperata ad. Has cu perpetua liberavisse, quo et sapientem disputationi consectetuer. No nec justo idque iisque, solet laboramus sit cu, his labores conceptam ex. Eos id dicta choro.</p>
</div>
<div class="gray">
<div class="padder">
<div class="left">
<label class="checkbox">
<input type="checkbox" id="ch1" />
Yes please! I want the insurance.
</label>
<label class="checkbox">
<input type="checkbox" id="ch1" />
No thanks, I have my own insurance.
</label>
</div>
<div class="right">
<div class="pad">
<a href="#">Cancel</a>
<button type="button" class="btn bgg">BOOK SPACE NOW</button>
</div>
</div>
<div class="clear"></div>
</div>
</div>
</div>
</div>
</body>
</html>