-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
145 lines (120 loc) · 7.24 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
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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Breakout Room</title>
<meta name="description" content="Boston University BFA Graphic Design Students 2021">
<meta name="author" content="Chinwe Oparaji">
<link rel="icon" type="image/png" href="../favicon.ico">
<link rel="stylesheet" type="text/css" href="index.css"/>
<link rel="stylesheet" type="text/css" href="./assets/fonts/stylesheet.css"/>
</head>
<body>
<div id="details" class="name">
</div>
<div class="header">
<p class="nav-title">Boston University BFA <br>GD Thesis Show 2021</p>
<div class="statement">
<h2>Breakout Room</h2>
<div class="remove icons"></div>
<div class="about">
<div>
<p>
We can’t imagine seeing each other virtually without also noticing tilted posters,
the abundant (lack of) natural light in peoples’ bedrooms or a garden of grey and red
“mutes” for when we didn’t feel like video chatting. Graphic design has trained
our eyes to notice these imperfect details, which have come to define the best
and only experience we could have with our thesis. These glimpses into our peers’
private lives blur boundaries for our formal spaces, but also cue us into new
learning opportunities that bloom into liminal spaces.
</p>
<p>
Enter our <i>Breakout Room</i>. Stacked two, three, five, or eight ways,
we’d ease into a familiar critique process. Our breakout rooms chip
away at the main lobby’s hierarchical grid, allowing us to intimate a more honest, hybrid classroom.
</p>
<p>
We, as designers, make homes in the iterative and imaginative.
Our class selected chroma green and projector blue to present a glaring
perseverance for celebrating our classmates’ innovative work and “projecting”
community. The ubiquitous green and blue, that we also find in our skies and fields,
echo the physical experience of breaking outside of our Zoom boxes for
renewed hope and inspiration. Unique pixel glyphs—one for each student—illustrate
our respective creative experiences and comforts in this past year and
collectively tether our work to the at-large BFA Thesis Show identity.
</p>
<p>
Our thesis group show—with Lego–like organization—reveals the
relentless relationships we’ve been able to link and revisit in the past year.
When the 33 BFA Graphic Design students graduate this 2021, we’ll realize
that all this time, breaking out means shining together.
</p>
</div>
<div>
<div class="name-list" id="names"></div>
</div>
<div class="smol">
The Boston University BFA Graphic Design Show is a part of the
BU College of Fine Arts School of Visual Arts
<a href="https://breakingout2021.show/">Breaking Out 2021 BFA Thesis Show.</a>
</div>
<div>
855 Commonwealth Gallery<br>
May 6–14, 2021<br>
Instagram: <a href="https://www.instagram.com/bu_graphicdesign/">@bu_graphicdesign</a>
</div>
<div class="smol">
Many thanks to our instructor, <a href="https://mary-yang.com">Mary Yang</a>
and our TA <a href="https://www.tveshah.com">Tvesha Shah</a> and
<a href="https://leahmaldonado.com">Leah Maldonado</a> for the use of GlyphWorld typefaces
</div>
</div>
</div>
</div>
<div id="breakout-room">
<div class="breakout-contain">
<div class="icon" id="1" draggable="true"></div>
<div class="icon" id="2" draggable="true"></div>
<div class="icon" id="3" draggable="true"></div>
<div class="icon" id="4" draggable="true"></div>
<div class="icon" id="5" draggable="true"></div>
<div class="icon" id="6" draggable="true"></div>
<div class="icon" id="7" draggable="true"></div>
<div class="icon" id="8" draggable="true"></div>
<div class="icon" id="9" draggable="true"></div>
<div class="icon" id="10" draggable="true"></div>
<div class="icon" id="11" draggable="true"></div>
<div class="icon" id="12" draggable="true"></div>
<div class="icon" id="13" draggable="true"></div>
<div class="icon" id="14" draggable="true"></div>
<div class="icon" id="15" draggable="true"></div>
<div class="icon" id="16" draggable="true"></div>
<div class="center" draggable="true">
<a href="./poem.html">
<img src="./BreakoutRoom.png"/>
</a>
</div>
<div class="icon" id="17" draggable="true"></div>
<div class="icon" id="18" draggable="true"></div>
<div class="icon" id="19" draggable="true"></div>
<div class="icon" id="20" draggable="true"></div>
<div class="icon" id="21" draggable="true"></div>
<div class="icon" id="22" draggable="true"></div>
<div class="icon" id="23" draggable="true"></div>
<div class="icon" id="24" draggable="true"></div>
<div class="icon" id="25" draggable="true"></div>
<div class="icon" id="26" draggable="true"></div>
<div class="icon" id="27" draggable="true"></div>
<div class="icon" id="28" draggable="true"></div>
<div class="icon" id="29" draggable="true"></div>
<div class="icon" id="30" draggable="true"></div>
<div class="icon" id="31" draggable="true"></div>
<div class="icon" id="32" draggable="true"></div>
<div class="icon" id="33" draggable="true"></div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="index.js"> </script>
</body>
</html>