-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
357 lines (344 loc) · 21.2 KB
/
index.html
File metadata and controls
357 lines (344 loc) · 21.2 KB
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
<!DOCTYPE html>
<html lang="fr">
<head>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<link rel=" stylesheet" href="css/style.css" />
<link href="https://fonts.googleapis.com/css?family=Finger+Paint&display=swap" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Homemade+Apple&display=swap" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Cabin+Sketch&display=swap" rel="stylesheet" />
<title>PoWpUp-Dev.Web</title>
</head>
<body class="body" onload="document.body.style.opacity='1'">
<header class="header mb-5">
<a href="#">
<img src="img/logo.png " class="header__logo img-fluid m-0 p-0" alt="Logo Powpup " />
</a>
<nav class="header__menu navbar navbar-expand-lg navbar-dark">
<div class="header__navtop">
<a class="header__title navbar-brand ml-5">Menu</a>
<button class="navbar-toggler mr-5" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div id="navbarNavDropdown" class="header__navbottom header__menu header--dropdown collapse navbar-collapse">
<ul class="header__menu menu--dropdown navbar-nav d-flex align-items-center">
<li class="nav-item active header__menu__main_item m-1">
<a class="header__menu header__menu__text nav-link" href="#about" id="menuItem">A propos</a>
</li>
<li class="nav-item .dropdown header__menu__main_item m-1">
<a class="header__menu header__menu__text .dropdown nav-link .dropdown-toggle" href="#before" id="navbarDropdownMenuLink " data-toggle="dropdown " aria-haspopup="true " aria-expanded="false ">Avant Pop School</a>
<!--<div class="header__menu--dropdown dropdown-menu" aria-labelledby="navbarDropdownMenuLink ">
<a class="header__menu__item dropdown-item" href="#experience">Expériences</a>
<a class="header__menu__item dropdown-item" href="#formation">Formation</a>
</div> -->
</li>
<li class="nav-item .dropdown header__menu__main_item m-1">
<a class="header__menu header__menu__text .dropdown nav-link .dropdown-toggle" href="#today" id="navbarDropdownMenuLink " data-toggle="dropdown " aria-haspopup="true " aria-expanded="false ">Aujourd'hui</a>
<!--<div class="header__menu--dropdown dropdown-menu" aria-labelledby="navbarDropdownMenuLink ">
<a class="header__menu__item dropdown-item" href="#skills">Compétences</a>
<a class="header__menu__item dropdown-item" href="#projects">Projets</a>
</div> -->
</li>
<li class="nav-item active header__menu__main_item m-1">
<a class="header__menu header__menu__text nav-link" href="#contact">Contact</a>
</li>
</ul>
</div>
</nav>
</header>
<div class="container">
<div class="container__about container__boxcolor container__borderbox container__row m-5">
<h5 class="container__title" id="#about">A propos</h5>
<div class="row m-3">
<div class="col-xs-12 col-lg-6 p-3 d-flex justify-content-center align-content-center">
<p class="about__text align-self-center text-center">
Vous êtes actuellement à la recherche de votre prochain collaborateur en développement web/mobile ?
<br />Vous êtes au bon endroit !<br /> Je vous invite à prendre connaissance de mon profil et à me contacter via l'un des moyens mis à votre disposition en bas de cette page.<br /> Vous pouvez également télécharger une version
imprimable de mon CV en cliquant <a class="about__text__link" href="docs/CV-PaulineHochard.pdf">ici</a>.
</p>
</div>
<div class="col-xs-12 col-lg-6 p-3 d-flex justify-content-center">
<img src="img/IMG_20200316_223710(1).jpg " class="about__img" alt="Photo de Pauline Hochard " />
</div>
</div>
<div class="row background__img container__list p-1 m-3 w-auto">
<div class="col-xs-12 col-lg-6 d-flex flex-column justify-items-center align-items-center">
<h6 class="row container__subtitle mt-3 skills__list p-0 justify-content-center text-center">
A savoir :
</h6>
<div class="row p-3 about__infos justify-self-center">
<figure class="about__infos--zoom m-2">
<img class="container__img" src=" img/speak_english.png " alt=" english spoken " /><br />
<figcaption class="about__infos__text">
TOEIC : <br />920/990 (2019).
</figcaption>
</figure>
<figure class="about__infos--zoom m-2">
<img class="d-flex align-self-center container__img" src=" img/car.png " alt=" voiture " /><br />
<figcaption class="about__infos__text">
Véhicule <br />personnel <br />à disposition.
</figcaption>
</figure>
</div>
</div>
<div class="col-xs-12 col-lg-6 d-flex flex-column justify-items-center align-items-center">
<h6 class="row container__subtitle mt-3 skills__list p-0 justify-content-center text-center">
Et quand je ne code pas ?
</h6>
<div class="row p-3 about__infos justify-content-center">
<figure class="about__infos--zoom m-2">
<img class="container__img" src=" img/Silueta de mujer de Pole dance.png " alt=" femme sur barre de pole dance " /><br />
<figcaption class="about__infos__text">
Je pratique la pole dance.
</figcaption>
</figure>
<figure class="about__infos--zoom m-2">
<img class="container__img" src=" img/Femme-yoga-meditation.png " alt=" femme en position du lotus " /><br />
<figcaption class="about__infos__text">
Je suis des cours de yoga.
</figcaption>
</figure>
<figure class="about__infos--zoom m-2">
<img class="container__img" src=" img/icon-steps-1991839_1920(1).png " alt=" empreinte de pied " /><br />
<figcaption class="about__infos__text">
Je participe à des randonnées.
</figcaption>
</figure>
<figure class="about__infos--zoom m-2">
<img class="container__img" src=" img/cats.jpeg " alt=" trois chats de dos " /><br />
<figcaption class="about__infos__text">
Je passe du temps avec mes chats.
</figcaption>
</figure>
</div>
</div>
</div>
</div>
</div>
<div class="m-5" id="before">
<button class="container container__break container__title" id="button">
Avant Pop School<div class="fa fa-chevron-up container__break__chevron container__break__chevron"></div>
</button>
<div class="row container__row container--invisible" id="hidden">
<div class="container__experience container__boxcolor container__borderbox col-xs-12 col-lg-5 p-3 m-5">
<h5 class="container__title">Expériences</h5>
<ul class="mt-3 mb-3 p-0 h-100 text-center">
<li class="experience__item mb-3">
INGREDIA DAIRY EXPERTS<br />Gestionnaire paie et administration RH
<br />avril 2018 - mars 2020
</li>
<li class="experience__item mb-3">
SOCPREST<br />Technicienne de paie<br />décembre 2017 - avril 2018
</li>
<li class="experience__item mb-3">
TRANSPORTS GUIDEZ<br />Gestionnaire RH<br />avril 2017 - octobre 2017
</li>
<li class="experience__item mb-3">
CPA HAUTS DE FRANCE<br />Gestionnaire paie<br />janvier 2017 - avril 2017
</li>
<li class="experience__item mb-3">
CHRETIEN MATERIAUX DISTRIBUTION<br />Assistante paie et administration du personnel <br />juin 2015 - janvier 2017
</li>
<li class="experience__item mb-3">
ECOBUROTIC FRANCE<br />Chargée méthodes et formation <br />janvier 2013 - août 2014
</li>
</ul>
<a href="#" class="container__buttonpage align-self-end">∧</a>
</div>
<div class="container__formation container__boxcolor container__borderbox col-xs-12 col-lg-5 p-3 m-5">
<h5 class="container__title">Formation</h5>
<ul class="formation__list mt-3 mb-3 p-0 h-100">
<li class="formation__item mb-3">
POP School<br />Développeur web/mobile<br />Titre professionnel niveau III <br />(en cours)
</li>
<li class="formation__item mb-3">
IFOCOP<br />Gestionnaire de Paie<br />Titre professionnel niveau III <br />(2015)
</li>
<li class="formation__item mb-3">
MBway<br />MBA Management des Ressources Humaines<br />Titre professionnel niveau I <br />(2012 - 2014)
</li>
<li class="formation__item mb-3">
Université de Lille<br />Licence de sciences juridiques
<br />(2008-2011)
</li>
</ul>
<a href="#" class="container__buttonpage align-self-end">∧</a>
</div>
</div>
</div>
<div class="m-5" id="today">
<button class="container container__break container__title" id="button">
Aujourd'hui<div class="fa fa-chevron-up container__break__chevron container__break__chevron"></div>
</button>
<div class="row container__row container--invisible" id="hidden">
<div class="container__skills container__boxcolor container__borderbox col-xs-12 col-lg-5 p-3 m-5">
<h5 class="container__title">Compétences</h5>
<div class="background__img mb-3 mt-3">
<div class="container__list p-1 text-center">
<div>
<h6>Langages :</h6>
<ul class="row container__list__skills p-0">
<li>
<img class="container__img__skills " src=" img/ezgif.com-resize(4).png " alt="logo html " />
</li>
<li>
<img class="container__img__skills" src=" img/ezgif.com-resize(2).png " alt="logo css " />
</li>
<li>
<img class="container__img__skills" src=" img/ezgif.com-resize(5).png " alt="logo javascript " />
</li>
<li>
<img class="container__img__skills" src=" img/ezgif.com-resize(7).png " alt="logo php " />
</li>
<li>
<img class="container__img__skills" src=" img/logopython.png " alt="logo python " />
</li>
</ul>
</div>
<div>
<h6>Frameworks :</h6>
<ul class="row container__list__skills p-0">
<li>
<img class="container__img__skills" src=" img/ezgif.com-resize(1).png " alt="logo bootstrap " />
</li>
</ul>
</div>
<div>
<h6>CMS :</h6>
<ul class="row container__list__skills p-0">
<li>
<img class="container__img__skills" src=" img/ezgif.com-resize(8).png " alt="logo wordpress " />
</li>
</ul>
</div>
<div>
<h6>Base de données :</h6>
<ul class="row container__list__skills p-0">
<li>
<img class="container__img__skills" src=" img/ezgif.com-resize(6).png " alt="logo mysql " />
</li>
</ul>
</div>
<div>
<h6>Environnement de travail :</h6>
<ul class="row container__list__skills p-0">
<li>
<img class="container__img__skills" src=" img/linux.png" alt="logo linux " />
</li>
<li>
<img class="container__img__skills" src=" img/logonpm.jpeg " alt="logo npm " />
</li>
<li>
<img class="container__img__skills" src=" img/ezgif.com-resize.png " alt="logo sass " />
</li>
<li>
<img class="container__img__skills" src=" img/ezgif.com-resize.jpg " alt="logo github " />
</li>
<li>
<img class="container__img__skills" src=" img/ezgif.com-resize(3).png " alt="logo git " />
</li>
</ul>
</div>
</div>
</div>
<a href="#" class="container__buttonpage align-self-end">∧</a>
</div>
<div class="container__projects container__boxcolor container__borderbox col-xs-12 col-lg-5 p-3 m-5">
<h5 class="container__title">Projets</h5>
<div class="container__title h-100 d-flex flex-wrap justify-content-center" id="projects ">
<!-- <div class="projects__content progress mt-3 ">
<div class="projects__color progress-bar progress-bar-striped progress-bar-animated " role="progressbar " aria-valuenow=" 75 " aria-valuemin=" 0 " aria-valuemax=" 100 " style="width: 75%; "></div>
</div> -->
<figure class=" m-2 projects__figure">
<a href="http://137.74.112.143/site_justine/ "><img class="projects__logo" src="img/logoJP.png " alt="logo Justine Patte diététicienne nutritionniste " /></a>
<figcaption class="projects__text ">Diététiecienne nutritionniste<br>- En cours-
</figcaption>
</figure>
<figure class=" m-2 projects__figure">
<a href="http://137.74.112.143/chuck_norris_facts/ "><img class="projects__logo" src="img/cnf.png " alt="logo Chuck_Norris_Facts" /></a>
<figcaption class="projects__text ">Chuck Norris Facts</figcaption>
</figure>
<figure class=" m-2 projects__figure">
<a href="http://137.74.112.143/calculatrice/ "><img class="projects__logo" src="img/calc.png " alt="logo Calculatrice" /></a>
<figcaption class="projects__text ">Calculatrice</figcaption>
</figure>
<figure class=" m-2 projects__figure">
<a href="http://137.74.112.143/showtrack/ "><img class="projects__logo" src="img/showtrack.png " alt="logo showtrack" /></a>
<figcaption class="projects__text ">Reproduction d'une page de blog.</figcaption>
</figure>
</div>
<a href="#" class="container__buttonpage align-self-end">∧</a>
</div>
</div>
</div>
<div class="m-5" id="contact">
<button class="container container__break container__title" id="button">
Contact<div class="fa fa-chevron-up container__break__chevron container__break__chevron"></div>
</button>
<div class="row container__row m-5 container--invisible" id="hidden">
<form class="container__contact container__boxcolor container__borderbox m-3" method="post" action="php/insert_into_BDD.php">
<div class="form p-3">
<h5 class="container__title m-3">Formulaire :</h5>
<div>
<label for=" inputName ">Prénom</label>
<input type=" text " name="First_Name" class="form__input" id=" inputName " />
</div>
<div>
<label for=" inputLastName ">Nom</label>
<input type=" text " name="Last_Name" class="form__input" id=" inputLastName " />
</div>
<div>
<label for=" inputEmail ">Email</label>
<input type=" email " name="Email" class="form__input" id=" inputEmail " />
</div>
<div>
<label for=" inputTel ">Téléphone</label>
<input type=" tel " name="Phone" class="form__input" id=" inputTel " />
</div>
<div>
<label for=" inputMessage ">Message</label>
<textarea name="Message" id=" message " class="form__input" rows=" 20 " maxlength="1000"></textarea>
</div>
<div class="d-flex justify-content-center">
<button type=" submit " class="form__button mt-3 d-flex justify-content-center w-50">
Envoyer</button>
</div>
</div>
</form>
</div>
</div>
<footer class="m-0 footer p-4 ">
<div class="row ">
<div class="col-12 d-flex justify-content-center ">
<a class="btn btn-social-icon btn-social btn-envelope footer--link" href="mailto:pauline.hochard@powpup-web.dev">
<span class="fa fa-lg fa-envelope"></span>
</a>
<a class="btn btn-social-icon btn-social btn-github footer--link" href=" https://github.com/phochard ">
<span class="fa fa-lg fa-github "></span>
</a>
<a class="btn btn-social-icon btn-social btn-linkedin footer--link" href=" https://www.linkedin.com/in/paulinehochard/ ">
<span class="fa fa-lg fa-linkedin "></span>
</a>
</div>
</div>
<div class="row ">
<p class="footer__text m-0 col-6 d-flex justify-content-start ">
Copyright © PoWp'Up 2020
</p>
<a href="#" class="footer__button col-6 d-flex justify-content-end ">∧</a>
</div>
</footer>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src=" https://code.jquery.com/jquery-3.4.1.slim.min.js " integrity=" sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n " crossorigin=" anonymous ">
</script>
<script src=" https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js " integrity=" sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo " crossorigin=" anonymous ">
</script>
<script src=" https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js " integrity=" sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6 " crossorigin=" anonymous ">
</script>
<script src=" https://kit.fontawesome.com/cff6ad8934.js " crossorigin=" anonymous "></script>
<script src=" js/main.js " type="module"></script>
</body>
</html>