-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcontact.html
159 lines (140 loc) · 6.42 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
155
156
157
158
159
<!DOCTYPE html>
<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.0" />
<!-- google font -->
<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=Grape+Nuts&display=swap" rel="stylesheet" />
<!-- google font -->
<link rel="stylesheet" href="/CSS/baseStyle.css">
<link rel="stylesheet" media="screen and (min-width: 900px)" href="/CSS/styles.css" />
<link rel="stylesheet" media="screen and (max-width: 901px)" href="/CSS/styleSmallScreeen.css" />
<link rel="stylesheet" href="/CSS/contact.css">
<script src="/javascript/gallery.js"></script>
<script src="/javascript/contact.js" defer></script>
<script src="/javascript/index.js"></script>
<title>Visit Wisemans Ferry</title>
</head>
<div id="curtain" class="curtain" onclick="closeImage()" style="display: none">
</div>
<body class="body">
<div id="spinnerLocation" class="spinner-location">
<div class="lds-spinner">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
<div id="zoomImg" class="zoom-img" onclick="closeImage()" style="display: none">
<div class="gallery-box">
<img id="zoomedImage" src="/gallery-images/gallery-img1.JPG" alt="sample alt text" onclick="closeImage()" />
<div class="caption-box">
<h1 id="galleryCaption" class="gallery-caption">This is a very long caption</h1>
</div>
</div>
</div>
<main class="main">
<header class="header">
<img class="header__hero-img" src="/images/banner.jpg" alt="Sunset at Wisemans Ferry" />
<heading class="headings">
<h1 class="headings--title">Wisemans Ferry</h1>
<h2 class="headings--tag ">"Come visit the Hawkesbury"</h2>
</heading>
</header>
<nav class="burger-wrapper" onclick="openNav()">
<h2>"Come visit the Hawkesbury"</h2>
<div class="burger-wrapper__hamburger"></div>
</nav>
<nav id="navigation-bar" class="nav-menu ham-menu ">
<ul class="nav-items ham-items">
<li><a class="nav-link nav-link:hover ham-link" href="/index.html">Overview</a></li>
<li><a class="nav-link nav-link:hover ham-link" href="/getting_here.html">Getting here</a></li>
<li><a class="nav-link nav-link:hover ham-link" href="/gallery.html">Gallery</a></li>
<li><a class="nav-link--this-page ham-link--this-page">Contact</a></li>
</ul>
</nav>
<article class="article ">
<h3 class="page-title">Contact</h3>
<div class="form-wrapper">
<div class="form-container">
<form action="https://api.web3forms.com/submit" method="POST" id="contactForm" class="contact-form">
<p style="text-align:center; grid-column: 1/ span 3;">
Please complete the form below if you would like to make an enquiry.
We will endeavour to respond within 48hrs.
</p>
<input type="hidden" name="access_key" value="6f6472ec-be14-40eb-93ba-6582b32ba18f" />
<label for="name" >Name:</label>
<input type="text" name="name" id="name" placeholder="Full name" MaxLength="40" />
<label for="email">Email:</label>
<input type="email" name="email" id="email" placeholder="example@domain.com" required />
<label for="phone">Phone:</label>
<input type="tel" name="phone" id="phone" placeholder="0412 345 678" required pattern="^\({0,1}((0|\+61)(2|4|3|7|8)){0,1}\){0,1}( |-){0,1}[0-9]{2}( |-){0,1}[0-9]{2}( |-){0,1}[0-9]{1}( |-){0,1}[0-9]{3}$" title="example:
0404123456
0404 123 456
+61404123456
(02) 9123 4567 " />
<label class="message" for="message">Message:</label>
<textarea name="message" id="messae" cols="30" rows="10" placeholder="Your message here"></textarea>
<div class="buttons">
<input type="hidden" name="redirect" value="https://web3forms.com/success" />
<button type="reset" value="Reset" class="reset">Reset</button>
<button type="submit" value="Submit" class="submit">Submit</button>
</div>
</form>
</div>
</article>
<aside class="side-bar">
<div class="panel panel--justified-text">
<div class="ferryHours ">
<h3>Ferry hours</h3><br>
<p>The Webbs Creek Ferry at Wisemans Ferry crosses the Hawkesbury River just south of the junction of the
Macdonald River.</p><br>
<p>Operates 24/hrs 7days a week.</p><br>
<p>
only closed for maintenance on the 1st Tuesday of each month from 9.30am
till 12.00pm.
</p>
</div>
</div>
<div class="panel panel--center-text">
<h3>Coming up</h3>
<hr class="panel--horizontal-line">
<P>16/4/22 - Tidal mills & Colonial food</P>
<hr class="panel--horizontal-line">
<P>17/4/22 - Easter egg hunt in the park</P>
<hr class="panel--horizontal-line">
<P>25/4/22 - ANZAC Day Dawn service</P>
<hr class="panel--horizontal-line">
<P>13/8/22 - Bark Buster Blitz</P>
<hr class="panel--horizontal-line">
<P>28/9/22 - Return to rio holloween special</P>
<hr class="panel--horizontal-line">
</div>
</aside>
<footer>
<div class="social-icons">
<div class="tourismInfo">
<p>Tourism NSW</p>
<p>Hawkesbury Region</p>
</div>
<a href="https://www.facebook.com/visitnsw" target="_blank" title="FaceBook"><img class="socials"
src="/images/facebook.png" alt="FaceBook" /></a>
<a href="https://www.instagram.com/visitnsw/" target="_blank" title="Instagram"><img class="socials"
src="/images/instagram.png" alt="InstaGram" /></a>
<a href="https://twitter.com/NewSouthWales" target="_blank" title="Twitter"><img class="socials"
src="/images/twitter.png" alt="Twitter" /></a>
<a href="https://github.com/Clint-WooliesX" target="_blank" title="gitHub"><img class="socials" src="/images/github.png"
alt="gitHub" srcset="" /></a>
</div>
</footer>
</main>
</body>
</html>