generated from im-amy-lew/bootstrap-boilerplate
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcontact.html
154 lines (133 loc) · 6.67 KB
/
contact.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
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Additional meta tags -->
<meta name="author" content="Amy L.">
<meta name="description" content="Have questions or comments about the Sacramento Weavers' and Spinners' Guild? Contact us.">
<meta name="keywords" content="contact, guild, sacramento, spinner, spinning, swsg, weaver, weaving">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Lora:wght@400;500;600;700&family=Work+Sans:wght@400&display=swap">
<!-- Favicon -->
<link rel="apple-touch-icon" sizes="180x180" href="./img/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="./img/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="./img/favicon-16x16.png">
<link rel="manifest" href="./img/site.webmanifest">
<!-- Custom CSS styles -->
<link rel="stylesheet" href="./css/styles.css">
<!-- Title -->
<title>Sacramento Weavers' and Spinners' Guild | SWSG | Contact Us</title>
</head>
<body>
<header class="position-sticky top-0 start-0">
<nav class="navbar navbar-expand-lg sticky-top navbar-dark">
<div class="container-fluid">
<a class="navbar-brand" href="index.html">
<img src="./img/icon-light.png" alt="Sacramento Weavers' and Spinners' Guild logo" class="icon">
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span>
<i class="fa-solid fa-bars"></i>
</span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link" href="about.html">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="library.html">Library</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html" active aria-current="page">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<main class="container-fluid">
<section class="container text-center p-3">
<h1 class="heading_1 fw-bold">Contact Us</h1>
<p class="mb-0">
Have questions or comments about SWSG? Please send us a message!
</p>
</section>
<div class="container">
<div class="page_divider col-lg-6 offset-lg-3"></div>
</div>
<section class="container p-3">
<form class="col-lg-6 offset-lg-3" action="https://formspree.io/f/mrgvzzqz" method="POST" name="swsg_contact_form">
<div class="mb-3">
<label for="firstname_input" class="form-label">First Name <span class="accent_2">*</span></label>
<input type="text" class="form-control" id="swsg_firstname_input" name="swsg_firstname_input" required>
</div>
<div class="mb-3">
<label for="lastname_input" class="form-label">Last Name <span class="accent_2">*</span></label>
<input type="text" class="form-control" id="swsg_lastname_input" name="swsg_lastname_input" required>
</div>
<div class="mb-3">
<label for="email_input" class="form-label">Email Address <span class="accent_2">*</span></label>
<input type="email" class="form-control" id="swsg_email_input" name="swsg_email_input" required>
</div>
<div class="mb-3">
<label for="phone_input" class="form-label">Phone Number</label>
<input type="tel" class="form-control" id="swsg_phone_input" name="swsg_phone_input">
</div>
<div class="mb-3">
<label for="subject_input" class="form-label">Subject <span class="accent_2">*</span></label>
<input type="text" class="form-control" id="swsg_subject_input" name="swsg_subject_input" required>
</div>
<div class="mb-3">
<label for="message_input" class="form-label">Message <span class="accent_2">*</span></label>
<textarea class="form-control" id="swsg_message_input" name="swsg_message_input" rows="15" maxlength="1000" required></textarea>
</div>
<div class="d-grid">
<button type="submit" class="btn btn-outline-primary fw-bold">Submit</button>
</div>
<div id="form_help" class="form-text">
<p class="mt-2">
Fields marked with <span class="accent_2">*</span> are required.
</p>
</div>
</form>
</section>
</main>
<footer class="footer light text-center">
<div>
<address>
Sacramento Weavers' and Spinners' Guild<br>
Shepard Garden and Arts Center<br>
3330 McKinley Blvd.<br>
Sacramento, CA 95816
</address>
<p>
Copyright © 2022 Amy Lew
<a href="https://github.com/im-amy-lew" target="_blank" aria-label="Amy Lew's GitHub page" class="link_2">
<i class="fa-brands fa-github"></i>
</a>
</p>
<a href="https://www.facebook.com/groups/124902324243589/" target="_blank" aria-label="Sacramento Weavers' and Spinners' Guild Facebook page" class="link_2">
<i class="fa-brands fa-square-facebook fa-2x"></i>
</a>
<a href="mailto:[email protected]" class="link_2">
<i class="fa-solid fa-square-envelope fa-2x"></i>
</a>
<a href="tel:916-555-9276" class="link_2">
<i class="fa-solid fa-square-phone fa-2x"></i></i>
</a>
</div>
</footer>
<!-- Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
<!-- Font Awesome -->
<script src="https://kit.fontawesome.com/c5482756ba.js" crossorigin="anonymous"></script>
</body>
</html>