[SKEL] +meta description pour les rubriques et les articles
[lhc/web/clavettes.git] / front-page.html
index 2e51e2b..a9f7fdd 100644 (file)
 <head>
 <meta charset="utf-8">
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
-<meta http-equiv="Content-Type" content="text/; charset=utf-8">
 <link rel="stylesheet" type="text/css" href="css/habillage.css">
 <title>L'Heureux Cyclage - Clavette</title>
 </head>
 
-       <body>
-       
-               <header>
-                       
-                               <a href="#"><img src="../Images/logo_heureux-cyclage.jpg" alt="logo_heureux-cyclage" width="300" /></a>
-                       
-               </header>
-       
-               <section id="wrap">
-               
+<body>
+<header>
+       <a href="#"><img src="../clavettes/images/logo_heureux-cyclage.jpg" alt="logo_heureux-cyclage" width="300" /></a>
+</header>
+<section id="wrap">
 
 <!--1ERE COLONNE-->
-                       
-       
-                       <!--<div class="row">
-                       
-                               <div class="column large-3">-->
-                               
-                               
-                                       <div id="ateliers">
-                                       
-                                               <div class="atelier1">
-                                               
-                                                       
-                                                       
-                                                       <a href="#"><h1>Atelier vélo d'Échirolles</h1></a>
-                                                       <a href="#"><h2>Halle du vieux village<br>Échirolles</h2></a>
-                                                       <a href="#"><h2>horaires</h2></a>
-                                               
-                                               </div>
-                                               
-                                               <div class="atelier2">
-                                               
-                                                       <a href="#"><h1>uN p'Tit véLo dAnS La Tête</h1></a>
-                                                       <a href="#"><h2>5 rue de Londres <br>38000 GRENOBLE</h2></a>
-                                                       <a href="#"><h2>horaires</h2></a>
-                                               
-                                               </div>
-                                               
-                                               <div class="atelier3">
-                                               
-                                                       <a href="#"><h1>Les Cycl'hauts du Rabot</h1></a>
-                                                       <a href="#"><h2>11, rue Maurice Gignoux<br>38031 GRENOBLE</h2></a>
-                                                       <a href="#"><h2>horaires</h2></a>
-                                               
-                                               </div>
-                                               
-                                               <div class="atelier4">
-                                               
-                                                       <a href="#"><h1>La Citrouille</h1></a>
-                                                       <a href="#"><h2>38000 Grenoble</h2></a>
-                                                       <a href="#"><h2>horaires</h2></a>
-                                               
-                                               </div>
-                                               
-                                               <div class="atelier5">
-                                               
-                                                       <a href="#"><h1>Un Vélo de Plus</h1></a>
-                                                       <a href="#"><h2>adresse</h2></a>
-                                                       <a href="#"><h2>horaires</h2></a>
-                                               
-                                               </div>
-                                               
-                                               <div class="atelier6">
-                                               
-                                                       <a href="#"><h1>Les déraillés</h1></a>
-                                                       <a href="#"><h2>adresse</h2></a>
-                                                       <a href="#"><h2>horaires</h2></a>
-                                               
-                                               </div>
-                                               
-                                               <div class="atelier7">
-                                               
-                                                       <a href="#"><h1>Atelier Garave</h1></a>
-                                                       <a href="#"><h2>adresse</h2></a>
-                                                       <a href="#"><h2>horaires</h2></a>               
-                                               
-                                               </div>
-                                               
-                                       </div>
                                
-                               <!--</div>
+       <div class="col-12 col-m-6 col-l-3">
+               <div id="ateliers">
+                       <ul>
+                               <li>
+                                       <a href="#"><h1>Atelier vélo d'Échirolles</h1></a>
+                                       <a href="#"><p>Halle du vieux village</p>
+                                       <p>Échirolles</p></a>
+                                       <a href="#"><p>horaires</p></a>
+                               </li>
+                               <li>
+                                       <a href="#"><h1>uN p'Tit véLo dAnS La Tête</h1></a>
+                                       <a href="#"><p>5 rue de Londres</p>
+                                       <p>38000 GRENOBLE</p></a>
+                                       <a href="#"><p>horaires</p></a>
+                               </li>
+                               <li>
+                                       <a href="#"><h1>Les Cycl'hauts du Rabot</h1></a>
+                                       <a href="#"><p>11, rue Maurice Gignoux</p>
+                                       <p>38031 GRENOBLE</p></a>
+                                       <a href="#"><h2>horaires</h2></a>
+                               </li>
+                               <li>
+                                       <a href="#"><h1>La Citrouille</h1></a>
+                                       <a href="#"><p>38000 Grenoble</p></a>
+                                       <a href="#"><p>horaires</p></a>
+                               </li>
+                               <li>
+                                       <a href="#"><h1>Un Vélo de Plus</h1></a>
+                                       <a href="#"><p>adresse</p></a>
+                                       <a href="#"><p>horaires</p></a>
+                               </li>
+                               <li>
+                                       <a href="#"><h1>Les déraillés</h1></a>
+                                       <a href="#"><p>adresse</p></a>
+                                       <a href="#"><p>horaires</p></a>
+                               </li>
+                               <li>
+                                       <a href="#"><h1>Atelier Garave</h1></a>
+                                       <a href="#"><p>adresse</p></a>
+                                       <a href="#"><p>horaires</p></a>         
+                               </li>
+                       </ul>
+               </div>
+       </div>
                                
-                       </div>-->
-                       
-                       
-                       
+               
 <!--2EME COLONNE-->    
-                       
-                       
-                               <!--<div class="column large 5">-->
-                               
-                                       <div id="news">
-                                       
-                                               <div class="article1">
-                                               
-                                                       <a href="#"><img src="../Images/velo-nb.png" alt="logo_heureux-cyclage" width="500px" /></a>
-                                               
-                                                       <a href="#"><h1>Titre de l'article</h1></a>
-                                                       
-                                                       <a href="#"><h3>Date — Auteur</h3></a>
-                                                       
-                                                       <a href="#"><p>extrait du contenu de l'article extrait du contenu de l'article extrait du contenu de l'article extrait du contenu de l'article extrait du contenu de l'article extrait du contenu de l'article extrait du contenu de l'article extrait du contenu de l'article extrait du contenu de l'article extrait du contenu de l'article extrait du contenu de l'article extrait du contenu de l'article extrait du contenu de l'article extrait du contenu de l'article extrait du contenu de l'article extrait du contenu de l'article</p></a>
-                                                       
-                                               
-                                               </div>
-                                               
-                                               <div class="article2">
-                                               
-                                               </div>
-                                               
-                                               <div class="article3">
-                                               
-                                               </div>
-                                               
-                                               <div class="article4">
-                                               
-                                               </div>
-                                       
-                                       
-                                       </div>
-                               
-                               <!--</div>-->
-                       
-                       
-                       
-                       
+       
+       <div class="col-12 col-m-6 col-l-5">
+               <div id="news">
+                       <div class="article">
+                               <a href="#"><img src="../clavettes/images/velo-nb.png" alt="logo_heureux-cyclage"/></a>
+                                               <h1><a href="#">Titre de l'article</a></h1><br>
+                                                       <h3><a href="#">Date — Auteur</a></h3>
+                                                               <a href="#"><p>extrait du contenu de l'article extrait du contenu de l'article extrait du contenu de l'article extrait du contenu de l'article extrait du contenu de l'article extrait du contenu de l'article extrait du contenu de l'article extrait du contenu de l'article extrait du contenu de l'article extrait du contenu de l'article extrait du contenu de l'article extrait du contenu de l'article extrait du contenu de l'article extrait du contenu de l'article extrait du contenu de l'article extrait du contenu de l'article...</p></a><br>
+                                                               
+                       </div>
+                       <div class="article">
+                       </div>
+                       <div class="article">
+                       </div>
+                       <div class="article">
+                       </div>
+               </div>
+       </div>
+
 <!--3EME COLONNE-->                    
                        
-                       
-                               <!--<div class="column large 4">-->
-                               
-                               
-                                       <div class="map">
-                                       
-                                       </div>
-                               
-                               <!--</div>
+       <div class="col-12 col-m-12 col-l-4">
+               <div class="map">
+               </div>
+       </div>
                                
-                               
-                               
-                               <div class="row">
-                               
-                                       <div class="column large 4">-->
-                                       
-                                               <div class="agenda">
-                                               
-                                               </div>                          
-                                       
-                                       
-                                       <!--</div>
-                                               
-                               </div>-->
-               
-               
-       
-       
-       
-       
-       
-               </section>
-       
-       </body>
-
+       <div class="col-12 col-m-12 col-l-4">
+               <div class="agenda">
+                       <h1>Agenda</h1>
+                               <ul>
+                                       <li>
+                                               <div class="event">
+                                                       <div class="date">
+                                                               <a href="#"><time datetime="2015-01-16">16 JAN</time datetime><br>
+                                                               <time>18:00</p></time>
+                                                       </div>
+                                                       <div class="nature">
+                                                               <a href="#"><p>blabla blablab bla bla bla bla blablabblablab blabla blabla blablab bl abla blabla</p></a>
+                                                       </div>
+                                               </div>
+                                       </li> 
+                                       <li>
+                                       </li> 
+                                       <li>
+                                       </li> 
+                               </ul>
+               </div>
+       </div>
+                                               
+</section>
+       <footer>
+               <ul>
+                       <li>
+                               <h3><a href="#">Licence libre</a></h3>
+                       </li>
+                       <li>
+                               <h3><a href="#">À propos</a></h3>
+                       </li>
+                       <li>
+                               <h3><a href="#">L'Heureux Cyclage</a></h3>
+                       </li>
+               </ul>
+       </footer>
+</body>
 </html>
\ No newline at end of file