Y1-ICL-1321-Web-Technologies/broughton_whats_on.html at main · tobybeevers/Y1-ICL-1321-Web-Technologies · GitHub

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
<!--Set up the Page and add Font Awesome to use Social Logos -->
<!--Set Head Title to Broughton Life, and define EN and the default Language-->
<!--Set Charset to UTF8 to allow all character sets-->

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://kit.fontawesome.com/930fafc260.js" crossorigin="anonymous"></script>
  <link rel="stylesheet" href="./css/containers.css">
  <link rel="stylesheet" href="./css/styles.css">
  <title>Broughton Life</title>
</head>

<body>
  <!-- Skip to content link -->
  <a href="#main-content" class="skip-link"  >Skip to main content</a>

<!-- NavBar Same Every Page -->
<div class="navbar" aria-label="Navigation">
  <div class="container flex">
    <nav role="navigation" aria-label="Main Navigation">
      <ul>
        <li><a href="./index.html">Home</a></li>
        <li><a href="./about_broughton.html">About Broughton</a></li>
        <li><a href="./history_of_broughton.html">Broughton History</a></li>
        <li><a href="./broughton_whats_on.html" aria-current="page">What's On</a></li>
        <li><a href="./community_links.html">Community Links</a></li>
      </ul>
    </nav>
  </div>
  </div>

<!--Socials, the general login page link has been used as the social channels do not yet exist-->
<section class="socials">
  <div class="container">
    <div class="grid grid-3 text-center my-4">
      <div>
        <i class="fa-brands fa-square-facebook fa-8x" style="color: #1A7D90" aria-hidden="true"></i>
         <p class="text-secondary"></p>
        <a href="https://en-gb.facebook.com/" style="color: var(primary-color)" target="_blank" aria-label="Visit our Facebook page" title="Visit us on our Facebook page">Visit Our Facebook </a>
      </div>
      <div>
        <i class="fa-brands fa-square-x-twitter fa-8x" style="color: #1A7D90" aria-hidden="true"></i>
        <p class="text-secondary"></p>
        <a href="https://twitter.com/?lang=en" style="color: var(primary-color)" target="_blank"aria-label="Visit our Twitter or X page" title="Visit us on our Twitter or X page">Visit Our Twitter X</a>
      </div>
      <div>
        <i class="fa-brands fa-square-instagram fa-8x" style="color: #1A7D90" aria-hidden="true"></i>
        <p class="text-secondary"></p>
        <a href="https://www.instagram.com/" style="color: var(primary-color)" target="_blank"aria-label="Visit Our Instagram" title="Visit us on our Instagram">Visit Our Instagram</a>
      </div>
    </div>
  </div>
</section>

<!-- Showcase -->
<main id="main-content">
  <section class="showcase">
    <div class="container grid">
      <div class="showcase-text">
        <h1>Broughton What's On!</h1>
        <p>Explore our beautiful village and discover local attractions, historical landmarks, and scenic spots that make Broughton a delightful place to visit.</p>
        <P><b>St. Mary's Church:</b> Visit this historic church, a cornerstone of our community, known for its beautiful architecture and serene atmosphere.</P>
        <p><b>Broughton Shopping Park:</b> Enjoy a day of shopping and dining at our modern retail park, featuring a variety of stores and eateries to suit all tastes.</p>
        <p><b>Community Walks:</b> Take in the fresh air and stunning scenery with our numerous walking trails, perfect for a leisurely stroll or a brisk hike.</p>
      </div>
      <!-- This form is designed to send an email but will need further back end code like PHP and alos SMTP set up etc before it will send anything-->
      <div class="showcase-form card">
        <h2>Got a Question?</h2>
        <form>
          <div class="form-control">
            <input type="text" name="Name" placeholder="Name" aria-label="Name" required>
          </div>
          <div class="form-control">
            <input type="text" name="phone" placeholder="Phone Number" aria-label="Phone Number" required>
          </div>
          <div class="form-control">
            <input type="email" name="email" placeholder="Email" aria-label="Email Address" required>
          </div>
           <input type="submit" value="send" class="btn btn-primary">
        </form>
      </div>
    </div>
  </section>
</main>

<!-- Google Calendar is being used as a CMS, when events are added to the Google Account the calendar is updated via the Google Calenbdar API https://developers.google.com/calendar/api/guides/overview -->
<section class="sponsors bg-primary py-2">
  <div class="container grid">
    <iframe src="https://calendar.google.com/calendar/embed?height=400&wkst=2&ctz=Europe%2FLondon&bgcolor=%23ffffff&showTz=0&showCalendars=0&showTabs=0&showPrint=0&hl=en_GB&src=NDdhYTYzNWQxYzc0NmU0MWY1NjYxYjg5MmEyMWVjNWUxZDZmMmI2YWZlOGIwMzJkODczNGYyZmY3OWI4ZGYxOUBncm91cC5jYWxlbmRhci5nb29nbGUuY29t&src=ZW4udWsjaG9saWRheUBncm91cC52LmNhbGVuZGFyLmdvb2dsZS5jb20&color=%231a7d90&color=%23A79B8E"
    style="border:solid 3px #1A7D90" width="500" height="400" frameborder="0" scrolling="no"></iframe>
    <div class="text-right">
        <h2 class="md"> What's On! </h2>
        <h3 class="lead my-1"> Check Out our Calander for local events</h3>
        <p> Have an upcoming event in Broughton? We want to hear from you!</p>
        <p>Our "What's On" page is dedicated to showcasing the vibrant life of our community, and we rely on you to keep it exciting and up-to-date. Whether you're planning a community gathering, a cultural event, a sports meet, or any other activity, let us help you spread the word.</p>
        <!-- This is a hard coded link to open the users mail client and send an emails to the defined email address -->
        <a href="mailto:events@broughton-life.wales" class="btn btn-outline" style="color: black">Send Us Your Event!</a>
    </div>
  </div>
</section>

 <!--sponsors -->
<section class="sponsors">
  <h3 class="text-center my-1 hc3">Meet Our Sponsors, Local Businesses Supporting the Community</h3>
  <div class="container flex">
    <div class="card">
      <h4>Meet</h4>
      <img src="library/Broughton_shopping_park_logo.jpg"class="sponsors-img" alt="Broughton Park Shopping Centre Logo">
    </div>
    <div class="card">
      <h4>Meet</h4>
      <img src="library/Broughton_shopping_park_logo.jpg"class="sponsors-img" alt="Broughton Park Shopping Centre Logo">
    </div>
    <div class="card">
      <h4>Meet</h4>
      <img src="library/Broughton_shopping_park_logo.jpg"class="sponsors-img" alt="Broughton Park Shopping Centre Logo">
    </div>
  </div>
</section>

<!--Footer Bar Same Every Page -->
<footer class="footer bg-secondary py-5">
  <div class="container grid grid-3">
    <div>
      <h1>Broughton Life</h1>
      <h2>Copyright &copy; 2024</h2>
    </div>
    <nav aria-label="Secondary Navigation">
      <ul>
        <li><a href="./index.html">Home</a></li>
        <li><a href="./about_broughton.html">About Broughton</a></li>
        <li><a href="./history_of_broughton.html">Broughton History</a></li>
      </ul>
    </nav>
    <nav aria-label="Secondary Navigation">
      <ul>
        <li><a href="./broughton_whats_on.html" aria-current="page">What's On</a></li>
        <li><a href="./community_links.html">Community Links</a></li>
        <li><a href="./privacy_notice.html" target="blank">Broughton Life Privacy Notice</a></li>
      </ul>
    </nav>
  </div>
</footer>

</body>
</html>