css/habillage.scss

   1 *{
   2         -moz-box-sizing: border-box;
   3         -webkit-box-sizing: border-box;
   4         box-sizing:border-box;
   5 }
   6
   7 body{
   8         margin:0;
   9         padding:0;
  10         font-family: sans-serif;
  11 }
  12
  13 header{
  14         margin:0 auto;
  15         width:100%;
  16 }
  17
  18 header img{
  19         margin-left:120px;
  20 }
  21
  22 #wrap{
  23         padding-top:20px;
  24         width:1100px;
  25         margin:0 auto;
  26 }
  27 a{
  28         text-decoration:none;
  29 }
  30
  31 h1{
  32         margin: 15px -15px 5px 15px;
  33         padding:0;
  34         font-size:2.0em;
  35         color:#1d0b78;
  36         display:inline-block;
  37 }
  38
  39 h2{
  40         margin: 15px 15px;
  41         font-size:1.3em;
  42         color:#1d0b78;
  43         display:inline-block;
  44
  45 }
  46
  47 h3{
  48         margin:15px;
  49         display:inline-block;
  50         color:#1d0b78;
  51 }
  52
  53 p{
  54         margin:0 15px;
  55         color:#1d0b78;
  56         text-decoration:none;
  57 }
  58
  59 /*1ERE COLONNE*/
  60
  61
  62 #ateliers{
  63         margin:0 10px;
  64         overflow: hidden;
  65
  66 }
  67
  68 #ateliers:after {
  69         content: ""; /* Important, sinon l'élément n'est pas généré. */
  70         display: table;
  71         clear: both;
  72 }
  73
  74 #ateliers ul{
  75         padding:0;
  76         margin:0;
  77         list-style-type:none;
  78
  79 }
  80
  81 #ateliers ul li{
  82         height: 300px;
  83         margin-bottom:15px;
  84         background-color: #2bc7cd;
  85
  86 }
  87
  88
  89 /*2EME COLONNE*/
  90
  91
  92 #news{
  93         background-color:#a51616;
  94         margin:0 10px 10px 10px;
  95         overflow: hidden;
  96
  97 }
  98
  99 #news img{
 100         height:350px;
 101 }
 102
 103 .article1,
 104 .article2,
 105 .article3,
 106 .article4{
 107         background-color:#ffaa7f;
 108
 109 }
 110
 111 .suite{
 112         text-align:right;
 113 }
 114
 115
 116
 117 /*3EME COLONNE*/
 118
 119
 120
 121 .map{
 122         background-color:#6059d2;
 123         height: 300px;
 124         margin:0 0 15px 10px;
 125 }
 126
 127 .agenda{
 128         background-color: #ca52ae;
 129         height: 300px;
 130         margin:0 0 0px 10px;
 131 }
 132
 133 /*RESPONSIVE*/
 134
 135 .col-2,
 136 .col-4,
 137 .col-6,
 138 .col-8,
 139 .col-10,
 140 .col-12{
 141         float:left;
 142         position:relative;
 143
 144
 145 }
 146
 147 .row:before, .row:after{
 148         content: "";
 149         display:table;
 150 }
 151
 152 .row:after{
 153         clear:both;
 154 }
 155
 156
 157 .row{
 158         margin: 0 -10px;
 159         zoom: 1;
 160 }
 161
 162
 163
 164 .col-1{
 165         width:8.33333%;
 166 }
 167
 168 .col-2{
 169         width:16.66667%;
 170 }
 171
 172 .col-3{
 173         width:25%;
 174 }
 175
 176
 177 .col-4{
 178         width:33.33333%;
 179 }
 180
 181 .col-5{
 182         width:41.66667%;
 183 }
 184
 185 .col-6{
 186         width:50%;
 187 }
 188
 189 .col-7{
 190         width:58.33333%;
 191 }
 192
 193 .col-8{
 194         width:66.66666%;
 195 }
 196
 197 .col-9{
 198         width:75%;
 199 }
 200
 201 .col-10{
 202         width:83.33333%;
 203 }
 204
 205 .col-11{
 206         width:91.66667%;
 207 }
 208
 209 .col-12{
 210         width:100%;
 211 }
 212
 213
 214
 215
 216 @media only screen and (min-width:640px) {
 217
 218 .col-m-1{
 219         width:8.33333%;
 220 }
 221
 222 .col-m-2{
 223         width:16.66667%;
 224 }
 225
 226 .col-m-3{
 227         width:25%;
 228 }
 229
 230
 231 .col-m-4{
 232         width:33.33333%;
 233 }
 234
 235 .col-m-5{
 236         width:41.66667%;
 237 }
 238
 239 .col-m-6{
 240         width:50%;
 241 }
 242
 243 .col-m-7{
 244         width:58.33333%;
 245 }
 246
 247 .col-m-8{
 248         width:66.66666%;
 249 }
 250
 251 .col-m-9{
 252         width:75%;
 253 }
 254
 255 .col-m-10{
 256         width:83.33333%;
 257 }
 258
 259 .col-m-11{
 260         width:91.66667%;
 261 }
 262
 263 .col-m-12{
 264         width:100%;
 265 }
 266
 267 }
 268
 269
 270
 271
 272
 273
 274 @media only screen and (min-width:1024px) {
 275
 276 .col-l-1{
 277         width:8.33333%;
 278 }
 279
 280 .col-l-2{
 281         width:16.66667%;
 282 }
 283
 284 .col-l-3{
 285         width:25%;
 286 }
 287
 288
 289 .col-l-4{
 290         width:33.33333%;
 291 }
 292
 293 .col-l-5{
 294         width:41.66667%;
 295 }
 296
 297 .col-l-6{
 298         width:50%;
 299 }
 300
 301 .col-l-7{
 302         width:58.33333%;
 303 }
 304
 305 .col-l-8{
 306         width:66.66666%;
 307 }
 308
 309 .col-l-9{
 310         width:75%;
 311 }
 312
 313 .col-l-10{
 314         width:83.33333%;
 315 }
 316
 317 .col-l-11{
 318         width:91.66667%;
 319 }
 320
 321 .col-l-12{
 322         width:100%;
 323 }
 324 }
 325