+body{
+ margin-top:0;
+ height: 1500px;
+ font-family: 'Open Sans', Arial, sans-serif;
+}
+
+header{
+ margin:0 auto;
+ width:1200px;
+}
+
+#wrap {
+ background-color: #2b1b1b;
+ padding-top:100px;
+ width: 1200px;
+ margin: 0 auto;
+}
+
+a{
+ text-decoration:none;
+}
+
+h1{
+ margin: 15px -15px 5px 15px;
+ padding:0;
+ font-size:2.2em;
+ color:#1d0b78;
+ display:inline-block;
+ width:100%;
+ word-wrap: break-word;
+}
+
+h2{
+ margin: 15px 15px;
+ font-size:1.5em;
+ color:#1d0b78;
+ display:inline-block;
+ width:100%;
+
+}
+
+h3{
+ margin:15px;
+ display:inline-block;
+ color:#1d0b78;
+}
+
+p{
+ margin:0 15px;
+ color:#1d0b78;
+ text-decoration:none;
+}
+
+/*1ERE COLONNE*/
+
+
+#ateliers{
+ /*background-color: #76d55c;*/
+ width:300px;
+ height:600px;
+ float:left;
+}
+
+.atelier1{
+ width:300px;
+ height:300px;
+ margin-bottom:15px;
+ background-color: #2bc7cd;
+}
+
+.atelier2{
+ width:300px;
+ height:300px;
+ margin-bottom:15px;
+ background-color: #2bc7cd;
+}
+
+.atelier3{
+ width:300px;
+ height:300px;
+ margin-bottom:15px;
+ background-color: #2bc7cd;
+}
+
+.atelier4{
+ width:300px;
+ height:300px;
+ margin-bottom:15px;
+ background-color: #2bc7cd;
+}
+
+.atelier5{
+ width:300px;
+ height:300px;
+ margin-bottom:15px;
+ background-color: #2bc7cd;
+}
+
+.atelier6{
+ width:300px;
+ height:300px;
+ margin-bottom:15px;
+ background-color: #2bc7cd;
+}
+
+.atelier7{
+ width:300px;
+ height:300px;
+ margin-bottom:15px;
+ background-color: #2bc7cd;
+}
+
+
+/*2EME COLONNE*/
+
+
+#news{
+ /*background-color:#a51616;*/
+ width:500px;
+ height:1000px;
+ margin-left:20px;
+ float:left;
+ clear:right;
+}
+
+.article1{
+ background-color:#ffaa7f;
+ width:500px;
+ height:700px;
+ margin-bottom:15px;
+}
+
+.article2{
+ background-color:#ffaa7f;
+ width:500px;
+ height:440px;
+ margin-bottom:15px;
+}
+
+.article3{
+ background-color:#ffaa7f;
+ width:500px;
+ height:440px;
+ margin-bottom:15px;
+}
+
+.article4{
+ background-color:#ffaa7f;
+ width:500px;
+ height:440px;
+ margin-bottom:15px;
+}
+
+
+
+/*3EME COLONNE*/
+
+
+
+.map{
+ background-color:#6059d2;
+ width:400px;
+ margin-left:840px;
+ height:400px;
+ margin-bottom:20px;
+}
+
+.agenda{
+ background-color: #ca52ae;
+ width:400px;
+ height:400px;
+ margin-left:840px;
+}
+
--- /dev/null
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<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">
+
+
+<!--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>adresse</h2></a>
+ <a href="#"><h2>horaires</h2></a>
+
+ </div>
+
+ <div class="atelier4">
+
+ <a href="#"><h1>La Citrouille</h1></a>
+ <a href="#"><h2>adresse</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>-->
+
+
+
+<!--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>-->
+
+
+
+
+<!--3EME COLONNE-->
+
+
+ <!--<div class="column large 4">-->
+
+
+ <div class="map">
+
+ </div>
+
+ <!--</div>
+
+
+
+ <div class="row">
+
+ <div class="column large 4">-->
+
+ <div class="agenda">
+
+ </div>
+
+
+ <!--</div>
+
+ </div>-->
+
+
+
+
+
+
+
+ </section>
+
+ </body>
+
+</html>
\ No newline at end of file
dépôts / lhc / web / clavettes.git / commitdiff