-
Notifications
You must be signed in to change notification settings - Fork 1
/
events.html
115 lines (115 loc) · 5.83 KB
/
events.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Meta tags for search engines-->
<meta name="description" content="Black Sheep Farm. Cut flower farm and events space in Wicklow, Ireland. Weddings, parties, anniversaries, bouquets, flower arranging, flower picking. Blessington lakes, Wicklow.">
<meta name="keywords" content="Black Sheep, flower farm, events, weddings, flowers, dahlias, Wicklow mountains, Blessington Lakes, wildlife">
<title>Black Sheep Farm</title>
<!--Favicon (downloaded from Icons 8)-->
<link type="image/png" sizes="16x16" rel="icon" href="assets/icons8-sheep-badges-16.png">
<link type="image/png" sizes="32x32" rel="icon" href="assets/icons8-sheep-badges-32.png">
<link type="image/png" sizes="96x96" rel="icon" href="assets/icons8-sheep-badges-96.png">
<!--stylesheet-->
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
<div id="page-container">
<div id="content-wrap">
<!-- Header -->
<header>
<a href="index.html" id="logo-text">
<img id="logo" alt="an illustrated logo of a sheep's head" src="assets/icons8-sheep-64.png">Black Sheep Farm </a>
<input type="checkbox" id="nav-toggle" name="nav-toggle">
<label for="nav-toggle" class="nav-toggle-label" aria-label="Toggle navigation">
<i class="fa-solid fa-bars"></i>
</label>
<nav>
<ul id="menu">
<li>
<a href="index.html">Home</a>
</li>
<li>
<a href="about.html">Our Story</a>
</li>
<li>
<a href="visit.html">Visit</a>
</li>
<li>
<a href="events.html" class="active">Events</a>
</li>
</ul>
</nav>
</header>
<!-- Main Content -->
<main>
<section class="background-image">
<!-- Image by freepic.diller on Freepik -->
<div id="events-cover-text">
<h1>Events</h1>
</div>
</section>
<section id="events-container">
<div id="events-left">
<h2>Who doesn't love a garden party?</h2>
<p>Excited to find out more about booking your wedding, anniversary, reunion, or special occasion at our farm? Our team is dedicated to bringing your dream event to life, offering expert planning and coordination, bespoke floral arrangements, and delightful farm-to-table catering options. Get in touch with us to find out more.</p>
<h2>The perfect backdrop for your event</h2>
<p>We offer a variety of stunning settings for your event, from intimate garden ceremonies to grand receptions under the open sky. Each event space is thoughtfully designed to highlight the breathtaking scenery, ensuring that every corner of our farm becomes part of your story. We pride ourselves on creating a personalized experience, where every detail is tailored to reflect your vision and style.</p>
</div>
<div id="events-right">
<!--Form-->
<!-- Code guided by W3 Schools tutorial 'How to Add a Form to an Image'-->
<div id="form-image">
<!-- Image by Floret Flowers-->
<form action="https://formdump.codeinstitute.net" id="form-container" method="POST">
<h2>Contact Us</h2>
<label for="name">Name (required)</label>
<input type="text" placeholder="Your Name" id="name" name="name" class="text-input" required>
<br>
<label for="email-address">Email (required)</label>
<input type="email" placeholder="Your Email" aria-label="Email address" name="email_address" id="email-address" class="text-input" required>
<br>
<label for="date">Event Date (required)</label>
<input type="date" name="date" id="date" class="date" required>
<br>
<label for="text-area">Tell us about your event... </label>
<textarea name="textarea" id="text-area" aria-label="Text area" class="text-area" style="width:100%;"></textarea>
<button type="submit" class="submit" value="Submit">Submit</button>
</form>
</div>
</div>
</section>
</main>
<!-- Footer -->
<!-- Footer code guided by Free Code Camp tutorial 'How to keep your footer where it belongs'-->
<footer>
<ul id="social-networks">
<li>
<a href="https://www.facebook.com" target="_blank" rel="noopener" aria-label="Visit our Facebook page (opens in a new tab)">
<i class="fa-brands fa-facebook"></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="fa-brands 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="fa-brands fa-youtube"></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="fa-brands fa-instagram"></i>
</a>
</li>
</ul>
</footer>
<!-- Script for Font Awesome -->
<script src="https://kit.fontawesome.com/998309883c.js" crossorigin="anonymous"></script>
</div>
</div>
</body>
</html>