front-page.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 <meta charset="utf-8">
   5 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
   6 <meta http-equiv="Content-Type" content="text/; charset=utf-8">
   7 <link rel="stylesheet" type="text/css" href="css/habillage.css">
   8 <title>L'Heureux Cyclage - Clavette</title>
   9 </head>
  10
  11         <body>
  12
  13                 <header>
  14
  15                                 <a href="#"><img src="../clavettes/images/logo_heureux-cyclage.jpg" alt="logo_heureux-cyclage" width="300" /></a>
  16
  17                 </header>
  18
  19                 <section id="wrap">
  20
  21
  22 <!--1ERE COLONNE-->
  23
  24
  25
  26
  27                                 <div class="col-12 col-m-6 col-l-3">
  28
  29
  30                                         <div id="ateliers">
  31
  32
  33
  34                                                 <ul>
  35                                                         <li>
  36
  37
  38
  39                                                                 <a href="#"><h1>Atelier vélo d'Échirolles</h1></a>
  40                                                                 <a href="#"><h2>Halle du vieux village<br>Échirolles</h2></a>
  41                                                                 <a href="#"><h2>horaires</h2></a>
  42
  43                                                         </li>
  44
  45                                                         <li>
  46
  47                                                                 <a href="#"><h1>uN p'Tit véLo dAnS La Tête</h1></a>
  48                                                                 <a href="#"><h2>5 rue de Londres <br>38000 GRENOBLE</h2></a>
  49                                                                 <a href="#"><h2>horaires</h2></a>
  50
  51                                                         </li>
  52
  53                                                         <li>
  54
  55                                                                 <a href="#"><h1>Les Cycl'hauts du Rabot</h1></a>
  56                                                                 <a href="#"><h2>11, rue Maurice Gignoux<br>38031 GRENOBLE</h2></a>
  57                                                                 <a href="#"><h2>horaires</h2></a>
  58
  59                                                         </li>
  60
  61                                                         <li>
  62
  63                                                                 <a href="#"><h1>La Citrouille</h1></a>
  64                                                                 <a href="#"><h2>38000 Grenoble</h2></a>
  65                                                                 <a href="#"><h2>horaires</h2></a>
  66
  67                                                         </li>
  68
  69                                                         <li>
  70
  71                                                                 <a href="#"><h1>Un Vélo de Plus</h1></a>
  72                                                                 <a href="#"><h2>adresse</h2></a>
  73                                                                 <a href="#"><h2>horaires</h2></a>
  74
  75                                                         </li>
  76
  77                                                         <li>
  78
  79                                                                 <a href="#"><h1>Les déraillés</h1></a>
  80                                                                 <a href="#"><h2>adresse</h2></a>
  81                                                                 <a href="#"><h2>horaires</h2></a>
  82
  83                                                         </li>
  84
  85                                                         <li>
  86
  87                                                                 <a href="#"><h1>Atelier Garave</h1></a>
  88                                                                 <a href="#"><h2>adresse</h2></a>
  89                                                                 <a href="#"><h2>horaires</h2></a>
  90
  91                                                         </li>
  92                                                 </ul>
  93                                         </div>
  94
  95                                 </div>
  96
  97
  98
  99
 100
 101 <!--2EME COLONNE-->
 102
 103
 104
 105
 106                                         <div class="col-12 col-m-6 col-l-5">
 107
 108                                                 <div id="news">
 109
 110                                                         <div class="article1">
 111
 112                                                                 <a href="#"><img src="../clavettes/images/velo-nb.png" alt="logo_heureux-cyclage"/></a>
 113
 114                                                                 <a href="#"><h1>Titre de l'article</h1></a>
 115
 116                                                                 <a href="#"><h3>Date — Auteur</h3></a>
 117
 118                                                                 <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>
 119                                                                 <a href="#"><p class="suite">Lire la suite...</p></a>
 120
 121
 122                                                         </div>
 123
 124                                                         <div class="article2">
 125
 126                                                         </div>
 127
 128                                                         <div class="article3">
 129
 130                                                         </div>
 131
 132                                                         <div class="article4">
 133
 134                                                         </div>
 135
 136
 137                                                 </div>
 138
 139                                         </div>
 140
 141
 142
 143
 144
 145
 146 <!--3EME COLONNE-->
 147
 148
 149                                 <div class="col-12 col-m-12 col-l-4">
 150
 151
 152                                         <div class="map">
 153
 154
 155
 156                                         </div>
 157
 158                                 </div>
 159
 160
 161
 162
 163
 164                                         <div class="col-12 col-m-12 col-l-4">
 165
 166                                                 <div class="agenda">
 167
 168
 169
 170
 171                                                 </div>
 172
 173
 174                                         </div>
 175
 176
 177
 178
 179
 180
 181
 182
 183
 184                 </section>
 185
 186         </body>
 187
 188 </html>