-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
98 lines (96 loc) · 3.48 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Title sequences</title>
<style>
body {
display: grid;
justify-content: center;
}
main {
max-width: 800px;
}
img {
max-width: 100%;
}
</style>
</head>
<body>
<main>
<h1>Title sequences</h1>
<p>Recreating title sequences from TV Shows and Movies.</p>
<h2>Ozark</h2>
<img src="ozark/img/screenshot.png" alt="screenshot Ozark title" />
<p>View <a href="ozark/index.html">the demo</a>.</p>
<h2>Better Call Saul</h2>
<img
src="better-call-saul/img/screenshot.png"
alt="demo of Better Call Saul
title"
/>
<p>View <a href="better-call-saul/index.html">the demo</a>.</p>
<h2>Schitts Creek</h2>
<img
src="schitts-creek/gsap/img/screenshot.png"
alt="screenshot of schitts creek title sequence"
/>
<p>
I created 2 versions:
<ol>
<li>A <a href="schitts-creek/css/index.html">CSS version</a>.</li>
<li>A <a href="schitts-creek/gsap/index.html">JavaScript version</a> that features the soundtrack. I used the <a href="https://greensock.com/">Greensock (GSAP)</a> library
for the animation.</li>
</ol>
</p>
<h2>Orange Is The New Black</h2>
<img
src="orange-is-the-new-black/img/screenshot.png"
alt="demo of Orange Is The New Black title sequence"
/>
<p>View <a href="orange-is-the-new-black/index.html">the demo</a>.</p>
<h2>Killing Eve</h2>
<img
src="killing-eve/img/screenshot.png"
alt="demo of Killing Eve title sequence"
/>
<p>View <a href="killing-eve/index.html">the demo</a>.</p>
<h2>The Marvelous Mrs. Maisel</h2>
<img
src="the-marvelous-mrs-maisel/img/screenshot.png"
alt="screenshot of The Marvelous Mrs. Maisel sequence"
loading="lazy"
/>
<p>View <a href="the-marvelous-mrs-maisel/index.html">the demo</a>.</p>
<h2>Upload</h2>
<img
src="upload/img/screenshot.png"
alt="screenshot of Upload title sequence"
loading="lazy"
/>
<p>View <a href="upload/index.html">the demo</a>.</p>
<h2>Stranger Things</h2>
<img src="/stranger-things/img/title-reference.png" alt="stranger things title card">
<p>View <a href="stranger-things/index.html">the demo</a>.</p>
<h2>Jackie Brown</h2>
<img src="/jackie-brown/img/title-reference.png" alt="jackie brown title card">
<p>View <a href="jackie-brown/">the demo</a>.</p>
<h2>Alien</h2>
<img src="/alien/img/title-reference.webp" alt="alien title card">
<p>View <a href="alien/">the demo</a>.</p>
<h2>Cocktail</h2>
<img src="/cocktail/img/result.webp" alt="cocktail title card">
<p>View <a href="cocktail/">the demo</a>.</p>
<h2>North by Northwest</h2>
<img src="/north-by-northwest/img/screenshot.png" alt="alien title card" loading="lazy">
<p>View <a href="north-by-northwest/">the demo</a>.</p>
<h2>The Fall Guy</h2>
<img src="/the-fall-guy/img/screenshot.png" alt="The Fall Guy title card" loading="lazy">
<p>View <a href="the-fall-guy/">the demo</a>.</p>
<h2>Arrested Development</h2>
<img src="/arrested-development/img/reference.png" alt="Arrested Development title card" loading="lazy">
<p>View <a href="arrested-development/">the demo</a>.</p>
</main>
</body>
</html>