summaryrefslogtreecommitdiff
path: root/public/css/menu.css
diff options
context:
space:
mode:
Diffstat (limited to 'public/css/menu.css')
-rw-r--r--public/css/menu.css339
1 files changed, 339 insertions, 0 deletions
diff --git a/public/css/menu.css b/public/css/menu.css
new file mode 100644
index 0000000..0e17e34
--- /dev/null
+++ b/public/css/menu.css
@@ -0,0 +1,339 @@
1/* public/menu.css */
2
3.police_titre
4{
5 color: #e8c5c0;
6}
7
8#contenu
9{
10 display: flex;
11 justify-content: space-between;
12}
13
14#colonne1
15{
16 display: flex;
17 flex-wrap: wrap;
18 flex-direction: column-reverse;
19}
20
21#colonne2
22{
23 display: flex;
24 flex-wrap: wrap;
25 align-items: flex-end;
26 flex-direction: column;
27}
28
29#pommes
30{
31 position: relative;
32 left: 3px;
33}
34
35#mon_blog
36{
37 margin: 0px 35px;
38}
39
40
41@media screen and (min-width: 700px)
42{
43 #titre
44 {
45 width: 630px;
46 height: 171px;
47 background-image: url("mouette.png");
48 }
49
50 #contenu
51 {
52 position: relative;
53 bottom: 15px;
54 }
55
56 #colonne1, #colonne2
57 {
58 height: 588px;
59 }
60
61 /* pour IE,
62 indique la bonne taille du bloc pour que la colonne 2 se place correctement */
63 #colonne1
64 {
65 min-width: 310px;
66 }
67
68 #pochette
69 {
70 background-image: url("menu/pochette.png");
71 width: 308px;
72 height: 271px;
73 }
74
75 #fille_qui_tombe
76 {
77 background-image: url("menu/fille_qui_tombe.jpg");
78 width: 208px;
79 height: 163px;
80 margin: 5px 0px;
81 }
82
83 #canoe
84 {
85 background-image: url("menu/canoe.png");
86 width: 207px;
87 height: 144px;
88 }
89
90 #cavalier
91 {
92 background-image: url("menu/cavalier.jpg");
93 width: 159px;
94 height: 312px;
95 position: relative;
96 right: 97px;
97 }
98
99 #pommes
100 {
101 background-image: url("menu/pommes.jpg");
102 width: 59px;
103 height: 97px;
104 position: relative;
105 bottom: 3px;
106 }
107
108 #sirene
109 {
110 background-image: url("menu/sirene.jpg");
111 width: 320px;
112 height: 174px;
113 }
114
115 #mouette_ocean
116 {
117 background-image: url("menu/mouette_ocean.jpg");
118 width: 257px;
119 height: 171px;
120 margin: 5px 0px;
121 }
122
123 #blonde
124 {
125 background-image: url("menu/blonde.jpg");
126 width: 257px;
127 height: 233px;
128 }
129
130 #hey_ho
131 {
132 width: 69px;
133 height: 154px;
134 position: relative;
135 right: 401px;
136 top: 107px;
137 }
138}
139
140@media screen and (max-width: 699px)
141{
142 #titre
143 {
144 width: 480px;
145 height: 131px;
146 background-image: url("mouette_petit.png");
147 margin: auto;
148 }
149
150 #contenu
151 {
152 position: relative;
153 bottom: 12px;
154 }
155
156 #colonne1, #colonne2
157 {
158 height: 447px;
159 }
160
161 /* pour IE,
162 indique la bonne taille du bloc pour que la colonne 2 se place correctement */
163 #colonne1
164 {
165 min-width: 237px;
166 }
167
168 #pochette
169 {
170 background-image: url("menu/pochette_petit.png");
171 width: 234px;
172 height: 206px;
173 }
174
175 #fille_qui_tombe
176 {
177 background-image: url("menu/fille_qui_tombe_petit.jpg");
178 width: 158px;
179 height: 124px;
180 margin: 4px 0px;
181 }
182
183 #canoe
184 {
185 background-image: url("menu/canoe_petit.png");
186 width: 157px;
187 height: 109px;
188 }
189
190 #cavalier
191 {
192 background-image: url("menu/cavalier_petit.jpg");
193 width: 121px;
194 height: 237px;
195 position: relative;
196 right: 73px;
197 }
198
199 #pommes
200 {
201 background-image: url("menu/pommes_petit.jpg");
202 width: 45px;
203 height: 74px;
204 position: relative;
205 bottom: 2px;
206 }
207
208 #sirene
209 {
210 background-image: url("menu/sirene_petit.jpg");
211 width: 243px;
212 height: 132px;
213 }
214
215 #mouette_ocean
216 {
217 background-image: url("menu/mouette_ocean_petit.jpg");
218 width: 195px;
219 height: 130px;
220 margin: 4px 0px;
221 }
222
223 #blonde
224 {
225 background-image: url("menu/blonde_petit.jpg");
226 width: 195px;
227 height: 177px;
228 }
229
230 #hey_ho
231 {
232 width: 53px;
233 height: 117px;
234 position: relative;
235 right: 306px;
236 top: 82px;
237 }
238}
239
240@media screen and (max-width: 479px)
241{
242 #titre
243 {
244 width: 320px;
245 height: 88px;
246 background-image: url("mouette_mini.png");
247 margin: auto;
248 }
249
250 #contenu
251 {
252 position: relative;
253 bottom: 8px;
254 }
255
256 #colonne1, #colonne2
257 {
258 height: 298px;
259 }
260
261 /* pour IE,
262 indique la bonne taille du bloc pour que la colonne 2 se place correctement */
263 #colonne1
264 {
265 min-width: 158px;
266 }
267
268 #pochette
269 {
270 background-image: url("menu/pochette_mini.png");
271 width: 156px;
272 height: 137px;
273 }
274
275 #fille_qui_tombe
276 {
277 background-image: url("menu/fille_qui_tombe_mini.jpg");
278 width: 105px;
279 height: 82px;
280 margin: 3px 0px;
281 }
282
283 #canoe
284 {
285 background-image: url("menu/canoe_mini.png");
286 width: 105px;
287 height: 73px;
288 }
289
290 #cavalier
291 {
292 background-image: url("menu/cavalier_mini.jpg");
293 width: 80px;
294 height: 158px;
295 position: relative;
296 right: 48px;
297 }
298
299 #pommes
300 {
301 background-image: url("menu/pommes_mini.jpg");
302 width: 30px;
303 height: 49px;
304 position: relative;
305 bottom: 2px;
306 left: 2px;
307 }
308
309 #sirene
310 {
311 background-image: url("menu/sirene_mini.jpg");
312 width: 162px;
313 height: 88px;
314 }
315
316 #mouette_ocean
317 {
318 background-image: url("menu/mouette_ocean_mini.jpg");
319 width: 130px;
320 height: 86px;
321 margin: 3px 0px;
322 }
323
324 #blonde
325 {
326 background-image: url("menu/blonde_mini.jpg");
327 width: 130px;
328 height: 118px;
329 }
330
331 #hey_ho
332 {
333 width: 36px;
334 height: 77px;
335 position: relative;
336 right: 204px;
337 top: 56px;
338 }
339}
generated by cgit v1.2.3 (git 2.25.1) at 2025-08-14 04:15:45 +0000