generated from VCGithubCode/vernell-c-new-repo-generator
-
Notifications
You must be signed in to change notification settings - Fork 5
/
Copy pathcontact.html
177 lines (167 loc) · 6.2 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
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="assets/css/style.css">
<link href="assets/favicon/favicon.ico" rel="icon" type="image/x-icon">
<title>Contact - Super Mario</title>
<script src="https://cdn.emailjs.com/dist/email.min.js"></script>
</head>
<body class="contact-page">
<!-- Header -->
<header id="landing-header">
<h1 class="header-home">​</h1>
<div class="image-container">
<a href="index.html"><img id="title" src="assets/images/title.webp" alt="an image of mario reboot text"></a>
</div>
<div class="nav-menu">
<input type="checkbox" id="menu-toggle" />
<label for="menu-toggle" class="menu-icon">
​<span></span>
</label>
<ul class="nav">
<li class="nav-item">
<a class="nav-link" href="about.html">
<img src="assets/images/developers.webp" alt="Meet the developers" class="nav-image">
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">
<img src="assets/images/contact.webp" alt="contact us" class="nav-image">
</a>
</li>
</ul>
</div>
</header>
<!-- Scene -->
<div class="scene-contact">
<!-- Clouds going across screen -->
<div class="cloud cloud1"></div>
<div class="cloud cloud2"></div>
<div class="cloud cloud3"></div>
<div class="cloud cloud4"></div>
<!-- Contact Form section -->
<div class="contact-box-container">
<div class="contact-centered-box">
<h2>Contact Us</h2>
<p>
We would love to hear from you, whether it's to do with improvements to the game
or if you would like to join the Super Mario Minions!
</p>
<p>Please fill out the form below.</p>
<!-- Form section -->
<div id="form-container">
<form id="contactForm" name="contactForm" onsubmit="return sendMail(this);">
<div>
<label for="name" class="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>
<label for="email" class="form-label">Your email</label>
<input type="email" name="email" id="email" class="form-control" required>
<div class="form-text">We'll never share your email with anyone else.</div><br>
</div>
<div>
<label for="enquiry" class="form-label">Your query</label>
<textarea rows="10" name="enquiry" id="enquiry" class="form-control" required></textarea>
</div>
<div id="checkbox-div">
<input type="checkbox" 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" id="privacy-link">privacy
policy</a></label>
</div>
<div>
<Button
id="submit-button"
type="submit"
value="Submit Message"
aria-label="clicking submit will redirect to another page"
>
Submit Message
</Button>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- Footer -->
<footer>
<div class="card-container">
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img class="flip-image"
src="https://imgs.search.brave.com/oyWbSGOo0vuKFuUdxhQd2fERbj8yZDRzjw0V-NSaDTA/rs:fit:860:0:0:0/g:ce/aHR0cHM6Ly9jbGlw/YXJ0LWxpYnJhcnku/Y29tL2ltZzEvMTM0/NjMyOS5qcGc"
alt="Avatar"
>
</div>
<div class="flip-card-back">
<a href="https://www.facebook.com">
<i class="fa-brands fa-facebook footer-icon">​</i>
</a>
</div>
</div>
</div>
</div>
<div class="card-container">
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img class="flip-image"
src="https://imgs.search.brave.com/oyWbSGOo0vuKFuUdxhQd2fERbj8yZDRzjw0V-NSaDTA/rs:fit:860:0:0:0/g:ce/aHR0cHM6Ly9jbGlw/YXJ0LWxpYnJhcnku/Y29tL2ltZzEvMTM0/NjMyOS5qcGc"
alt="Avatar"
>
</div>
<div class="flip-card-back">
<a href="https://www.linkedin.com">
<i class="fa-brands fa-linkedin footer-icon">​</i>
</a>
</div>
</div>
</div>
</div>
<div class="card-container">
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img class="flip-image"
src="https://imgs.search.brave.com/oyWbSGOo0vuKFuUdxhQd2fERbj8yZDRzjw0V-NSaDTA/rs:fit:860:0:0:0/g:ce/aHR0cHM6Ly9jbGlw/YXJ0LWxpYnJhcnku/Y29tL2ltZzEvMTM0/NjMyOS5qcGc"
alt="Avatar"
>
</div>
<div class="flip-card-back">
<a href="https://www.instagram.com">
<i class="fa-brands fa-instagram footer-icon">​</i>
</a>
</div>
</div>
</div>
</div>
<div class="card-container">
<div class="flip-card">
<div class="flip-card-inner">
<div class="flip-card-front">
<img class="flip-image"
src="https://imgs.search.brave.com/oyWbSGOo0vuKFuUdxhQd2fERbj8yZDRzjw0V-NSaDTA/rs:fit:860:0:0:0/g:ce/aHR0cHM6Ly9jbGlw/YXJ0LWxpYnJhcnku/Y29tL2ltZzEvMTM0/NjMyOS5qcGc"
alt="Avatar"
>
</div>
<div class="flip-card-back">
<a href="https://www.github.com">
<i class="fa-brands fa-github footer-icon">​</i>
</a>
</div>
</div>
</div>
</div>
</footer>
<!-- Font Awesome kit -->
<script src="https://kit.fontawesome.com/3b20d96fa9.js" crossorigin="anonymous"></script>
<!-- Script -->
<script src="assets/js/email.js"></script>
</body>
</html>