-
Notifications
You must be signed in to change notification settings - Fork 0
/
monster-calendar.html
248 lines (243 loc) · 19.4 KB
/
monster-calendar.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
<!DOCTYPE html>
<html data-bs-theme="light" lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<title>MONSTER CALENDAR</title>
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Bai+Jamjuree:200,200i,300,300i,400,400i,500,500i,600,600i,700,700i">
<link rel="stylesheet" href="assets/fonts/fontawesome-all.min.css">
<link rel="stylesheet" href="assets/fonts/font-awesome.min.css">
<link rel="stylesheet" href="assets/fonts/fontawesome5-overrides.min.css">
<link rel="stylesheet" href="assets/css/aos.min.css">
<link rel="stylesheet" href="assets/css/Footer-Dark.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.8.2/css/lightbox.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.3.1/css/swiper.min.css">
<link rel="stylesheet" href="assets/css/Lightbox-Gallery.css">
<link rel="stylesheet" href="assets/css/Simple-Slider-swiper.min.css">
<link rel="stylesheet" href="assets/css/Simple-Slider.css">
<link rel="stylesheet" href="assets/css/styles.css">
<link rel="stylesheet" href="assets/css/typewriter.css">
<link rel="stylesheet" href="assets/css/untitled.css">
</head>
<body>
<nav class="navbar text-sm-center text-md-center navbar-light">
<div class="container-fluid"><a class="navbar-brand" href="index.html"><img id="logo" src="assets/img/logo2021.svg"></a><button data-bs-toggle="collapse" class="navbar-toggler" data-bs-target="#navcol-1" data-toggle="collapse" data-target="#navcol-1"><span class="sr-only">Toggle navigation</span><span class="text-sm-center navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" id="navcol-1">
<ul class="navbar-nav mx-auto">
<li class="nav-item text-center" style="margin-right:10px;"></li>
<li class="nav-item text-center" style="margin-right:10px;"><a class="nav-link" href="about.html">ABOUT</a></li>
<li class="nav-item text-center" style="margin-right:10px;"><a class="nav-link" href="resume.html">RESUME</a></li>
<li class="nav-item text-center" style="margin-right:10px;"><a class="nav-link text-center" href="aq-foreign-policy-snapshot.html">FOREIGN_POLICY_SNAPSHOT</a></li>
<li class="nav-item text-center" style="margin-right:10px;"><a class="nav-link text-center" href="americas-quarterly.html">AMERICAS_QUARTERLY</a></li>
<li class="nav-item text-center" style="margin-right:10px;"><a class="nav-link text-center" href="atlantic-council-brochure.html">ATLANTIC_COUNCIL_BROCHURE</a></li>
<li class="nav-item text-center" style="margin-right:10px;"><a class="nav-link text-center" href="atlantic-council.html">ATLANTIC_COUNCIL</a></li>
<li class="nav-item text-center" style="margin-right:10px;"><a class="nav-link text-center" href="teendatingabuse.html">TEEN_DATING_ABUSE</a></li>
<li class="nav-item text-center" style="margin-right:10px;"><a class="nav-link text-center" href="city-magazine.html">CITY_MAGAZINE</a></li>
<!---------------- HIDE POSTCARD & TAROT FOR NOW
<li class="nav-item text-center" style="margin-right:10px;"><a class="nav-link" href="postcards-home.html">POSTCARDS</a></li>
<li class="nav-item" style="margin-right:10px;"><a class="nav-link text-center" href="tarotcards-home.html">TAROT</a></li>
------------------------------>
<li class="nav-item" style="margin-right:10px;"><a class="nav-link text-center" href="creative-coding.html">CREATIVE_CODING</a></li>
<li class="nav-item" style="margin-right:10px;"><a class="nav-link text-center" href="monster-calendar.html">MONSTER_CALENDAR</a></li>
<li class="nav-item" style="margin-right:10px;">
<div class="row justify-content-center no-gutters">
<div class="col-2 col-lg-1 text-right"><a class="text-center" href="https://www.instagram.com/anaisgonzalezdesign/" target="_blank"><i class="fa fa-instagram scaleicon"></i></a></div>
<div class="col-2 col-lg-1 text-center"><a class="text-center" href="mailto:[email protected]" target="_blank"><i class="fa fa-envelope-o scaleicon"></i></a></div>
<div class="col-2 col-lg-1 text-left"><a class="text-center" href="https://www.linkedin.com/in/anais-gonzalez-254483212/" target="_blank"><i class="fa fa-linkedin scaleicon"></i></a></div>
</div>
</li>
</ul>
</div>
</div>
</nav>
<div class="container-fluid" style="padding-right:0px;padding-left:0px;margin-bottom:60px;">
<div class="row justify-content-center justify-content-lg-center justify-content-xl-center" style="margin-right:0px;margin-left:0px;">
<div class="col-sm-12 col-md-10 col-lg-6 col-xl-7 text-center header-col">
<h1 class="text-center" id="pagetitle" style="margin-bottom:0px;">MONSTER CALENDAR</h1>
<p class="brief-text">A monster-themed calendar made exclusively out of typography.<br></p>
</div>
<div class="col-md-12 col-lg-12" style="padding:0px 0px;margin:0px;"><img src="assets/img/calendar/calendar-mockup1b.jpg"></div>
</div>
</div>
<div class="container-fluid nopad topspace topspacecont">
<div class="row justify-content-center nopad">
<div class="col-sm-11 col-md-10 col-lg-3 col-xl-3 text-right">
<h3 class="text-center text-lg-left text-xl-left" style="padding-bottom:20px;">CONCEPT</h3>
<p class="text-left" style="margin-top:0px;margin-bottom:0px;">For the project, we had to think of a theme that could function across all twelve months. Every month had to be a sub-category of the overall theme and be broken down further into four weeks, followed by seven pages for the days of a specific week. My calendar theme was monsters from myths/folklore, so each month shows a different type of monster, each week is a different monster in that specific category, and each day of the week depicts the progression of that monster's story from beginning to end.<br></p>
</div>
<div class="col-sm-auto col-md-10 col-lg-6 col-xl-6 offset-xl-0"><img src="assets/img/calendar/calendarmonths-year.jpg"></div>
</div>
</div>
<div class="container-fluid nopad topspacecont">
<div class="row justify-content-center nopad">
<div class="col-sm-auto col-md-10 col-lg-8 col-xl-7 align-self-lg-end text-xl-right">
<h3 class="text-center" style="padding-bottom:20px;">MONTHS</h3>
<div class="row">
<div class="col" style="text-align:left;">
<p class="text-left" style="padding-top:0px;">There is a single page for each month and each month is dedicated to a different category of monsters. For example, May is for Vampires, July is for Bogeymen, and September is for Demons. Each month could only be illustrated using one letter and once we used that letter, it couldn't be reused for another month. I specifically used the letter Y for the entire month of July. When I think of a Bogeyman, I think of a monster lurking under your bed while you're sleeping, so that's what I tried to depict here. As a bonus, every month page also includes an icon key to show what activities are occurring throughout the month (birthdays, resting days, laundry days, etc.)<br></p>
</div>
</div>
</div>
<div class="col-sm-auto col-md-9 col-lg-6 col-xl-6 text-center nopad" style="padding-left:15px;padding-right:15px;"><img src="assets/img/calendar/calendarmonths-july.jpg"></div>
<div class="col-sm-auto col-md-11 col-lg-3 col-xl-3 offset-0 text-xl-right">
<div class="row justify-content-center nomarg">
<div class="col-md-10 col-lg-12 col-xl-auto topspace" style="text-align:left;padding:0px;"><img src="assets/img/calendar/calendarmonths-may.jpg"></div>
</div>
<div class="row justify-content-center nomarg" style="margin-top:30px;">
<div class="col-md-10 col-lg-12 topspace" style="padding:0px;"><img src="assets/img/calendar/calendarmonths-sept.jpg"></div>
</div>
</div>
</div>
</div>
<div class="container-fluid nopad topspacecont">
<div class="row justify-content-center nopad">
<div class="col-sm-auto col-md-8 col-lg-8 col-xl-7 text-xl-right">
<h3 class="text-center" style="padding:20px;">WEEKS</h3>
<p class="text-left" style="padding-top:0px;padding-bottom:0;">There are four pages, one page for each week of the month. Each week depicts a different monster that fits the overall theme of the month. Since July is under the Bogeymen theme, each week of this month has a typographic illustration of a bogeyman.</p>
</div>
</div>
<div class="row justify-content-center nopad">
<div class="col-sm-auto col-md-5 col-lg-5 col-xl-5 text-center"><img src="assets/img/calendar/bogeyweeks1.jpg">
<div class="row">
<div class="col" style="text-align:left;">
<h5>WEEK 1</h5>
<p style="padding-top:0px;"><span class="underline">Name:</span> Mètminwi<br><span class="underline">Origin:</span> Haitian<br><span class="underline">Description:</span> A giant man, over two stories tall, with thin stilt-like legs and matching arms. He roamed the streets at night looking for people who stayed out too late, scooping them up and taking them away forever.<br></p>
</div>
</div>
</div>
<div class="col-sm-auto col-md-5 col-lg-5 col-xl-5 text-center topspace"><img src="assets/img/calendar/bogeyweeks2.jpg">
<div class="row">
<div class="col" style="text-align:left;">
<h5>WEEK 2</h5>
<p style="padding-top:0px;"><span class="underline">Name:</span> Kawkaw<br><span class="underline">Origin:</span> Malta<br><span class="underline">Description:</span> A slimy creature that roamed the streets of Malta at night, tracking people who had misbehaved by the smell of their guilt. He would use his form to squeeze into their homes through cracks or open spaces to torment them through the night or kidnap them away to an unknown land. <br></p>
</div>
</div>
</div>
</div>
<div class="row justify-content-center nopad">
<div class="col-sm-auto col-md-5 col-lg-5 col-xl-5 text-center topspace"><img src="assets/img/calendar/bogeyweeks3.jpg">
<div class="row">
<div class="col" style="text-align:left;">
<h5>WEEK 3</h5>
<p style="padding-top:0px;"><span class="underline">Name:</span> Bubák<br><span class="underline">Origin:</span> Czech/Polish<br><span class="underline">Description:</span> A scarecrow-like figure that finds people out in the night and shoves them in his bag, taking them away in a cart pulled by giant cats, never to be seen again. He often lures his victims in by imitating a child crying and grabs them when they come to investigate. During a full moon, he weaves clothes made from the souls of those he has captured.<br></p>
</div>
</div>
</div>
<div class="col-sm-auto col-md-5 col-lg-5 col-xl-5 text-center topspace"><img src="assets/img/calendar/bogeyweeks4.jpg">
<div class="row">
<div class="col" style="text-align:left;">
<h5>WEEK 4</h5>
<p style="padding-top:0px;"><span class="underline">Name:</span> Nargun<br><span class="underline">Origin:</span> Australia (Aboriginal)<br><span class="underline">Description:</span> A large rock creature impervious to weaponry that kidnapped children wandering alone at night. It lived in a nearby cave that was sacred to the Gunaikurnai tribes, who used the cave for rituals of initiation and maturation.<br></p>
</div>
</div>
</div>
</div>
</div>
<div class="container-fluid nopad topspacecont">
<div class="row justify-content-center nopad">
<div class="col-md-8 col-lg-8 col-xl-7">
<h3 class="text-center" style="padding:20px;">DAYS</h3>
<p class="text-left" style="padding-top:0px;padding-bottom:0px;">Each week is then broken down into seven days in which I depict the monster of the week's origin story. In this case, I expanded upon Week 3 of the Bogeymen Month, which belongs to the Bubák. Starting on Monday and ending on Sunday, each page is a progression of that monster's story. </p>
</div>
</div>
<div class="row justify-content-center nopad">
<div class="col-sm-auto col-md-5 col-lg-5 col-xl-4 text-center"><img src="assets/img/calendar/bogeydaysfinal1(img)1.jpg">
<div class="row">
<div class="col">
<p class="caption">DAY 1<br>The Bubák hides within the crops and cries out loudly like a child in distress in order to lure in its victims.<br></p>
</div>
</div>
</div>
<div class="col-sm-auto col-md-5 col-lg-5 col-xl-4 text-center topspace"><img src="assets/img/calendar/bogeydaysfinal1(img)2.jpg">
<div class="row">
<div class="col">
<p class="caption">DAY 2<br>A little boy walking nearby hears the noise and turns around in curiosity.<br></p>
</div>
</div>
</div>
</div>
<div class="row justify-content-center nopad">
<div class="col-sm-auto col-md-5 col-lg-5 col-xl-4 text-center"><img src="assets/img/calendar/bogeydaysfinal1(img)3.jpg">
<div class="row">
<div class="col">
<p class="caption">DAY 3<br>The boy runs into the corn field to try to find the "crying baby."<br></p>
</div>
</div>
</div>
<div class="col-sm-auto col-md-5 col-lg-5 col-xl-4 text-center topspace"><img src="assets/img/calendar/bogeydaysfinal1(img)4.jpg">
<div class="row">
<div class="col">
<p class="caption">DAY 4<br>The Bubák sneaks up behind the unsuspecting boy, ready to capture him.<br></p>
</div>
</div>
</div>
</div>
<div class="row justify-content-center nopad">
<div class="col-sm-auto col-md-4 col-lg-3 col-xl-3 offset-md-1 text-center">
<p class="text-left" style="padding-top:0px;">In order to differentiate the day pages from the week pages, I decreased the size of "July 2024", labeled each day, and lowered the opacity of each illustration so that they look gray instead of black. Each page also contains time stamps for every hour from 8AM to 8PM so that people can write down their schedule for the day if they want to.</p>
</div>
<div class="col-sm-auto col-md-5 col-lg-5 col-xl-4 text-center topspace"><img src="assets/img/calendar/bogeydaysfinal1(img)5.jpg">
<div class="row">
<div class="col">
<p class="caption">DAY 5<br>The Bubák reveals itself and reaches out to grab the now frightened boy.<br></p>
</div>
</div>
</div>
</div>
<div class="row justify-content-center nopad">
<div class="col-sm-auto col-md-5 col-lg-5 col-xl-4 text-center"><img src="assets/img/calendar/bogeydaysfinal1(img)6.jpg">
<div class="row">
<div class="col">
<p class="caption">DAY 6<br>The child is stuffed into a sack and tries to claw himself out of the bag, unable to escape.<br></p>
</div>
</div>
</div>
<div class="col-sm-auto col-md-5 col-lg-5 col-xl-4 text-center topspace"><img src="assets/img/calendar/bogeydaysfinal1(img)7.jpg">
<div class="row">
<div class="col">
<p class="caption">DAY 7<br>The Bubák puts the sack with the kid in his carriage and rides away into the night.<br></p>
</div>
</div>
</div>
</div>
</div>
<div class="container-fluid nopad topspacecont">
<div class="row justify-content-center nopad">
<div class="col-sm-auto col-md-10 col-lg-10 col-xl-10 text-xl-right">
<h3 class="text-center">MOCKUPS</h3>
</div>
</div>
<div class="row justify-content-center nopad">
<div class="col-sm-auto col-md-10 col-lg-10 col-xl-6 text-center" style="margin-top:30px;"><img src="assets/img/calendar/calendar-mockup1c.jpg"></div>
<div class="col-sm-auto col-md-10 col-lg-10 col-xl-4 text-center" style="margin-top:30px;"><img src="assets/img/calendar/calendar-mockup3.jpg"></div>
</div>
<div class="row justify-content-center nopad">
<div class="col-sm-auto col-md-10 col-lg-10 col-xl-4 text-center" style="margin-top:30px;"><img src="assets/img/calendar/calendar-mockup5b.jpg"></div>
<div class="col-sm-auto col-md-10 col-lg-10 col-xl-6 text-center" style="margin-top:30px;"><img src="assets/img/calendar/calendar-mockup7.jpg"></div>
</div>
</div>
<div class="footer-dark" style="margin-top:60px;background:black;">
<div class="row text-center nopad">
<div class="col"><a href="#"><i class="fas fa-arrow-up" style="color:rgb(255,255,255);"></i></a></div>
</div>
<footer>
<div class="container">
<div class="row">
<div class="col item social" style="margin-top:9px;"><a href="https://www.instagram.com/anaisgonzalezdesign/"><i class="fab fa-instagram"></i></a><a href="mailto:[email protected]"><i class="far fa-envelope"></i></a><a href="https://www.linkedin.com/in/anais-gonzalez-254483212/"><i class="fab fa-linkedin-in"></i></a></div>
</div>
<p class="copyright" style="color:rgb(255,255,255);">Anais Gonzalez © 2024</p>
</div>
</footer>
</div>
<script src="assets/js/jquery.min.js"></script>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/js/aos.min.js"></script>
<script src="assets/js/bs-init.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.8.2/js/lightbox.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.3.1/js/swiper.jquery.min.js"></script>
<script src="assets/js/Simple-Slider-swiper.jquery.min.js"></script>
<script src="assets/js/Simple-Slider.js"></script>
<script src="assets/js/typewriter.js"></script>
</body>
</html>