-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathabout.html
108 lines (93 loc) · 5.51 KB
/
about.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
<!--Tells the Browser that this is a HTML document-->
<!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="Ross Akehurst - Portfolio">
<!--Meta Tag - Used for SEO to help your website be more visible-->
<meta name="keywords" content="Ross, Akehurst, Portfolio, Graphic, Designer, Photoshop, Illustrator, Adobe">
<!--Meta Tag - Defines the websites Author-->
<meta name="author" content="Ross Akehurst">
<!--Link - Decribes external object and relationship to webpage-->
<link rel="icon" type="image/x-icon" href="images/favicon.png"/>
<!--Link - Decribes external stylesheet and relationship to webpage-->
<link rel="stylesheet" href="css/styles.css">
<!--Webpage Title, shown in tab-->
<title>Ross Akehurst - Portfolio</title>
<!--Closing Head tag to denote the end of the Head section-->
</head>
<!--The Container for the visible area of the webpage-->
<body>
<!--Container element that will hold the navigation elements and Page header image-->
<header>
<!--Container for header image-->
<div class="headimg">
<!--Link to header image and width-->
<img src="images/HEAD1.jpg" width="100%" alt="HeaderImage"/>
</div>
<!--Navigation tag to hold the page links-->
<nav>
<!--ul "Unordered List" uses bullet points rather than numbers or letters-->
<ul>
<!--Li defines a list, A is a page link element Href defines the attribute. In this case a is used for a set of local links-->
<li><a href="index.html">HOME</a></li>
<li><a href="gallery.html">GALLERY</a></li>
<li><a href="about.html">ABOUT</a></li>
<li><a href="contact.html">CONTACT</a></li>
</ul>
</nav>
<!--Closing Tag for Header-->
</header>
<!-- First Body Element -->
<div class="First">
<!-- ID:TopImage, Full-width image -->
<div id="TopImage"><img src="images/8082.jpg" style="width:100%"></div>
<!--Caption Below TopImage-->
<div class="caption">WHO AM I..?</div>
</div>
<!-- Container for Personal Info Class:Character-->
<div class="Character">
<!-- Paragraph Describing Cureent Employer -->
<p id="bio">My name is Ross I am currently employed by Automotive Repair Systems as their Senior Graphic Designer. Automotive Repair Systems was founded in 1997 by Andy Patterson offering the local motor trade a high quality, reliable, cost effective service specialising in Paintless Dent Removal. The basic principles that Andy successfully founded the business on are evident today as the Company has expanded both it’s services, to include all aspects of Small to Medium Area Repair Technique and also geographically, as Automotive Repair Systems has become one of the largest Independent Mobile S.M.A.R.T Repair companies in the UK. I design and develop all the graphics used in house and online, I am currently building a social media strategy for the organisation. </p>
<!-- Container for List of Skills Class:Skillset-->
<div class="skillset">
<!-- ID:Skills, Skills and bar depicting level of proficiency-->
<li id="skills">Packaging Design<span id="bar"><img src="images/-01.svg"></span></li>
<li id="skills">Brand Development<span id="bar"><img src="images/-02.svg"></li>
<li id="skills">Photoshop<span id="bar"><img src="images/-03.svg"></li>
<li id="skills">Illustrator<span id="bar"><img src="images/-04.svg"></li>
<li id="skills">Indesign<span id="bar"><img src="images/-05.svg"></li>
<li id="skills">After Effects<span id="bar"><img src="images/-06.svg"></li>
<li id="skills">Dreamweaver<span id="bar"><img src="images/-07.svg"></li>
<li id="skills">Microsoft Office<span id="bar"><img src="images/-08.svg"></li>
<li id="skills">3D Modelling<span id="bar"><img src="images/-09.svg"></li>
</div>
<!-- Paragraph Describing previous Employer -->
<p id="bio">I was previously employed by Colourpoint Studio Ltd as their Studio Manager. Colourpoint Studio Ltd is a design and print studio based in Bermondsey, London. During my time there, I have redesigned and managed the website, all the marketing material and online content. I have aided Colourpoint Studio Ltd in branching out onto multiple social media platforms. As such, I have contributed to the company’s growth. I have experience in both print and web-based design in a multimedia context.</p>
</div>
<!--The Opening Tag for the Footer-->
<footer>
<!--Parant container Class:FooterStyles-->
<div class="FooterStyle">
<!--Container for ID:rosslogo, external image, Ross Logo-->
<div id="rosslogo"><img src="images/rosslogo-01.svg" alt="Ross Logo"></div>
<!--Hyperlink to external URL, opens in new Tab, Linked to Image-->
<a href="https://uk.linkedin.com/in/ross-akehurst-a61a7a78" target="_blank"><div id="linklogo"><img src="images/Linkedin-Logo-01.svg" alt="Linkedin Logo"></div></a>
<!--White Line for decoration-->
<hr style="width:65%">
<!--Paragraph tag to place ID: FooterInfo, href mailto opens new email-->
<p id="FooterInfo"><a href="mailto:ross.akehurst@hotmail.co.uk">Email: ross.akehurst@hotmail.co.uk</a></p>
<p id="FooterInfo">Mobile: 07702 067 787</p>
</div>
<!--Closing Tag for Footer-->
</footer>
<!--The End of the Body Section-->
</body>
<!--Closing Tag for Webbpage-->
</html>