-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathevents.html
118 lines (107 loc) · 9.17 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
116
117
<!DOCTYPE html>
<!--Defines Webpage Language-->
<html lang="en-gb">
<!-- This is a container for webpage data, meta tags, external resources. Not displayed on webpage-->
<head>
<!--Meta Tag - Character encoding, specifically utf-8-->
<meta charset="utf-8">
<!--Meta Tag - For the area in which the website will be viewed and the scale to be dislayed at-->
<meta name="viewport" content="width=device-width, initial-scale1.0">
<!--Meta Tag - Description, is used to for search engines to describe your website -->
<meta name="description" content="Bexley Moorings Project - Website">
<!--Meta Tag - Used for SEO to help your website be more visible-->
<meta name="keywords" content="Bexley, Moorings, Project, Outreach, Befriend, early, Intervention, Charity">
<!--Meta Tag - Defines the websites Author-->
<meta name="author" content="Ross Akehurst">
<!--Link - Links to CSS attributes for the webpage-->
<link rel="stylesheet" href="css/background_styles.css">
<!--Link - Links to CSS attributes for the webpage-->
<link rel="stylesheet" href="css/styles_copy.css">
<!--Link - Decribes external object and relationship to webpage-->
<link rel="icon" type="image/x-icon" href="images/favicon.png"/>
<!--Link - Links to java attributes for the webpage-->
<script src="java/script.js" defer></script>
<!-- Webpage title-->
<title>Bexley Moorings Project - Events</title>
<!--Closing Head Tage-->
</head>
<!--Header Tag This is traditionally where the core navigation structure is held-->
<header>
<!--Parent Div Menu-->
<div class="menu">
<!--Parent/child Div navbar-->
<div class="navbar">
<!--child Div to hold Logo-->
<div class="brand-logo">
<!--img tag is used when calling images-->
<img src="images/logo.svg" width="100%" alt="Bexley Moorings Project Logo"/>
<!--Brand Logo Closing Tag-->
</div>
<!--child Div to hold Social Media-->
<div class="social-media">
<!--ul tag stands for unordered list-->
<ul>
<!--li tag standing for list-->
<!--Below are the social media icons, setup using hrefs which point to a destinaton and have been linked to the img tag that displays the icon-->
<li><div id="fu"><img src="images/fu.svg" alt="follow Us on Social Media Icon"></div></li>
<li><a href="https://www.facebook.com/" target="_blank"><div class="fb"><img src="images/fb.svg" alt="facebook Icon"></div></a></li>
<li><a href="https://www.instagram.com/" target="_blank"><div id="inst"><img src="images/inst.svg" alt="instagram Icon"></div></a></li>
<li><a href="https://www.linkedin.com/" target="_blank"><div id="li"><img src="images/li.svg" alt="linedin Icon"></div></a></li>
</ul>
</div>
<!--below is the responsive menu data, which will become visible once the screen dimensions decreases to 920px in width-->
<a href="#" class="toggle-button">
<!--below i've used spans to create a burger menu icon-->
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</a>
<!--child Div to hold the sites main navigation links -->
<div class="navbar-links">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="support.html">Support</a></li>
<li><a href="aboutus.html">About Us</a></li>
<li><a href="contactus.html">Contact Us</a></li>
</ul>
</div>
</div>
</div>
<!--This div is for decoration purposed, it creates an orange bar across the page to seperate my nav links and the header image-->
<div class="divider"></div>
<!--child Div to hold the header image-->
<div class="header-image">
<!--Image tag holding background image-->
<a><img src="images/pattern.jpg" alt="Bexley Moorings Project Pattern"></a>
<!--Image tag holding overlaying icon-->
<a id="icon"><img src="images/ev.svg" alt="Calendar Icon For events Icon"></a>
</div>
<div class="divider2"></div>
</header>
<body>
<div class="middle">
<div class="policy">
<h1>Events</h1><br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p><br><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p><br><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p><br>
</div>
</div>
<!--This class donation hold a linked image that opens a new window directed to an external link-->
<div class="donation">
<a href="https://cafdonate.cafonline.org/21086#!/DonationDetails" target="_blank"><div class="donation-link"><img src="images/donation2.svg" alt="donation link"></div></a>
</div>
</body>
<!--The footer tags old everything that is situated at the bottom of the page in this case links to legal documentation and contact information-->
<div class="footer">
<div class="base-bar">
<div class="topline">
<div class="contact">
<!--This element contins a href that when activated opens a new email addressed to the attatched email-->
<p id="email"><a href="mailto:[email protected]"><span id="e">E:</span> [email protected]</a><span id="b">|</span><span id="tel"><span id="t">T:</span> 020 8304 9609</span></p></div>
<!--the lowernav div holds the documentation links to the site policies and legal documentation-->
<div class="lowernav">
<p id="nav2"><a href="privacypolicy.html">Privacy Policy</a><span id="b1">|</span><a href="termsandconditions.html">Terms and Conditions</a><span id="b2">|</span><a href="accessibillity.html">Accessibillity</a></p></div>
</div>
<p id="address">Bexley Moorings Project is a Registered Charity in England and Wales (No. 1127865). Welling Youth Centre, Lovel Avenue, Welling, Kent DA16 3JQ</p>
</div>
</div>
</html>