generated from Code-Institute-Org/ci-full-template
-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathcontact.html
134 lines (111 loc) · 4.71 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
<!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">
<meta name="description" content="A Place for Dogs and Their Friends">
<meta name="author" content="Naomi Berhane">
<meta name="keywords" content="bone appétite, dog café">
<link rel="stylesheet" href="assets/css/style.css">
<title>Bone Appétite</title>
</head>
<body>
<header>
<!--Logo Title -->
<a href="index.html" class="remove-underline">
<h1 id="title">Bone Appétite</h1>
</a>
<!--Nav bar content-->
<nav>
<div class="navbar">
<ul class="nav-links">
<li>
<a href="index.html" aria-label="Home">Home</a>
</li>
<li>
<a href="gallery.html" aria-label="Gallery">Gallery</a>
</li>
<li>
<a href="contact.html" class="active" aria-label="Contact">Contact</a>
</li>
</ul>
</div>
</nav>
</header>
<main>
<section>
<h2 class="hero__title">Hero image</h2>
<div id="hero-image">
</div>
</section>
<!--Main Content Contact Page-->
<!--Main Content Sign Up Form-->
<section class="sign_up_form">
<div class="sign_up_form_container">
<h2 class="sign_up_form_title">
Join our dog community and the weekly adventures!
</h2>
<form method="GET" action="form-response.html">
<label for="your_name" class="label_hidden label_your_name">Your Name</label>
<div class="input_your_name">
<input id="your_name" name="your__name" placeholder="Your Name" required class="text_input">
</div>
<label for="email" class="label_hidden label_your_email">Your Email</label>
<div class="input_your_email">
<input type="email" id="email" name="email_address" placeholder="Your Email Address" required class="text_input">
</div>
<label for="your_dogs_name" class="label_hidden label_your_dogs_name">Your Dog's Name</label>
<div class="input_your_dogs_name">
<input id="your_dogs_name" name="your__dogs__name" type="text" placeholder="Your Dog's Name" required class="text_input">
</div>
<div class="dog-preference">
<div class="small-preference">
<label for="small-dog" class="small-dog">Small Dog</label>
<input type="checkbox" id="small-dog" name="sign-up-detail" value="small-dog" class="choice-preference">
</div>
<div class="big-preference">
<label for="big-dog" class="big-dog">Big Dog</label>
<input type="checkbox" id="big-dog" name="sign-up-detail" value="big-dog" class="choice-preference">
</div>
<div class="general-preference">
<label for="gen-dog" class="gen-dog">No Preferance</label>
<input type="checkbox" id="gen-dog" name="sign-up-detail" value="gen-dog" class="choice-preference">
</div>
</div>
<div class="submit-button">
<input class="submit_button" type="submit" value="Submit">
</div>
</form>
</div>
</section>
</main>
<!--Footer-->
<footer>
<ul class="social-media">
<li>
<a href="https://instagram.com" target="_blank" rel="noopener" aria-label="Visit our Instagram page">
<i class="fab fa-instagram"></i>
</a>
</li>
<li>
<a href="https://facebook.com" target="_blank" rel="noopener" aria-label="Visit our Facebook page">
<i class="fab fa-facebook-square"></i>
</a>
</li>
<li>
<a href="https://twitter.com" target="_blank" rel="noopener" aria-label="Visit our Twitter page">
<i class="fab fa-twitter-square"></i>
</a>
</li>
<li>
<a href="https://youtube.com" target="_blank" rel="noopener" aria-label="Visit our YouTube channel">
<i class="fab fa-youtube-square"></i>
</a>
</li>
</ul>
</footer>
<!--Script for icons "Font Awesome"-->
<script src="https://kit.fontawesome.com/04566e427e.js" crossorigin="anonymous"></script>
</body>
</html>