/
contact.html
123 lines (114 loc) · 5.8 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="https://fonts.googleapis.com/css?family=Kumar+One|Kumar+One+Outline|Lato:400,700&display=swap" rel="stylesheet">
<link rel="icon" type="image/png" href="styles/images/favicon.png" sizes="32x32">
<link rel="stylesheet" href="styles/style.css">
<title>Sanctuary Helpers Blog</title>
</head>
<body>
<!-- max-container below constrains the width of the website at large displays -->
<!-- anything constrained by an element with the class of wrapper is having their width managed on the webpages -->
<div class="max-container">
<!-- screen reader accessibilty links available only through focus states -->
<a href="#main-contact" class="skip-link">Skip to Main Content.</a>
<!-- mobile nav -->
<div class="slide-nav">
<ul class="header-directory mobile">
<li>
<button class="exit-responsive">
<i class="fas fa-times"></i>
<span class="sr-only">Exit toggle to remove full screen mobile nav</span>
</button>
</li>
<li><a href="index.html" class="mobile-link">Home</a></li>
<li><a href="#" class="mobile-link">About</a></li>
<li><a href="blog.html" class="mobile-link">Blog</a></li>
<li><a href="contact.html" class="mobile-link">Contact</a></li>
</ul>
</div>
<header class="contact">
<nav class="link-page wrapper">
<div class="nav-text">
<h3>Sanctuary Helpers</h3>
</div>
<ul class="header-directory">
<li><a href="index.html">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="blog.html">Blog</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
<button class="hamburger"><i class="fa fa-bars"></i></button>
</nav>
<div class="new-intro wrapper">
<h1>Get in touch</h1>
</div>
</header>
<main class="main-contact" id="main-contact">
<div class="wrapper">
<!-- form for contact information with white background and yellow box shadow -->
<form action="" method="POST" name="contact-form" class="contact-form">
<fieldset>
<label for="name" class="visually-hidden">Name</label>
<input type="text" name="name" id="name" placeholder=" Name">
<label for="email" class="visually-hidden">Email</label>
<input type="text" name="email" id="email" placeholder=" Email Address">
</fieldset>
<textarea name="userFeedback" id="feedback" cols="30" rows="10" minlength="5" placeholder="Comment"></textarea>
<input type="submit" name="submit" id="submit" class="submit-button" value="Submit">
</form>
<aside>
<ul class="online-directory">
<li class="social-icon">
<a href="#"><i class="fab fa-facebook-f" aria-hidden="true"></i></a>
<span class="sr-only">Link to Facebook page</span>
</li>
<li class="social-icon">
<a href="#"><i class="fab fa-instagram" aria-hidden="true"></i></a>
<span class="sr-only">Link to Instagram page</span>
</li>
<li class="social-icon">
<a href="#"><i class="fab fa-twitter" aria-hidden="true"></i></a>
<span class="sr-only">Link to Twitter page</span></li>
<li class="social-icon">
<a href="#"><i class="fab fa-whatsapp"></i></a><span class="sr-only">Link to Whatsapp contact page</span>
</li>
<li>
<a href="#" class="email-info">info@email.com</a>
</li>
</ul>
<ul class="location-directory">
<li><a href="#">123 - 456 - 7890</a></li>
<li>123 Queen Street West, Unit 10</li>
<li>Toronto, Ontario</li>
<li>M5V2D5</li>
</ul>
</aside>
</div>
</main>
<footer>
<section class="copyright wrapper">
<p>Copyright © 2019 HackerYou</p>
</section>
</footer>
</div>
<!-- simple JavaScript below to make the hamburger menu and slide nav more functional and to enable smooth scrolling throughout entire website -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-smooth-scroll/2.2.0/jquery.smooth-scroll.min.js"></script>
<script>
$(function () {
$('.hamburger, .exit-responsive').click(function () {
$('.slide-nav').toggleClass('show');
$('body').toggleClass('noScroll');
});
$('.large-a').click(function () {
$('.slide-nav').removeClass('show');
});
$('a').smoothScroll();
});
</script>
</body>