page_atelier.html

   1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
   2 <html xmlns="http://www.w3.org/1999/xhtml">
   3 <head>
   4 <title>Page atelier</title>
   5 <meta charset="utf-8">
   6 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
   7 <link rel="stylesheet" href="css/habillage.css">
   8 <link rel="stylesheet" href="css/habillage_page_atelier.css">
   9 </head>
  10 <body>
  11     <header>
  12         <a href="#"><img src="images/logo-heureux-cyclage.png"></a>
  13     </header>
  14     <section id="wrap">
  15 <!--1ERE COLONNE-->
  16
  17                 <div class="col-12 col-m-6 col-l-3">
  18                         <div id="ateliers">
  19                                 <ul>
  20                                         <li>
  21                                                 <a href="#"><h1>Atelier vélo d'Échirolles</h1></a>
  22                                                 <h2>• Halle du vieux village</h2>
  23                             <address>Place du marché 38100 Échirolles</address>
  24                                                 <p>horaires d'ouverture</p>
  25                                         </li>
  26                                 </ul>
  27                         </div>
  28                         <div class="logoatelier">
  29                                 <img src="../clavettes/images/siteon3.jpg" alt="logo atelier le petit vélo"/>
  30                         </div>
  31                 </div>
  32 <!--2EME COLONNE-->
  33
  34         <div class="col-12 col-m-6 col-l-5">
  35                 <div id="atelierdescription">
  36                         <div class="article">
  37                                 <h1>Nom de l'atelier</h1>
  38                                         <h3>Historique</h3>
  39                                                 <p>Tist quaes volo tese porerro ent alia voluptium, ulla quiandic totatio nsequidunt aut exerfer eptatis es sinctibAborerumquis dolupiditi te sa cus asperundae ipsam est, optassumqui ut ut pro quae et dus as eatem iAs sitata velitib eaturehenis qui reatem este magnim qui rero volorion necullaborum faceaqu undiam, ut dolorep eliqu</p>
  40                                                 <img src="../clavettes/images/velo-nb.png" alt="photo"/>
  41
  42                         </div>
  43                         <div id="news">
  44                 <div class="article">
  45                         <h1>Derniers articles de l'atelier</h1>
  46                                         <h3><a href="#">Date — Auteur</a></h3>
  47                                                 <p>Tist quaes volo tese porerro ent alia voluptium, ulla quiandic totatio nsequidunt aut exerfer eptatis es sinctibAborerumquis dolupiditi te sa cus asperundae ipsam est, optassumqui ut ut pro quae et dus as eatem iAs sitata velitib eaturehenis qui reatem este magnim qui rero volorion necullaborum faceaqu undiam, ut dolorep eliqu (...)</p>
  48                 </div>
  49             </div>
  50                 </div>
  51         </div>
  52
  53 <!--3EME COLONNE-->
  54     <div class="col-12 col-m-12 col-l-4">
  55                 <div class="map">
  56                 <img src="../clavettes/images/map.png" alt="photo"/>
  57                 </div>
  58     </div>
  59     <div class="col-12 col-m-12 col-l-4">
  60             <div class="agenda">
  61                 <h1>Agenda</h1>
  62                 <ul>
  63                     <li>
  64                         <div class="event">
  65                             <div class="date">
  66                                 <p>date</p>
  67                                 <p class="horaire">horaire</p>
  68                             </div>
  69                             <div class="nature">
  70                                 <p>Un événement trop cool sur le vélo en ville</p>
  71                             </div>
  72                         </div>
  73                     </li>
  74                 </ul>
  75             </div>
  76         </div>
  77     </section>
  78         <footer>
  79         <div class="textfooter">
  80                 <ul>
  81                         <li>
  82                                 <h3><a href="#">Licence libre</a></h3>
  83                         </li>
  84                         <li>
  85                                 <h3><a href="#">À propos</a></h3>
  86                         </li>
  87                         <li>
  88                                 <h3><a href="#">L'Heureux Cyclage</a></h3>
  89                         </li>
  90                 </ul>
  91         </div>
  92         </footer>
  93 </body>
  94 </html>