-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
285 lines (273 loc) · 22 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
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Playfair+Display">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins">
<link rel="stylesheet" href="styles.css">
<!-- CSS Components -->
<link rel="stylesheet" type="text/css" href="src/css/components/project-popupModal.css">
<link rel="stylesheet" type="text/css" href="src/css/components/slider.css">
<!-- CSS elements -->
<link rel="stylesheet" type="text/css" href="src/css/elements/header.css">
<link rel="stylesheet" type="text/css" href="src/css/elements/technology.css">
<link rel="stylesheet" type="text/css" href="src/css/elements/paragraph.css">
<link rel="stylesheet" type="text/css" href="src/css/elements/button.css">
<link rel="stylesheet" type="text/css" href="input-error.css">
<!-- CSS theme -->
<link rel="stylesheet" type="text/css" href="src/css/theme.css">
<link rel="stylesheet" href="https://meyerweb.com/eric/tools/css/reset/reset.css">
<title>Cecilia Mukima</title>
<body>
<header>
<nav class="nav">
<svg class="nav-icon" width="20" height="14" viewBox="0 0 20 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M0 0H20V2H0V0ZM0 6.00002H20V8.00002H0V6.00002ZM20 12H0V14H20V12Z" fill="#1A2236" />
</svg>
<ul class="desktop-menu">
<li class="nav-item"><a href="#">Hello</a></li>
<li class="nav-item"><a href="#portfolio">Portfolio</a></li>
<li class="nav-item"><a href="#about">About</a></li>
<li class="nav-item"><a href="#contact">Contact</a></li>
</ul>
<div class="mobile-menu">
<img class="close-icon" src="images/Union.svg" alt="mobile menu close button" />
<ul class="nav-items">
<li class="nav-item"><a href="#">Hello</a></li>
<li class="nav-item"><a href="#portfolio">Portfolio</a></li>
<li class="nav-item"><a href="#about">About</a></li>
<li class="nav-item"><a href="#contact">Contact</a></li>
</ul>
</div>
</nav>
</header>
<main>
<div class="CTA">
<article class="CTA-container section-container">
<h1 class="CTA-my-name section-header">Cecilia Mukima</h1>
<p class="CTA-self-intro section-summery">
Hello! I am an avid software developer who can help you
build your dream project or website. I have create many projects as showcased below.
Contact me we co-create together
</p>
<a class="CTA-button section-button" href="#">Start collaboration</a>
</article>
<div class="CTA-decorative-img"></div>
</div>
<section id="portfolio" class="project-cards js-projects">
<h2 class="project-cards-header section-header">Projects</h2>
<img class="image-geometry_2" src="images/image-geometry_2.png" alt="">
<img class="image-geometry_3" src="images/image-geometry_3.png" alt="">
<img class="image-geometry_4" src="images/image-geometry_4.png" alt="">
<img class="image-geometry_5" src="images/image-geometry_5.png" alt="">
</section>
<section id="about" class="about-section">
<article class="about-summery-container">
<h2 class="about-header section-header">About</h2>
<p class="about-summery section-summery">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ea eiusmod</p>
<a class="about-button section-button" href="">
<span>Get my CV</span>
<svg width="26" height="25" viewBox="0 0 26 25" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1 6V24H25V6" stroke="white" stroke-width="2" />
<path
d="M13.6623 13.9624L17.9103 9.71441L19.3245 11.1286L12.6622 17.7909L6 11.1286L7.41421 9.71441L11.6623 13.9625V2.52881e-07L13.6623 0V13.9624Z"
fill="white" />
</svg>
</a>
</article>
<article class="tech-stack languages">
<h3 class="tech-stack-category">Languages</h3>
<ul class="tech-stack-list">
<li>Javascript (ES5/ES6)</li>
<li>Ruby</li>
<li>HTML</li>
<li>CSS</li>
</ul>
</article>
<article class="tech-stack frameworks">
<h3 class="tech-stack-category">Frameworks</h3>
<ul class="tech-stack-list">
<li>Bootstrap</li>
<li>Ruby on Rails</li>
<li>RSpec</li>
<li>Capibara</li>
<li>Selinium</li>
</ul>
</article>
<article class="tech-stack skills">
<h3 class="tech-stack-category">Skills</h3>
<ul class="tech-stack-list">
<li>Codekit</li>
<li>Codepen</li>
<li>Github</li>
<li>Terminal</li>
</ul>
</article>
<img class="image_dots_with_teal" src="images/image_dots_with_teal.png" alt="">
</section>
<!-- Form section-->
<section id="contact" class="form-section">
<h2 class="form-section-header section-header">Get started</h2>
<p class="section-summery">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna.</p>
<form class="contact-form js-contact-form" autocomplete="off" action="https://formspree.io/f/mbjwpovv" method="post">
<label for="name">
Your name
<input id="name" class="form-field js-contact-form__name" type="text" name="name" maxlength="30" placeholder="Your name" required data-field="name">
</label>
<label for="email">
Your email
<input id="email" class="form-field js-contact-form__email" type="email" name="email" placeholder="Your email" required data-field="email">
</label>
<textarea id="message" class="form-field js-contact-form__message" name="message" placeholder="Enter your message here.." maxlength="500" required data-field="message"></textarea>
<P class="input-error js-input-error__email">* Your email needs to be in lower case</P>
<button class="form-button section-button " type="submit">
Start Collaboration
</button>
</form>
</section>
<footer class="footer">
<a class="about-button section-button footer-button" href="">
<span>Get my Resume</span>
<svg width="23" height="23" viewBox="0 0 23 23" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M12.5803 2H18.5879L8.71501 11.8729L10.1292 13.2871L20.0022 3.41417V9.42183H22.0022V1V0H21.0022H12.5803V2ZM1 3.15813H5.21128V5.15813H2V20.0018H16.8437V16.7911H18.8437V21.0018V22.0018H17.8437H1H0V21.0018V4.15813V3.15813H1Z"
fill="#92DCDC" />
</svg>
</a>
<ul class="social_icons">
<li class="ic_stackoverflow">
<svg role="img" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<desc>Stackoverflow icon</desc>
<path
d="M17.249 15C16.835 15 16.499 15.336 16.499 15.75V22.5H4.49902V15.75C4.49902 15.336 4.16302 15 3.74902 15C3.33502 15 2.99902 15.336 2.99902 15.75V23.25C2.99902 23.664 3.33502 24 3.74902 24H17.249C17.663 24 17.999 23.664 17.999 23.25V15.75C17.999 15.336 17.663 15 17.249 15Z"
fill="white" />
<path
d="M14.249 19.5H6.74902C6.33502 19.5 5.99902 19.836 5.99902 20.25C5.99902 20.664 6.33502 21 6.74902 21H14.249C14.663 21 14.999 20.664 14.999 20.25C14.999 19.836 14.663 19.5 14.249 19.5Z"
fill="white" />
<path
d="M14.3227 16.5046L6.82269 15.7546C6.4042 15.7141 6.0442 16.0141 6.0022 16.4251C5.9617 16.8376 6.2617 17.2051 6.67419 17.2456L14.1742 17.9956C14.1997 17.9986 14.2252 18.0001 14.2507 18.0001C14.6302 18.0001 14.9572 17.7121 14.9932 17.3251C15.0367 16.9126 14.7337 16.5451 14.3227 16.5046Z"
fill="white" />
<path
d="M15.2151 13.5317L7.71513 11.2817C7.31463 11.1617 6.89913 11.3882 6.78063 11.7842C6.66213 12.1817 6.88713 12.5987 7.28313 12.7187L14.7831 14.9687C14.8551 14.9897 14.9271 15.0002 14.9991 15.0002C15.3216 15.0002 15.6201 14.7902 15.7176 14.4647C15.8376 14.0672 15.6126 13.6502 15.2151 13.5317Z"
fill="white" />
<path
d="M16.1139 10.5945L9.36393 6.84453C9.00243 6.64053 8.54493 6.77403 8.34393 7.13553C8.14143 7.49853 8.27193 7.95452 8.63493 8.15552L15.3849 11.9055C15.5004 11.97 15.6249 12 15.7494 12C16.0119 12 16.2684 11.8605 16.4049 11.6145C16.6059 11.2515 16.4754 10.7955 16.1139 10.5945Z"
fill="white" />
<path
d="M17.8853 9.35246L14.1353 3.35249C13.9163 2.99999 13.4528 2.89649 13.1018 3.11399C12.7508 3.33299 12.6443 3.79649 12.8633 4.14748L16.6133 10.1475C16.7558 10.3755 17.0003 10.5 17.2493 10.5C17.3858 10.5 17.5238 10.464 17.6468 10.386C17.9978 10.167 18.1043 9.70346 17.8853 9.35246Z"
fill="white" />
<path
d="M20.9856 8.10306L19.4856 0.603093C19.4031 0.196595 18.9921 -0.0674039 18.6036 0.0150957C18.1956 0.0960954 17.9316 0.490594 18.0141 0.897092L19.5141 8.39706C19.5861 8.75406 19.8981 9.00006 20.2476 9.00006C20.2971 9.00006 20.3466 8.99556 20.3961 8.98506C20.8041 8.90406 21.0681 8.50956 20.9856 8.10306Z"
fill="white" />
</svg>
</li>
<li class="ic_github">
<svg role="img" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<desc>Github Icon</desc>
<path
d="M12 0.5C5.37 0.5 0 5.78 0 12.292C0 17.503 3.438 21.922 8.205 23.48C8.805 23.591 9.025 23.226 9.025 22.913C9.025 22.633 9.015 21.891 9.01 20.908C5.672 21.619 4.968 19.326 4.968 19.326C4.422 17.965 3.633 17.601 3.633 17.601C2.546 16.87 3.717 16.885 3.717 16.885C4.922 16.967 5.555 18.1 5.555 18.1C6.625 19.903 8.364 19.382 9.05 19.081C9.158 18.318 9.467 17.799 9.81 17.504C7.145 17.209 4.344 16.195 4.344 11.677C4.344 10.39 4.809 9.338 5.579 8.513C5.444 8.215 5.039 7.016 5.684 5.392C5.684 5.392 6.689 5.076 8.984 6.601C9.944 6.339 10.964 6.209 11.984 6.203C13.004 6.209 14.024 6.339 14.984 6.601C17.264 5.076 18.269 5.392 18.269 5.392C18.914 7.016 18.509 8.215 18.389 8.513C19.154 9.338 19.619 10.39 19.619 11.677C19.619 16.207 16.814 17.204 14.144 17.494C14.564 17.848 14.954 18.571 14.954 19.676C14.954 21.254 14.939 22.522 14.939 22.905C14.939 23.214 15.149 23.583 15.764 23.465C20.565 21.917 24 17.495 24 12.292C24 5.78 18.627 0.5 12 0.5Z"
fill="white" />
</svg>
</li>
<li class="ic_twitter">
<svg role="img" width="24" height="20" viewBox="0 0 24 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<desc>Twitter Icon</desc>
<path
d="M24 2.5585C23.1075 2.95 22.1565 3.2095 21.165 3.3355C22.185 2.7265 22.9635 1.7695 23.3295 0.616C22.3785 1.183 21.3285 1.5835 20.2095 1.807C19.3065 0.8455 18.0195 0.25 16.6155 0.25C13.8915 0.25 11.6985 2.461 11.6985 5.1715C11.6985 5.5615 11.7315 5.9365 11.8125 6.2935C7.722 6.094 4.1025 4.1335 1.671 1.147C1.2465 1.8835 0.9975 2.7265 0.9975 3.634C0.9975 5.338 1.875 6.8485 3.183 7.723C2.3925 7.708 1.617 7.4785 0.96 7.117C0.96 7.132 0.96 7.1515 0.96 7.171C0.96 9.562 2.6655 11.548 4.902 12.0055C4.5015 12.115 4.065 12.1675 3.612 12.1675C3.297 12.1675 2.979 12.1495 2.6805 12.0835C3.318 14.032 5.127 15.4645 7.278 15.511C5.604 16.8205 3.4785 17.6095 1.1775 17.6095C0.774 17.6095 0.387 17.5915 0 17.542C2.1795 18.9475 4.7625 19.75 7.548 19.75C16.602 19.75 21.552 12.25 21.552 5.749C21.552 5.5315 21.5445 5.3215 21.534 5.113C22.5105 4.42 23.331 3.5545 24 2.5585Z"
fill="white" />
</svg>
</li>
<li class="ic_linkedin">
<svg role="img" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<desc>Linkedin Icon</desc>
<path
d="M22.2691 0H1.7309C0.774902 0 0 0.774902 0 1.7309V22.2691C0 23.2251 0.774902 24 1.7309 24H22.2691C23.2251 24 24 23.2251 24 22.2691V1.7309C24 0.774902 23.2251 0 22.2691 0V0ZM8.51294 18.1406H5.59039V9.34808H8.51294V18.1406ZM7.05176 8.14746H7.03271C6.052 8.14746 5.41772 7.47235 5.41772 6.6286C5.41772 5.76581 6.07141 5.10938 7.07117 5.10938C8.07092 5.10938 8.68616 5.76581 8.7052 6.6286C8.7052 7.47235 8.07092 8.14746 7.05176 8.14746ZM19.051 18.1406H16.1288V13.4368C16.1288 12.2547 15.7057 11.4485 14.6483 11.4485C13.8409 11.4485 13.3601 11.9923 13.1488 12.5173C13.0715 12.7051 13.0527 12.9677 13.0527 13.2305V18.1406H10.1303C10.1303 18.1406 10.1686 10.173 10.1303 9.34808H13.0527V10.593C13.441 9.9939 14.1359 9.14172 15.6865 9.14172C17.6093 9.14172 19.051 10.3984 19.051 13.099V18.1406Z"
fill="white" />
</svg>
</li>
<li class="ic_medium">
<svg role="img" width="24" height="20" viewBox="0 0 24 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<desc>Medium Icon</desc>
<path
d="M22.085 2.733L24 0.901V0.5H17.366L12.638 12.268L7.259 0.5H0.303V0.901L2.54 3.594C2.758 3.793 2.872 4.084 2.843 4.377V14.96C2.912 15.341 2.788 15.733 2.52 16.01L0 19.064V19.46H7.145V19.059L4.625 16.01C4.352 15.732 4.223 15.347 4.278 14.96V5.806L10.55 19.465H11.279L16.672 5.806V16.687C16.672 16.974 16.672 17.033 16.484 17.221L14.544 19.098V19.5H23.956V19.099L22.086 17.268C21.922 17.144 21.837 16.936 21.872 16.734V3.267C21.837 3.064 21.921 2.856 22.085 2.733Z"
fill="white" />
</svg>
</li>
<li class="ic_anglelist">
<svg role="img" width="16" height="24" viewBox="0 0 16 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<desc>Angellist Icon</desc>
<path
d="M13.2296 10.3758C14.1431 10.5164 14.7755 10.938 15.1268 11.5001C15.4782 12.0623 15.689 13.046 15.689 14.3108C15.689 16.8405 14.916 18.9485 13.3701 20.5647C11.8243 22.1808 9.85676 23.024 7.46765 23.024C6.55417 23.024 5.64069 22.8835 4.72721 22.5322C3.81373 22.1808 3.11105 21.689 2.47864 21.1268C1.77596 20.4944 1.21382 19.7215 0.86248 19.0188C0.581409 18.2458 0.370605 17.4729 0.370605 16.6999C0.370605 15.8567 0.581409 15.1541 0.932748 14.6622C1.28409 14.1703 1.9165 13.8892 2.68944 13.6784C2.54891 13.3271 2.40837 13.046 2.3381 12.7649C2.26784 12.5541 2.19757 12.3433 2.19757 12.2028C2.19757 11.7812 2.40837 11.2893 2.90025 10.7974C3.39212 10.3056 3.81373 10.0948 4.23533 10.0948C4.44614 10.0948 4.58667 10.0948 4.79748 10.165C5.00828 10.2353 5.21908 10.3056 5.50015 10.5164C4.86774 8.40834 4.23533 6.65165 3.88399 5.4571C3.53266 4.26255 3.39212 3.4896 3.39212 2.99773C3.39212 2.36532 3.53266 1.87344 3.88399 1.5221C4.16507 1.17076 4.65694 0.959961 5.21908 0.959961C6.13256 0.959961 7.32712 3.06799 8.80274 7.35433C9.08381 8.05701 9.22434 8.61915 9.36488 9.04075C9.50542 8.75968 9.64595 8.26781 9.85675 7.70567C11.3324 3.4896 12.5972 1.38157 13.5809 1.38157C14.0728 1.38157 14.4944 1.5221 14.8458 1.87344C15.1268 2.22478 15.3376 2.71666 15.3376 3.2788C15.3376 3.7004 15.1971 4.54362 14.8458 5.73817C14.4242 6.93272 13.9323 8.47861 13.2296 10.3758ZM2.40837 16.5594C2.54891 16.6999 2.75971 16.981 2.97051 17.3324C3.60292 18.2458 4.23533 18.7377 4.79748 18.7377C5.00828 18.7377 5.14881 18.6674 5.28935 18.5269C5.42989 18.3864 5.50015 18.2458 5.50015 18.1756C5.50015 18.035 5.42988 17.754 5.21908 17.4026C5.00828 17.0513 4.72721 16.6297 4.37587 16.2081C3.95426 15.7162 3.60292 15.2946 3.39212 15.0838C3.11105 14.873 2.90025 14.7324 2.75971 14.7324C2.40837 14.7324 2.05703 14.9432 1.77596 15.2946C1.49489 15.6459 1.35435 16.1378 1.35435 16.6297C1.35435 17.0513 1.42462 17.4729 1.63543 18.035C1.84623 18.5269 2.1273 19.089 2.54891 19.5809C3.18132 20.2836 3.88399 20.916 4.79748 21.3376C5.71096 21.7592 6.62444 21.97 7.74872 21.97C9.71622 21.97 11.3324 21.2673 12.6675 19.7917C14.0026 18.3161 14.635 16.4891 14.635 14.2406C14.635 13.5379 14.5647 13.046 14.4944 12.6244C14.4242 12.2028 14.2134 11.9217 14.0026 11.7812C13.5809 11.4299 12.808 11.1488 11.6134 10.8677C10.4189 10.5866 9.15408 10.4461 7.88926 10.4461C7.53792 10.4461 7.25685 10.5164 7.11631 10.6569C6.97578 10.7974 6.90551 11.0083 6.90551 11.2893C6.90551 11.992 7.25685 12.4839 8.02979 12.7649C8.80274 13.046 10.0676 13.2568 11.754 13.2568H12.3864C12.5269 13.2568 12.6675 13.3271 12.7377 13.3974C12.808 13.5379 12.8783 13.6784 12.8783 13.8892C12.7377 14.0298 12.3864 14.2406 11.8243 14.4514C11.2621 14.6622 10.9108 14.873 10.6297 15.0838C9.99729 15.5054 9.50542 16.0675 9.15408 16.6999C8.80274 17.3324 8.59194 17.8945 8.59194 18.4566C8.59194 18.808 8.6622 19.1593 8.80274 19.6512C8.94327 20.1431 9.01354 20.4241 9.01354 20.4944V20.6349V20.7755C8.59194 20.7755 8.2406 20.4944 7.95953 20.0025C7.67845 19.5107 7.60819 18.8782 7.60819 18.035V17.8945C7.53792 17.9648 7.46765 18.035 7.39738 18.035C7.32712 18.035 7.25685 18.1053 7.11631 18.1053H6.83524C6.76497 18.1053 6.69471 18.035 6.55417 18.035C6.55417 18.1756 6.62444 18.2458 6.62444 18.3864V18.6674C6.62444 19.0188 6.4839 19.3701 6.20283 19.6512C5.92176 19.9323 5.57042 20.0728 5.14881 20.0728C4.5164 20.0728 3.88399 19.7917 3.18132 19.1593C2.54891 18.5269 2.19757 17.9648 2.19757 17.3324C2.19757 17.1918 2.19757 17.1215 2.26784 17.0513C2.26784 16.6999 2.3381 16.6297 2.40837 16.5594ZM6.97578 16.9107C7.11631 16.9107 7.32712 16.8405 7.46765 16.6999C7.60819 16.5594 7.67845 16.3486 7.67845 16.2081C7.67845 15.9973 7.53792 15.5757 7.25685 14.873C6.97578 14.1703 6.62444 13.4676 6.20283 12.8352C5.92176 12.3433 5.57042 11.9217 5.28935 11.7109C5.00828 11.4299 4.72721 11.3596 4.44614 11.3596C4.23533 11.3596 4.02453 11.5001 3.74346 11.7812C3.46239 12.0623 3.39212 12.2731 3.39212 12.5541C3.39212 12.7649 3.53266 13.1866 3.74346 13.6784C4.02453 14.1703 4.3056 14.6622 4.72721 15.2243C5.14881 15.7865 5.57042 16.2783 5.99203 16.6297C6.41363 16.7702 6.69471 16.9107 6.97578 16.9107ZM8.4514 9.6029L6.76497 4.89496C6.34337 3.7004 6.0623 2.85719 5.78122 2.50585C5.57042 2.15451 5.35962 1.94371 5.07855 1.94371C4.86774 1.94371 4.72721 2.01398 4.58667 2.15451C4.37587 2.36532 4.3056 2.57612 4.3056 2.85719C4.3056 3.34907 4.5164 4.12201 4.86774 5.24629C5.21908 6.37058 5.78122 7.91647 6.4839 9.74343C6.55417 9.6029 6.62444 9.53263 6.76497 9.53263C6.90551 9.46236 7.04604 9.46236 7.18658 9.46236H7.53792C7.74872 9.53263 8.02979 9.53263 8.4514 9.6029ZM10.1378 14.1703C9.71622 14.1703 9.29461 14.1 8.87301 14.0298C8.4514 13.9595 8.10006 13.8892 7.74872 13.7487C7.88926 14.1 8.02979 14.3811 8.17033 14.7324C8.31086 15.0838 8.38113 15.3649 8.4514 15.7162C8.6622 15.4351 8.94327 15.1541 9.22435 14.873C9.57568 14.5919 9.85675 14.3811 10.1378 14.1703ZM12.1756 10.0948C12.8783 8.26781 13.3701 6.72192 13.7917 5.52737C14.1431 4.33281 14.3539 3.63014 14.3539 3.34907C14.3539 3.06799 14.2836 2.85719 14.1431 2.64639C14.0026 2.50585 13.862 2.43558 13.6512 2.43558C13.3701 2.43558 13.0891 2.64639 12.808 3.13826C12.5269 3.63014 12.1756 4.33281 11.8243 5.38683L10.2784 9.74343L12.1756 10.0948Z"
fill="white" />
</svg>
</li>
</ul>
</footer>
</main>
<!-- Project card template -->
<template id="js-project-card">
<article tabindex=0 class="single-project-card js-projects__card">
<img class="project-card-image js-project-card__image" src="" alt="Project snapshot">
<div class="project-card-details">
<h3 class="project-card-title js-project-card__name"></h3>
<ul class="project-tech-stack-tags ">
<li class="js-project-card__technology"></li>
<li class="js-project-card__technology"></li>
<li class="js-project-card__technology"></li>
</ul>
<a class="project-card-more-button section-button js-project-card__button" href="#">
<span>See this project</span>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M18.7423 10.6261L13.4834 5.36722L14.8976 3.953L22.5707 11.6261L14.8976 19.2992L13.4834 17.885L18.7422 12.6261H2L2 10.6261H18.7423Z" />
</svg>
</a>
</div>
</article>
</template>
<!-- Projects Popup modal template -->
<template id="js-projects-popupModal">
<div class="project-popupModal__container">
<div class="project-popupModal">
<div class="project-popupModal__header">
<h3 class="header--secondary js-projects-popupModal__name"></h3>
<img class="js-projects-popupModal__close" src="images/icons/ic_close.svg" alt="Close project modal">
</div>
<ul class="project-popupModal__technologies">
<li class="technology--with-border js-projects-popupModal__technology"></li>
<li class="technology--with-border js-projects-popupModal__technology"></li>
<li class="technology--with-border js-projects-popupModal__technology"></li>
</ul>
<div class="slider">
<img class="js-projects-popupModal__image" src="images/project_ing_placeholder_1.jpg" alt="Project snapshot slide image">
<div class="slider-thumbnails">
<img class="js-projects-popupModal__image" src="" alt="Project snapshot thumbnail">
<img class="js-projects-popupModal__image" src="" alt="Project snapshot thumbnail">
<img class="js-projects-popupModal__image" src="" alt="Project snapshot thumbnail">
<img class="js-projects-popupModal__image" src="" alt="Project snapshot thumbnail">
</div>
</div>
<p class="paragraph--secondary js-projects-popupModal__description">
</p>
<div class="projects-popupModal__buttons">
<a class="js-projects-popupModal__live button--secondary" href="">
See live
<img src="images/icons/ic_see-live.svg" alt="See live project icon">
</a>
<a href="" class="js-projects-popupModal__source button--secondary">
See source
<img src="images/icons/ic_github.svg" alt="See source code project icon">
</a>
</div>
</div>
</div>
</template>
<script src="menu.js"></script>
<script type="text/javascript" src="contact-form.js" ></script>
<script type="text/javascript" src="popup-window.js"></script>
<script type="text/javascript" src="./js/local-storage.js"></script>
</body>
</html>