/
collaging.html
143 lines (130 loc) · 4.96 KB
/
collaging.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
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<title>Collaging+Breakfast: Making art with friends</title>
<!-- Include jQuery -->
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'></script>
<!-- PJ5.JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/p5.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/addons/p5.dom.min.js"></script>
<!-- Bootstrap core CSS -->
<link href="bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- My CSS -->
<link href="css/main2.css" type="text/css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Droid+Sans+Mono" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=IBM+Plex+Mono: 400, 400i" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=IBM+Plex+Sans: 400, 400i" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Karla" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Playfair+Display:700, 700i, 900" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Montserrat:600" rel="stylesheet">
</head>
<!-- **************** END HEAD *********************** -->
<div class="navbar-doyung">
<a href="index.html" class="navbar-link"><p class="navbar-heading">< Home</p></a>
</div>
<div class="header-wrapper" style="background-color: #564A7C">
<h1>Collaging + Breakfast: Making Art with Friends</h1>
</div>
<div class="body-wrapper">
<p id="quote-style">"how old do you have to be to make a bad drawing?" </br> - Lynda Barry
</p>
</br>
</br>
</br>
</br>
<p id="regular-text"> Lynda Barry's (<a href ="https://www.drawnandquarterly.com/author/lynda-barry" target="_blank">one of my favorite cartoonists</a>) question is something I've wondered for a while. I've seen people quick to declare that they "can't draw" or that they are "not an artist." I've met plenty of educators who are champions of lifelong learning who will not dare to draw a picture - the trauma of being told a drawing is "bad" runs deep.</p>
<br>
<p id="regular-text"> I've found that collaging is an activity that feels lower stakes, and a much more tactile (ripping, gluing, riffling, to name a few). I've been hosting "Collaging + Breakfast" weekend sessions semi-regularly, and it's been a great way to get a big group of friends doing art who might otherwise not be.
</p>
<img src="Images/collage/scene.jpg" class="content-photo-med">
<p id="photo-caption">A wonderful mess.</p>
<br>
<p id="regular-text"> To run your own "Collaging + Breakfast" with your friends, you'll need:
<br> - funny paper (lined, dotted, grid, colored)
<br> - old magazines, newspapers, packaging
<br> - funny tape (patterned, duct, scotch)
<br> - breakfast food (quiche is my go-to)
<br> - scissors
<br> - gluesticks
<br> - nice music
</p>
<br>
<p id="regular-text"> Here's a sample of collages that were made:</p>
<img src="Images/collage/sarah.jpeg" class="content-photo-small">
<p id="photo-caption">By: Sarah </p>
<br>
<img src="Images/collage/saral.jpg" class="content-photo-small">
<p id="photo-caption">By: Sara</p>
<br>
<img src="Images/collage/julianne.jpg" class="content-photo-small">
<p id="photo-caption">By: Julianne</p>
<br>
<img src="Images/collage/german.jpeg" class="content-photo-small">
<p id="photo-caption">By: Doyung</p>
<br>
<br>
<br>
</div>
<!--Calling the P5.JS script:-->
<script src="javascript/collagesketch.js"></script>
</body>
<style>
@media only screen and (max-width: 780px) {
#regular-text {
font-size: 16px;
}
.section-header {
font-size: 20px;
}
.content-photo-med {
width: 100%;
}
.content-photo-small {
width: 100%;
}
.content-photo-big {
width: 100%;
}
#photo-caption {
font-size: 12px;
margin-left: 10%;
margin-right: 10%;
}
#photo-caption-small {
font-size: 12px;
margin-left: 15%;
margin-right: 15%;
}
h1 {
font-size: 34px;
font-family: 'Montserrat';
font-weight: bolder;
}
.section-header {
font-family: 'Montserrat';
font-weight: bold;
}
#quote-style {
font-family: 'Montserrat';
font-weight: bold;
font-style: italic;
}
}
@media only screen and (max-width: 650px) {
#regular-text {
font-size: 14px;
}
.section-header {
font-size: 18px;
}
h1 {
font-size: 24px;
}
}
</style>
<!--Different sized windows!-->