-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcontact.html
executable file
·148 lines (129 loc) · 6.32 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="Cherry Blossom Festival Contact">
<meta name="author" content="Kayla Kremer">
<link rel="icon" href="img/favicon.png">
<title>Contact</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
<!-- Custom styles for this template -->
<link rel="stylesheet" type="text/css"href="css/animate.css"/>
<link rel="stylesheet" type="text/css" href="css/component.css"/>
<link rel="stylesheet" type="text/css" href="css/social.css"/>
<link rel="stylesheet" type="text/css" href="css/animsition.css"/>
<link rel="stylesheet" type="text/css" href="css/contact.css"/>
</head>
<body>
<div class="animsition">
<!-- Fixed navbar -->
<nav class="navbar navbar-toggleable-sm fixed-top">
<!--<a class="navbar-brand mr-auto" href="index.html"><img src="img/logo.png" width="60px"></a>-->
<ul class="nav navbar-nav nav-container">
<li class="nav-item">
<a class="nav-link animsition-link" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link animsition-link" href="about.html">About</a>
</li>
<li class="nav-item">
<a class="nav-link animsition-link" href="events.html">Events</a>
</li>
<li class="nav-item">
<a class="nav-link animsition-link" href="location.html">Location</a>
</li>
<li class="nav-item">
<a class="nav-link animsition-link" href="contact.html">Contact</a>
</li>
</ul>
</nav>
<!-- Begin page content -->
<div class="container-fluid">
<div class="py-5 extend">
<h1 class="text-center my-5">Contact Form</h1>
<h5 class="text-center mb-4">Please fill out the form below with any questions or comments you have!</h5>
<form class="col-sm-10 col-md-8 col-lg-7 mx-auto">
<div class="form-group"> <!-- Name field -->
<label class="control-label" for="name">Name</label>
<input class="form-control form-control-success" id="name" name="name" type="text"/>
</div>
<div class="form-group"> <!-- Email field -->
<label class="control-label" for="email">Email</label>
<input class="form-control" id="email" name="email" type="text"/>
</div>
<div class="form-group"> <!-- Subject field -->
<label class="control-label" for="subject">Subject</label>
<input class="form-control" id="subject" name="subject" type="text"/>
</div>
<div class="form-group"> <!-- Message field -->
<label class="control-label " for="message">Message</label>
<textarea class="form-control" cols="10" id="message" name="message" rows="7"></textarea>
</div>
<div class="form-group text-center">
<button class="btn btn-2 btn-2c mx-auto" data-toggle="modal" data-target="#submit-form" name="submit" type="button">Submit</button>
</div>
</form>
<div class="invisible">
</div>
</div>
</div>
<div class="footer-container pt-1">
<footer class="footer">
<p>Created by <a href="https://www.kaylakremer.com" target="_blank">Kayla Kremer</a></p>
<div class="social">
<ul class="social-buttons" id="demo1">
<li>
<a href="https://twitter.com/Kayla_Kremer" target="_blank" class="brandico-twitter-bird"></a>
</li>
<li>
<a href="https://github.com/KaylaKremer" target="_blank" class="brandico-github"></a>
</li>
<li>
<a href="https://www.linkedin.com/in/kaylakremer/" target="_blank" class="brandico-linkedin"></a>
</li>
</ul>
</div>
</footer>
</div>
</div>
<div class="modal" id="submit-form" tabindex="-1" role="dialog" aria-labelledby="Submit Form" aria-hidden="true">
<div class="modal-dialog modal-lg mx-auto" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="message">Message sent</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="center mx-auto">
<h1 class="pb-4">Thank you!</h1>
<p>Your message has been sent. We'll reply within two business days!</p>
<img src="img/thankyou.png" />
<button type="button" class="btn btn-2 btn-2c" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="js/jquery.min.js"><\/script>')</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="js/ie10-viewport-bug-workaround.js"></script>
<script src="js/animsition.min.js"></script>
<script>$(".animsition").animsition({
inClass: 'fade-in',
outClass: 'fade-out',
inDuration: 1500,
outDuration: 500
});</script>
</body>
</html>