-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
227 lines (217 loc) · 12.4 KB
/
index.html
File metadata and controls
227 lines (217 loc) · 12.4 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
<!doctype html>
<html class="no-js" lang="fr">
<head>
<meta charset="utf-8">
<title>Choose your boss</title>
<meta name="description" content="Les candidats postulent avec leur CV. Ils ont accès à une liste d'entreprises et choisissent leur employeur.">
<meta name="keywords" content="candidat, CV, travail, entreprise, recruteur, boss, choose">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--google font mulish-->
<link href="https://fonts.googleapis.com/css2?family=Mulish&display=swap" rel="stylesheet">
<link rel="manifest" href="site.webmanifest">
<link rel="apple-touch-icon" href="icon.png">
<!-- Place favicon.ico in the root directory -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<meta name="theme-color" content="#fafafa">
</head>
<body>
<!--nav = logo + menu burger-->
<nav>
<div class="height100 pcFlex pcBetween pcMarginLogo">
<div class="height100 flex alignCenter relative">
<figure class="figureBurger height100 pcNone">
<img class="burger height100" src="https://img.icons8.com/ios/50/000000/menu.png" alt="Menu burger">
</figure>
<figure class="figureLogo height100">
<a class="height100" href="#"><img class="logo height100" src="https://s3-eu-west-1.amazonaws.com/assets.chooseyourboss.com/images/logos/logo-2019.svg" alt="logo chooseyourboss"></a>
</figure>
</div>
<div class="none pcBlock pcFlex pcAlign pcFont">
<a class="pcMargin" href="#">Offres</a>
<a class="pcMargin" href="#">Entreprises</a>
<a class="pcMargin" href="#">Salaires</a>
<a class="pcMargin" href="#">Évènements</a>
<a class="pcMargin" href="#">Blog</a>
<a class="pcMargin" href="#">Connexion</a>
<a class="pcMargin bgLink colorWhite" href="#">Inscription</a>
<a class="pcMargin" href="#">Vous êtes recruteur</a>
</div>
</div>
<div class="navBar"></div>
</nav>
<!--header = h1,p + figure-->
<header class="pcFlex">
<article>
<h1 class="gotham title">Le matching parfait est aussi professionnel</h1>
<p>Découvre quelles offres d'emploi informatique et numérique matchent avec ton profil et choisis ta prochaine squad !</p>
<a href="#" class="bgLink colorWhite inline">Je m'inscris</a>
</article>
<figure class="none pcBlock">
<img src="img/man.png" alt="Photo d'un monsieur">
</figure>
</header>
<main>
<!--use div separate in 3 sections-->
<div class="bgcMauve flex directColumn alignCenter ipadRow ipadAround ipadMargintop pcHeight pcRelative">
<article class="flex directColumn alignCenter pcSection1">
<p class="colorWhite gotham fontp">152 000</p>
<h3 class="color2fd gotham">Candidats</h3>
</article>
<article class="flex directColumn alignCenter">
<p class="colorWhite gotham fontp">473 000</p>
<h3 class="color2fd gotham">Rencontres</h3>
</article>
<article class="flex directColumn alignCenter pcSection3">
<p class="colorWhite gotham fontp">13 300</p>
<h3 class="color2fd gotham">Recruteurs</h3>
</article>
</div>
<!--section = h2,p + (article=>title + figure)*3-->
<section class="colorBgc flex directColumn alignCenter">
<h2 class="title gotham minitabDimDiv">L'algorithme travaille pour toi</h2>
<p class="h2sec textCenter">Accède à des matchings personnalisés tout en restant protégé et anonyme</p>
<div><!--div necessary to be flexed with h2,p-->
<div class="minitabFlex pcDivWidth pcFlex pcBetween">
<article class="flex directColumn alignCenter widthArticle">
<figure class="dimension">
<img class="dimImg" src="img/matching1.png" alt="personnalisation">
</figure>
<h3 class="gotham title">Personnalisation</h3>
<p class="h3p containp textJustify">Notre algorithme de matching sélectionne pour toi les projets qui te correspondent vraiment.</p>
</article>
<article class="flex directColumn alignCenter widthArticle">
<figure class="dimension">
<img class="dimImg" src="img/matching2.png" alt="3 en 1">
</figure>
<h3 class="gotham title">3 en 1</h3>
<p class="h3p containp textJustify">Tu as le pouvoir d'accepter les matchings, les demandes directes ou postuler directement aux offres qui te plaisent.</p>
</article>
<article class="none pcBlock pcFlex pcFlex pcColumn pcAlign widthArticle">
<figure class="dimension">
<img class="dimImg" src="img/matching3.png" alt="Anonymat">
</figure>
<h3 class="gotham title">Anonymat</h3>
<p class="h3p containp textJustify">Ton profil reste protégé et anonyme jusqu'à ta mise en relation avec le recruteur de ton choix, évitant ainsi toute sur-sollicitation.</p>
</article>
</div>
<article class="flex directColumn alignCenter pcNone">
<figure class="dimension">
<img class="dimImg" src="img/matching3.png" alt="Anonymat">
</figure>
<h3 class="gotham title">Anonymat</h3>
<p class="h3p containp pAnonyDim textJustify">Ton profil reste protégé et anonyme jusqu'à ta mise en relation avec le recruteur de ton choix, évitant ainsi toute sur-sollicitation.</p>
</article>
</div>
<a class="bgLink colorWhite linkMargin linkFont" href="#">J'accède à mes matchings</a>
</section>
<!--section = h2,p + (figure(A))*5-->
<section class="flex directColumn alignCenter">
<h2 class="title gotham minitabDimDiv">Tous les jobs informatiques et numériques</h2>
<p class="h2thi textCenter">Découvre les dernières offres d'emploi tech', produit, data, marketing et design</p>
<div><!--div necessary to be flexed with h2,p-->
<div class=" minitabFlex margin2img"><!--use to contain the 5 figure(A) and for break point 1200 px-->
<!--Tech and Produit images active till 1200px because after there are too much conflicts in position absolute-->
<a class=" marginTopTech dimension2 minitabRelative pcNone" href="#">
<figure class="dimFigure2 flex directColumn minitabAbsR ipadAbsR">
<img class="dimImg2" src="https://s3-eu-west-1.amazonaws.com/assets.chooseyourboss.com/images/home/visu-metiers/tech.svg" alt="Tech">
<figcaption class="dimFigcaption textCenter title gotham">Tech</figcaption>
</figure >
</a>
<a class="marginTop dimension2 minitabRelative pcNone" href="#">
<figure class="dimFigure2 flex directColumn minitabAbsL">
<img class="dimImg2" src="https://s3-eu-west-1.amazonaws.com/assets.chooseyourboss.com/images/home/visu-metiers/produit.svg" alt="Produit">
<figcaption class="dimFigcaption textCenter title gotham">Produit</figcaption>
</figure>
</a>
<!--Tech and Produit use in breack point 1200 px-->
<a class="marginTop dimension2 none pcBlock pcRelative" href="#">
<figure class="dimFigure2 flex directColumn pcAbsRight2">
<img class="dimImg2" src="https://s3-eu-west-1.amazonaws.com/assets.chooseyourboss.com/images/home/visu-metiers/tech.svg" alt="Tech">
<figcaption class="dimFigcaption textCenter title gotham">Tech</figcaption>
</figure >
</a>
<a class="marginTop dimension2 none pcBlock pcRelative" href="#">
<figure class="dimFigure2 flex directColumn pcAbsRight">
<img class="dimImg2" src="https://s3-eu-west-1.amazonaws.com/assets.chooseyourboss.com/images/home/visu-metiers/produit.svg" alt="Produit">
<figcaption class="dimFigcaption textCenter title gotham">Produit</figcaption>
</figure>
</a>
<a class=" marginTop minitabNone ipadBlock dimension2 ipadRelative" href="#">
<figure class="dimFigure2 flex directColumn ipadAbsL">
<img class="dimImg2" src="https://s3-eu-west-1.amazonaws.com/assets.chooseyourboss.com/images/home/visu-metiers/marketing.svg" alt="Marketing">
<figcaption class="dimFigcaption textCenter title gotham">Marketing</figcaption>
</figure>
</a>
<a class=" marginTop minitabNone pcBlock dimension2 pcRelative" href="#">
<figure class="dimFigure2 flex directColumn pcAbsLeft">
<img class="dimImg2" src="https://s3-eu-west-1.amazonaws.com/assets.chooseyourboss.com/images/home/visu-metiers/DATA.svg" alt="Data">
<figcaption class="dimFigcaption textCenter title gotham">Data</figcaption>
</figure>
</a>
<a class=" marginTop marginBotCreation minitabNone pcBlock dimension2 pcRelative" href="#">
<figure class="dimFigure2 flex directColumn pcAbsLeft2">
<img class="dimImg2" src="https://s3-eu-west-1.amazonaws.com/assets.chooseyourboss.com/images/home/visu-metiers/design.svg" alt="Création">
<figcaption class="dimFigcaption textCenter title gotham ">Création</figcaption>
</figure>
</a>
</div>
<div class="none minitabBlock minitabFlex margin2img ipadNone">
<!--use to contain 2 figure(A) for break point 576 px-->
<a class=" marginTop dimension2 minitabRelative" href="#">
<figure class="dimFigure2 flex directColumn minitabAbsR">
<img class="dimImg2" src="https://s3-eu-west-1.amazonaws.com/assets.chooseyourboss.com/images/home/visu-metiers/marketing.svg" alt="Marketing">
<figcaption class="dimFigcaption textCenter title gotham">Marketing</figcaption>
</figure>
</a>
<a class=" marginTop dimension2 minitabRelative" href="#">
<figure class="dimFigure2 flex directColumn minitabAbsL">
<img class="dimImg2" src="https://s3-eu-west-1.amazonaws.com/assets.chooseyourboss.com/images/home/visu-metiers/DATA.svg" alt="Data">
<figcaption class="dimFigcaption textCenter title gotham">Data</figcaption>
</figure>
</a>
</div>
<div class="none minitabBlock minitabFlex minitabCenter margin2img pcNone">
<!--div active to 576px till 1200px-->
<a class="marginTop minitabNone ipadBlock dimension2 ipadRelative" href="#">
<!--"A" active to under 576 and reactivate to 768px -->
<figure class="dimFigure2 flex directColumn ipadAbsR2">
<img class="dimImg2" src="https://s3-eu-west-1.amazonaws.com/assets.chooseyourboss.com/images/home/visu-metiers/DATA.svg" alt="Data">
<figcaption class="dimFigcaption textCenter title gotham">Data</figcaption>
</figure>
</a>
<a class="marginTop marginBotCreation dimension2 ipadRelative" href="#">
<figure class="dimFigure2 flex directColumn ipadAbsL2">
<img class="dimImg2" src="https://s3-eu-west-1.amazonaws.com/assets.chooseyourboss.com/images/home/visu-metiers/design.svg" alt="Création">
<figcaption class="dimFigcaption textCenter title gotham ">Création</figcaption>
</figure>
</a>
</div>
</div>
<a class="bgLink colorWhite linkMargin linkFont marginLinkInitial marginBotTopLink" href="#">Je découvre toutes les offres</a>
</section>
<!--section = h2,p + article-->
<article class="article">
<div class="divArticle pcFlex">
<div><!--use to display flex article and figure at 1200px-->
<h2 class="marginLineH2 title gotham">Mérites-tu un meilleur salaire ?</h2>
<section>
<h3 class="marginH3 title gotham">Baromètre des salaires IT</h3>
<p class=" marginph3">Découvre le salaire des différents métiers informatiques et numériques par niveau d'expérience et localisation.</p>
</section>
<a class="bgLink colorWhite linkFont inlineSalary" href="#">Je découvre mon salaire</a>
</div>
<figure class="none pcBlock money">
<img class="moneyimg" src="img/salaire.svg" alt="Salaire">
</figure>
</div>
</article>
<div class="stickyDiv ipadNone">
<a class="sticky flex alignCenter colorWhite" href="#">JE M'INSCRIS</a>
</div>
</main>
<script src="js/vendor/modernizr-3.11.2.min.js"></script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
</body>
</html>