-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
257 lines (255 loc) · 15.7 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
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/png" sizes="32x32" href="images/favicon-32x32.png">
<link rel="stylesheet" href="styles.css">
<title>Frontend Mentor | Single-page developer portfolio</title>
</head>
<body>
<header class="header">
<nav class="header-nav nav">
<p>adamkeyes</p>
<ul class="nav__list">
<li>
<a class="nav__link" href="#">
<h3 class="visually-hidden">link to social media github</h3>
<svg class="social-ico" xmlns="http://www.w3.org/2000/svg" width="25" height="24"><path fill="#FFF" fill-rule="evenodd" d="M12.304 0C5.506 0 0 5.506 0 12.304c0 5.444 3.522 10.042 8.413 11.672.615.108.845-.261.845-.584 0-.292-.015-1.261-.015-2.291-3.091.569-3.891-.754-4.137-1.446-.138-.354-.738-1.446-1.261-1.738-.43-.23-1.046-.8-.016-.815.97-.015 1.661.892 1.892 1.261 1.107 1.86 2.876 1.338 3.584 1.015.107-.8.43-1.338.784-1.646-2.738-.307-5.598-1.368-5.598-6.074 0-1.338.477-2.446 1.26-3.307-.122-.308-.553-1.569.124-3.26 0 0 1.03-.323 3.383 1.26.985-.276 2.03-.415 3.076-.415 1.046 0 2.092.139 3.076.416 2.353-1.6 3.384-1.261 3.384-1.261.676 1.691.246 2.952.123 3.26.784.861 1.26 1.953 1.26 3.307 0 4.721-2.875 5.767-5.613 6.074.446.385.83 1.123.83 2.277 0 1.645-.015 2.968-.015 3.383 0 .323.231.708.846.584a12.324 12.324 0 0 0 8.382-11.672C24.607 5.506 19.101 0 12.304 0Z"/></svg>
</a>
</li>
<li>
<a class="nav__link" href="#">
<h3 class="visually-hidden">link to social media frontend-mentor</h3>
<svg class="social-ico" xmlns="http://www.w3.org/2000/svg" width="26" height="23"><path fill="#FFF" d="M13.084.23a.751.751 0 0 0-.736.75v14.267a.75.75 0 1 0 1.5 0V.98a.75.75 0 0 0-.763-.75ZM24.44 4.504a.752.752 0 0 0-.284.064l-6.44 2.875a.752.752 0 0 0 0 1.37l6.44 2.884a.75.75 0 0 0 .612-1.369L19.861 8.13l4.907-2.191a.753.753 0 0 0 .38-.99.752.752 0 0 0-.708-.444ZM1.371 9.663a.752.752 0 0 0-.74.938C2.41 17.447 8.603 22.23 15.685 22.23a.75.75 0 1 0 0-1.501A14.053 14.053 0 0 1 2.083 10.225a.75.75 0 0 0-.712-.561v-.001Z"/></svg>
</a>
</li>
<li>
<a class="nav__link" href="#">
<h3 class="visually-hidden">link to social media linkedin</h3>
<svg class="social-ico" xmlns="http://www.w3.org/2000/svg" width="25" height="24"><path fill="#FFF" fill-rule="evenodd" d="M5.551 3.304c-1.14 0-2.067.926-2.067 2.064 0 1.14.928 2.066 2.067 2.066a2.066 2.066 0 0 0 0-4.13ZM3.767 8.998v11.453h3.562L7.33 8.998H3.767Zm5.798 0V20.45l3.554.002.002-5.668c0-1.454.253-2.941 2.132-2.941 1.851 0 1.851 1.755 1.851 3.036v5.571l3.559-.001v-6.28c0-2.834-.517-5.457-4.27-5.457-1.763 0-2.916.997-3.368 1.85h-.05V8.997h-3.41ZM22.435 24H1.982c-.976 0-1.77-.777-1.77-1.732V1.731C.212.776 1.006 0 1.982 0h20.453c.98 0 1.777.776 1.777 1.73v20.538c0 .955-.797 1.732-1.777 1.732Z"/></svg>
</a>
</li>
<li>
<a class="nav__link" href="#">
<h3 class="visually-hidden">link to social media twitter</h3>
<svg class="social-ico" xmlns="http://www.w3.org/2000/svg" width="24" height="20"><path fill="#FFF" d="M23.492 2.705a9.563 9.563 0 0 1-2.742.751 4.788 4.788 0 0 0 2.1-2.643 9.536 9.536 0 0 1-3.033 1.159 4.778 4.778 0 0 0-8.14 4.357 13.564 13.564 0 0 1-9.844-4.99 4.774 4.774 0 0 0-.646 2.4 4.778 4.778 0 0 0 2.124 3.977 4.765 4.765 0 0 1-2.163-.598v.061a4.778 4.778 0 0 0 3.832 4.684 4.812 4.812 0 0 1-2.158.082 4.78 4.78 0 0 0 4.462 3.316 9.584 9.584 0 0 1-5.932 2.045c-.38 0-.762-.022-1.14-.067a13.508 13.508 0 0 0 7.32 2.146c8.787 0 13.59-7.277 13.59-13.589 0-.205-.004-.412-.013-.617a9.71 9.71 0 0 0 2.381-2.471l.002-.003Z"/></svg>
</a>
</li>
</ul>
</nav>
</header>
<main class="main">
<h1 class="main-title visually-hidden">Web developer portfolio Adam Keyes</h1>
<section class="intro">
<h2 class="intro__title visually-hidden">Introduce</h2>
<span class="decor__rings decor">
<svg class="pattern-rings" xmlns="http://www.w3.org/2000/svg" width="530" height="129"><g fill="none" fill-rule="evenodd" stroke="#FFF" opacity=".25"><ellipse cx="265" cy="40" rx="264.5" ry="39.5"/><ellipse cx="265" cy="52" rx="264.5" ry="39.5"/><ellipse cx="265" cy="65" rx="264.5" ry="39.5"/><ellipse cx="265" cy="77" rx="264.5" ry="39.5"/><ellipse cx="265" cy="89" rx="264.5" ry="39.5"/></g>
</svg>
</span>
<div class="intro__text">
<p>Nice to <br class="intro__text--br-hidden"> meet you! I'm <span class="text--underline">Adam Keyes</span>.</p>
<p>Based in the UK, I'm a front-end developer passionate about
building accessible web apps that users love.</p>
<a class="btn intro__link" href="#contact">Contact Me</a>
</div>
<div class="intro__img">
<h3 class="img__title visually-hidden">Profile Photo</h3>
</div>
<span class="decor__circle decor">
<svg xmlns="http://www.w3.org/2000/svg" width="129" height="129"><circle cx="830.5" cy="585.5" r="64" fill="none" stroke="#FFF" transform="translate(-766 -521)"/></svg>
</span>
</section>
<section class="skills">
<h2 class="skills__title visually-hidden">Skills</h2>
<span class="decor__rings decor">
<svg class="pattern-rings" xmlns="http://www.w3.org/2000/svg" width="530" height="129"><g fill="none" fill-rule="evenodd" stroke="#FFF" opacity=".25"><ellipse cx="265" cy="40" rx="264.5" ry="39.5"/><ellipse cx="265" cy="52" rx="264.5" ry="39.5"/><ellipse cx="265" cy="65" rx="264.5" ry="39.5"/><ellipse cx="265" cy="77" rx="264.5" ry="39.5"/><ellipse cx="265" cy="89" rx="264.5" ry="39.5"/></g>
</svg>
</span>
<ul class="skills__list">
<li class="skills__item">
<h3>HTML</h3>
<p>4 Years experience</p>
</li>
<li class="skills__item">
<h3>CSS</h3>
<p>4 Years experience</p>
</li>
<li class="skills__item">
<h3>Javascript</h3>
<p>4 Years experience</p>
</li>
<li class="skills__item">
<h3>Accessibility</h3>
<p>4 Years experience</p>
</li>
<li class="skills__item">
<h3>React</h3>
<p>3 Years experience</p>
</li>
<li class="skills__item">
<h3>Sass</h3>
<p>3 Years experience</p>
</li>
</ul>
</section>
<section class="projects">
<div class="projects__wrapper">
<h2 class="projects__title title">projects</h2>
<a class="btn projects__link" href="#contact">Contact Me</a>
</div>
<ul class="projects__list">
<li class="projects__item">
<img class="projects__preview-img" src="images/thumbnail-project-1-large.webp" alt="design portfolio">
<div class="projects__describe">
<h3 class="describe__title">design portfolio</h3>
<ul class="projects__tech-list">
<li class="describe__item">html</li>
<li class="describe__item">css</li>
</ul>
<div class="describe__links-wrapper">
<a class="btn" href="#">view projects</a>
<a class="btn" href="#">view code</a>
</div>
</div>
</li>
<li class="projects__item">
<img class="projects__preview-img" src="images/thumbnail-project-2-large.webp" alt="e-learning landing page">
<div class="projects__describe">
<h3 class="describe__title">e-learning landing page</h3>
<ul class="projects__tech-list">
<li class="describe__item">html</li>
<li class="describe__item">css</li>
</ul>
<div class="describe__links-wrapper">
<a class="btn" href="#">view projects</a>
<a class="btn" href="#">view code</a>
</div>
</div>
</li>
<li class="projects__item">
<img class="projects__preview-img" src="images/thumbnail-project-3-large.webp" alt="todo web app">
<div class="projects__describe">
<h3 class="describe__title">todo web app</h3>
<ul class="projects__tech-list">
<li class="describe__item">html</li>
<li class="describe__item">css</li>
<li class="describe__item">javascript</li>
</ul>
<div class="describe__links-wrapper">
<a class="btn" href="#">view projects</a>
<a class="btn" href="#">view code</a>
</div>
</div>
</li>
<li class="projects__item">
<img class="projects__preview-img" src="images/thumbnail-project-4-large.webp" alt="entertainment web app">
<div class="projects__describe">
<h3 class="describe__title">entertainment web app</h3>
<ul class="projects__tech-list">
<li class="describe__item">html</li>
<li class="describe__item">css</li>
<li class="describe__item">javascript</li>
</ul>
<div class="describe__links-wrapper">
<a class="btn" href="#">view projects</a>
<a class="btn" href="#">view code</a>
</div>
</div>
</li>
<li class="projects__item">
<img class="projects__preview-img" src="images/thumbnail-project-5-large.webp" alt="memory game">
<div class="projects__describe">
<h3 class="describe__title">memory game</h3>
<ul class="projects__tech-list">
<li class="describe__item">html</li>
<li class="describe__item">css</li>
<li class="describe__item">javascript</li>
</ul>
<div class="describe__links-wrapper">
<a class="btn" href="#">view projects</a>
<a class="btn" href="#">view code</a>
</div>
</div>
</li>
<li class="projects__item">
<div class="preview-img--wrapper">
<img class="projects__preview-img" src="images/thumbnail-project-6-large.webp" alt="art gallery showcase">
</div>
<div class="projects__describe">
<h3 class="describe__title">art gallery showcase</h3>
<ul class="projects__tech-list">
<li class="describe__item">html</li>
<li class="describe__item">css</li>
<li class="describe__item">javascript</li>
</ul>
<div class="describe__links-wrapper">
<a class="btn" href="#">view projects</a>
<a class="btn" href="#">view code</a>
</div>
</div>
</li>
</ul>
</section>
</main>
<footer class="footer">
<section id ="contact" class="contact">
<h2 class="contact-title title">Contact</h2>
<p>I would love to hear about your project and how I could help. Please fill in the form, and I’ll get back to you as soon as possible.</p>
<div class="contact-wrapper">
<span class="decor__rings decor">
<svg class="pattern-rings" xmlns="http://www.w3.org/2000/svg" width="530" height="129"><g fill="none" fill-rule="evenodd" stroke="#FFF" opacity=".25"><ellipse cx="265" cy="40" rx="264.5" ry="39.5"/><ellipse cx="265" cy="52" rx="264.5" ry="39.5"/><ellipse cx="265" cy="65" rx="264.5" ry="39.5"/><ellipse cx="265" cy="77" rx="264.5" ry="39.5"/><ellipse cx="265" cy="89" rx="264.5" ry="39.5"/></g>
</svg>
</span>
<form id="myForm">
<div class="contact-form">
<div class="form__input-wrapper">
<input class="form__input" id="name" name="name" type="text" placeholder="name" autocomplete="name" required>
</div>
<div class="form__input-wrapper input-email">
<input class="form__input" id="email" name="email" type="email" placeholder="email" autocomplete="off" >
<span class="email-alert hidden">Sorry, invalid format here</span>
</div>
<div class="form__input-wrapper input-message">
<textarea class="form__input" id="message" name="message" placeholder="message" spellcheck="false" required></textarea>
</div>
<button id="submit" class="btn form__btn-submit" type="submit">
send message
</button>
</div>
</form>
</div>
</section>
<nav class="footer-nav nav">
<p>adamkeyes</p>
<ul class="nav__list">
<li>
<a class="nav__link" href="#">
<h3 class="visually-hidden">link to social media github</h3>
<svg class="social-ico" xmlns="http://www.w3.org/2000/svg" width="25" height="24"><path fill="#FFF" fill-rule="evenodd" d="M12.304 0C5.506 0 0 5.506 0 12.304c0 5.444 3.522 10.042 8.413 11.672.615.108.845-.261.845-.584 0-.292-.015-1.261-.015-2.291-3.091.569-3.891-.754-4.137-1.446-.138-.354-.738-1.446-1.261-1.738-.43-.23-1.046-.8-.016-.815.97-.015 1.661.892 1.892 1.261 1.107 1.86 2.876 1.338 3.584 1.015.107-.8.43-1.338.784-1.646-2.738-.307-5.598-1.368-5.598-6.074 0-1.338.477-2.446 1.26-3.307-.122-.308-.553-1.569.124-3.26 0 0 1.03-.323 3.383 1.26.985-.276 2.03-.415 3.076-.415 1.046 0 2.092.139 3.076.416 2.353-1.6 3.384-1.261 3.384-1.261.676 1.691.246 2.952.123 3.26.784.861 1.26 1.953 1.26 3.307 0 4.721-2.875 5.767-5.613 6.074.446.385.83 1.123.83 2.277 0 1.645-.015 2.968-.015 3.383 0 .323.231.708.846.584a12.324 12.324 0 0 0 8.382-11.672C24.607 5.506 19.101 0 12.304 0Z"/></svg>
</a>
</li>
<li>
<a class="nav__link" href="#">
<h3 class="visually-hidden">link to social media frontend-mentor</h3>
<svg class="social-ico" xmlns="http://www.w3.org/2000/svg" width="26" height="23"><path fill="#FFF" d="M13.084.23a.751.751 0 0 0-.736.75v14.267a.75.75 0 1 0 1.5 0V.98a.75.75 0 0 0-.763-.75ZM24.44 4.504a.752.752 0 0 0-.284.064l-6.44 2.875a.752.752 0 0 0 0 1.37l6.44 2.884a.75.75 0 0 0 .612-1.369L19.861 8.13l4.907-2.191a.753.753 0 0 0 .38-.99.752.752 0 0 0-.708-.444ZM1.371 9.663a.752.752 0 0 0-.74.938C2.41 17.447 8.603 22.23 15.685 22.23a.75.75 0 1 0 0-1.501A14.053 14.053 0 0 1 2.083 10.225a.75.75 0 0 0-.712-.561v-.001Z"/></svg>
</a>
</li>
<li>
<a class="nav__link" href="#">
<h3 class="visually-hidden">link to social media linkedin</h3>
<svg class="social-ico" xmlns="http://www.w3.org/2000/svg" width="25" height="24"><path fill="#FFF" fill-rule="evenodd" d="M5.551 3.304c-1.14 0-2.067.926-2.067 2.064 0 1.14.928 2.066 2.067 2.066a2.066 2.066 0 0 0 0-4.13ZM3.767 8.998v11.453h3.562L7.33 8.998H3.767Zm5.798 0V20.45l3.554.002.002-5.668c0-1.454.253-2.941 2.132-2.941 1.851 0 1.851 1.755 1.851 3.036v5.571l3.559-.001v-6.28c0-2.834-.517-5.457-4.27-5.457-1.763 0-2.916.997-3.368 1.85h-.05V8.997h-3.41ZM22.435 24H1.982c-.976 0-1.77-.777-1.77-1.732V1.731C.212.776 1.006 0 1.982 0h20.453c.98 0 1.777.776 1.777 1.73v20.538c0 .955-.797 1.732-1.777 1.732Z"/></svg>
</a>
</li>
<li>
<a class="nav__link" href="#">
<h3 class="visually-hidden">link to social media twitter</h3>
<svg class="social-ico" xmlns="http://www.w3.org/2000/svg" width="24" height="20"><path fill="#FFF" d="M23.492 2.705a9.563 9.563 0 0 1-2.742.751 4.788 4.788 0 0 0 2.1-2.643 9.536 9.536 0 0 1-3.033 1.159 4.778 4.778 0 0 0-8.14 4.357 13.564 13.564 0 0 1-9.844-4.99 4.774 4.774 0 0 0-.646 2.4 4.778 4.778 0 0 0 2.124 3.977 4.765 4.765 0 0 1-2.163-.598v.061a4.778 4.778 0 0 0 3.832 4.684 4.812 4.812 0 0 1-2.158.082 4.78 4.78 0 0 0 4.462 3.316 9.584 9.584 0 0 1-5.932 2.045c-.38 0-.762-.022-1.14-.067a13.508 13.508 0 0 0 7.32 2.146c8.787 0 13.59-7.277 13.59-13.589 0-.205-.004-.412-.013-.617a9.71 9.71 0 0 0 2.381-2.471l.002-.003Z"/></svg>
</a>
</li>
</ul>
</nav>
</footer>
<script src="script.js"></script>
</body>
</html>