generated from Code-Institute-Org/ci-full-template
-
Notifications
You must be signed in to change notification settings - Fork 1
/
form.html
163 lines (145 loc) · 8.81 KB
/
form.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
<!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="Foodie Society is a food lovers community in Dublin, Ireland">
<meta name="keywords" content="foodie society, food lovers, food group, recipes, dublin, ireland">
<link rel="stylesheet" href="assets/css/style.css">
<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=Playfair:wght@300&family=Roboto:wght@300&display=swap"
rel="stylesheet">
<title>Foodie Society</title>
</head>
<body>
<!-- Header with logo and navigation menu -->
<header id="head-style">
<a href="index.html" target="_self" aria-label="Go to the home page(opens in same tab)">
<h1 id="logo">Foodie Society</h1>
</a>
<div>
<nav id="menu">
<ul>
<li>
<a href="form.html" target="_self" aria-label="Go to the contact form page(opens in same tab)"
class="active">Contact</a>
</li>
<li>
<a href="recipes.html" target="_self"
aria-label="Go to the recipes page(opens in same tab) ">Recipes</a>
</li>
<li>
<a href="index.html" target="_self" aria-label="Go to the home page(opens in same tab)">Home</a>
</li>
</ul>
</nav>
</div>
</header>
<!-- Contact form -->
<section>
<div id="form-photos">
<img src="assets/images/form_gallery/luisana-zerpa-MJPr6nOdppw-unsplash.avif" alt="Velvet cake cupcake">
<img src="assets/images/form_gallery/lidye-1Shk_PkNkNw-unsplash.avif"
alt="Hamburger in a dark room on slate plates, with a knife going through it.">
<img src="assets/images/form_gallery/brooke-lark-HlNcigvUi4Q-unsplash.avif"
alt="Healthy breakfast table, full of oats and fruits, with waffles and honey.">
<img src="assets/images/form_gallery/bruna-branco-7r1HxvVC7AY-unsplash.avif"
alt="Grapefruit, oranges ,lemon and lime slices spread across the table.">
<img src="assets/images/form_gallery/chad-montano-gf9777gaYjs-unsplash.avif"
alt="A person pooring honey over american pancakes and strawberries.">
<img src="assets/images/form_gallery/chad-montano-MqT0asuoIcU-unsplash.avif"
alt="Freshly baked pizza with peppers, chicken strips and sriracha sauce">
<img src="assets/images/form_gallery/davide-cantelli-jpkfc5_d-DI-unsplash.avif"
alt="Baked prawn tails with sauce, salad and bread">
<img src="assets/images/form_gallery/anna-tukhfatullina-food-photographer-stylist-Mzy-OjtCI70-unsplash.avif"
alt="Raspberry cake slice on a plate.">
<img src="assets/images/form_gallery/monika-grabkowska-EbRBhZ-I_p8-unsplash.avif"
alt="New york cheesecake baked with blueberries on top.">
<img src="assets/images/form_gallery/natalia-y-o9kswzHrvMs-unsplash.avif"
alt="Fresh tartlets in a cake shop window">
<img src="assets/images/form_gallery/victoria-shes-UC0HZdUitWY-unsplash.avif"
alt="Freshly baked BBQ served on a platter">
<img src="assets/images/form_gallery/zan-30809AYY3rg-unsplash.avif"
alt="Served table with a cheeseboard in the middle and yogurt and oats served for two people.">
<img class="optional-img" src="assets/images/form_gallery/raspberries-gc2ff92d44_640.avif"
alt="Raspberries in a bowl on a table">
<img class="optional-img" src="assets/images/form_gallery/churros-ga835eedd1_640.avif"
alt="Churros wrapped in a newspaper with chocolate sauce.">
<img class="optional-img" src="assets/images/form_gallery/coffee-g524e400e0_640.avif"
alt="Three coffee cups with coffee.">
<img class="optional-img" src="assets/images/form_gallery/chocolates-gf01d51775_640.avif"
alt="Chocolate desserts.">
<img class="optional-img" src="assets/images/form_gallery/apple-pie-gc99d1923e_640.avif" alt="Apple pie.">
</div>
<div id="form">
<form method="GET" action="confirmation.html" class="contact-form">
<h2>Want to join or just ask us a question? <i class="fas fa-scroll"></i></h2>
<h3>Fill out the form and we will be in touch with you</h3>
<label for="fname">First Name:</label>
<input id="fname" name="first_name" type="text" class="text_input" required>
<label for="lname">Last Name:</label>
<input id="lname" name="last_name" type="text" class="text_input" required>
<label for="email">Email Address:</label>
<input id="email" name="email_address" type="email" class="text_input" required>
<h3>Contact reason:</h3>
<label for="join">Join the community</label>
<input id="join" name="contact-reason" type="radio" value="join" required>
<label for="ask">Ask us</label>
<input id="ask" name="contact-reason" type="radio" value="ask" required>
<label for="recipe">Share a recipe</label>
<input id="recipe" name="contact-reason" type="radio" value="recipe" required>
<label for="other">Other</label>
<input id="other" name="contact-reason" type="radio" value="other" required>
<textarea name="input_text" id="question_input" cols="30" rows="5" placeholder="Start writing here..."
minlength="10" maxlength="1000" required></textarea>
<input class="send_button" type="submit" value="Ask Us!">
<input class="reset-button" type="reset" value="Empty Form!">
</form>
</div>
</section>
<!-- Footer with social and contact links -->
<footer>
<div id="links-left">
<h3>Join us:</h3>
<ul>
<li><a href="https://www.facebook.com" target="_blank" rel="noopener"
aria-label="Visit our Facebook page(opens in a new tab)"><i class="fab fa-facebook-f"></i></a>
</li>
<li><a href="https://www.instagram.com" target="_blank" rel="noopener"
aria-label="Visit our Instagram page(opens in a new tab)"><i class="fab fa-instagram"></i></a>
</li>
<li><a href="https://www.pinterest.com" target="_blank" rel="noopener"
aria-label="Visit our Pinterest page(opens in a new tab)"><i class="fab fa-pinterest-p"></i></a>
</li>
<li><a href="https://www.twitter.com" target="_blank" rel="noopener"
aria-label="Visit our Twitter page(opens in a new tab)"><i class="fab fa-twitter"></i></a></li>
<li><a href="https://www.youtube.com" target="_blank" rel="noopener"
aria-label="Visit our Youtube page(opens in a new tab)"><i class="fab fa-youtube"></i></a></li>
</ul>
</div>
<div id="links-right">
<h3>Contact us:</h3>
<ul>
<li><a href="https://www.skype.com/en/" target="_blank" rel="noopener"
aria-label="Contact us on our Skype page(opens in a new tab)"><i class="fab fa-skype"></i></a>
</li>
<li><a href="https://www.twitch.tv" target="_blank" rel="noopener"
aria-label="Contact us on our Twitch page(opens in a new tab)"><i class="fab fa-twitch"></i></a>
</li>
<li><a href="form.html" target="_blank" rel="noopener"
aria-label="Contact us using our contact form page(opens in a new tab)"><i
class="fas fa-clipboard-list"></i></a></li>
</ul>
</div>
<br>
<p>Created as a project for <a href="https://codeinstitute.net/ie/" target="_blank" rel="noopener"
aria-label="Check out Code Institute page(opens in a new tab)">Code Institute</a> by <a
href="https://www.linkedin.com/in/luka-black-lb96/" target="_blank" rel="noopener"
aria-label="You can find me on my LinkedIn page(opens in a new tab)">Luka Black</a></p>
</footer>
<!--Font Awesome link-->
<script src="https://kit.fontawesome.com/eb70536764.js" crossorigin="anonymous"></script>
</body>
</html>