-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
205 lines (190 loc) · 8.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
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
<!DOCTYPE html>
<html lang="en-us">
<head>
<title>John Hauser's Digital Portfolio</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Check out my portfolio, see what you like, and contact me if you want to hire me">
<link href = "css/style.css" rel = "stylesheet" />
<link href = "css/timeline.css" rel = "stylesheet" />
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Abel" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
</head>
<body role ="body">
<main class = "clearfix">
<button class="icon" onclick="toggleNavbar()">
<i class="fa fa-bars"></i>
</button>
<section id="vertical-nav" class = "navbar" role = "navigation">
<menu>
<ul>
<p class = "title">TABLE OF CONTENTS</p>
<li class="active"><a href="#one">Intro</a></li>
<li><a href="#two">About Me</a></li>
<li><a href="#three">Services</a></li>
<li><a href="#four">Experience</a></li>
<li><a href="#five">Contact Me</a></li>
</ul>
</menu>
</section>
<script src = "js/navbar.js"></script>
<div class="content-wrapper clearfix">
<section id="one" class="content">
<div class="wrapper clearfix">
<div class="container about-me">
<div class ="padding-wrapper centring-wrapper" id="name">
<h1>JOHN HAUSER</h1>
<p>Graphic and Web Designer</p>
<a href="#five" class="call-to-action">HIRE ME</a>
</div>
</div>
<div class="container picture">
</div>
</div><!--.wrapper-->
</section>
<section id="two" class="content">
<div class ="padding-wrapper">
<h2 class = "section-title">ABOUT ME</h2>
<p class = "section-description">For fifteen years, I've created award-winning graphics and innovative user interfaces that have caught the notice of major brands throughout the globe. My work has been featured in design blogs throughout the world. My key strengths are visual and interactive design, with a focus on creating visuals that impress users. Currently, I work as a freelance designer, and I would love to work on your next project, be it a new website or a new logo.</p>
<br />
<p>EDUCATION:</p>
<P>Bachelors of Science </P>
<p>Computer Science</p>
<p>2003-2007</p>
</div>
</section>
<section id="three" class="content">
<div class ="padding-wrapper">
<h2 class = "section-title">Services I offer</h2>
<div class = "services-wrapper">
<div class = "services service-1">
<div class = "box-wrapper">
<h3>Web Design</h3>
<p>Creating responsive, stunning, mobile-friendly platforms for brands, individuals, and companies.</p>
</div>
</div>
<div class = "services service-2">
<div class = "box-wrapper">
<h3>Web Development</h3>
<p>Constructing the spine behind my innovative designs using Wordpress and CMS.</p>
</div>
</div>
<div class = "services service-3">
<div class = "box-wrapper">
<h3>Copywriting</h3>
<p>Creating engaging, well-written content that captivates audiences.</p>
</div>
</div>
<div class = "services service-4">
<div class = "box-wrapper">
<h3>UI/UX Design</h3>
<p>Intuitive interfaces that focus on ease-of-use of end users.</p>
</div>
</div>
<div class = "services service-5">
<div class = "box-wrapper">
<h3>Illustrative Design</h3>
<p>Creating captivating and artful digital illustrations and print graphics. </p>
</div>
</div>
<div class = "services service-6">
<div class = "box-wrapper">
<h3>Branding</h3>
<p>Developing unique identities with distinguishing character. Creating unique brands. </p>
</div>
</div>
</div>
</div>
</section>
<section id="four" class="content">
<div class = "padding-wrapper">
<h2 class = "section-title">Work Experience</h2>
<div class="timeline">
<div class="timeline-box left">
<div class="timeline-content">
<h2>September 2019 - Present</h2>
<p>Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.</p>
</div>
</div>
<div class="timeline-box right">
<div class="timeline-content">
<h2>June 2017 - July 2019</h2>
<p>Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.</p>
</div>
</div>
<div class="timeline-box left">
<div class="timeline-content">
<h2>September 2014 - April 2017</h2>
<p>Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.</p>
</div>
</div>
<div class="timeline-box right">
<div class="timeline-content">
<h2>December 2010 - July 2014</h2>
<p>Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.</p>
</div>
</div>
<div class="timeline-box left">
<div class="timeline-content">
<h2>June 2007 - September 2010</h2>
<p>Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.</p>
</div>
</div>
<div class="timeline-box right">
<div class="timeline-content">
<h2>August 2006 - May 2007</h2>
<p>Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.</p>
</div>
</div>
</div>
</div>
</section>
<section id="five" class="content">
<div class ="padding-wrapper">
<h2 class = "section-title">Contact Me</h2>
<p>Want to get in touch with me? Looking to hire me for your next project? Use this form to shoot an email my way and I'll get to you as soon as possible.</p>
<form name="myForm" action="" method="post" enctype="multipart/form-data">
<div class = "form-pad">
<label for = "fname">Full Name:</label>
<input type = "text" name= "fname" id="fname" value="" class = "form-input"></input>
</div>
<div class = "form-pad">
<label for = "subject">Subject:</label>
<input type = "text" name= "subject" id="subject" value="" class = "form-input"></input>
</div>
<div class = "form-pad">
<label for = "email">E-Mail:</label>
<input type = "email" name= "email" id="email" value="" class = "form-input"></input>
</div>
<div class = "form-pad">
<label for = "comments">Your Message:</label>
<textarea name= "comments" id="msg" rows = "15" cols = "25" value="" class = "form-input"></textarea>
</div>
<div class = "form-pad">
<div class = "button-inline">
<input type ="submit" value = "Submit your message" class = "butn"></input>
<input type ="reset" value = "Reset the form" class = "butn"></input>
</div>
</div>
</form>
</div>
</section>
</div><!--.content-wrapper-->
<script src="js/scrollspy-vertical.js"></script>
</main>
<footer>
<div class = "padding-wrapper clearfix">
<p style = "text-align:center;">You may find me on:</p>
<nav class = "social-media-links">
<a class ="fab fa-facebook" href ="#"></a>
<a class ="fab fa-twitter" href ="#"></a>
<a class ="fab fa-codepen" href ="#"></a>
<a class ="fab fa-github" href ="#"></a>
<a class ="fab fa-dribbble" href ="#"></a>
<a class ="fab fa-linkedin" href ="#"></a>
</nav>
<p style = "text-align:center;">© <script>document.write(new Date().getFullYear())</script> ALMcInnis Designs. All Rights Reserved</p>
</div>
</footer>
</body>
</html>