source: spip-zone/_squelettes_/soyezcreateurs_net/trunk/plugins/soyezcreateurs/noisettes/sommaire/sommaire_modeportailcognac.html @ 103514

Last change on this file since 103514 was 103514, checked in by real3t@…, 4 years ago

Le slider du mode portail Cognac a sa durée paramétrable.

Beaucoup moins de titres (un titre annonce un contenu, il n'est pas LE contenu !

Des flèches partout et amélioration des styles de base

File size: 14.3 KB
Line 
1#SET{LargeurContaineur,(#CONFIG{soyezcreateurs_layout/largeurconteneur,960})}
2#SET{LargeurMenuGauche,(#CONFIG{soyezcreateurs_layout/largeurmenugauche,180})}
3#SET{LargeurMenuDroit,(#CONFIG{soyezcreateurs_layout/largeurmenudroit,180})}
4#SET{Largeurcontent_central,(#GET{LargeurContaineur}|moins{#GET{LargeurMenuGauche}}|moins{#GET{LargeurMenuDroit}})}
5#SET{Largeurcontent_extra,(#GET{LargeurContaineur}|moins{#GET{Largeurcontent_central}})}
6<script type="text/javascript">
7        CanceladjustLayout = true;
8</script>
9<main id="main" role="main"><div id="communiquant_content">
10<a id="letexte"></a>
11
12<!-- SLIDER -->
13<div id="diaporama" class="zone-slider">
14        <header>
15                <h1 class="hide">Diaporama</h1>
16        </header>
17        <div class="slider-slick">
18                <div class="slider show-for-medium" role="region" aria-label="Diaporama d'accueil">
19                        <div class="slider-diapo-imgfull">
20                                <a href="#" title="Lire l'article suivant">
21                                        <img src="https://unsplash.it/1920/580?image=1043" alt="" />
22                                </a>
23                        </div>
24                </div>
25                <div class="slider show-for-medium" role="region" aria-label="Diaporama d'accueil">
26                        <div class="slider-diapo-imgfull">
27                                <a href="#" title="Lire l'article suivant">
28                                        <img src="https://unsplash.it/1920/580?image=103" alt="" />
29                                </a>
30                        </div>
31                </div>
32                <div class="slider show-for-medium" role="region" aria-label="Diaporama d'accueil">
33                        <div class="slider-diapo-imgfull">
34                                <a href="#" title="Lire l'article suivant">
35                                        <img src="https://unsplash.it/1920/580?image=1031" alt="" />
36                                </a>
37                        </div>
38                </div>
39                <div class="slider show-for-medium" role="region" aria-label="Diaporama d'accueil">
40                        <div class="slider-diapo-imgfull">
41                                <a href="#" title="Lire l'article suivant">
42                                        <img src="https://unsplash.it/1920/580?image=83" alt="" />
43                                </a>
44                        </div>
45                </div>
46                <div class="slider show-for-medium" role="region" aria-label="Diaporama d'accueil">
47                        <div class="slider-diapo-imgfull">
48                                <a href="#" title="Lire l'article suivant">
49                                        <img src="https://unsplash.it/1920/580?image=107" alt="" />
50                                </a>
51                        </div>
52                </div>
53                <div class="slider show-for-medium" role="region" aria-label="Diaporama d'accueil">
54                        <div class="slider-diapo-imgfull">
55                                <a href="#" title="Lire l'article suivant">
56                                        <img src="https://unsplash.it/1920/580?image=78" alt="" />
57                                </a>
58                        </div>
59                </div>
60        </div>
61        <div id="liens-diaporama">
62                <ul>
63                        <li>
64                                <a href="#" title="Voir Visite virtuelle">
65                                        <span>Visite virtuelle<br />
66                                        Ville d'art & d'histoire</span>
67                                        <span class="icon icon-arrow-right2 icon-2x">&#10140;</span>
68                                </a>
69                        </li>
70                </ul>
71        </div>
72</div>
73<!-- fin SLIDER -->
74
75<!-- ACTUS -->
76<div id="actualites" class="zone-actus">
77        <header class="titre-sommaire">
78                <h1>En ce moment à Cognac</h1>
79        </header>
80        <div class="row" id="masonry" role="region" aria-label="Actualités">
81                <div class="grid">
82                        <div class="grid-item">
83                                <div class="content-actus">
84                                        <a href="#" title="Lire l'article">
85                                                <img src="https://unsplash.it/308/340?image=118" alt="" />
86                                                <div class="h2"><span class="titre-actus">Recyclez vos sapins de Noël</span>
87                                                        <span class="icon icon-arrow-right2 icon-lg">&#10140;</span></div>
88                                        </a>
89                                </div>
90                        </div>
91                        <div class="grid-item grid-item-x2">
92                                <div class="content-actus">
93                                        <a href="#" title="Lire l'article">
94                                                <img src="https://unsplash.it/638/340?image=182" alt="" />
95                                                <div class="h2"><span class="titre-actus">Belle et heureuse année 2017</span>
96                                                <span class="icon icon-arrow-right2 icon-lg">&#10140;</span></div>
97                                        </a>
98                                </div>
99                        </div>
100                        <div class="grid-item ">
101                                <div class="content-actus">
102                                        <a href="#" title="Lire l'article">
103                                                <img src="https://unsplash.it/308/340?image=82" alt="" />
104                                                <div class="h2"><span class="titre-actus">Ville d'art et d'histoire : programme automne</span>
105                                                        <span class="icon icon-arrow-right2 icon-lg">&#10140;</span></div>
106                                        </a>
107                                </div>
108                        </div>
109                        <div class="grid-item">
110                                <div class="content-actus">
111                                        <a href="#" title="Lire l'article">
112                                                <header class="flexbox-center-space-between triadeA texte-blanc">
113                                                        <time itemprop="startDate" title="2017-02-01 14:30:00" datetime="2017-02-01 14:30:00">
114                                                                <span class="dateNombre"><strong>08</strong>&nbsp;/08</span>
115                                                                <span class="dateMois display-block">2107</span>
116                                                        </time>
117                                                        <img src="https://unsplash.it/180/95?image=139" alt="" />
118                                                </header>
119                                                <div class="h2"><span class="titre-actus">Conférence du GREH au Centre des congrés</span>
120                                                        <span class="icon icon-arrow-right2 icon-lg">&#10140;</span></div>
121                                        </a>
122                                </div>
123                                <div class="content-actus">
124                                        <a href="#" title="Lire l'article">
125                                                <header class="flexbox-center-space-between triadeA texte-blanc">
126                                                        <time itemprop="startDate" title="2017-02-01 14:30:00" datetime="2017-02-01 14:30:00">
127                                                                <span class="dateNombre"><strong>11</strong>&nbsp;/01</span>
128                                                                <span class="dateMois display-block">2107</span>
129                                                        </time>
130                                                        <img src="https://unsplash.it/180/95?image=200" alt="" />
131                                                </header>
132                                                <div class="h2"><span class="titre-actus">Fritz Baueur au ciné-club, Le Galaxy, salle N°2</span>
133                                                        <span class="icon icon-arrow-right2 icon-lg">&#10140;</span></div>
134                                        </a>
135                                </div>
136                        </div>
137                        <div class="grid-item">
138                                <div class="content-actus">
139                                        <a href="#" title="Lire l'article">
140                                                <img src="https://unsplash.it/308/340?image=53" alt="" />
141                                                <div class="h2"><span class="titre-actus">Fête des papilles au MACO</span>
142                                                        <span class="icon icon-arrow-right2 icon-lg">&#10140;</span></div>
143                                        </a>
144                                </div>
145                        </div>
146                        <div class="grid-item grid-item-x2">
147                                <div class="content-actus">
148                                        <a href="#" title="Lire l'article">
149                                                <img src="https://unsplash.it/638/340?image=87" alt="" />
150                                                <div class="h2"><span class="titre-actus">Nuit de la lecture, le samedi 14 janvier de 17h à 21h à la Bibliothèque municipale</span>
151                                                        <span class="icon icon-arrow-right2 icon-lg">&#10140;</span></div>
152                                        </a>
153                                </div>
154                        </div>
155                        <div class="grid-item">
156                                <div class="content-actus">
157                                        <a href="#" title="Lire l'article">
158                                                <img src="https://unsplash.it/308/340?image=172" alt="" />
159                                                <div class="h2"><span class="titre-actus">Recyclez vos sapins de Noël</span>
160                                                        <span class="icon icon-arrow-right2 icon-lg">&#10140;</span></div>
161                                        </a>
162                                </div>
163                        </div>
164                        <div class="grid-item grid-item-x3">
165                                <div class="content-actus">
166                                        <a href="#" title="Lire l'article">
167                                                <img src="https://unsplash.it/955/340?image=252" alt="" />
168                                                <div class="h2"><span class="titre-actus">Recyclez vos sapins de Noël</span>
169                                                        <span class="icon icon-arrow-right2 icon-lg">&#10140;</span></div>
170                                        </a>
171                                </div>
172                        </div>
173                        <div class="grid-item grid-item-x2">
174                                <div class="content-actus">
175                                        <a href="#" title="Lire l'article">
176                                                <img src="https://unsplash.it/638/340?image=382" alt="" />
177                                                <div class="h2"><span class="titre-actus">Recyclez vos sapins de Noël</span>
178                                                        <span class="icon icon-arrow-right2 icon-lg">&#10140;</span></div>
179                                        </a>
180                                </div>
181                        </div>
182                        <div class="grid-item">
183                                <div class="content-actus">
184                                        <a href="#" title="Lire l'article">
185                                                <img src="https://unsplash.it/308/340?image=102" alt="" />
186                                                <div class="h2"><span class="titre-actus">Recyclez vos sapins de Noël</span>
187                                                        <span class="icon icon-arrow-right2 icon-lg">&#10140;</span></div>
188                                        </a>
189                                </div>
190                        </div>
191                        <div class="grid-item">
192                                <div class="content-actus">
193                                        <a href="#" title="Lire l'article">
194                                                <img src="https://unsplash.it/308/340?image=122" alt="" />
195                                                <div class="h2"><span class="titre-actus">Recyclez vos sapins de Noël</span>
196                                                        <span class="icon icon-arrow-right2 icon-lg">&#10140;</span></div>
197                                        </a>
198                                </div>
199                        </div>
200                </div>
201        </div>
202        <div class="text-center avec-margin-top avec-margin-bottom">
203                <a class="button texte-blanc triadeA" href="#" title="Consulter les atualités">Consulter toutes les actualités</a>
204        </div>
205</div>
206<!-- fin ACTUS -->
207
208
209<!-- PROJETS -->
210<div id="lesprojets" class="zone-projets">
211        <header class="titre-sommaire">
212                <h1>Les projets</h1>
213        </header>
214        <div id="projets" class="avec-margin-top">
215                <div class="projet triadeC">
216                        <div class="content-projets">
217                                <a href="#" title="Lire l'article">
218                                        <h2>Projets</h2>
219                                        <div class="suite">
220                                                <span class="icon icon-arrow-right2">&#10140;</span>
221                                        </div>
222                                </a>
223                        </div>
224                </div>
225                <div class="projet triadeB">
226                        <div class="content-projets">
227                                <a href="#" title="Lire l'article">
228                                        <h2>Action municipale</h2>
229                                        <div class="suite">
230                                                <span class="icon icon-arrow-right2">&#10140;</span>
231                                        </div>
232                                </a>
233                        </div>
234                </div>
235                <div class="projet triadeA">
236                        <div class="content-projets">
237                                <a href="#" title="Lire l'article">
238                                        <h2>Démocratie locale</h2>
239                                        <div class="suite">
240                                                <span class="icon icon-arrow-right2">&#10140;</span>
241                                        </div>
242                                </a>
243                        </div>
244                </div>
245                <div class="projet triadeD">
246                        <div class="content-projets">
247                                <a href="#" title="Lire l'article">
248                                        <h2>Services municipaux</h2>
249                                        <div class="suite">
250                                                <span class="icon icon-arrow-right2">&#10140;</span>
251                                        </div>
252                                </a>
253                        </div>
254                </div>
255        </div>
256        <div class="clearfix"></div>
257</div>
258<!-- fin PROJETS -->
259
260<!-- PRATIQUE -->
261<div id="pratique" class="zone-pratique">
262        <header class="titre-sommaire">
263                <h1>Cognac pratique</h1>
264        </header>
265        <div role="region" aria-label="Pratique">
266                <div class="slider-pratique">
267                        <div class="content-pratique">
268                                <a href="#" title="Lire l'article">
269                                        <img src="https://unsplash.it/280/190?image=118" alt="" />
270                                        <div class="h2"><span class="titre-pratique">Agenda</span>
271                                                <span class="icon icon-arrow-right2 icon-lg">&#10140;</span></div>
272                                </a>
273                        </div>
274                        <div class="content-pratique">
275                                <a href="#" title="Lire l'article">
276                                        <img src="https://unsplash.it/280/190?image=182" alt="" />
277                                        <div class="h2"><span class="titre-pratique">Cantine</span>
278                                                <span class="icon icon-arrow-right2 icon-lg">&#10140;</span></div>
279                                </a>
280                        </div>
281                        <div class="content-pratique">
282                                <a href="#" title="Lire l'article">
283                                        <img src="https://unsplash.it/280/190?image=18" alt="" />
284                                        <div class="h2"><span class="titre-pratique">Piscine</span>
285                                                <span class="icon icon-arrow-right2 icon-lg">&#10140;</span></div>
286                                </a>
287                        </div>
288                        <div class="content-pratique">
289                                <a href="#" title="Lire l'article">
290                                        <img src="https://unsplash.it/280/190?image=182" alt="" />
291                                        <div class="h2"><span class="titre-pratique">Le mag</span>
292                                                <span class="icon icon-arrow-right2 icon-lg">&#10140;</span></div>
293                                </a>
294                        </div>
295                        <div class="content-pratique">
296                                <a href="#" title="Lire l'article">
297                                        <img src="https://unsplash.it/280/190?image=118" alt="" />
298                                        <div class="h2"><span class="titre-pratique">Compte citoyen</span>
299                                                <span class="icon icon-arrow-right2 icon-lg">&#10140;</span></div>
300                                </a>
301                        </div>
302                        <div class="content-pratique">
303                                <a href="#" title="Lire l'article">
304                                        <img src="https://unsplash.it/280/190?image=82" alt="" />
305                                        <div class="h2"><span class="titre-pratique">Démarches en ligne</span>
306                                                <span class="icon icon-arrow-right2 icon-lg">&#10140;</span></div>
307                                </a>
308                        </div>
309                        <div class="content-pratique">
310                                <a href="#" title="Lire l'article">
311                                        <img src="https://unsplash.it/280/190?image=28" alt="" />
312                                        <div class="h2"><span class="titre-pratique">Recyclez vos sapins de Noël</span>
313                                                <span class="icon icon-arrow-right2 icon-lg">&#10140;</span></div>
314                                </a>
315                        </div>
316                        <div class="content-pratique">
317                                <a href="#" title="Lire l'article">
318                                        <img src="https://unsplash.it/280/190?image=132" alt="" />
319                                        <div class="h2"><span class="titre-pratique">Recyclez vos sapins de Noël</span>
320                                                <span class="icon icon-arrow-right2 icon-lg">&#10140;</span></div>
321                                </a>
322                        </div>
323                        <div class="content-pratique">
324                                <a href="#" title="Lire l'article">
325                                        <img src="https://unsplash.it/280/190?image=148" alt="" />
326                                        <div class="h2"><span class="titre-pratique">Recyclez vos sapins de Noël</span>
327                                                <span class="icon icon-arrow-right2 icon-lg">&#10140;</span></div>
328                                </a>
329                        </div>
330                        <div class="content-pratique">
331                                <a href="#" title="Lire l'article">
332                                        <img src="https://unsplash.it/280/190?image=184" alt="" />
333                                        <div class="h2"><span class="titre-pratique">Recyclez vos sapins de Noël</span>
334                                                <span class="icon icon-arrow-right2 icon-lg">&#10140;</span></div>
335                                </a>
336                        </div>
337                        <div class="content-pratique">
338                                <a href="#" title="Lire l'article">
339                                        <img src="https://unsplash.it/280/190?image=238" alt="" />
340                                        <div class="h2"><span class="titre-pratique">Recyclez vos sapins de Noël</span>
341                                                <span class="icon icon-arrow-right2 icon-lg">&#10140;</span></div>
342                                </a>
343                        </div>
344                        <div class="content-pratique">
345                                <a href="#" title="Lire l'article">
346                                        <img src="https://unsplash.it/280/190?image=282" alt="" />
347                                        <div class="h2"><span class="titre-pratique">Recyclez vos sapins de Noël</span>
348                                                <span class="icon icon-arrow-right2 icon-lg">&#10140;</span></div>
349                                </a>
350                        </div>
351                </div>
352        </div>
353</div>
354<!-- fin PRATIQUE -->
355
356</div><!-- communiquant_content --></main>
357
358[<script src="(#CHEMIN{javascript/masonry.pkgd.min.js})" type="text/javascript"></script>]
359[<script src="(#CHEMIN{javascript/imagesloaded.pkgd.min.js})" type="text/javascript"></script>]
360<script type="text/javascript">
361        // slider Slick
362        $(document).ready(function(){
363                $('.slider-slick').slick({
364                  autoplay: true,
365                  pauseOnHover: true,
366                  autoplaySpeed: #CONFIG{soyezcreateurs/vitesse_slider,10000},
367                  fade: true,
368                  cssEase: 'linear',
369                  arrows: false,
370                  dots: true,
371                  centerMode: true,
372                  focusOnSelect: true
373                });
374                $('.slider-pratique').slick({
375                  dots: false,
376                  slidesToShow: 7,
377                  infinite: true,
378                  variableWidth: true
379                });
380        });
381        // external js: masonry.pkgd.js, imagesloaded.pkgd.js
382        // init Masonry after all images have loaded
383        var $grid = $('.grid').imagesLoaded( function() {
384          $grid.masonry({
385                itemSelector: '.grid-item',
386                gutter: 20
387          });
388        });
389</script>
390
391#FILTRE{mini_html}
Note: See TracBrowser for help on using the repository browser.