-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
292 lines (281 loc) · 14.6 KB
/
index.html
File metadata and controls
292 lines (281 loc) · 14.6 KB
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--Meta tags for search engines-->
<meta name="description"
content="Creative Corner. Community for budding artists in Stillorgan, Dublin 18, Ireland. Quilling, Acrylics, Punch Needle,
Alcohol Markers. Stillorgan Village, Kilmacud Crokes, Glenalbyn House and the Village Cafe ">
<meta name="keywords" content="creative corner, art, crafts club, artists, Ireland, Dublin, creativity, community events, workshops">
<!--Title-->
<title>Creative Corner</title>
<!--Favicon-->
<link rel="apple-touch-icon" sizes="180x180" href="assets/favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="assets/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="assets/favicon/favicon-16x16.png">
<!--Stylesheet-->
<link rel="stylesheet" href="./assets/css/styles.css">
</head>
<body>
<!--Header-->
<header>
<a href="index.html">
<h1>Creative Corner</h1>
</a>
<input type="checkbox" id="nav-toggle" name="nav-toggle">
<label for="nav-toggle" class="nav-toggle-label"><i class="fa-solid fa-bars-staggered"></i></label>
<nav>
<ul id="menu">
<li><a href="#hero-section">Home</a></li>
<li><a href="#crafts">Crafts</a></li>
<li><a href="#materials">Materials</a></li>
<li><a href="#club-address">Club</a></li>
<li><a href="#signup">Sign Up</a></li>
</ul>
</nav>
</header>
<!--main-->
<main>
<!-- Hero Section-->
<section id="hero-section">
<h2 class="hidden-heading">Hero</h2>
<figure>
<img src="./assets/images/clubhouse.webp" alt="A gallery showing Glenalbyn house, tennis courts and village cafe">
</figure>
<div id="hero-content">
<p>
Hi, Welcome to creative corner. This is a place for all budding artists looking to find their people doing the same craft or
eager to learn new crafts like quilling, cross-stitch, acrylic paintings, alcohol markers, jewellery making, punch needle art or more.
</p>
<p>
I am a passionate art lover who enjoys creative art. I am looking to do some workshops on quilling and cross-stitch. If you are interested
in learning a new art, you can sign-up below on the page.
</p>
</div>
</section>
<!-- Quote-->
<section id="quote">
<div id="quote-text">
<h2>"Crafting is the art of turning ordinary objects into extraordinary things!"</h2>
<span>- Unknown</span>
</div>
</section>
<!-- Crafts Section-->
<section id="crafts">
<div class="card">
<img src="./assets//images/quilling.webp" alt="Mozart portrait made using paper strips , art form called quilling">
<div class="card-text">
<h2>Quilling</h2>
<p>
Quilling, also known as paper filigree, is an art form that involves the use of
strips of paper that are rolled, shaped, and glued together to create decorative designs.
</p>
</div>
</div>
<div class="card">
<img src="./assets//images/cross-stitch.webp" alt="flower design made using thread , art form called cross-stitch">
<div class="card-text">
<h2>Cross-Stitch</h2>
<p>
Cross-stitch is a popular form of counted-thread embroidery in which X-shaped stitches in a tiled pattern are used to form a picture.
It is one of the oldest forms of embroidery and has been found in early medieval works and even in Ancient Egypt.
</p>
</div>
</div>
<div class="card">
<img src="./assets//images/acrylics.webp" alt="flower design made using paints , art form called acrylics">
<div class="card-text">
<h2>Acrylics</h2>
<p>
Acrylic painting is a form of art that uses acrylic paints, which are fast-drying paints made from pigments suspended in an acrylic polymer emulsion.
This type of paint can be diluted with water but becomes water-resistant when dry.
</p>
</div>
</div>
<div class="card">
<img src="./assets//images/punch-needle.webp" alt="coaster designs made using wool , art form called punch-needle">
<div class="card-text">
<h2>Punch Needle</h2>
<p>
Punch needle involves creating loops of thread or yarn on fabric using a tool called a punch needle.
This technique creates a raised, textured design, giving the finished piece a 3D appearance
</p>
</div>
</div>
<div class="card">
<img src="./assets//images/alcohol-marker.webp" alt="watermelon sketch made using alcohol markers">
<div class="card-text">
<h2>Alcohol Marker Illustrations</h2>
<p>
Alcohol marker sketching is a form of drawing and coloring that uses alcohol-based markers. These markers are known for their vibrant colors,
smooth application, and ability to blend seamlessly.
This art form is popular among illustrators, designers, and artists for creating detailed and colorful illustrations.
</p>
</div>
</div>
</section>
<!-- Materials-->
<section id="materials">
<h2 class="heading-h2">Materials</h2>
<p>
Click or hover over the images to check materials required.
</p>
<div id="material-wrapper">
<div class="container">
<img src="./assets/images//quill-tools.webp" alt="tools used for quilling art: scissors, paper strips, quill tool etc">
<div class="overlay">
<div class="overlay-text">
<h3>Quilling Materials</h3>
<ol>
<li>Colored Paper Strips</li>
<li>Quilling Needle</li>
<li>Scissors</li>
<li>Tweezers</li>
<li>Glue</li>
<li>Pins</li>
<li>Crimper</li>
</ol>
</div>
</div>
</div>
<div class="container">
<img src="./assets/images/cross-stitch-tools.webp" alt="tools for cross-stitch: needle, cloth, threads">
<div class="overlay">
<div class="overlay-text">
<h3>Cross Stitch Materials</h3>
<ol>
<li>DMC or Enchor Threads</li>
<li>Needle</li>
<li>Scissors</li>
<li>Wooden Loop</li>
<li>14/16/18 count Aida/Linen</li>
<li>Pattern</li>
</ol>
</div>
</div>
</div>
<div class="container">
<img src="./assets/images/acrylics-tools.webp" alt="tools for acrylics: paints, brushes, canvas, water">
<div class="overlay">
<div class="overlay-text">
<h3>Acrylics Painting Materials</h3>
<ol>
<li>Paint Tubes or Bottles</li>
<li>Paint Brushes</li>
<li>Water</li>
<li>Canvas</li>
<li>A waste cloth</li>
<li>A Palette</li>
</ol>
</div>
</div>
</div>
<div class="container">
<img src="./assets/images/punch-needle-tools.webp" alt="tools for punch needle:wool, needle, cloth, scissors">
<div class="overlay">
<div class="overlay-text">
<h3>Punch Needle Materials</h3>
<ol>
<li>Wool</li>
<li>Punch Needle</li>
<li>Scissors</li>
<li>Wooden Loop</li>
<li>Muslin Cloth</li>
<li>Pins</li>
<li>Tape</li>
</ol>
</div>
</div>
</div>
</div>
</section>
<!-- Club -->
<section id="club-address">
<h2 class="heading-h2">Clubhouse</h2>
<div id="club-info">
<h3>
Glenalbyn House, known as the Clubhouse, is the home of Kilmacud Crokes CLG. The Clubhouse is home to a wide range of facilities which KGSC maintains
</h3>
<p>
Situated in the heart of Stillorgan, and with a large car park, Clubhouse facilities include a Function Room (with fully serviced bar if required), Kilmacs Bar,
meeting rooms of various sizes, a Gym, Glenalbyn Tennis Club with 6 floodlit Tennis Courts, a Snooker Club and Changing Rooms. The crafting workshops once confirmed, will happen
in the function room. There is a small charge to book the room and the room will have to be booked in advance.
</p>
</div>
<div id="address-wrapper">
<p>
Glenalbyn House, Glenalbyn Road
<br>Stillorgan
<br>Co.Dublin, A94 E7K8
<br>Ireland
</p>
<iframe id="map" src="https://shorturl.at/MWiD2" title="Map Location of the Glenalbyn house, A94 E7K8 in Stillorgan" height="350" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>
</section>
<!-- Signup Form-->
<section id="signup">
<form action="https://formdump.codeinstitute.net" method="POST" id="signup-form">
<h2><i class="fa-solid fa-palette"></i> Sign up for Workshops!</h2>
<label for="first-name">First Name</label>
<input type="text" id="first-name" class="text-input" name="first-name" required>
<label for="last-name">Last Name</label>
<input type="text" id="last-name" class="text-input" name="last-name" required>
<label for="email-address">Email Address</label>
<input type="email" id="email-address" class="text-input" name="email-address" required>
<div id="checkboxes">
<p>
What crafts would you be interested in ?
</p>
<div>
<input type="checkbox" name="quilling" id="quilling-checkbox" value="quilling" checked>
<label for="quilling-checkbox">Quilling</label>
</div>
<div>
<input type="checkbox" name="cross-stitch" id="cross-stitch-checkbox" value="cross-stitch">
<label for="cross-stitch-checkbox">Cross Stitch</label>
</div>
<div>
<input type="checkbox" name="acrylics" id="acrylics-checkbox" value="acrylics">
<label for="acrylics-checkbox">Acrylics</label>
</div>
<div>
<input type="checkbox" name="alcohol-markers" id="markers-checkbox" value="alcohol-markers">
<label for="markers-checkbox">Alcohol Markers</label>
</div>
<div>
<input type="checkbox" name="punch-needle" id="punch-checkbox" value="punch-needle">
<label for="punch-checkbox">Punch Needle</label>
</div>
</div>
<textarea name="message" placeholder="Comments" rows="6" cols="24"></textarea>
<input type="submit" class="submit-button" value="Let's Art!">
</form>
</section>
</main>
<!--footer-->
<footer>
<p>
<img src="./assets/favicon/favicon-32x32.png" alt="Creative Corner logo with pencil in a hand">
@2024 Creative Corner | All rights reserved
</p>
<ul id="social-networks">
<li>
<a href="https://www.facebook.com/" target="_blank" rel="noopener"
aria-label="Visit our facebook page ( opens in a new tab)">
<i class="fa-brands fa-facebook"></i>
</a>
</li>
<li><a href="https://instagram.com" target="_blank" rel="noopener"
aria-label="Visit our instagram page (opens in a new tab)"><i class="fa-brands fa-instagram"></i></a></li>
<li><a href="https://linkedin.com" target="_blank" rel="noopener"
aria-label="Visit our linkedin page (opens in a new tab)"><i class="fa-brands fa-linkedin"></i></a></li>
<li><a href="https://x.com" target="_blank" rel="noopener"
aria-label="Visit our X page (opens in a new tab)"><i class="fa-brands fa-x-twitter"></i></a></li>
</ul>
<p>Created with <i class="fa-solid fa-heart"></i> by Henna Singh</p>
</footer>
<!-- Font Awesome kit-->
<script src="https://kit.fontawesome.com/36941e59c7.js" crossorigin="anonymous"></script>
</body>
</html>