-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
182 lines (164 loc) · 9.41 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
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta name="mobile-web-app-capable" content="yes">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Balade en trame - MuseomixNord 2015</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<!-- Place favicon.ico in the root directory -->
<link rel="stylesheet" href="css/bootstrap.css">
<script src="vendors/slick/slick.css"></script>
<script src="vendors/slick/slick-theme.css"></script>
<link rel="stylesheet" href="css/baladeentrame.css">
</head>
<body>
<!--[if lt IE 8]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<!-- Add your site or application content here -->
<header>
<div class="container">
<div class="row">
<div class="col-xs-12">
<h1>
<img src="img/logo-380.png" alt="logo" class="logo">
<span>Balade en trame</span>
</h1>
</div>
</div>
</div>
</header>
<div class="container">
<div class="row">
<div class="col-md-2 liens">
<div>
<a href="#profil" class="profil"></a>
</div>
<div>
<a href="#paroles" class="paroles"></a>
</div>
<div>
<a href="#technique" class="technique"></a>
</div>
<div>
<a href="#archives" class="archives"></a>
</div>
</div>
<div class="col-md-10 pages">
<div id="profil" class="active">
<div class="row">
<div class="col-md-5">
<img src="img/janine.jpg" alt="Janine MERCIER" width="100%">
</div>
<div class="col-md-7 infos">
<h2>Janine Mercier</h2>
<p>
<span class="birthday">30 ans</span>
<span class="marker">Née à Roubaix</span>
<span class="family">Mère de 4 enfants, épouse de Georges MERCIER, ouvrier à la Manufacture des Flandres.</span>
</p>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<p>En 1910, Janine gagne 3,50 francs par jour, et son mari 5 francs.
Leur fils aîné, Jean, est âgé de 13 ans, et a commencé à travailler cette année à l'usine.</p>
<p>Janine a débuté dans le textile lorsqu'elle avait 8 ans ; à l'époque, on la payait 50 centimes par jour pour ramasser les chutes de tissu sous les machines.</p>
</div>
</div>
</div>
<div id="paroles">
<div class="row">
<div class="col-xs-12">
<div class="paroles">
<h2>Parole d<span class="accent">'</span>ouvriers</h2>
<p>
« Je travaille 12h par jour. L'ourdissoir n'est pas très bruyant comparé aux autres machines de l'usine, mais il faut vraiment se concentrer sur sa besogne ! Je n'ai pas le droit à l'erreur ; si je me trompe, une amende sera retenue sur mon salaire. »</p>
<p>« Mes parents étaient eux aussi dans le textile, et mon grand-père travaillait à domicile à filer le lin. Quant à mes enfants, ils se destinent eux aussi à l'usine. Le textile, nous autres Roubaisiens, on l'a dans le sang ! »</p>
<p>« Je travaille avec mon mari, et on en est fiers, de notre usine ! Nous nous voyons assez peu pendant la journée, c'est interdit par le règlement. Nos camarades sont devenus, pour certains, de vrais amis, une seconde famille. »
</p>
</div>
</div>
</div>
</div>
<div id="technique">
<div class="row">
<div class="col-md-12">
<h2>Schéma de l<span class="accent">'</span>ourdissoir</h2>
<div class="ourdissoir">
<img src="img/illus.jpg" alt="">
<div class="points">
<div class="ensouple">
<div class="click"></div>
<div class="text">
<h3>L'ensouple</h3>
<p>Placé à l'arrière du métier à tisser, il permet d'enrouler les fils.</p>
</div>
</div>
<div class="tambour">
<div class="click"></div>
<div class="text">
<h3>Le tambour</h3>
<p>Il tend le fil afin que celui-ci soit enroulé correctement.</p>
</div>
</div>
<div class="rot">
<div class="click"></div>
<div class="text">
<h3>Les rots</h3>
<p>Sorte de peignes qui servent à presser la trame.</p>
</div>
</div>
<div class="cantre">
<div class="click"></div>
<div class="text">
<h3>Le cantre</h3>
<p>Aussi appelé râtelier, il sert à placer les bobines.</p>
</div>
</div>
<div class="bobine">
<div class="click"></div>
<div class="text">
<h3>Les bobines</h3>
<p>Le fil s'y enroule au fur et à mesure.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="archives">
<h2>Photos d<span class="accent">'</span>archives</h2>
<div class="slider">
<img src="img/ourdissoir/ourdissoir-01.jpg" alt="...">
<img src="img/ourdissoir/ourdissoir-02.jpg" alt="...">
<img src="img/ourdissoir/ourdissoir-03.jpg" alt="...">
<img src="img/ourdissoir/ourdissoir-04.jpg" alt="...">
<img src="img/ourdissoir/ourdissoir-05.jpg" alt="...">
<img src="img/ourdissoir/ourdissoir-06.jpg" alt="...">
</div>
<legend>
Coll. Archives nationales du Monde du Travail, fonds Le Blan-Filauchy. Clichés Jules Holbecq. Ⓒ Archives nationales du Monde du Travail.
</legend>
</div>
</div>
</div>
</div>
<script src="js/jquery-1.11.3.min.js"></script>
<script src="vendors/slick/slick.min.js"></script>
<script src="js/baladeentrame.js"></script>
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
<script>
(function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
e=o.createElement(i);r=o.getElementsByTagName(i)[0];
e.src='https://www.google-analytics.com/analytics.js';
r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
ga('create','UA-XXXXX-X','auto');ga('send','pageview');
</script>
</body>
</html>