-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
386 lines (374 loc) · 22 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
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Material Icons -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Font awesome -->
<script src="https://kit.fontawesome.com/d1f4009ec4.js" crossorigin="anonymous"></script>
<!-- Font awesome cdnjs -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"
integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!-- Custom CSS -->
<link rel="stylesheet" href="style.css">
<title>F.R.I.E.N.D.S</title>
</head>
<body>
<!-- Navbar -->
<div class="class navbar-fixed">
<nav class="nav-wrapper black">
<a href="" target="_blank" class="brand-logo">
<img class="friends-logo responsive-img" src="images/friends_logo.png" alt="Friends"></a>
<a href="" data-target="mobile-menu" class="sidenav-trigger">
<ul class="right hide-on-med-and-down">
<li><a href="#about" class="white-text"><img src="https://fontmeme.com/permalink/231114/a3bb04c070fe3b8e19b6c317ebb2382c.png" alt="friends-tv-series-font" border="0" class="responsive-img tooltipped" data-tooltip="ABOUT"></a></li>
<li><a href="#character"><img src="https://fontmeme.com/permalink/231114/4f9797a168b9b516722f44480a686871.png" alt="friends-tv-series-font" border="0" class="responsive-img tooltipped" data-tooltip="CHARACTERS"></a></li>
<li><a href="https://www.facebook.com/friends.tv/" target="_blank" class="tooltipped btn-floating btn-small black darken-4" data-tooltip="Facebook">
<i class="fab fa-facebook"></i></a></li>
<li><a href="https://www.instagram.com/friends/" target="_blank" class="tooltipped btn-floating btn-small black darken-4" data-tooltip="Instagram">
<i class="fab fa-instagram"></i></a></li>
<li><a href="https://twitter.com/hookedonfriends?lang=en" target="_blank" class="tooltipped btn-floating btn-small black darken-4" data-tooltip="Twitter">
<i class="fab fa-twitter"></i></a>
</ul>
</nav>
</div>
<!-- Buttons -->
<div class="fixed-action-btn">
<a href="" class="btn-floating pulse btn-medium brown">
<i class="large material-icons">refresh</i></a>
</div>
<!-- Video -->
<div class="video-container">
<div class="container">
<iframe width="560" height="315"
src="https://www.youtube.com/embed/s2TyVQGoCYo?si=OASyJ1QGAJT6AB_z&controls=0" title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen></iframe>
</div>
</div>
<!-- Carousell -->
<div class="scrollspy" id="about">
<div class="carousel black">
<a class="carousel-item" >
<img src="images/gallery/img_1.jpg" class="responsive-img materialboxed"></a>
<a class="carousel-item" >
<img src="images/gallery/img_2.jpg" class="responsive-img materialboxed"></a>
<a class="carousel-item" >
<img src="images/gallery/img_3.jpg" class="responsive-img materialboxed"></a>
<a class="carousel-item" >
<img src="images/gallery/img_4.jpg" class="responsive-img materialboxed"></a>
<a class="carousel-item" >
<img src="images/gallery/img_5.jpg" class="responsive-img materialboxed"></a>
<a class="carousel-item" >
<img src="images/gallery/img_6.jpg" class="responsive-img materialboxed"></a>
<a class="carousel-item" >
<img src="images/gallery/img_7.jpg" class="responsive-img materialboxed"></a>
<a class="carousel-item" >
<img src="images/gallery/img_8.jpg" class="responsive-img materialboxed"></a>
<a class="carousel-item" >
<img src="images/gallery/img_9.jpg" class="responsive-img materialboxed"></a>
<a class="carousel-item" >
<img src="images/gallery/img_10.jpg" class="responsive-img materialboxed"></a>
<a class="carousel-item" >
<img src="images/gallery/img_11.jpg" class="responsive-img materialboxed"></a>
<a class="carousel-item" >
<img src="images/gallery/img_12.jpg" class="responsive-img materialboxed"></a>
<a class="carousel-item" >
<img src="images/gallery/img_13.jpg" class="responsive-img materialboxed"></a>
<a class="carousel-item" >
<img src="images/gallery/img_14.jpg" class="responsive-img materialboxed"></a>
<a class="carousel-item" >
<img src="images/gallery/img_15.jpg" class="responsive-img materialboxed"></a>
</div>
</div>
<!-- Card -->
<div class="scrollspy">
<div class="container">
<div class="row">
<div class="col2 s12 m12">
<h2 class="white-text center"><img src="https://fontmeme.com/permalink/231114/3542ef0cdd6c42a8d01d0238ab0e97b4.png" alt="friends-tv-series-font" border="0" class="responsive-img"></h2>
<div class="card-panel hoverable black">
<div class="card-content white-text">
The show, created by David Crane and Marta Kauffman, aired on NBC from September 22, 1994, to May 6, 2004,
spanning ten seasons. The series revolves around the lives of six friends in their 20s and early 30s
living in Manhattan, New York City. The main cast includes Jennifer Aniston, Courteney Cox, Lisa Kudrow,
Matt LeBlanc, Matthew Perry, and David Schwimmer. The show's development began under the working title
"Insomnia Cafe" in late 1993, with the idea being pitched to Kevin S. Bright, who then collaborated with
the creators to present it to NBC. After various script revisions and title changes, the series was
eventually named "Friends" and was filmed at Warner Bros. Studios in Burbank, California. The show was
produced by Bright/Kauffman/Crane Productions and Warner Bros. Television. During its run, "Friends"
achieved significant success, consistently ranking among the top television shows and reaching the
number-one spot in its eighth season. The series finale, which aired on May 6, 2004, was watched by
approximately 52.5 million American viewers, making it one of the most-watched series finales in
television history. The show received critical acclaim, earning numerous award nominations and winning the
Outstanding Comedy Series award at the Primetime Emmy Awards in 2002.
"Friends" has been recognized as one of the most popular and influential television shows of all time,
receiving accolades from various sources such as TV Guide, Empire magazine, and the Writers Guild of
America. The original cast members reunited for "Friends: The Reunion," a special released on HBO Max in
2021.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<br>
<!-- Parallax -->
<div class="parallax-container">
<div class="parallax">
<img src="images/img_parallax-1.png" alt="" class="responsive-img">
</div>
</div>
<!-- Carousel / Collapsible -->
<div class="scrollspy" id="character">
<div class="carousel black">
<a class="carousel-item">
<img src="images/1.jpg" class="responsive-img materialboxed" data-caption="RACHEL GREEN"></a>
<a class="carousel-item">
<img src="images/2.jpg" class="responsive-img materialboxed" data-caption="ROSS GELLER"></a>
<a class="carousel-item">
<img src="images/3.jpg" class="responsive-img materialboxed" data-caption="PHOEBE BUFFAY"></a>
<a class="carousel-item">
<img src="images/4.jpg" class="responsive-img materialboxed" data-caption="JOEY TRIBBIANI"></a>
<a class="carousel-item">
<img src="images/5.jpg" class="responsive-img materialboxed" data-caption="MONICA GELLER"></a>
<a class="carousel-item">
<img src="images/6.jpg" class="responsive-img materialboxed" data-caption="CHANDLER BING"></a>
</div>
<br>
<div class="container">
<h2 class="white-text center"><img src="https://fontmeme.com/permalink/231114/a80c8c8db5e9c3fc3b357aa5f2cb74bc.png" alt="friends-tv-series-font" border="0" class="responsive-img">
</h2>
<br>
<ul class="collapsible popout">
<li>
<div class="collapsible-header white"><img src="https://fontmeme.com/permalink/231114/1931604687811a4b1b605544b2e2bffc.png" alt="friends-tv-series-font" border="0" class="responsive-img"></div>
<div class="collapsible-body white-text">
<div class="row">
<div class="col s8 m6 l4">
<img src="images/1_rachel.jpg" class="responsive-img materialboxed">
</div>
<div class="col s4 m6 l8"></div>
<span>Rachel Karen Green (Jennifer Aniston) is the spoiled but warm-hearted and likeable daughter of a
rich vascular surgeon and his wife. Rachel is introduced into the series in the first episode after she
leaves her fiance Barry at the altar, and attempts to live independently without any financial support
from her parents. She flees from her almost-wedding to New York City, to find her friend from high
school Monica Geller. Rachel then moves into Monica's apartment and meets Phoebe Buffay, Chandler Bing
and Joey Tribbiani. Rachel already knows Ross Geller as he is Monica's brother and they all three went
to the same high school.</span>
</div>
</div>
</li>
<br>
<li>
<div class="collapsible-header white" id="ross"><img src="https://fontmeme.com/permalink/231114/f27f31a7abc82442494ab091832aec20.png" alt="friends-tv-series-font" border="0" class="responsive-img"></div>
<div class="collapsible-body white-text">
<div class="row">
<div class="col s8 m6 l4">
<img src="images/2_ross.jpg" class="responsive-img materialboxed">
</div>
<div class="col s4 m6 l8"></div>
<span>Ross Geller, Ph.D. (David Schwimmer): A paleontologist working at a museum of prehistory, and later
a professor of paleontology at New York University. The most intelligent of the six main characters but
at the same time a clumsy, and quirky individual, Ross has three failed marriages during the series, and
is involved in an on-off relationship with Rachel. Towards the end of the final episode, he and Rachel
reconcile stating that they will never break up again. It's revealed in the spinoff Joey that they have
remarried. He is also the father of his ex-wife Carol's son Ben, and Rachel's daughter Emma.</span>
</div>
</div>
</li>
<br>
<li>
<div class="collapsible-header white" id="phoebe"><img src="https://fontmeme.com/permalink/231114/7a13164e7e2ffa41766a61b4eb5cc2d6.png" alt="friends-tv-series-font" border="0" class="responsive-img"></div>
<div class="collapsible-body white-text">
<div class="row">
<div class="col s8 m6 l4">
<img src="images/3_phoebe.jpg" class="responsive-img materialboxed">
</div>
<div class="col s4 m6 l8"></div>
<span>Phoebe Buffay-Hannigan (Lisa Kudrow) is an odd, ditzy but nonetheless sweet-natured, kind-hearted
masseuse who was once homeless, and sometimes tells her friends outlandish tales of her days on the
street. She is an aspiring musician who plays the guitar and sings songs with somewhat unusual lyrics at
the coffee shop. She has an identical twin sister named Ursula, who is also played by Kudrow, just as
odd as Phoebe and appeared as a recurring character in the sitcom Mad About You. After a series of dates
and relationships with a number of men, she meets Mike Hannigan (Paul Rudd) in season nine, whom she
eventually marries in season ten. She also became a surrogate mother for the child of her half-brother
Frank Jr. (Giovanni Ribisi), and gives birth to his triplets in the fifth season.</span>
</div>
</div>
</li>
<br>
<li>
<div class="collapsible-header white" id="joey"><img src="https://fontmeme.com/permalink/231114/1277f94d8428f246495ff792259cd1b5.png" alt="friends-tv-series-font" border="0" class="responsive-img"></div>
<div class="collapsible-body white-text">
<div class="row">
<div class="col s8 m6 l4">
<img src="images/4_joey.jpg" class="responsive-img materialboxed">
</div>
<div class="col s4 m6 l8"></div>
<span>Joseph Francis "Joey" Tribbiani, Jr. (Matt LeBlanc): A good-natured but not-so-bright struggling
actor and food lover, who becomes famous for his role on a fictionalized version of Days of Our Lives as
Dr. Drake Ramoray. Joey is a womanizer, with many girlfriends throughout the series (his usual pick-up
line "How you doin'?"), and develops a crush on his friend Rachel in season eight. He has a brief
relationship with Rachel at the start of Season 10.</span>
</div>
</div>
</li>
<br>
<li>
<div class="collapsible-header white" id="monica"><img src="https://fontmeme.com/permalink/231114/d9597ea7ca9c2fc193168c21d7c9704a.png" alt="friends-tv-series-font" border="0" class="responsive-img"></div>
<div class="collapsible-body white-text">
<div class="row">
<div class="col s8 m6 l4">
<img src="images/5_monica.jpg" class="responsive-img materialboxed">
</div>
<div class="col s4 m6 l8"></div>
<span>Monica E. Geller (Courteney Cox) is the mother hen of the group, who is known for her
obsessive-compulsive and competitive nature. Monica is often jokingly teased for having been an
extremely overweight child by the others, especially her brother Ross. In "The One with the Football",
Ross even says to her, "Cheater, cheater, compulsive eater." Monica is an intelligent, kind-hearted
person who works primarily as a chef throughout the show.</span>
</div>
</div>
</li>
<br>
<li>
<div class="collapsible-header white" id="chandler"><img src="https://fontmeme.com/permalink/231114/651ceef441907cb917a6b602589564a5.png" alt="friends-tv-series-font" border="0" class="responsive-img"></div>
<div class="collapsible-body white-text">
<div class="row">
<div class="col s8 m6 l4">
<img src="images/6_chandler.jpg" class="responsive-img materialboxed">
</div>
<div class="col s4 m6 l8"></div>
<span>Chandler Muriel Bing (Matthew Perry): An executive in statistical analysis and data reconfiguration
for a large multi-national corporation. Chandler later quits his job and becomes a junior copywriter at
an advertising agency. Chandler is known for his sarcastic sense of humor, and, an intelligent man at
the end of the day despite all his goofy quirkiness, often mocks his good friend Joey (though never with
any malice, even while exasperated) for the latter's stupidity. He eventually falls in deep mutual love
with Monica; an emotional Chandler tells her that she "makes him happier than he ever thought he could
be" while proposing to her at the close of season six, with the two of them marrying at the close of
season seven. By the end of the series, he and Monica adopt twins, whom they name Jack and Erica named
after her father and the children's biological mother.</span>
</div>
</div>
</li>
</ul>
</div>
</div>
<br><br><br><br><br><br>
<!-- Parallax -->
<div class="parallax-container">
<div class="parallax">
<img src="images/img_parallax-2.jpg" alt="" class="responsive-img">
</div>
</div>
<!-- Contact Form -->
<div class="section container scrollspy" id="contact">
<div class="row">
<div class="col s12 l5">
<h2><img src="https://fontmeme.com/permalink/231114/1cded1118039923230e0f14beb9291c7.png" alt="friends-tv-series-font" border="0" class="responsive-img"></h2>
<h2><img src="https://fontmeme.com/permalink/231114/8a21451ed0d3c80512b8a350d88b3b47.png" alt="friends-tv-series-font" border="0" class="responsive-img"></h2>
<h2><img src="https://fontmeme.com/permalink/231114/70070739249547b202bf4fa85cd6bf8b.png" alt="friends-tv-series-font" border="0" class="responsive-img"></h2>
</div>
<div class="col s12 l5 offset-l2">
<form action="">
<div class="input-field white-text">
<i class="material-icons prefix">email</i>
<input type="email" name="" id="email" class="white-text">
<label for="email">Your Email</label>
</div>
<div class="input-field white-text">
<i class="material-icons prefix">message</i>
<textarea name="" id="message" class="materialize-textarea white-text" ></textarea>
<label for="message">Your Answer</label>
</div>
<div class="input-feild center-align">
<h9>
<label>
<input type="checkbox">
<span>Do you would like to receive updates?</span>
</label>
</h9>
</div>
<br>
<div class="input-feild center">
<button class="btn black-text white">Submit</button>
</div>
</form>
</div>
</div>
</div>
<!-- Parallax -->
<div class="parallax-container">
<div class="parallax">
<img src="images/img_parallax-3.jpg" alt="" class="responsive-img">
</div>
</div>
<br><br><br><br><br><br>
<!-- Footer -->
<footer class="transparent page-footer white-text">
<div class="row">
<div class="col l12 m12 s12 center">
<a href="https://www.facebook.com/ellen.nalupa/" target="_blank" class="white-text">
<i class="fab fa-facebook fa-3x"></i> </a>
<a href="https://www.instagram.com/_itsmegrasyaaa/" target="_blank" class="white-text">
<i class="fab fa-instagram fa-3x"></i> </a>
<a href="https://www.pinterest.ph/ellennalupa/" target="_blank" class="white-text">
<i class="fab fa-pinterest fa-3x"></i> </a>
<a href="https://www.linkedin.com/in/ellen-grace-nalupa-05079b21a/" target="_blank" class="white-text">
<i class="fab fa-linkedin fa-3x"></i> </a>
<a href="https://github.com/ellngrcnlp" target="_blank" class="white-text">
<i class="fab fa-github fa-3x"></i></a>
<div>
</div>
<div class="footer-copyright black darken-4">
<div class="container center-align">
© 2023 Ellen Grace Nalupa, All rights reserved.
</div>
</div>
</footer>
<!-- Jquery CDN -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"
integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script>
$(document).ready(function () {
// materialbox init
$('.materialboxed').materialbox({
});
// parallax init
$('.parallax').parallax({
height: 300
})
// scrollspy init
$('.carousel').carousel({
fullWidth: false,
dist: 50,
height: 100,
padding: 0,
});
// collapsible init
$('.collapsible').collapsible({
inDuration: 1000,
outDuration: 1000
});
// buttons init
$('.fixed-action-btn').floatingActionButton({
toolbarEnabled: false,
hoverEnabled: false,
});
// tabs init
$('.tabs').tabs();
$('.tooltipped').tooltip();
});
</script>
</script>
</body>
</html>