-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
150 lines (142 loc) · 7.81 KB
/
index.html
File metadata and controls
150 lines (142 loc) · 7.81 KB
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
<!DOCTYPE html>
<head>
<title>Jack Bennett Films</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- style -->
<link rel="stylesheet" type="text/css" href="style/main.css">
<link rel="icon" type="image/png" href="pics/favicon/favicon-32x32.png" sizes="32x32" />
<link rel="icon" type="image/png" href="pics/favicon/favicon-16x16.png" sizes="16x16" />
<!-- libraries -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- scripts -->
<script src="scripts/functions.js" type="text/javascript"></script>
</head>
<body>
<button id="topLeftRibbon" onclick="jumpTo('top', false)">JACK BENNETT</button>
<div id="topRightRibbon">
<a class="fa fa-vimeo-square ribbonIcon" style="font-size:30px;" target="_blank" href="https://vimeo.com/user10087339"></a>
<a class="fa fa-linkedin-square ribbonIcon" style="font-size:30px;" target="_blank" href="https://www.linkedin.com/in/jack-bennett-85028a51"></a>
<a class="fa fa-twitter-square ribbonIcon" style="font-size:30px;" target="_blank" href="https://twitter.com/jackbennettfilm"></a>
<a class="fa fa-instagram ribbonIcon" style="font-size:30px;" target="_blank" href="https://www.instagram.com/bennettfilms/"></a>
<a class="fa fa-envelope-square ribbonIcon" style="font-size:30px;" href="mailto:jack@bennettfilms.co.uk"></a>
</div>
<!-- MOBILE MENU -->
<div id="mobileMenuFull">
<button class="headerButton mobile top" onclick="jumpTo('top', true)">TOP</button>
<button class="headerButton mobile about" onclick="jumpTo('about', true)">ABOUT</button>
<button class="headerButton mobile work" onclick="jumpTo('work', true)">WORK</button>
<button class="headerButton mobile contact" onclick="jumpTo('contact', true)">CONTACT</button>
</div>
<!-- LANDING -->
<section class="section top">
<video id="landingVideo" src="media/landingVid4.mp4" autoplay loop></video>
<div id="notHeader">
<span id="titleText">JACK BENNETT</span>
<span id="subtitleText">director/writer/animator</span>
</div>
<div id="headerBar">
<div id="landscapeLayout">
<button class="headerButton about" onclick="jumpTo('about', false)">ABOUT</button>
<button class="headerButton work" onclick="jumpTo('work', false)">WORK</button>
<button class="headerButton contact" onclick="jumpTo('contact', false)">CONTACT</button>
</div>
<div id="portraitLayout">
<button id="menuButton" onclick="toggleMobileMenu(this)">
<div class="menuIconBar one"></div>
<div class="menuIconBar two"></div>
<div class="menuIconBar three"></div>
</button>
<div>
<a class="fa fa-vimeo-square ribbonIcon bar" style="font-size:35px;" target="_blank" href="https://vimeo.com/user10087339"></a>
<a class="fa fa-linkedin-square ribbonIcon bar" style="font-size:35px;" target="_blank" href="https://www.linkedin.com/in/jack-bennett-85028a51"></a>
<a class="fa fa-twitter-square ribbonIcon bar" style="font-size:35px;" target="_blank" href="https://twitter.com/jackbennettfilm"></a>
<a class="fa fa-instagram ribbonIcon bar" style="font-size:35px;" target="_blank" href="https://www.instagram.com/bennettfilms/"></a>
<a class="fa fa-envelope-square ribbonIcon bar" style="font-size:35px;" href="mailto:jack@bennettfilms.co.uk"></a>
</div>
</div>
</div>
</section>
<!-- ABOUT -->
<div class="divider about"><span class="dividerTitle">ABOUT</span></div>
<section class="section about">
<div id="aboutSectionWrap">
<div id="aboutTopWrap">
<div id="portrait"></div>
<div id="introWrap">
<div id="aboutText">
<p>Creative with a variety of professional experience, most recently as a creator, writer and director of the animated tv show, 'Dodo', shown on Sky TV. I aim to craft funny, relatable stories with real heart. Before DODO, I was an animator for a number of years. I animate in Toon Boom, Animate CC, Celaction or After Effects. I am represented by Gemma Hirst Associates for writing and directing work.</i>.</p>
</div>
</section>
<!-- WORK -->
<div class="divider"><span class="dividerTitle">WORK</span></div>
<section class="section work">
<button class="videoButton showreel" onclick="playVideo('296273116', this)">
<div class="videoImage" style="background-image: url('pics/thumbs/showreel.png');"></div>
<div class="videoTitle">Showreel</div>
<iframe class="videoBox" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</button>
<div id="videosWrap">
<button class="videoButton" onclick="playVideo('604012598', this)">
<div class="videoImage" style="background-image: url('pics/thumbs/dodo.jpeg');"></div>
<div class="videoTitle"> </div>
<iframe class="videoBox" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</button>
<div class="videoButton nteotw" onclick="showVideoOptions()">
<div class="videoImage" style="background-image: url('pics/thumbs/nottheendoftheworld.png');"></div>
<div class="videoTitle"> </div>
<iframe class="videoBox" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
<div id="videoChoiceBox">
<button class="videoChoiceButton" onclick="playVideo('192717554', 'nteotw')">TRAILER</button>
</div>
</div>
</button>
<button class="videoButton" onclick="playVideo('251871953', this)">
<div class="videoImage" style="background-image: url('pics/thumbs/gemmacantsleep.png');"></div>
<div class="videoTitle"> </div>
<iframe class="videoBox" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</button>
<button class="videoButton" onclick="playVideo('341992080', this)">
<div class="videoImage" style="background-image: url('pics/thumbs/theychew.png');"></div>
<div class="videoTitle"> </div>
<iframe class="videoBox" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</button>
<button class="videoButton" onclick="playVideo('356867778', this)">
<div class="videoImage" style="background-image: url('pics/thumbs/pigenstuff.png');"></div>
<div class="videoTitle"> </div>
<iframe class="videoBox" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</button>
<button class="videoButton" onclick="playVideo('163937447', this)">
<div class="videoImage" style="background-image: url('pics/thumbs/shipoems.png');"></div>
<div class="videoTitle"> </div>
<iframe class="videoBox" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</button>
<button class="videoButton" onclick="playVideo('323419783', this)">
<div class="videoImage" style="background-image: url('pics/thumbs/hennnight.png');"></div>
<div class="videoTitle"> </div>
<iframe class="videoBox" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</button>
</div>
</section>
<!-- CONTACT -->
<div class="divider"><span class="dividerTitle">CONTACT</span></div>
<section class="section contact">
<div id="contactDetails">
<div class="contactGroup">
<div class="fa fa-envelope-square contactIcon" style="font-size: 30px"></div>
<a class="contactInfo link" href="mailto:jack@bennettfilms.co.uk?subject=Hello">jack@bennettfilms.co.uk</a>
</div>
<div class="contactGroup">
<div class="fa fa-phone-square contactIcon" style="font-size: 30px"></div>
<a class="contactInfo link" href="tel:+447815176520">+44 781 5176520</a>
</div>
<div class="contactGroup">
<div class="fa fa-file-pdf-o contactIcon" style="font-size: 30px"></div>
<a class="contactInfo link" href="media/CV.pdf">CV</a>
</div>
</div>
</section>
<!-- SIGNATURE -->
<div class="footer"><span id="sigWords">Website by </span><a href="mailto:jwldcode@gmail.com">Jack Davies</a></div>
</body>