-
Notifications
You must be signed in to change notification settings - Fork 0
/
contactme.html
executable file
·174 lines (166 loc) · 6.1 KB
/
contactme.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Ibarra+Real+Nova:wght@400;700&family=Public+Sans&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="/styles/main.css" />
<script
src="https://kit.fontawesome.com/f06d8e237e.js"
crossorigin="anonymous"
></script>
<script src="./javascript/form.js" defer></script>
<script src="./javascript/navigation.js" defer></script>
<title>Contact</title>
</head>
<body>
<!-- Header -->
<header class="header container">
<div class="header__logo">
<a href="/index.html"
><svg xmlns="http://www.w3.org/2000/svg" width="90" height="32">
<path
fill="#33323D"
fill-rule="evenodd"
d="M60.082 5.878L44.408 32 28.735 5.878h31.347zM15.673 0l15.674 26.122H0L15.673 0z"
/>
</svg>
</a>
</div>
<nav class="navigation">
<ul class="navigation__list">
<li class="navigation__list-item">
<a class="navigation__link" href="/index.html">Home</a>
</li>
<li class="navigation__list-item">
<a class="navigation__link" href="/portfolio.html">Portfolio</a>
</li>
<li class="navigation__list-item">
<a class="navigation__link" href="/contactme.html">Contact Me</a>
</li>
</ul>
<div class="navigation__hamburger">
<span class="navigation__bar"></span>
<span class="navigation__bar"></span>
<span class="navigation__bar"></span>
</div>
</nav>
</header>
<main>
<!-- Intro section -->
<section class="getintouch grid-container">
<div class="getintouch__header">
<h2 class="getintouch__heading">Get in Touch</h2>
</div>
<div class="getintouch__content">
<p class="getintouch__paragraph">
I’d love to hear about what you’re working on and how I could help.
I’m currently looking for a new role and am open to a wide range of
opportunities. My preference would be to find a position in a
company in London. But I’m also happy to hear about opportunites
that don’t fit that description. I’m a hard-working and positive
person who will always approach each task with a sense of purpose
and attention to detail. Please do feel free to check out my online
profiles below and get in touch using the form.
</p>
<div class="getintouch__socials">
<a href="http://www.github.com" target="_blank"
><i class="icon fa-brands fa-github"></i
></a>
<a href="http://www.twitter.com" target="_blank"
><i class="icon fa-brands fa-twitter"></i
></a>
<a href="http://www.linkedin.com" target="_blank"
><i class="icon fa-brands fa-linkedin"></i
></a>
</div>
</div>
</section>
<!-- Form section -->
<section class="contactme grid-container">
<div class="getintouch__header">
<h2 class="getintouch__heading">Contact Me</h2>
</div>
<form id="form" class="contactme__form">
<p class="input-control">
<label for="name">Name</label>
<input
type="text"
name="name"
id="name"
placeholder="Jane Appleseed"
/>
<small class="error-message"></small>
</p>
<p class="input-control">
<label for="email">Email Address</label>
<input
type="email"
name="email"
id="email"
placeholder="email@example.com"
/>
<small class="error-message"></small>
</p>
<p class="input-control">
<label for="message">Message</label>
<textarea
name="message"
id="message"
placeholder="How can I help?"
></textarea>
<small class="error-message"></small>
</p>
<button type="submit" class="contactme__btn btn btn--fill">
send message
</button>
</form>
</section>
</main>
<!-- Footer section -->
<footer class="section-footer">
<div class="footer container">
<div class="footer__logo">
<a href="#"
><svg xmlns="http://www.w3.org/2000/svg" width="90" height="32">
<path
fill="#ffffff"
fill-rule="evenodd"
d="M60.082 5.878L44.408 32 28.735 5.878h31.347zM15.673 0l15.674 26.122H0L15.673 0z"
/>
</svg>
</a>
</div>
<nav class="footer__nav">
<ul class="footer__list">
<li class="header__list-item">
<a class="footer__link" href="/index.html">Home</a>
</li>
<li class="header__list-item">
<a class="footer__link" href="/portfolio.html">Portfolio</a>
</li>
<li class="header__list-item">
<a class="footer__link" href="/contactme.html">Contact Me</a>
</li>
</ul>
</nav>
<div class="footer__socials">
<a href="http://www.github.com/barterkamp" target="_blank"
><img class="social__icon" src="/images/icons/github.svg" alt=""
/></a>
<a href="http://www.twitter.com/barterkamp" target="_blank"
><img class="social__icon" src="/images/icons/twitter.svg" alt=""
/></a>
<a href="http://www.linkedin.com/in/barterkamp" target="_blank"
><img class="social__icon" src="/images/icons/linkedin.svg" alt=""
/></a>
</div>
</div>
</footer>
</body>
</html>