-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathhockey-depth-charts.html
336 lines (227 loc) · 12.5 KB
/
hockey-depth-charts.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>DaveWhiffen.com</title>
<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css">
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design Bootstrap -->
<link href="css/mdb.min.css" rel="stylesheet">
<!-- Your custom styles (optional) -->
<link href="css/style.css" rel="stylesheet">
<!-- Your custom styles (optional) -->
<link href="css/main.css" rel="stylesheet">
<!-- / * Favicon and Icons for Apps and Title Bars go here / * -->
<meta name="description" content="Dave Whiffen">
<meta name="author" content="Dave Whiffen">
<link rel="apple-touch-icon" sizes="57x57" href="apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
<link rel="manifest" href="/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">
<!-- /* Style Header here. For some reason, the MDBootstrap classes won't be overridden by these style declarations. */ -->
<style>
.header{
font-size: 30px;
font-weight: bold;
margin-top:50px;
margin-bottom:50px;
}
.col-lg-4 {
padding-bottom:50px;
padding-top:50px;
}
</style>
</head>
<body>
<style> .indigo{background-color:#3f51b5!important}
.indigo-text{color:#3f51b5!important}
.white-text{color:#fff!important}
.white-lighter-hover {
color: #fff;!important
-webkit-transition: .4s;
transition: .4s; }
.white-lighter-hover:hover {
-webkit-transition: .4s;
transition: .4s;
color: white; }
.white-darker-hover {
color: #fff;
-webkit-transition: .4s;
transition: .4s; }
.white-darker-hover:hover {
-webkit-transition: .4s;
transition: .4s;
color: #d9d9d9; }
.grey-lighter-hover {
color: #616161;!important
-webkit-transition: .4s;
transition: .4s; }
.grey-lighter-hover:hover {
-webkit-transition: .4s;
transition: .4s;
color: #878787; }
.grey-darker-hover {
color: #616161;
-webkit-transition: .4s;
transition: .4s; }
.grey-darker-hover:hover {
-webkit-transition: .4s;
transition: .4s;
color: #3b3b3b; }
.indigo-lighter-hover {
color: #3f51b5;
-webkit-transition: .4s;
transition: .4s; }
.indigo-lighter-hover:hover {
-webkit-transition: .4s;
transition: .4s;
color: #7280ce; }
.indigo-darker-hover {
color: #3f51b5;
-webkit-transition: .4s;
transition: .4s; }
.indigo-darker-hover:hover {
-webkit-transition: .4s;
transition: .4s;
color: #2b387c; }
</style>
<!--/* Updated Navigation Bar April 10, 2019, 9:48AM with justified buttons, and dropdown menu for portfolio /* -->
<nav class="navbar navbar-dark navbar-expand-lg fixed-top indigo darken-2 ">
<!-- / * Navigation Title and Icon / * -->
<a class="white-bold white-darker-hover waves-effect" style="font-size:20px;" href="index.html"><img class="img-avatar" src="img/dave.png" height="44" style="padding-right:0px;"><strong> Dave</strong></a>
<div class="waves-effect" style="padding:10px">
<!-- / * About Button * / -->
<a class="white-bold white-darker-hover" href="index.html"><strong>About</strong></a>
</div>
<!-- / * Portfolio Button with Dropdown Menu * / -->
<a class="nav-link dropdown-toggle white-bold waves-effect indigo white-darker-hover" data-toggle="dropdown" href="portfolio.html" role="button" aria-haspopup="true"
aria-expanded="false"><strong>Portfolio</strong></a>
<!-- / * Physical Dropdown Button List / * -->
<div class="dropdown-menu dropdown-default">
<!-- / * Ordered List / * -->
<li> <a class="dropdown-item" href="portfolio.html"><i class="fas fa-film"></i> Film</a>
<a class="dropdown-item" href="television.html"><i class="fas fa-tv"></i> Television</a>
<a class="dropdown-item" href="web-design.html"><i class="fas fa-code"></i> Web Design</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="gaming.html"><i class="fas fa-gamepad"></i> Gaming</a>
<a class="dropdown-item" href="hockey.html"><i class="fas fa-hockey-puck"></i> Hockey</a>
<a class="dropdown-item" href="animation.html"><i class="fas fa-grin-tongue"></i> Animation</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="drawing.html"><i class="fas fa-pencil-alt"></i> Drawing</a>
<a class="dropdown-item" href="construction.html"><i class="fas fa-hammer"></i> Construction</a></li>
</div></div>
<!-- / * Contact Button / * -->
<div style="padding:8px;" class="waves-effect"><a class="white-bold white-darker-hover" href="contact.html"><strong>Contact</strong></a></div>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
</div>
</a></div></div>
</nav>
<!-- / * End of navigation bar. / * -->
<div class="animated fadeIn">
<div class="animated fadeIn">
<!-- /* Breadcrumbs Navigation
Last updated April 10, 2019 */ -->
<div class="font-weight-bold indigo-text indigo-lighter-hover" style="padding-top:56px;">
<nav class="indigo-text indigo-lighter-hover" aria-label="breadcrumb" style="padding-top:px;align-content: left;font-size: 14px;">
<ol class="breadcrumb">
<li class="breadcrumb-item active indigo-text indigo-lighter-hover"><a class="indigo-text indigo-lighter-hover" href="index.html">Home </a> / <a class="indigo-text indigo-lighter-hover" href="hockey.html">Hockey</a> / <a class="indigo-text indigo-lighter-hover" href="hockey.html">Depth Charts</a></li>
</ol></nav>
</div>
<!-- /* End Breadcrumbs Navigation -->
<div class="row d-flex justify-content-center">
<!-- -->
<div class="row text-center" style="max-width: 400px;text-align: center;align-content: center;">
<!-- Rams Hockey App -->
<div class="col-lg-4 col-lg-12 justify-content-center">
<!--Featured image-->
<!--Image-->
<div class="view overlay zoom rounded z-depth-1">
<img src="img/thumbnails/RAMS-DEPTH.png" class="img-fluid" alt="Sample project image"><a href="https://www.dropbox.com/sh/xfb3mvks2m3pprh/AAC8xnmf8XL3CtcO6x6_17upa?dl=0">
<div class="mask rgba-white-slight"></div></a></div>
<!--Title-->
<div class="card-body pb-0">
<h4 class="font-weight-bold my-3"><a class="indigo-text indigo-lighter-hover" href="https://www.dropbox.com/sh/xfb3mvks2m3pprh/AAC8xnmf8XL3CtcO6x6_17upa?dl=0">Depth Charts (2017)</a></h4>
<p class="grey-text">Designer</p>
<p class="grey-text">Another thing that was getting annoying for me was the pre-scout of other teams. I'd always be doing the same thing.
</p>
<a class="btn btn-indigo btn-sm" href="https://www.dropbox.com/sh/xfb3mvks2m3pprh/AAC8xnmf8XL3CtcO6x6_17upa?dl=0"><i class="fas fa-clone left"></i> View project</a><br><br>
<p class="grey-text">Watch video, pull up the roster, figure out the line pairings, learn about their success on special teams, etc. etc.
<p class="grey-text">It was a lot of information that was hard to visualize. So I thought of a design that would take all the important information of a team and show it all on one page. This was the birth of us using depth charts.
<p class="grey-text">The Depth Charts are one pagers with visual lineup images, as well as the coaching breakdown and some interesting stats about the team.
<p class="grey-text">It's made to answer the question, "If I'm a brand new player and know nothing about this team, what are all the important things I need to know?"
<p class="grey-text">So the depth charts go further than just line combinations, they also colorize the player by their year, since experience in a league with 5 years of eligibility is important. So I used 5 colours to distinguish experience:
<p class="grey-text"><font color="#a3a3a3">White=1st year </font>
<br><font color="green">Green=2nd year</font>
<br><font color="blue">Blue=3rd year</font>
<br><font color="purple">Purple=4th year</font>
<br><font color="#baba00">Yellow=5th year</font>
<p class="grey-text">What I also included was clear pictures of the player's faces, as well as a stick icon that pointed to the left or right based on their handedness.
<p class="grey-text">I also included a logo in the top right corner for each player to indicate if they had played Major Junior before.
<p class="grey-text">I also added a 'salute' icon for players who had been drafted.
<br>All the coaching staff was included, and their overall record and important stats like powerplay percentage were also placed on the right side.
<p class="grey-text">The depth charts took about the same time as it normally would for me to research and scout a team before a game, but now, I had an image I could visualize all the information on, organized in a way that made sense, and had something I could hand out to players before games to give them a quick snapshot of their organization.
</div>
</div>
</div></div>
<!-- Grid column -->
<!-- /* The footer goes here. It includes copyright info, my name, and links to social accounts. /* --->
<footer class="page-footer font-small blue accent-1">
<!-- / * Copyright / * -->
<div class="footer-copyright text-center py-3">© 2019
<a href="http://www.davewhiffen.com/"> Dave Whiffen</a> /
<!-- / * Instagram Button / * -->
<a href="http://www.instagram.com/davewhiffen">
<i class="fab fa-instagram fa-sm pr-2" aria-hidden="true"></i></a>
<!-- / * Twitter Button / * -->
<a href="http://www.twitter.com/davewhiffen">
<i class="fab fa-twitter fa-sm pr-2" aria-hidden="true"></i></a>
<!-- / * LinkedIn Button / * -->
<a href="https://www.linkedin.com/in/davewhiffen/">
<i class="fab fa-linkedin fa-sm pr-2" aria-hidden="true"></i></a> /
<!-- YouTube Button -->
<a href="https://www.youtube.com/channel/UCalnmWdCEfm03zwgcRiEUXw/">
<i class="fab fa-youtube fa-sm pr-2" aria-hidden="true"></i></a>
<!-- Vimeo -->
<a href="https://vimeo.com/davewhiffen">
<i class="fab fa-vimeo fa-sm pr-2" aria-hidden="true"></i></a>
<!-- Twitch Button -->
<a href="http://www.twitch.tv/davewhiffen">
<i class="fab fa-twitch fa-sm pr-2" aria-hidden="true"></i></a> /
<!-- Email Link -->
<a href="mailto:[email protected]">
<i class="far fa-envelope fa-sm pr-2" aria-hidden="true"></i></a>
<!-- Telephone Link-->
<a href="tel:416-996-8183">
<i class="fas fa-phone fa-sm pr-2" aria-hidden="true"></i></a>
</div>
</button></div>
</footer>
<!-- / * End of Footer / * -->
<!-- SCRIPTS -->
<!-- JQuery -->
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<!-- Bootstrap tooltips -->
<script type="text/javascript" src="js/popper.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript" src="js/mdb.js"></script>
</body>
</html>