-
Notifications
You must be signed in to change notification settings - Fork 0
/
fresh_tomatoes.html
173 lines (156 loc) · 7.89 KB
/
fresh_tomatoes.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
<head>
<meta charset="utf-8">
<title>Fresh Tomatoes!</title>
<!-- Bootstrap 3 -->
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap-theme.min.css">
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<style type="text/css" media="screen">
body {
padding-top: 80px;
background: #eff3ef;
color: #363636;
}
#trailer .modal-dialog {
margin-top: 200px;
width: 640px;
height: 480px;
}
.hanging-close {
position: absolute;
top: -12px;
right: -12px;
z-index: 9001;
}
#trailer-video {
width: 100%;
height: 100%;
}
.movie-tile {
margin-bottom: 20px;
padding: 30px;
}
.movie-tile:hover {
background-color:#a1aba7;
cursor: pointer;
}
.scale-media {
padding-bottom: 56.25%;
position: relative;
}
.scale-media iframe {
border: none;
height: 100%;
position: absolute;
width: 100%;
left: 0;
top: 0;
background-color: white;
}
</style>
<script type="text/javascript" charset="utf-8">
// Pause the video when the modal is closed
$(document).on('click', '.hanging-close, .modal-backdrop, .modal', function (event) {
// Remove the src so the player itself gets removed, as this is the only
// reliable way to ensure the video stops playing in IE
$("#trailer-video-container").empty();
});
// Start playing the video whenever the trailer modal is opened
$(document).on('click', '.movie-tile', function (event) {
var trailerYouTubeId = $(this).attr('data-trailer-youtube-id')
var sourceUrl = 'http://www.youtube.com/embed/' + trailerYouTubeId + '?autoplay=1&html5=1';
$("#trailer-video-container").empty().append($("<iframe></iframe>", {
'id': 'trailer-video',
'type': 'text-html',
'src': sourceUrl,
'frameborder': 0
}));
});
// Animate in the movies when the page loads
$(document).ready(function () {
$('.movie-tile').hide().first().show("fast", function showNext() {
$(this).next("div").show("fast", showNext);
});
});
</script>
</head>
<!DOCTYPE html>
<html lang="en">
<body>
<!-- Trailer Video Modal -->
<div class="modal" id="trailer">
<div class="modal-dialog">
<div class="modal-content">
<a href="#" class="hanging-close" data-dismiss="modal" aria-hidden="true">
<img src="https://lh5.ggpht.com/v4-628SilF0HtHuHdu5EzxD7WRqOrrTIDi_MhEG6_qkNtUK5Wg7KPkofp_VJoF7RS2LhxwEFCO1ICHZlc-o_=s0#w=24&h=24"/>
</a>
<div class="scale-media" id="trailer-video-container">
</div>
</div>
</div>
</div>
<!-- Main Page Content -->
<div class="container">
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">Alina's Favorite Movie Trailers</a>
</div>
</div>
</div>
</div>
<div class="container">
<div class="col-md-6 col-lg-4 movie-tile text-center" data-trailer-youtube-id="uOUzQYqba4Y" data-toggle="modal" data-target="#trailer">
<img src="https://upload.wikimedia.org/wikipedia/en/2/26/Fridaposter.jpg" width="220" height="342">
<h2>Frida</h2>
<P>A biography of artist Frida Kahlo, who channeled the painof a crippling injury and her tempestuous marriage into her work.</p>
</div>
<div class="col-md-6 col-lg-4 movie-tile text-center" data-trailer-youtube-id="uPIEn0M8su0" data-toggle="modal" data-target="#trailer">
<img src="https://upload.wikimedia.org/wikipedia/en/6/67/Forrest_Gump_poster.jpg" width="220" height="342">
<h2>Forrest Gump</h2>
<P>Forrest Gump, while not intelligent, has accidentally been presentat many historic moments, but his true love, Jenny Curran, eludes him.</p>
</div>
<div class="col-md-6 col-lg-4 movie-tile text-center" data-trailer-youtube-id="6hB3S9bIaco" data-toggle="modal" data-target="#trailer">
<img src="https://upload.wikimedia.org/wikipedia/en/8/81/ShawshankRedemptionMoviePoster.jpg" width="220" height="342">
<h2>The Shawhank Redemption</h2>
<P>Two imprisoned men bond over a number of years, finding solaceand eventual redemption through acts of common decency.</p>
</div>
<div class="col-md-6 col-lg-4 movie-tile text-center" data-trailer-youtube-id="wZBfmBvvotE" data-toggle="modal" data-target="#trailer">
<img src="https://upload.wikimedia.org/wikipedia/en/3/3b/Pulp_Fiction_%281994%29_poster.jpg" width="220" height="342">
<h2>Pulp Fiction</h2>
<P>The film connects the intersecting storylines of Los Angeles mobstersfringe players, small-time criminals, and a mysterious briefcase.</p>
</div>
<div class="col-md-6 col-lg-4 movie-tile text-center" data-trailer-youtube-id="0vS0E9bBSL0" data-toggle="modal" data-target="#trailer">
<img src="https://upload.wikimedia.org/wikipedia/en/c/c7/Memento_poster.jpg" width="220" height="342">
<h2>Memento</h2>
<P>A man juggles searching for his wife's murderer and keeping hisshort-term memory loss from being an obstacle.</p>
</div>
<div class="col-md-6 col-lg-4 movie-tile text-center" data-trailer-youtube-id="YEfyfcEdW4Y" data-toggle="modal" data-target="#trailer">
<img src="https://upload.wikimedia.org/wikipedia/en/8/87/Eyes_Wide_Shut_poster.jpg" width="220" height="342">
<h2>Eyes Wide Shut</h2>
<P>A New York City doctor, who is married to an art curator,pushes himself on a harrowing and dangerous night-longodyssey of sexual and moral discovery after his wife admitsthat she once almost cheated on him.</p>
</div>
<div class="col-md-6 col-lg-4 movie-tile text-center" data-trailer-youtube-id="u_jE7-6Uv7E" data-toggle="modal" data-target="#trailer">
<img src="https://upload.wikimedia.org/wikipedia/en/a/a6/The_Pianist_movie.jpg" width="220" height="342">
<h2>The Pianist</h2>
<P>A Polish Jewish musician struggles to survive thedestruction of the Warsaw ghetto of World War II.</p>
</div>
<div class="col-md-6 col-lg-4 movie-tile text-center" data-trailer-youtube-id="ABSvppyQGdE" data-toggle="modal" data-target="#trailer">
<img src="https://upload.wikimedia.org/wikipedia/en/2/2b/Volver_Poster.jpg" width="220" height="342">
<h2>Volver</h2>
<P>After her death, a mother returns to her home town inorder to fix the situations she couldn't resolve during her life.</p>
</div>
<div class="col-md-6 col-lg-4 movie-tile text-center" data-trailer-youtube-id="yE-f1alkq9I" data-toggle="modal" data-target="#trailer">
<img src="https://upload.wikimedia.org/wikipedia/en/6/62/Eternal_sunshine_of_the_spotless_mind_ver3.jpg" width="220" height="342">
<h2>Eternal Sunshine of The Spotless Mind</h2>
<P>When their relationship turns sour, a couple undergoesa procedure to have each other erased from their memories.But it is only through the process of loss that theydiscover what they had to begin with.</p>
</div>
<div class="col-md-6 col-lg-4 movie-tile text-center" data-trailer-youtube-id="eWI_Jsw9qUs" data-toggle="modal" data-target="#trailer">
<img src="https://upload.wikimedia.org/wikipedia/en/6/64/The_Secret_Life_of_Pets_poster.jpg" width="220" height="342">
<h2>Secret Life of Pets</h2>
<P>The quiet life of a terrier named Max is upended whenhis owner takes in Duke, a stray whom Max instantly dislikes.</p>
</div>
</div>
</body>
</html>