-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
341 lines (318 loc) · 16.5 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
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
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--TITLE IS DISPLAYED IN BROWSER TAB-->
<title>SewBugTips</title>
<!--THE META DESCRIPTION INFO IS USED IN SEARCH ENGINES (according to developer.mozilla.org)-->
<meta name="author" content="Kim Wolf">
<meta name="description" content="Sew Bug Tips aims to provide sewing information and tips to beginners.">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--ADD GOOGLE FONTS-->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Cookie&family=Lato:ital@0;1&display=swap" rel="stylesheet">
<!--ADDS FAVICON TO TAB-->
<link rel="icon" type="image/jpg" href="images/bug.jpeg">
<!--ADDS FONT AWESOME CODE-->
<script src="https://kit.fontawesome.com/fab5d2891a.js" crossorigin="anonymous"></script>
<!--ADDS STYLES/CSS TO SITE-->
<link rel="stylesheet" href="styles/main.css">
<!--ADDS JAVASCRIPT CODE-->
<script src="script.js" defer></script>
</head>
<body>
<!--SITE NAVIGATION BAR-->
<nav class="navbar">
<div class="brand-title">SewBugTips
</div>
<a href="#" class="toggle-button">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</a>
<div class="navbar-links">
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#expo">Expo</a></li>
<li><a href="#about">About</a></li>
<li><a href="#projects">Projects</a></li>
<li><a href="#precuts">Fabric PreCuts</a></li>
<li><a href="#pre_images">Precut Images</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
</nav>
<section id="home">
<div class="home-section-container">
<div class="hero">
<img src="images/sewbugtips_hero.png"alt="Sew Bug Tips logo" title="SewBugTips logo">
</div>
<h1>Welcome to Sew Bug Tips!</h1>
<span> Are you looking for sewing tips? Or maybe a new hobby?
Do you have an interest in sewing, yet unsure of sewing terminology?
Whatever your interests, I am certain you have reached the right place on <strong>SewBugTips</strong>!
A site created for crafters of all ages and skills. There is <em>sew </em>little time! <em>Sew </em>let's get started!
</div>
</section>
<section id="expo">
<div class="expo-container">
<div class="expo-content">
<h2>Expo</h2><br>
<span>
<a href="https://www.sewingexpo.com/" rel="noopener" target="_blank"><img src="images/expo.png" alt="ORIGINAL Sewing & Quilt EXPO"/></a>
</span>
<br>
<span><em><a href="https://www.sewingexpo.com/" rel="noopener" target="_blank"> ORIGINAL Sewing & Quilt EXPO</a></em>
is one of my favorite websites for regional events. Each EXPO offers classes, quilts on display, the latest in sewing,
quiltmaking and embroidery. Did I also mention they offer... Shopping! Shopping! and more Shopping!
<em><a href="https://www.sewingexpo.com/Events/Cincinnati-OH" rel="noopener" target="_blank"> Cincinnati, OH EXPO</a></em>
is the closest event to me and it is scheduled for October 13, 14, 15, 2022. If you are in Greater Cincinnati/Northern Kentucky/Indiana - TriState area I encourage you to attend.
I am so excited about the event that I created a countdown timer!
</span>
</div>
</div>
</section>
<section id="countdown">
<div class="countdown-container">
<div class="countdown-content">
<h4><a href="https://www.sewingexpo.com/Events/Cincinnati-OH" rel="noopener" target="_blank">Cincinnati, OH EXPO </a> - Doors open at 9:00 a.m. on October 13, 2022</h4>
<span>
<div id="clockdiv">
<div>
<span class="days"></span>
<div class="smalltext">Days</div>
</div>
<div>
<span class="hours"></span>
<div class="smalltext">Hours</div>
</div>
<div>
<span class="minutes"></span>
<div class="smalltext">Minutes</div>
</div>
<div>
<span class="seconds"></span>
<div class="smalltext">Seconds</div>
</div>
</div>
</span>
</div>
<br>
</div>
</section>
<section id="about">
<div class="about-section-container">
<div class="about-content">
<h2>About Me</h2><br>
<span>My name is <em>Kim Wolf</em>, and I am a marketing, product management and technology leader who is learning to code
HTML, CSS and JavaScript. I have 20+ years of professional experience in the transportation and
distribution industry, successfully executing projects in various areas including e-Commerce, product marketing, product
management and pricing. To learn more about my professional experiences, view my <em><a href="https://www.linkedin.com/in/kimberly-wolf-pmp%C2%AE-42816b6b/" rel="noopener" target="_blank">
LinkedIn profile</a>.</em></span>
<span>I consider myself a life-long learner who is always tackling new projects - from earning a Project Management
Professional (PMP®) certification in June 2021, to enrolling in <a href="https://codekentucky.org/#:~:text=Code%20Kentucky%20is%20a%20brand%20new%20program%20for,and%20a%20strong%20interest%20in%20learning%20technology%20skills."
rel="noopener" target="_blank"><strong>Code Kentucky</strong></a> in September 2021. For my first front-end web development capstone project, I stitched together my sewing hobby and another favorite, my Beetle Bug, to create an informative sewing tips site.
Now you know the story of why <strong>SewBugTips</strong> was created.</span>
<i><p>Did the Bug change directions?</p></i>
<figure>
<img src="images/my-bug-400.jpg" alt="My Volkswagen Beetle" title="My Volkswagen Beetle."/>
<figcaption>My Volkswagen Beetle</figcaption>
</figure>
</div>
<br>
</div>
</section>
<section id="projects">
<div class="projects-section-container">
<div class="projects-content">
<h2>My Projects</h2><br>
<span>In my free time, I enjoy sewing and quilt piecing. Below are some pictures of my recent work. Each image includes
the fabric precut used to create the sewing project. Would you like to know more about fabric precut
terminology? Select <strong><a href="#precuts">FABRIC PRECUTS</a></strong> here or from top navigation.</span>
<br>
<br>
<p><em>Hover over the image for a closer look!</em></p>
<div class="flex-container-projects">
<div>
<img src="images/irish-change-400.jpg"alt="Irish Change quilt" title="Irish Change quilt pattern"/>
<h4>Quilt Pattern: Irish Change</h4>
<p>Made from layer cake and yardage</p><br>
</div>
<div>
<img src="images/two-step-400.jpg"alt="Two Step quilt" title="Two step quilt pattern"/>
<h4>Quilt Pattern: Two Step</h4>
<p>Made from jelly roll and yardage</p><br>
</div>
<div>
<img src="images/jelly-roll-400.jpg"alt="Jelly Roll quilt" title="Jelly Roll quilt pattern"/>
<h4>Quilt Pattern: Jelly Roll</h4>
<p>Made from jelly roll</p><br>
</div>
<div>
<img src="images/applique-quilt-400.jpg" alt="Flower petal lap quilt" title="Flower petal lap quilt"/>
<h4>Lap quilt - applique</h4>
<p>Made from mini-charm pack</p><br>
</div>
<div>
<img src="images/sunflowers_scalloped_edge-400.jpg" alt="Sunflower quilt" title="Sunflower quilt with scalloped edges"/>
<h4>Quilt with scallop edges</h4>
<p>Made from charm pack</p><br>
</div>
<div>
<img src="images/cross-body-bag-400.jpg" alt="Cross Body purse" title="Cross Body Bag"/>
<h4>Cross body bag</h4>
<p>Made from yardage</p><br>
</div>
</div>
</div>
<br>
</div>
</section>
<section id="precuts">
<div class="precut-section-container">
<h2>Fabric PreCuts</h2><br>
<span>PreCut samplers are bundles of coordinating quilting fabrics, cut to standardized sizes, and sold as a single unit.
They are easy to use and also a great way to sample an entire fabric collection. View both a reference table and fabric
cut outline from yardage below.</span>
<div class="fabric-table-container">
<div id="refTbl">
<table>
<thead>
<tr>
<th>FABRIC TYPE</th>
<th>INCHES</th>
</tr>
</thead>
<tbody>
<tr>
<td>Honey Buns</td>
<td>1.5 x 42</td>
</tr>
<tr>
<td>Jelly Rolls</td>
<td>2.5 x 42</td>
</tr>
<tr>
<td>Mini Charm Squares</td>
<td>2.5 x 2.5</td>
</tr>
<tr>
<td>Charm Squares</td>
<td>5 x 5</td>
</tr>
<tr>
<td>Layer Cakes</td>
<td>10 x 10</td>
</tr>
<tr>
<td>Fat Quarters</td>
<td>18 x 22</td>
</tr>
<tr>
<td>Half Yard</td>
<td>18 x 44</td>
</tr>
<tr>
<td>One Yard</td>
<td>36 x 44</td>
</tr>
</tbody>
</table>
</div>
<img src="images/fabric-cuts.JPG" alt="Fabric Cut dimensions image" title="Fabric Cut Outline">
</div>
<br>
<div>
<span>Use our <a href="conversion.html">CONVERSION TOOL</a> to convert inches to centimeters (cm).
</span>
</div>
</div>
</section>
<section id="pre_images">
<div class="pre_images-section-container">
<div class="pre_images-content">
<h2>PRECUT IMAGES</h2><br>
<span>Although fabric precut names may not sound like cuts of fabric, they do sound delicious! From honey buns and jelly rolls to layer cakes and fat quarters <em>(there is some irony
with the last name in the list)</em>, browse some beautiful fabric images with precut names and definitions.</span>
<div id="preCutItems" class="flexbox-container-precuts">
</div>
</div>
<script src="preCuts.js"></script>
</script>
</section>
<!--CONTACT US FORM-->
<section id="contact">
<div class=contact-us-section-container>
<div class="contact-container">
<div class="form">
<div class="contact-info">
<h3 class="title">Have a question?</h3>
<br>
<br>
<img class="contact-img" src="images/quilted-question-mark-sm.jpg" class="contact-image" alt="Contact us image" title="Question?">
<br>
<br>
<p">
Send a message via our contact form!
<p></p>
<br>
<p">
<small>
<i>(Note: Form includes JavaScript code to display name and email only. Not currently collecting info for follow-up.)</i></small></p>
</p">
</p">
</div>
<div class="contact-form">
<span class="circle one"></span>
<span class="circle two"></span>
<form action="thanks.html" autocomplete="off" id="contactUsForm" name="contactUsForm"
onsubmit="contactUsFormValidate('contactUsForm')">
<h3 class="title">Contact us</h3>
<div class="input-container">
<input type="text" name="name" class="input" id="contactName" placeholder ="Name required">
<span>Name</span>
</div>
<div class="input-container">
<input type="email" name="email" class="input" id="contactEmail" placeholder ="Email required">
<span>Email</span>
</div>
<div class="input-container">
<input type="tel" name="phone" class="input" id="contactPhone" placeholder ="Phone required" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" required/>
<span>Phone</span>
</div>
<div class="input-container textarea">
<textarea name="message" class="input"></textarea>
<span>Message</span>
</div>
<input type="submit" value="Send" class="btn"/>
<br>
<br>
</form>
</div>
</div>
</div>
</div>
</section>
<footer>
<div class="page-bottom">
<br>
<p><em>SewBugTips is designed and managed by Kim Wolf</em></p>
<br>
<ul class="footer-icons">
<a href="https://www.linkedin.com/in/kimberly-wolf-pmp%C2%AE-42816b6b/"
rel="noopener" target="_blank">
<img src="images/linkedin-logo-50.jpg" title="Kim Wolf LinkedIn"
alt="LinkedIn logo">
<a href="https://github.com/KimBug29/SewBugTips2.git" rel="noopener" target="_blank">
<img src="images/GitHub-Mark-50.png" title="Kim Wolf GitHub"
alt="GitHub logo">
</ul>
<br>
<p><small>©2022 SewBugTips, All Rights Reserved.</small></p>
<br>
</div>
</footer>
</body>
</html>