-body{
- margin-top:0;
- height: 1500px;
- font-family: 'Open Sans', Arial, sans-serif;
-}
+* {
+ -moz-box-sizing: border-box;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box; }
-header{
- margin:0 auto;
- width:1200px;
-}
+body {
+ margin: 0;
+ padding: 0;
+ font-family: sans-serif; }
+
+header {
+ margin: 0 auto;
+ width: 100%; }
+
+header img {
+ margin-left: 120px; }
#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;
-}
+ padding-top: 20px;
+ width: 1100px;
+ margin: 0 auto; }
+
+a {
+ text-decoration: none; }
+
+h1 {
+ margin: 15px -15px 5px 15px;
+ padding: 0;
+ font-size: 2.0em;
+ color: #1d0b78;
+ display: inline-block; }
+
+h2 {
+ margin: 15px 15px;
+ font-size: 1.3em;
+ color: #1d0b78;
+ display: inline-block; }
+
+h3 {
+ margin: 15px;
+ display: inline-block;
+ color: #1d0b78; }
+
+p {
+ margin: 0 15px;
+ color: #1d0b78;
+ text-decoration: none; }
/*1ERE COLONNE*/
+#ateliers {
+ margin: 0 10px;
+ overflow: hidden; }
+
+#ateliers:after {
+ content: "";
+ /* Important, sinon l'élément n'est pas généré. */
+ display: table;
+ clear: both; }
+
+#ateliers ul {
+ padding: 0;
+ margin: 0;
+ list-style-type: none; }
+
+#ateliers ul li {
+ height: 300px;
+ margin-bottom: 15px;
+ background-color: #2bc7cd; }
+/*2EME COLONNE*/
+#news {
+ background-color: #a51616;
+ margin: 0 10px 10px 10px;
+ overflow: hidden; }
-#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;
-}
+#news img {
+ height: 350px; }
+.article1,
+.article2,
+.article3,
+.article4 {
+ background-color: #ffaa7f; }
-/*2EME COLONNE*/
+.suite {
+ text-align: right; }
+
+/*3EME COLONNE*/
+.map {
+ background-color: #6059d2;
+ height: 300px;
+ margin: 0 0 15px 10px; }
+.agenda {
+ background-color: #ca52ae;
+ height: 300px;
+ margin: 0 0 0px 10px; }
-#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;
-}
+/*RESPONSIVE*/
+.col-2,
+.col-4,
+.col-6,
+.col-8,
+.col-10,
+.col-12 {
+ float: left;
+ position: relative; }
+.row:before, .row:after {
+ content: "";
+ display: table; }
+.row:after {
+ clear: both; }
-/*3EME COLONNE*/
+.row {
+ margin: 0 -10px;
+ zoom: 1; }
+
+.col-1 {
+ width: 8.33333%; }
+
+.col-2 {
+ width: 16.66667%; }
+
+.col-3 {
+ width: 25%; }
+
+.col-4 {
+ width: 33.33333%; }
+
+.col-5 {
+ width: 41.66667%; }
+
+.col-6 {
+ width: 50%; }
+
+.col-7 {
+ width: 58.33333%; }
+
+.col-8 {
+ width: 66.66666%; }
+
+.col-9 {
+ width: 75%; }
+
+.col-10 {
+ width: 83.33333%; }
+
+.col-11 {
+ width: 91.66667%; }
+
+.col-12 {
+ width: 100%; }
+
+@media only screen and (min-width: 640px) {
+ .col-m-1 {
+ width: 8.33333%; }
+
+ .col-m-2 {
+ width: 16.66667%; }
+
+ .col-m-3 {
+ width: 25%; }
+
+ .col-m-4 {
+ width: 33.33333%; }
+
+ .col-m-5 {
+ width: 41.66667%; }
+
+ .col-m-6 {
+ width: 50%; }
+
+ .col-m-7 {
+ width: 58.33333%; }
+
+ .col-m-8 {
+ width: 66.66666%; }
+
+ .col-m-9 {
+ width: 75%; }
+
+ .col-m-10 {
+ width: 83.33333%; }
+
+ .col-m-11 {
+ width: 91.66667%; }
+
+ .col-m-12 {
+ width: 100%; } }
+
+
+@media only screen and (min-width: 1024px) {
+ .col-l-1 {
+ width: 8.33333%; }
+
+ .col-l-2 {
+ width: 16.66667%; }
+
+ .col-l-3 {
+ width: 25%; }
+
+ .col-l-4 {
+ width: 33.33333%; }
+
+ .col-l-5 {
+ width: 41.66667%; }
+
+ .col-l-6 {
+ width: 50%; }
+
+ .col-l-7 {
+ width: 58.33333%; }
+
+ .col-l-8 {
+ width: 66.66666%; }
+ .col-l-9 {
+ width: 75%; }
+ .col-l-10 {
+ width: 83.33333%; }
-.map{
- background-color:#6059d2;
- width:400px;
- margin-left:840px;
- height:400px;
- margin-bottom:20px;
-}
+ .col-l-11 {
+ width: 91.66667%; }
-.agenda{
- background-color: #ca52ae;
- width:400px;
- height:400px;
- margin-left:840px;
-}
+ .col-l-12 {
+ width: 100%; } }
+/*# sourceMappingURL=habillage.css.map */
--- /dev/null
+*{
+ -moz-box-sizing: border-box;
+ -webkit-box-sizing: border-box;
+ box-sizing:border-box;
+}
+
+body{
+ margin:0;
+ padding:0;
+ font-family: sans-serif;
+}
+
+header{
+ margin:0 auto;
+ width:100%;
+}
+
+header img{
+ margin-left:120px;
+}
+
+#wrap{
+ padding-top:20px;
+ width:1100px;
+ margin:0 auto;
+}
+a{
+ text-decoration:none;
+}
+
+h1{
+ margin: 15px -15px 5px 15px;
+ padding:0;
+ font-size:2.0em;
+ color:#1d0b78;
+ display:inline-block;
+}
+
+h2{
+ margin: 15px 15px;
+ font-size:1.3em;
+ color:#1d0b78;
+ display:inline-block;
+
+}
+
+h3{
+ margin:15px;
+ display:inline-block;
+ color:#1d0b78;
+}
+
+p{
+ margin:0 15px;
+ color:#1d0b78;
+ text-decoration:none;
+}
+
+/*1ERE COLONNE*/
+
+
+#ateliers{
+ margin:0 10px;
+ overflow: hidden;
+
+}
+
+#ateliers:after {
+ content: ""; /* Important, sinon l'élément n'est pas généré. */
+ display: table;
+ clear: both;
+}
+
+#ateliers ul{
+ padding:0;
+ margin:0;
+ list-style-type:none;
+
+}
+
+#ateliers ul li{
+ height: 300px;
+ margin-bottom:15px;
+ background-color: #2bc7cd;
+
+}
+
+
+/*2EME COLONNE*/
+
+
+#news{
+ background-color:#a51616;
+ margin:0 10px 10px 10px;
+ overflow: hidden;
+
+}
+
+#news img{
+ height:350px;
+}
+
+.article1,
+.article2,
+.article3,
+.article4{
+ background-color:#ffaa7f;
+
+}
+
+.suite{
+ text-align:right;
+}
+
+
+
+/*3EME COLONNE*/
+
+
+
+.map{
+ background-color:#6059d2;
+ height: 300px;
+ margin:0 0 15px 10px;
+}
+
+.agenda{
+ background-color: #ca52ae;
+ height: 300px;
+ margin:0 0 0px 10px;
+}
+
+/*RESPONSIVE*/
+
+.col-2,
+.col-4,
+.col-6,
+.col-8,
+.col-10,
+.col-12{
+ float:left;
+ position:relative;
+
+
+}
+
+.row:before, .row:after{
+ content: "";
+ display:table;
+}
+
+.row:after{
+ clear:both;
+}
+
+
+.row{
+ margin: 0 -10px;
+ zoom: 1;
+}
+
+
+
+.col-1{
+ width:8.33333%;
+}
+
+.col-2{
+ width:16.66667%;
+}
+
+.col-3{
+ width:25%;
+}
+
+
+.col-4{
+ width:33.33333%;
+}
+
+.col-5{
+ width:41.66667%;
+}
+
+.col-6{
+ width:50%;
+}
+
+.col-7{
+ width:58.33333%;
+}
+
+.col-8{
+ width:66.66666%;
+}
+
+.col-9{
+ width:75%;
+}
+
+.col-10{
+ width:83.33333%;
+}
+
+.col-11{
+ width:91.66667%;
+}
+
+.col-12{
+ width:100%;
+}
+
+
+
+
+@media only screen and (min-width:640px) {
+
+.col-m-1{
+ width:8.33333%;
+}
+
+.col-m-2{
+ width:16.66667%;
+}
+
+.col-m-3{
+ width:25%;
+}
+
+
+.col-m-4{
+ width:33.33333%;
+}
+
+.col-m-5{
+ width:41.66667%;
+}
+
+.col-m-6{
+ width:50%;
+}
+
+.col-m-7{
+ width:58.33333%;
+}
+
+.col-m-8{
+ width:66.66666%;
+}
+
+.col-m-9{
+ width:75%;
+}
+
+.col-m-10{
+ width:83.33333%;
+}
+
+.col-m-11{
+ width:91.66667%;
+}
+
+.col-m-12{
+ width:100%;
+}
+
+}
+
+
+
+
+
+
+@media only screen and (min-width:1024px) {
+
+.col-l-1{
+ width:8.33333%;
+}
+
+.col-l-2{
+ width:16.66667%;
+}
+
+.col-l-3{
+ width:25%;
+}
+
+
+.col-l-4{
+ width:33.33333%;
+}
+
+.col-l-5{
+ width:41.66667%;
+}
+
+.col-l-6{
+ width:50%;
+}
+
+.col-l-7{
+ width:58.33333%;
+}
+
+.col-l-8{
+ width:66.66666%;
+}
+
+.col-l-9{
+ width:75%;
+}
+
+.col-l-10{
+ width:83.33333%;
+}
+
+.col-l-11{
+ width:91.66667%;
+}
+
+.col-l-12{
+ width:100%;
+}
+}
+
<header>
- <a href="#"><img src="../Images/logo_heureux-cyclage.jpg" alt="logo_heureux-cyclage" width="300" /></a>
+ <a href="#"><img src="../clavettes/images/logo_heureux-cyclage.jpg" alt="logo_heureux-cyclage" width="300" /></a>
</header>
<!--1ERE COLONNE-->
- <!--<div class="row">
- <div class="column large-3">-->
+
+ <div class="col-12 col-m-6 col-l-3">
<div id="ateliers">
- <div class="atelier1">
-
+
+
+ <ul>
+ <li>
+
+
+ <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>
- <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>
-
+ </li>
+
+ <li>
+
+ <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>
+
+ </li>
+
+ <li>
+
+ <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>
+
+ </li>
+
+ <li>
+
+ <a href="#"><h1>La Citrouille</h1></a>
+ <a href="#"><h2>38000 Grenoble</h2></a>
+ <a href="#"><h2>horaires</h2></a>
+
+ </li>
+
+ <li>
+
+ <a href="#"><h1>Un Vélo de Plus</h1></a>
+ <a href="#"><h2>adresse</h2></a>
+ <a href="#"><h2>horaires</h2></a>
+
+ </li>
+
+ <li>
+
+ <a href="#"><h1>Les déraillés</h1></a>
+ <a href="#"><h2>adresse</h2></a>
+ <a href="#"><h2>horaires</h2></a>
+
+ </li>
+
+ <li>
+
+ <a href="#"><h1>Atelier Garave</h1></a>
+ <a href="#"><h2>adresse</h2></a>
+ <a href="#"><h2>horaires</h2></a>
+
+ </li>
+ </ul>
</div>
- <!--</div>
+ </div>
- </div>-->
+
<!--2EME COLONNE-->
- <!--<div class="column large 5">-->
- <div id="news">
+
+ <div class="col-12 col-m-6 col-l-5">
- <div class="article1">
-
- <a href="#"><img src="../Images/velo-nb.png" alt="logo_heureux-cyclage" width="500px" /></a>
+ <div id="news">
- <a href="#"><h1>Titre de l'article</h1></a>
+ <div class="article1">
- <a href="#"><h3>Date — Auteur</h3></a>
+ <a href="#"><img src="../clavettes/images/velo-nb.png" alt="logo_heureux-cyclage"/></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>
+ <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>
+ <a href="#"><p class="suite">Lire la suite...</p></a>
+
+ </div>
+
+ <div class="article2">
+
+ </div>
+
+ <div class="article3">
+
+ </div>
+
+ <div class="article4">
+
+ </div>
- </div>
-
- <div class="article2">
-
- </div>
-
- <div class="article3">
-
- </div>
-
- <div class="article4">
</div>
-
-
+
</div>
+
- <!--</div>-->
<!--3EME COLONNE-->
- <!--<div class="column large 4">-->
+ <div class="col-12 col-m-12 col-l-4">
<div class="map">
+
+
</div>
- <!--</div>
+ </div>
- <div class="row">
- <div class="column large 4">-->
+
+ <div class="col-12 col-m-12 col-l-4">
<div class="agenda">
+
+
+
</div>
- <!--</div>
+ </div>
- </div>-->
+
dépôts / lhc / web / clavettes.git / commitdiff
