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