-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
245 lines (225 loc) · 9.53 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
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
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
<!doctype html>
<html>
<head>
<title>Eleanor Grace Family Vineyards</title>
<link href="stylesheets/core.css" rel="stylesheet" type="text/css">
<link href="stylesheets/fonts.css" rel="stylesheet" type="text/css">
<link href="stylesheets/hrs.css" rel="stylesheet" type="text/css">
<link href="stylesheets/timeline.css" rel="stylesheet" type="text/css">
<style>
body { text-align: center; font-family: 'BodonitownRegular', 'Junction', 'procionoregular', "Helvetica" }
</style>
</head>
<body>
<div id="content">
<section id="navigation">
<div class="navbar">
<div class="navitem bookend">
<img src="images/logo.png">
</div>
<div class="navitem">
<h4><a href="#about" class="scroll">About</a></h4>
</div>
<div class="navitem">
<h4><a href="#vintages" class="scroll">Vintages</a></h4>
</div>
<div class="navitem brand">
<h1>Eleanor Grace Vineyards</h1>
</div>
<div class="navitem">
<h4><a href="#history" class="scroll">History</a></h4>
</div>
<div class="navitem">
<h4><a href="#friends" class="scroll">Friends</a></h4>
</div>
<div class="navitem bookend">
<img src="images/logo.png">
</div>
</div>
<div id="portrait" >
<hr class="horizon">
<img src="images/closeup.jpg"/>
<img src="images/vineyard.jpg"/>
<img src="images/upper.jpg"/>
<hr class="horizon">
</div>
</section>
<section id="about">
<h2 class="header">About the Vineyard</h2>
<div class="description">
<div class="blurb">
<p style="width: 80%; max-width: 750px; margin: 20px auto;">Eleanor Grace Vineyards was started in 2002 in the Bay Area town of Woodside, California. It sits on the high sloping hills surrounding the Bear Gulch Resevoir. It is separated into 4 blocks, all planted with Pinot Noir.</p>
</div>
<div class="photo" id="map-canvas"></div>
<p>418 Eleanor Drive, Woodside, California
</div>
<hr class="horizon" style="width: 40%; margin: 30px auto;">
<h2>About the Vintner</h2>
<div class="description">
<div class="blurb">
<p style="width: 80%; max-width: 750px; margin: 20px auto;">
John Kirst, Pennsylvania native, moved to sunny California in the 1970's to attend Stanford University and has stayed ever since.
With the assistance of his patient and induldging wife and two kids, he has grown, harvested and bottled Eleanor Grace for the last 10 years.
What may have started as a poorly advised choice in a new hobby has grown into a passion shared with friends and family.
</p>
</div>
<div class="photo" style="width: 120%; margin-left: -10%;">
<img src='images/momdad2.png'>
<img src='images/jen2.png'>
<img src='images/jc3.png'>
<img src='images/animals2.png'>
</div>
<div class="social">
<p>You can find us online at:</p>
<p><a href="https://www.facebook.com/pages/Eleanor-Grace-Vineyards/142724495474" target="_blank">Eleanor Grace Facebook Page</a></p>
<p><a href="https://twitter.com/johnrkirst" target="_blank">John Kirst on Twitter</a></p>
</div>
</div>
</section>
<section id="vintages" class="coming_soon">
<div class="alert">
<h3>Coming Soon...</h3>
</div>
<div class="header">
<h2>Vintages</h2>
<h4>2003 - 2012</h4>
</div>
<div class="list">
<div class="item">
<div class="photo">
<img src="images/vintage_2002.jpg">
</div>
<div class="blurb">
<h3>2002 Pinot Noir</h4>
<h5>12.8% ABV</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec lacus urna, sagittis in elementum in, auctor eget tortor. Ut vel elit vitae dolor fringilla pretium ac non risus. Donec elementum quam quis aliquam tempus. Donec sollicitudin mi at nisi elementum, vitae faucibus arcu tincidunt. </p>
</div>
</div>
<div class="item">
<div class="photo">
<img src="images/vintage_2002.jpg">
</div>
<div class="blurb">
<h3>2003 Pinot Noir</h4>
<h5>12.8% ABV</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec lacus urna, sagittis in elementum in, auctor eget tortor. Ut vel elit vitae dolor fringilla pretium ac non risus. Donec elementum quam quis aliquam tempus. Donec sollicitudin mi at nisi elementum, vitae faucibus arcu tincidunt. </p>
</div>
</div>
<div class="item">
<div class="photo">
<img src="images/vintage_2002.jpg">
</div>
<div class="blurb">
<h3>2004 Pinot Noir</h4>
<h5>12.8% ABV</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec lacus urna, sagittis in elementum in, auctor eget tortor. Ut vel elit vitae dolor fringilla pretium ac non risus. Donec elementum quam quis aliquam tempus. Donec sollicitudin mi at nisi elementum, vitae faucibus arcu tincidunt. </p>
</div>
</div>
<div class="item">
<div class="photo">
<img src="images/vintage_2002.jpg">
</div>
<div class="blurb">
<h3>2005 Pinot Noir</h4>
<h5>12.8% ABV</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec lacus urna, sagittis in elementum in, auctor eget tortor. Ut vel elit vitae dolor fringilla pretium ac non risus. Donec elementum quam quis aliquam tempus. Donec sollicitudin mi at nisi elementum, vitae faucibus arcu tincidunt.</p>
</div>
</div>
</div>
</section>
<section id="history" class="coming_soon">
<div class="alert">
<h3>Coming Soon...</h3>
</div>
<h2 class="header">History of Eleanor Grace</h2>
<div class='timeline'>
<div class="line"></div>
<div class="year first"><span>2002</span></div>
<div class='entry' href="#">
March 17 - First shoots appear
<p><a href="#">View full album</a></p>
<img class='centered' src="https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash4/p480x480/205247_10152655947720475_1372225621_n.jpg" alt="christian fei">
</div>
<div class='entry ' href="#">
October - Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<div class='entry ' href="#">
June - Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<div class="year"><span>2003</span></div>
<div class="entry">
<p>September 16th - Harvest Day</p>
<img class='centered' src="https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash4/p480x480/205247_10152655947720475_1372225621_n.jpg" alt="christian fei">
</div>
<div class="year"><span>2004</span></div>
<div class='entry' href="#">
September 12th - First shoots appear
<p>View full album</p>
<img class='centered' src="https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash4/p480x480/205247_10152655947720475_1372225621_n.jpg" alt="christian fei">
</div>
<div class="year"><span>2005</span></div>
<div class='entry' href="#">
September 12th - First shoots appear
</div>
</div>
<p> ... More Coming Soon ... </p>
<p> (Takes time to dig through all those pictures) </p>
</section>
<section id="friends" class="coming_soon">
<div class="alert">
<h3>Coming Soon...</h3>
</div>
<h2 class="header">Friends of Eleanor Grace</h2>
<div class="list">
<div class="item"></div>
</div>
<div class="form">
<form>
<div class="field">
<label>Name</label>
<input type="text">
</div>
<div class="field">
<label>Leave a comment or just say hello.</label>
<textarea></textarea>
</div>
<div class="field">
<label>Add a picture of you enjoying a bottle of Eleanor Grace!
<input type="file">
</div>
<div class="field">
<input type="submit" value="Submit" class="submit">
</div>
</form>
</div>
</section>
<footer>
Designed by JC Kirst * Stay hungry, stay foolish. Code available on <a href="https://github.com/jskirst/eleanorgracevineyards">GitHub</a>.
</footer>
</div>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
var map;
function initialize() {
var mapOptions = {
zoom: 15,
center: new google.maps.LatLng(37.43657, -122.23125),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script>
//http://www.sycha.com/jquery-smooth-scrolling-internal-anchor-links
jQuery(document).ready(function($) {
$(".scroll").click(function(event){
event.preventDefault();
$('html,body').animate({scrollTop:$(this.hash).offset().top}, 500);
});
});
</script>
</body>
</html>