generated from Code-Institute-Org/gitpod-full-template
-
Notifications
You must be signed in to change notification settings - Fork 4
/
Copy pathcontact.html
147 lines (128 loc) · 5.86 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contact | Great Wall of Gratitude</title>
<!-- Favicon Includes-->
<link rel="shortcut icon" href="./favicon.ico">
<link rel="icon" sizes="16x16 32x32 64x64" href="./favicon.ico">
<link rel="icon" type="image/svg+xml" sizes="any" href="./assets/favicon/favicon.svg">
<link rel="icon" type="image/png" sizes="160x160" href="./assets/favicon/favicon-160x160.png">
<link rel="icon" type="image/png" sizes="96x96" href="./assets/favicon/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="64x64" href="./assets/favicon/favicon-64x64.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">
<link rel="apple-touch-icon" sizes="180x180" href="./assets/favicon/favicon-180x180.png">
<link rel="apple-touch-icon" sizes="152x152" href="./assets/favicon/favicon-152x152.png">
<link rel="apple-touch-icon" sizes="144x144" href="./assets/favicon/favicon-144x144.png">
<link rel="apple-touch-icon" sizes="120x120" href="./assets/favicon/favicon-120x120.png">
<link rel="apple-touch-icon" sizes="114x114" href="./assets/favicon/favicon-114x114.png">
<link rel="apple-touch-icon" sizes="76x76" href="./assets/favicon/favicon-76x76.png">
<link rel="apple-touch-icon" sizes="72x72" href="./assets/favicon/favicon-72x72.png">
<link rel="apple-touch-icon" sizes="60x60" href="./assets/favicon/favicon-60x60.png">
<link rel="apple-touch-icon" sizes="57x57" href="./assets/favicon/favicon-57x57.png">
<!-- Load local fonts before loading css -->
<style>
@font-face {
font-family: 'Poppins';
src: url('./assets/fonts/Poppins-Light.ttf');
font-weight: 300;
font-display: swap;
}
@font-face {
font-family: 'Poppins';
src: url('./assets/fonts/Poppins-ExtraBold.ttf');
font-weight: 800;
font-display: swap;
}
</style>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<!-- Custom Styles -->
<link rel="stylesheet" href="./assets/css/style.css">
<!-- Email Js -->
<script src="https://cdn.jsdelivr.net/npm/@emailjs/browser@4/dist/email.min.js">
</script>
<script>
(function () {
emailjs.init({
publicKey: "hgYJhUBNTbpB6cwlp",
});
})();
</script>
</head>
<body>
<!-- Page Header -->
<header class="header">
<div class="container header-content">
<div class="branding">
<a class="logo" href="./" aria-label="link to Home Page"><img src="./assets/images/logo-white.svg" width="116"
height="36" alt="The Great Wall of Gratitude"></a>
</div>
<input id="mobile-menu-toggle" type="checkbox">
<label class="hamburger" for="mobile-menu-toggle" aria-label="menu">
<span></span>
<span></span>
<span></span>
</label>
<nav class="navigation">
<ul class="menu">
<li><a aria-label="link to Home Page" href="./index.html">The Great Wall</a></li>
<li><a aria-label="link to About Page" href="./about.html">About</a></li>
<li><a class="active" aria-label="link to Contact Page" href="./contact.html">Contact</a></li>
</ul>
</nav>
</div>
</header>
<main class="page">
<section class="hero-contact pt-5 pb-3">
<div class="container">
<div class="text-center">
<h1 class="heading-light mb-4">Contact Us</h1>
<p>Have any questions? We'd love to hear from you.</p>
</div>
</div>
</section>
<section id="contactus" class="contact-info container my-4">
<form id="contactForm" name="contactForm" onsubmit="return sendMail(this);">
<div class="mb-2 ">
<h2 class="hidden-heading">​</h2>
<label for="name" class="contactlabel form-label">Your name</label>
<input type="text" name="name" id="name" class="form-control" required>
<div id="nameHelp" class="form-text">Please provide your preferred name.</div><br>
</div>
<div class="mb-2">
<label for="email" class="contactlabel form-label">Your email</label>
<input type="email" name="email" id="email" class="form-control" required>
<div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div><br>
</div>
<div class="mb-3">
<label for="enquiry" class="contactlabel form-label">Your query</label>
<textarea rows="10" name="enquiry" id="enquiry" class="form-control" required></textarea>
</div>
<div class="mb-3 form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1" required>
<label class="form-check-label" for="exampleCheck1">I have read and agreed to the <a
href="https://www.termsfeed.com/live/fabff9bf-356e-4897-943b-4322ed3624ed">privacy
policy</a></label>
</div>
<div class="mb-2">
<input id="submit-button" class="btn btn-primary" type="submit" value="Submit Message"
aria-label="clicking submit will redirect to another page">
</div>
</form>
</section>
</main>
<!-- This code was inspired by GeeksforGeeks https://www.geeksforgeeks.org/how-to-redirect-to-another-webpage-using-javascript/-->
<footer class="footer py-4">
<div class="container">
<p class="text-center">Created to Spread Happiness</p>
<p class="text-center"> World Happiness Day 😁</p>
<p class="text-center">© The Great Wall of Gratitude 2024</p>
</div>
</footer>
<script src="assets/js/email.js"></script>
</body>
</html>