forked from bhavukarora9/bhavukarora9.github.io
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
318 lines (259 loc) · 13.1 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
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Happy Birthday OOPS</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="description" content="Moleskine Notebook with jQuery Booklet" />
<meta name="keywords" content="jquery, book, flip, pages, moleskine, booklet, plugin, css3 "/>
<link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script src="booklet/jquery.easing.1.3.js" type="text/javascript"></script>
<script src="booklet/jquery.booklet.1.1.0.min.js" type="text/javascript"></script>
<link href="booklet/jquery.booklet.1.1.0.css" type="text/css" rel="stylesheet" media="screen" />
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>
<script src="cufon/cufon-yui.js" type="text/javascript"></script>
<script src="cufon/ChunkFive_400.font.js" type="text/javascript"></script>
<script src="cufon/Note_this_400.font.js" type="text/javascript"></script>
<script type="text/javascript">
Cufon.replace('h1,p,.b-counter');
Cufon.replace('.book_wrapper a', {hover:true});
Cufon.replace('.title', {textShadow: '1px 1px #C59471', fontFamily:'ChunkFive'});
Cufon.replace('.reference a', {textShadow: '1px 1px #C59471', fontFamily:'ChunkFive'});
Cufon.replace('.loading', {textShadow: '1px 1px #000', fontFamily:'ChunkFive'});
</script>
</head>
<body>
<h1 class="title">Happy 22nd Birthday OOPS</h1>
<div class="book_wrapper">
<a id="next_page_button"></a>
<a id="prev_page_button"></a>
<div id="loading" class="loading">Loading pages...</div>
<div id="mybook" style="display:none;">
<div class="b-load">
<div>
<img src="images/1_1.jpg" alt=""/>
<h1>Hi Upasana :)</h1>
<p>Wish you a very happy birthday!!!!!! Have a great year ahead. May god bless you.</p>
<p> 22 saal ki ho gayi buddhi aunty.</p>
</div>
<div>
<img src="images/2_2.jpg" alt="" />
<h1>Let's go for a nostalgic ride down the memory lane</h1>
<p>Starting with SRCC. I hope you remember that day. Though I don't have any pics with you bcoz I didn't DISTURB you. :p
I am not going to tell you the remaining 3 places. Wait till 2026 for the next location clue. :D</p>
</div>
<div>
<h1>Let's go for a nostalgic ride down the memory lane</h1>
<p>Starting with SRCC. I hope you remember that day. Though I don't have any pics with you bcoz I didn't DISTURB you. :p
I am not going to tell you the remaining 3 places. Wait till 2026 for the next location clue. :D</p>
</div>
<div>
<img src="images/1_3.jpg" alt="" />
<h1>Moni di's Sagan ceremony</h1>
<p>The look on your face after the sensational dance performance. :p</p>
</div>
<div>
<img src="images/1_4.jpg" alt="" />
<h1>Finally our first good picture. </h1>
<p>Thanks to DSLR :D</p>
</div>
<div>
<img src="images/1_5.jpg" alt="" />
<h1>A nice family picture</h1>
<p></p>
</div>
<div>
<img src="images/1_6.jpg" alt="" />
<h1></h1>
<p></p>
</div>
<div>
<img src="images/1_7.jpg" alt="" />
<h1></h1>
<p></p>
</div>
<div>
<h1>Post holi celebration at GIP</h1>
<p>God knows where I was looking. Sorry for the photobomb. :D</p>
</div>
<div>
<img src="images/1_8.jpg" alt="" />
<h1></h1>
<p></p>
</div>
<div>
<h1>Haha. Remember this night?</h1>
<p>Need I say more. To this day I feel it was the best time as I found my dear friend in my sister. Sssshh.</p>
</div>
<div>
<img src="images/1_9.jpg" alt="" />
<h1></h1>
<p></p>
</div>
<div>
<h1>Farewell day at CP</h1>
<p>After cancelling the plan for almost 100 times, you finally made it and took time for me for a day. Thank you so much. What happens in CP stays in CP. :p</p>
</div>
<div>
<img src="images/1_10.jpg" alt="" />
<h1></h1>
<p></p>
</div>
<div>
<h1>Moni di's mehendi ceremony</h1>
<p>The drama-self obsessed selfie queen wanted a good selfie and look what I gave. :D</p>
</div>
<div>
<img src="images/1_11.jpg" alt="" />
<h1></h1>
<p></p>
</div>
<div>
<h1>Geetika's wedding</h1>
<p>Acche lag rahe the sab!!! :D</p>
</div>
<div>
<img src="images/1_12.jpg" alt="" />
<h1>My photoshop skills</h1>
<p>Remember when I told you to accompany me to Kashmir and you said you wanted to be there. This is what I did next. You made be make 10 different samples because you were looking fat in all. Ab MOTI hai to main kya karu.? :D</p>
</div>
<div>
<img src="images/1_15.jpg" alt="" />
<h1></h1>
<p></p>
</div>
<div>
<img src="images/1_14.jpg" alt="" />
<h1></h1>
<p></p>
</div>
<div>
<h1>Your new hair makeover</h1>
<p>Sach bolu to ye aaj bhi bahut weird lagte hai. Change karwa liyo. Isliye kabhi compliment nahi diya. :p</p>
</div>
<div>
<img src="images/1_16.jpg" alt="" />
<h1></h1>
<p></p>
</div>
<div>
<h1>Another good picture</h1>
<p>Finally I am looking in the right place. Yayayaya!!!! :Ds</p>
</div>
<div>
<img src="images/1_17.jpg" alt="" />
<h1></h1>
<p></p>
</div>
<div>
<h1>Rakhi 2014</h1>
<p>This is a proof that I was present during Rakhi. And you don't always have to convince me to be there.</p>
</div>
<div>
<img src="images/1_18.jpg" alt="" />
<h1></h1>
<p></p>
</div>
<div>
<h1>Moni di's Sagan ceremony</h1>
<p> Another memory to cherish.!!!! </p>
</div>
<div>
<img src="images/1_19.jpg" alt="" />
<h1>Moni di's Wedding Ceremony</h1>
<p></p>
</div>
<div>
<img src="images/1_20.jpg" alt="" />
<h1>Geertika's Wedding Ceremony</h1>
<p></p>
</div>
<div>
<img src="images/1_21.jpg" alt="" />
<h1>Hahahahaha Sorry for this</h1>
<p> I had to keep this in the list. This is one of the best memories of you that I have. I remember the day I sent you this, the very next day earthquake struck Delhi. :D</p>
<p> Abhi FIFA mein kisko support kar rahi hai wo nhi add kiya yahan. Thanks bol diyo. </p>
</div>
<div>
<h1>Credits</h1>
<p> I know you are going to Nagpur for 2 years and as I already told you I am not feeling ggod about it. Life is going to change so fast. I wish I could freeze the time right now. But as they say, change is the only constant. JAA UPI NAGPUR. Jee le apni zindagi. Bass bhool na jayio. And time mile to khud message ya call kar liyo. I wish you all the best for your future. I know you are gonna rock.!!!!! And also I am so sorry for all the spoilers that I gave you. :p. Aage se pakka nhi dunga. </p>
<p></p><br></p>
<p></p><br></p>
<p><h1>Yours brother, dost and spoilers wala bhai</h1></p>
<p><h1>BHAV</h1></p>
</div>
</div>
</div>
</div>
<div>
<span class="reference">
</span>
</div>
<!-- The JavaScript -->
<script type="text/javascript">
$(function() {
var $mybook = $('#mybook');
var $bttn_next = $('#next_page_button');
var $bttn_prev = $('#prev_page_button');
var $loading = $('#loading');
var $mybook_images = $mybook.find('img');
var cnt_images = $mybook_images.length;
var loaded = 0;
//preload all the images in the book,
//and then call the booklet plugin
$mybook_images.each(function(){
var $img = $(this);
var source = $img.attr('src');
$('<img/>').load(function(){
++loaded;
if(loaded == cnt_images){
$loading.hide();
$bttn_next.show();
$bttn_prev.show();
$mybook.show().booklet({
name: null, // name of the booklet to display in the document title bar
width: 800, // container width
height: 500, // container height
speed: 600, // speed of the transition between pages
direction: 'LTR', // direction of the overall content organization, default LTR, left to right, can be RTL for languages which read right to left
startingPage: 0, // index of the first page to be displayed
easing: 'easeInOutQuad', // easing method for complete transition
easeIn: 'easeInQuad', // easing method for first half of transition
easeOut: 'easeOutQuad', // easing method for second half of transition
closed: true, // start with the book "closed", will add empty pages to beginning and end of book
closedFrontTitle: null, // used with "closed", "menu" and "pageSelector", determines title of blank starting page
closedFrontChapter: null, // used with "closed", "menu" and "chapterSelector", determines chapter name of blank starting page
closedBackTitle: null, // used with "closed", "menu" and "pageSelector", determines chapter name of blank ending page
closedBackChapter: null, // used with "closed", "menu" and "chapterSelector", determines chapter name of blank ending page
covers: false, // used with "closed", makes first and last pages into covers, without page numbers (if enabled)
pagePadding: 10, // padding for each page wrapper
pageNumbers: true, // display page numbers on each page
hovers: false, // enables preview pageturn hover animation, shows a small preview of previous or next page on hover
overlays: false, // enables navigation using a page sized overlay, when enabled links inside the content will not be clickable
tabs: false, // adds tabs along the top of the pages
tabWidth: 60, // set the width of the tabs
tabHeight: 20, // set the height of the tabs
arrows: false, // adds arrows overlayed over the book edges
cursor: 'pointer', // cursor css setting for side bar areas
hash: false, // enables navigation using a hash string, ex: #/page/1 for page 1, will affect all booklets with 'hash' enabled
keyboard: true, // enables navigation with arrow keys (left: previous, right: next)
next: $bttn_next, // selector for element to use as click trigger for next page
prev: $bttn_prev, // selector for element to use as click trigger for previous page
menu: null, // selector for element to use as the menu area, required for 'pageSelector'
pageSelector: false, // enables navigation with a dropdown menu of pages, requires 'menu'
chapterSelector: false, // enables navigation with a dropdown menu of chapters, determined by the "rel" attribute, requires 'menu'
shadows: true, // display shadows on page animations
shadowTopFwdWidth: 166, // shadow width for top forward anim
shadowTopBackWidth: 166, // shadow width for top back anim
shadowBtmWidth: 50, // shadow width for bottom shadow
before: function(){}, // callback invoked before each page turn animation
after: function(){} // callback invoked after each page turn animation
});
Cufon.refresh();
}
}).attr('src',source);
});
});
</script>
</body>
</html>