-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathparents.html
134 lines (116 loc) · 7.25 KB
/
parents.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
<!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_parents.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 - Parents</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/herodad.jpg" alt="a father and sun dressed as superheros looking at the sunset, the son is on the fathers should as they raise there arms together"></a>
</div>
<div class="divider2t"><p id="dt">PARENTS</p></div>
</header>
<body>
<div class="middle">
<div class="wcontainer">
<div class="sect1">
<p>Bexley Moorings Project is a charity that supports young people aged 8-17 living in the London Borough of Bexley. Young people who meet our criteria are offered an adult befriender and/or the chance to attend one of our groups.<br><br>
All our volunteers have been CRB checked and cleared by social services and their GP. We also check two personal references and they undogo training.<br><br>
The purpose of a befriender is to support the young person with any problems they are having and help them grow in confidence. The befriender will meet the child they are matched with frequently.<br><br>
We run a group for young people who will benefit from social interaction or peer support.</p>
</div><div class="sectimg" style="height: auto; width: auto; background-color: #EB5D3E"><img src="images/parents.svg" alt="An Icon depicting a father, mother and child"></div>
</div>
<div class="iconcontainer">
<div class="columncontainer">
<div class="colimg" style=" background-color: #EB5D3E"><img src="images/question.svg" alt="An icon with a question mark"><p class="pro"><b style="color: white; background-color: #EB5D3E;">FAQ</b></p><div class="learnmore"><a href="faq.html">Learn More</a></div></div>
<div class="colimg" style=" background-color: #EB5D3E"><img src="images/form.svg" alt="an icon depicting a form"><p class="pro"><b style="color: white; background-color: #EB5D3E;">REFERRAL CRITERIA</b></p><div class="learnmore"><a href="referralcriteria.html">Learn More</a></div></div>
<div class="colimg" style=" background-color: #EB5D3E"><img src="images/link.svg" alt="an icon depicting digital U.R.L links"><p class="pro"><b style="color: white; background-color: #EB5D3E;">USEFUL LINKS</b></p><div class="learnmore"><a href="links.html">Learn More</a></div></div>
<div class="colimg" style=" background-color: #EB5D3E"><img src="images/cogs.svg" alt="An icon depicting a cog turning"><p class="pro"><b style="color: white; background-color: #EB5D3E;">REFERRAL PROCESS</b></p><div class="learnmore"><a href="referralprocess.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>