-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathsupport.html
122 lines (108 loc) · 6.28 KB
/
support.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
<!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_support.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 - Support</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/support.jpg" alt="Two people holding hand while one comforts the other"></a>
</div>
<div class="divider2t"><p id="dt">SUPPORTING EVERYONE</p></div>
</header>
<body>
<div class="middle">
<div class="iconcontainer">
<div class="columncontainer">
<div class="colimg" style=" background-color: #EB5D3E"><img src="images/yp.svg" alt="an icon of a person supporting another"><p class="pro"><b style="color: white; background-color: #EB5D3E;">YOUNG PEOPLE</b></p><div class="learnmore"><a href="youngpeople.html">Learn More</a></div></div>
<div class="colimg" style=" background-color: #EB5D3E"><img src="images/pa.svg" alt="An Icon depicting a mother father and child"><p class="pro"><b style="color: white; background-color: #EB5D3E;">PARENTS</b></p><div class="learnmore"><a href="parents.html">Learn More</a></div></div>
<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;">PROFESSIONALS</b></p><div class="learnmore"><a href="professionals.html">Learn More</a></div></div>
<div class="colimg" style=" background-color: #EB5D3E"><img src="images/vo.svg" alt="An icon depicting three hands"><p class="pro"><b style="color: white; background-color: #EB5D3E;">VOLUNTEERS</b></p><div class="learnmore"><a href="volunteers.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>