-
Notifications
You must be signed in to change notification settings - Fork 0
/
portfolio.html
541 lines (486 loc) · 23.7 KB
/
portfolio.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
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Basic Page Needs
================================================== -->
<meta charset="utf-8">
<title>Our projects & design</title>
<!--beyond frames.'s projects-->
<link rel="alternate" hreflang="fr" href="https://beyondframes.co/fr/design-studio.html">
<!-- Mobile Specific Metas
================================================== -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description"
content="beyond frames. has launched more than a decade of projects in the field of communicaiton, graphic design, web design & web devolpment, in France, Canada & Switzerland.">
<meta name="keywords"
content="projects, portfolio, design, communication, consulting, web, website, web design, maintenance, optimization, SEO, SEA, consulting, print, editing, brand, innovation, Montpellier, Zürich, Geneve, Lausanne, Zug.">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0">
<meta name="author" content="beyond frames.">
<meta property="og:title" content="beyond frames - portfolio web & design - photo by Charles Deluvio">
<meta property="og:type" content="website">
<meta property="og:url" content="https://beyondframes.co">
<meta property="og:image" content="theme/images/metadata/charles-deluvio-Lks7vei-eAg-unsplash.jpg">
<meta property="og:image:width" content="2400">
<meta property="og:image:height" content="1600">
<meta property="og:image:alt" content="beyond frames | branding, graphics & web - photo by Charles Deluvio">
<meta property="og:description"
content="beyond frames. proposes complete personalized services to entrepreneurs, with deep expertise in communication, brand strategy, design and digital. We create what matters, with you every step.">
<meta property="og:site_name" content="beyond frames." />
<meta property="og:locale" content="en_GB" />
<meta property="og:locale:alternate" content="fr_FR" />
<!-- Plugins Needed -->
<link rel="stylesheet" href="theme/plugins/bootstrap/bootstrap.min.css">
<link rel="stylesheet" href="theme/plugins/ionicons/css/ionicons.min.css">
<!-- Main Stylesheet -->
<link href="theme/css/style.css" rel="stylesheet">
<!--Favicon-->
<link rel="shortcut icon" href="theme/images/favicon.png" type="image/x-icon">
<link rel="icon" href="theme/images/favicon.png" type="image/x-icon">
<link rel="apple-touch-icon" href="theme/images/favicon.png" sizes="180x180"> <!-- valid apple-touch-icon -->
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-NFRSP6WKBZ"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-NFRSP6WKBZ');
</script>
</head>
<body>
<!-- Preloader -->
<div id="preloader">
<div class="pre-container">
<div class="spinner">
<div class="double-bounce1"></div>
<div class="double-bounce2"></div>
</div>
</div>
</div>
<!-- end Preloader -->
<!-- box header -->
<header class="box-header" id="top">
<div class="box-logo">
<a href="index.html"><img loading="lazy" src="theme/images/logo.png" height="90" alt="logo of beyond frames'studio with baseline : web & design"></a>
</div>
<!-- box-nav -->
<span class="box-primary-nav-trigger">
<span class="box-menu-text">Menu</span><span class="box-menu-icon"></span>
</span>
<!-- box-primary-nav-trigger -->
</header>
<!-- end box header -->
<!-- NAV -->
<nav>
<ul class="box-primary-nav">
<li class="box-label">beyond frames.</li>
<li class="active"><a href="index.html">What we do.</a></li>
<!--<li ><a href="about.html">about me.</a></li>
<li ><a href="services.html">services.</a></li>-->
<li><a href="portfolio.html">projects.</a></li>
<!--<li ><a href="contact.html">hi!</a></li>-->
<li class="box-label">follow me</li>
<!--<li class="box-social"><a href="https://themefisher.com/"><i class="ion-social-facebook"></i></a></li>-->
<!--<li class="box-social"><a href="https://themefisher.com/"><i class="ion-social-twitter"></i></a></li>-->
<li class="box-social"><a href="https://www.instagram.com/beyondframes.design/"><i
class="ion-social-instagram-outline"></i></a></li>
<li class="box-social"><a href="https://www.behance.net/beyondframes"><img
src="theme/images/iconmonstr-behance-1-32.png" width="25" alt=""></a></li>
<li class="box-social"><a href="https://dribbble.com/beyondframes/"><i class="ion-social-dribbble"></i></a></li>
<li class="box-social"><a href="https://www.linkedin.com/in/geraldineallemand/"><i
class="ion-social-linkedin"></i></a></li>
</ul>
</nav>
<!-- end nav -->
<!-- Top bar -->
<div class="top-bar">
<h1>Our projects</h1>
<!-- <p><a href="index.html">Home</a> / Portfolio</p>-->
<h2>Over a decade of experience in communication projects.</h2>
</div>
<!-- end Top bar -->
<!-- main container -->
<div class="main-container portfolio-inner">
<!-- portfolio div -->
<div class="portfolio-div">
<div class="portfolio">
<!-- portfolio_filter -->
<div class="categories-grid wow fadeInLeft">
<nav class="categories text-center mb-4">
<div class="btn-group btn-group-toggle justify-content-center" data-toggle="buttons">
<label class="btn active">
<input type="radio" name="shuffle-filter" value="all" checked="checked" />all.
</label>
<label class="btn">
<h2>
<input type="radio" name="shuffle-filter" value="branding" />branding.</h2>
</label>
<label class="btn">
<h2>
<input type="radio" name="shuffle-filter" value="graphics" />graphics.</h2>
</label>
<label class="btn">
<h2>
<input type="radio" name="shuffle-filter" value="web" />web.</h2>
</label>
<!-- <label class="btn">
<input type="radio" name="shuffle-filter" value="ads" />Writting
</label> -->
</div>
</nav>
</div>
<!-- portfolio_filter -->
<!-- portfolio_container -->
<div class="row no-gutters shuffle-wrapper">
<!-- single work -->
<div class="col-lg-4 col-sm-6 shuffle-item" data-groups="["web"]">
<a href="portfolio.html" class="portfolio_item">
<img src="theme/images/portfolio/beyond-frames_project-01.jpg"
alt="internaute surfant sur le site du chef à domicile Jean-Paul Terranova de Montpellier"
class="img-fluid" />
<div class="portfolio_item_hover">
<div class="item_info">
<span>Development of a 'Chef at home' website</span>
<em>web</em>
</div>
</div>
</a>
</div>
<!-- end single work -->
<!-- single work 002-->
<div class="col-lg-4 col-sm-6 shuffle-item" data-groups="["branding"]">
<a href="portfolio.html" class="portfolio_item">
<img src="theme/images/portfolio/beyond-frames_project-02.jpg"
alt="dessin au crayon noir sur feuille blanche d'une proposition de logo pour les jeudis francophones avec un croissant posé en équilibre sur des montagnes, proposé par beyond frames."
class="img-fluid" />
<div class="portfolio_item_hover">
<div class="item_info">
<span>Les Jeudis francophones logo proposal</span>
<em>branding</em>
</div>
</div>
</a>
</div>
<!-- end single work -->
<!-- single work 003-->
<div class="col-lg-4 col-sm-6 shuffle-item" data-groups="["branding"]">
<a href="portfolio.html" class="portfolio_item">
<img src="theme/images/portfolio/beyond-frames_project-03.jpg"
alt="logo Oasis et zones arides découpé au laser dans une feuille blanche posée sur un sol désertique, par beyond frames."
class="img-fluid" />
<div class="portfolio_item_hover">
<div class="item_info">
<span>Creation of graphic guidelines for an oasian civil society networks</span>
<em>branding</em>
</div>
</div>
</a>
</div>
<!-- end single work -->
<!-- single work 004-->
<div class="col-lg-4 col-sm-6 shuffle-item" data-groups="["graphics"]">
<a href="portfolio.html" class="portfolio_item">
<img src="theme/images/portfolio/beyond-frames_project-04.jpg"
alt="3 livres empilés avec en couverture un mix de dessins d'artistes et de poème sur le climat, édité par beyond frames."
class="img-fluid" />
<div class="portfolio_item_hover">
<div class="item_info">
<span>Book editing - Land & climate : time to act!</span>
<em>graphics</em>
</div>
</div>
</a>
</div>
<!-- end single work -->
<!-- single work 17-->
<div class="col-lg-4 col-sm-6 shuffle-item" data-groups="["web"]">
<a href="portfolio.html" class="portfolio_item">
<img src="theme/images/portfolio/beyond-frames_project-017.jpg"
alt="tablette présentant le site internet de l'ONG CARI et ses actions sur le changement climatique. Content management fait par beyond frames."
class="img-fluid" />
<div class="portfolio_item_hover">
<div class="item_info">
<span>Websites content management, optimization & SEO</span>
<em>web</em>
</div>
</div>
</a>
</div>
<!-- end single work -->
<!-- single work 006-->
<div class="col-lg-4 col-sm-6 shuffle-item" data-groups="["branding","graphics"]">
<a href="portfolio.html" class="portfolio_item">
<img src="theme/images/portfolio/beyond-frames_project-06.jpg"
alt="bloc note et son crayon aux couleurs jaune et framboise représentant des pétales entourant un soleil, créé par beyond frames."
class="img-fluid" />
<div class="portfolio_item_hover">
<div class="item_info">
<span>International event - Creation of a visual design and his declensions</span>
<em>branding & graphics</em>
</div>
</div>
</a>
</div>
<!-- end single work -->
<!-- single work 007-->
<div class="col-lg-4 col-sm-6 shuffle-item" data-groups="["graphics"]">
<a href="portfolio.html" class="portfolio_item">
<img src="theme/images/portfolio/beyond-frames_project-07.jpg"
alt="badge recto verso avec le dessin d'une femme africaine de profil et aux cheveux stylisés en feuillage, créé par beyond frames."
class="img-fluid" />
<div class="portfolio_item_hover">
<div class="item_info">
<span>Creation of a 'gender label' for sustainable projects in Africa</span>
<em>graphics</em>
</div>
</div>
</a>
</div>
<!-- end single work -->
<!-- single work 008-->
<div class="col-lg-4 col-sm-6 shuffle-item" data-groups="["branding","graphics"]">
<a href="portfolio.html" class="portfolio_item">
<img src="theme/images/portfolio/beyond-frames_project-08.jpg"
alt="brochure carrée trifold recto verso, ouverte et fermée de l'association CARI, suivi par beyond frames."
class="img-fluid" />
<div class="portfolio_item_hover">
<div class="item_info">
<span>Definition of new visual design and content management</span>
<em>branding & graphics</em>
</div>
</div>
</a>
</div>
<!-- end single work -->
<!-- single work 09-->
<div class="col-lg-4 col-sm-6 shuffle-item" data-groups="["graphics"]">
<a href="portfolio.html" class="portfolio_item">
<img src="theme/images/portfolio/beyond-frames_project-09.jpg"
alt="3 good practice sheets for African projects leading women empowerment & sustainable development in Africa, edited by beyond frames."
class="img-fluid" />
<div class="portfolio_item_hover">
<div class="item_info">
<span>Editing - Sustainable development & good practises in oases</span>
<em>graphics</em>
</div>
</div>
</a>
</div>
<!-- end single work -->
<!-- single work 010-->
<div class="col-lg-4 col-sm-6 shuffle-item" data-groups="["graphics"]">
<a href="portfolio.html" class="portfolio_item">
<img src="theme/images/portfolio/beyond-frames_project-010.jpg"
alt="Programme du Pavillon de la société civile Oasis et zones arides lors de la COP climat de Marrakech créé par beyond frames."
class="img-fluid" />
<div class="portfolio_item_hover">
<div class="item_info">
<span>Program of the Civil Society Pavilion for the Climate COP in Marrakech</span>
<em>graphics</em>
</div>
</div>
</a>
</div>
<!-- end single work -->
<!-- single work 011 -->
<div class="col-lg-4 col-sm-6 shuffle-item" data-groups="["branding","graphics"]">
<a href="portfolio.html" class="portfolio_item">
<img src="theme/images/portfolio/beyond-frames_project-011.jpg"
alt="recto verso d'une carte de visite élégante jaune et blanche pour le cuisinier privé JP Terranova, créé par beyond frames."
class="img-fluid" />
<div class="portfolio_item_hover">
<div class="item_info">
<span>Creation of an elegant graphic design and print declension for a 'chef at home'</span>
<em>branding & graphics</em>
</div>
</div>
</a>
</div>
<!-- end single work -->
<!-- single work 012-->
<div class="col-lg-4 col-sm-6 shuffle-item" data-groups="["graphics"]">
<a href="portfolio.html" class="portfolio_item">
<img src="theme/images/portfolio/beyond-frames_project-012.jpg"
alt="recto verso d'un fly de présentation des services de chef à domicile de Jean-Paul Terranova, créé par beyond frames."
class="img-fluid" />
<div class="portfolio_item_hover">
<div class="item_info">
<span>Creation of an elegant fly for a 'chef at home'</span>
<em>graphics</em>
</div>
</div>
</a>
</div>
<!-- end single work -->
<!-- single work 13 -->
<div class="col-lg-4 col-sm-6 shuffle-item" data-groups="["graphics"]">
<a href="portfolio.html" class="portfolio_item">
<img src="theme/images/portfolio/beyond-frames_project-013.jpg"
alt="view of a lap top and declension of professional slide and graphics made by beyond frames"
class="img-fluid" />
<div class="portfolio_item_hover">
<div class="item_info">
<span>Creation of a professional slide layout</span>
<em>graphics</em>
</div>
</div>
</a>
</div>
<!--end single work -->
<!-- single work 14-->
<!-- end single work -->
<!-- single work 15-->
<div class="col-lg-4 col-sm-6 shuffle-item" data-groups="["branding","graphics"]">
<a href="portfolio.html" class="portfolio_item">
<img src="theme/images/portfolio/beyond-frames_project-015.jpg"
alt="tote bag blanc avec trois poissons bleus verticaux déssinés par l'artiste française Fani Kosti accompagnée par beyond frames."
class="img-fluid" />
<div class="portfolio_item_hover">
<div class="item_info">
<span>Declension of a french artist's graphic identity</span>
<em>branding & graphics</em>
</div>
</div>
</a>
</div>
<!-- end single work -->
<!-- single work 16 -->
<div class="col-lg-4 col-sm-6 shuffle-item" data-groups="["branding","graphics"]">
<a href="portfolio.html" class="portfolio_item">
<img src="theme/images/portfolio/beyond-frames_project-016.jpg"
alt="three poster from the Desertif'actions climate summit with pictures of people from Sahara, made by beyond frames"
class="img-fluid" />
<div class="portfolio_item_hover">
<div class="item_info">
<span>Production of specific messages from civil society recommendations on the occasion of high-level
summits</span>
<em>branding & graphics</em>
</div>
</div>
</a>
</div>
<!-- end single work -->
<!-- single work 18-->
<div class="col-lg-4 col-sm-6 shuffle-item" data-groups="["branding","graphics"]">
<a href="portfolio.html" class="portfolio_item">
<img src="theme/images/portfolio/beyond-frames_project-018.jpg"
alt="Blue and white business card of the french artist Fani Kosti, made by beyond frames."
class="img-fluid" />
<div class="portfolio_item_hover">
<div class="item_info">
<span>Business card tailored for a french artist</span>
<em>branding & graphics</em>
</div>
</div>
</a>
</div>
<!-- end single work -->
<!-- single work 019-->
<div class="col-lg-4 col-sm-6 shuffle-item" data-groups="["graphics"]">
<a href="portfolio.html" class="portfolio_item">
<img src="theme/images/portfolio/beyond-frames_project-019.jpg"
alt="infographics about the press cartoon contest of the Desertif'actions 2015 Summit, made by beyond frames."
class="img-fluid" />
<div class="portfolio_item_hover">
<div class="item_info">
<span>Designing and executing a variety of graphics projects for the Climate Summit
Desertif'actions</span>
<em>graphics</em>
</div>
</div>
</a>
</div>
<!-- end single work -->
<!-- single work 020 // Da17 campaigns-->
<div class="col-lg-4 col-sm-6 shuffle-item" data-groups="["web"]">
<a href="portfolio.html" class="portfolio_item">
<img src="theme/images/portfolio/beyond-frames_project-020.jpg"
alt="view of the web campaign of the Climate Summit Desertif'actions, launched by beyond frames."
class="img-fluid" />
<div class="portfolio_item_hover">
<div class="item_info">
<span>Leading mailing campaigns & managing digital events infrastructure: event web pages, virtual
event platforms</span>
<em>web</em>
</div>
</div>
</a>
</div>
<!-- end single work -->
<!-- single work 021 // badges -->
<div class="col-lg-4 col-sm-6 shuffle-item" data-groups="["graphics"]">
<a href="portfolio.html" class="portfolio_item">
<img src="theme/images/portfolio/beyond-frames_project-021.jpg"
alt="Few badges from different structure or event made by beyond frames." class="img-fluid" />
<div class="portfolio_item_hover">
<div class="item_info">
<span>Design and Layout a wide array of print and digital assets</span>
<em>graphics</em>
</div>
</div>
</a>
</div>
<!-- end single work -->
<!-- single work 005 // mobile device -->
<div class="col-lg-4 col-sm-6 shuffle-item" data-groups="["web"]">
<a href="portfolio.html" class="portfolio_item">
<img src="theme/images/portfolio/beyond-frames_project-05.jpg"
alt="trois vues différentes d'une application mobile aux couleurs douces, proposées par beyond frames."
class="img-fluid" />
<div class="portfolio_item_hover">
<div class="item_info">
<span>Mobile devices proposal</span>
<em>web</em>
</div>
</div>
</a>
</div>
<!-- end single work -->
<!-- single work 023 // new graphic identity-->
<div class="col-lg-4 col-sm-6 shuffle-item" data-groups="["branding"]">
<a href="portfolio.html" class="portfolio_item">
<img src="theme/images/portfolio/beyond-frames_project-023.jpg"
alt="overlay of sketches and working papers during the research of a new graphic identity for an association by beyond frames."
class="img-fluid" />
<div class="portfolio_item_hover">
<div class="item_info">
<span>Graphic identity research & proposal</span>
<em>branding</em>
</div>
</div>
</a>
</div>
<!-- end single work -->
</div>
<!-- end portfolio_container -->
</div>
<!-- portfolio -->
</div>
<!-- end portfolio div -->
</div>
<!-- end main container -->
<!-- FOOTER -->
<footer>
<div class="container-fluid">
<p class="copyright">© Copyright 2021 - Designed, developed & propulsed by <a href="index.html"
target="_blank">beyond frames.</a></p>
<p class="copyright"><a href="privacy-policy.html">Terms & conditions.</a></p>
</div>
</footer>
<!-- end footer -->
<!-- back to top -->
<a href="#top" class="cd-top"><i class="ion-android-arrow-up"></i></a>
<!-- end back to top -->
<!-- jQuery -->
<script src="theme/plugins/jquery.min.js"></script>
<!-- Plugins Needed for this Project -->
<script src="theme/plugins/bootstrap/bootstrap.min.js"></script>
<script src="theme/plugins/menu.js"></script>
<script src="theme/plugins/animated-headline/animated-headline.js"></script>
<script src="theme/plugins/shuffle/shuffle.min.js"></script>
<!-- Google Map -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCcABaamniA6OL5YvYSpB3pFMNrXwXnLwU" defer></script>
<script src="theme/plugins/google-map/map.js" defer></script>
<!-- Main Script -->
<script src="theme/js/script.js"></script>
</body>
</html>