-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathaboutus.html
158 lines (133 loc) · 10.1 KB
/
aboutus.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
<!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_aboutus.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 - About Us</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">
<a><img src="images/childrenjumping.jpg" alt="two children playing on a trampoline together"></a>
</div>
<div class="divider2t"><p id="dt">ABOUT US</p></div>
</header>
<body>
<div class="middle">
<div class="blurbcontainer">
<div class="sect">
<p>Bexley Moorings Project was established in 1981 and now enjoys widespread recognition and support in the local community. We are a registered charity working in the London Borough of Bexley to provide effective support for vulnerable young people, with the help of volunteers.<br><br>We are an early intervention support service that offers one-to-one befriending and specific group sessions to young people, aged 8-17, who may be experiencing material or emotional deprivation, in crises, at risk or have a caring responsibility.<br><br>Each young person is individually assessed for suitability, including willingness to join the programme, so we can tailor the support needed.<br><br>Our volunteer befrienders work on a one-to-one basis and offer focused non-judgmental support, positive experiences, advice and an adult role model. Through befriending young people grow in confidence and positively change their behaviour.<br><br>We currently offer our CRISP (Child Resilience Inclusion Social Pathway) group for young people that will benefit from social interaction and peer support. This is a 12 week programme for young people low in confidence or exhibiting low-level behaviour problems to increase their confidence and social skills.</p>
</div>
</div>
<div class="wcontainer">
<div class="sect1"><h2 style="color: #7B549E">PARTNERS</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.
Lorem ipsum dolor sit amet, cons ectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobor<br>
Lorem ipsum dolor sit amet, cons ectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobor</p>
</div><div class="sectimg"><img src="images/partner.jpg" alt="Hands on top of each other together is soldiarity"></div>
</div>
<div class="ocontainer">
<div class="sectimg"><img src="images/supporters.jpg" alt="a paper cutout of people holding hands together"></div>
<div class="sect2"><h2 style="color: white">SUPPORTERS</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.
Lorem ipsum dolor sit amet, cons ectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobor<br>
Lorem ipsum dolor sit amet, cons ectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobor</p>
</div>
</div>
<div class="wcontainer">
<div class="sect1"><h2 style="color: #7B549E">SUPPORT US</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.
Lorem ipsum dolor sit amet, cons ectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobor<br>
Lorem ipsum dolor sit amet, cons ectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobor</p>
</div><div class="sectimg"><img src="images/support_1.jpg" alt="a person holds up a sign saying we need you!"></div>
</div>
<div class="iconcontainer">
<div class="columncontainer">
<div class="colimg" style=" background-color: #EB5D3E"><img src="images/pr.svg" alt="An icon depicting three professionals"><p class="pro"><b style="color: white; background-color: #EB5D3E;">Our Team</b></p><div class="learnmore"><a href="ourteam.html">Learn More</a></div></div>
<div class="colimg" style=" background-color: #EB5D3E"><img src="images/test.svg" alt="An icon depicting a speech bubble"><p class="pro"><b style="color: white; background-color: #EB5D3E;">Testimonials</b></p><div class="learnmore"><a href="testimonials.html">Learn More</a></div></div>
</div>
</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>