-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
170 lines (158 loc) · 6.02 KB
/
index.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
159
160
161
162
163
164
165
166
167
168
169
170
<!DOCTYPE html>
<html lang="en-gb">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Ralph Cox // Web Developer</title>
<link rel="stylesheet" href="./css/reset.css">
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<!-- main logo / nav -->
<div id="headerWrapper">
<header>
<!-- Name given as H1 in Starter code semantically incorrect, using ARIA role -->
<div id="nameTitleWrapper">
<h1 id="myName">Ralph Cox</h1>
</div>
<nav>
<!-- Adding links to section IDs and external link to CV -->
<a href="#aboutMe">
About Me
</a>
<a href="#work">
Work
</a>
<a href="#contactMe">
Contact Me
</a>
<a href="https://www.strategy66.com/">
Resume
</a>
</nav>
</header>
</div>
<!-- hero banner -->
<!-- Banner not placed in header Starter code semantically incorrect, using ARIA role -->
<div id="bannerWrapper">
<section id="heroBanner" role="banner">
<!-- Page Titles given as H2 in Starter code semantically incorrect, using ARIA role -->
<div id="pageTitleWrapper">
<h2 role="heading" aria-level="1" id="pageTitle">The Eclectic WebDev Portfolio</h2>
</div>
<div id="heroWrapper"><img id="hero" src="./images/02-hero-bg.jpg" alt="patterned wooden fence abstract"></div>
</section>
</div>
<main id="pageWrapper">
<!-- about me -->
<section id="aboutMe">
<div id="aboutTitleWrapper" class="titleCol">
<h2 id="aboutMeTitle">About Me</h2>
</div>
<div id="aboutMeTextWrapper">
<div id="aboutMeText" class="contentCol">
<p>I help you connect with customers, clients, supporters and fans by designing and developing websites by
showing the
difference you make to them.</p>
<p>I have followed a simple journey into web design and development via Kitchen Porter, Production
Controller, Salesman,
Actor, and Government Policy Strategist.</p>
</div>
</div>
</section>
<!-- portfolio container -->
<section id="work">
<div id="workTitleWrapper" class="titleCol">
<h2 id="workTitle">Work</h2>
</div>
<div id="workDisplay" class="contentCol">
<div class="mainImage">
<div class="linkedImageWrapper">
<a href="https://essexgit.github.io/CSS_Snippets_Cheetsheet/">
<img class="big1Image" src="./images/CSS-Cheet-Sheet.png" alt="Cheetsheet project website screenshot">
<div class="projectTextBox">
<h3 id="project1">CSS Cheetsheet
</h3>
<p class="expl">Snippets of code to copy</p>
</div>
</a>
</div>
</div>
<div class="rowImages ">
<div class="linkedImageWrapper">
<a href="https://essexgit.github.io/Code_refactoring_exercise_EdX_Bootcamp/">
<img class="workImages" src="./images/RefactorSnip.png" alt="Refactoring project website screenshot">
<div class="projectTextBox">
<h3 id="project2">Code Refactoring
</h3>
<p class="expl">Consolidating excess classes,<br> adding semantic HTML
</p>
</div>
</a>
</div>
<div class="linkedImageWrapper">
<a href="https://essexgit.github.io/prework-study-guide/">
<img class="workImages" src="./images/Pre-Course-Study-Guide.png"
alt="Study Guide project website screenshot">
<div class="projectTextBox">
<h3 id="project3">Pre-Course <br> Guide</h3>
<p class="expl">Exercise to create a<br> 'basic styled' web page<br> in Repo</p>
</div>
</a>
</div>
</div>
<div class="rowImages ">
<div>
<a class="linkedImageWrapper" href="https://essexgit.github.io/Kute_blob2sheep/">
<img class="workImages" id="bbh" src="./images/BBH Sheep.svg" alt="Black Sheep Silhouette">
<div class="projectTextBox">
<h3 id="project4">KUTE.js</h3>
<p class="expl">SVG Morphing</p>
</div>
</a>
</div>
<div class="linkedImageWrapper">
<a href="#project5">
<img class="workImages" src="./images/02-run-buddy.jpg"
alt="Place holder Run Buddy Personal Trainer site">
<div class="projectTextBox">
<h3 id="project5">project5</h3>
<p class="expl">Coming soon</p>
</div>
</a>
</div>
</div>
</div>
</section>
<!-- contact -->
<section id="contact">
<div id="contactTitleWrapper" class="titleCol">
<h2 id="contactMe">Contact Me</h2>
</div>
<div id="socialLinksWrapper" class="contentCol">
<div id="socialLinks">
<a href="tel:+447942286504">
<p>Phone</p>
</a>
<a href="mailto:[email protected]?subject=Project%20Portfolio">
<p>Email</p>
</a>
<a href="https://github.com/essexgit">
<p>Github</p>
</a>
<a href="https://www.linkedin.com/in/ralph-cox-strategy66/">
<p>LinkedIn</p>
</a>
<a href="https://twitter.com/strategy66">
<p>Twitter</p>
</a>
<a href="https://www.instagram.com/strategy66insta/">
<p>Instagram</p>
</a>
</div>
</div>
</section>
</main>
</body>
</html>