[CSS/HTML] statut des h1,h2

diff --git a/css/habillage.css b/css/habillage.css
index 5d2124c..ed2eca8 100644 (file)
--- a/css/habillage.css
+++ b/css/habillage.css
@@ -6,7 +6,8 @@
 body {
   margin: 0;
   padding: 0;
-  font-family: sans-serif; }
+  font-family: sans-serif;
+  color: #1a0583; }
 
 header {
   margin: 0 auto;
@@ -24,32 +25,30 @@ a {
   text-decoration: none; }
 
 h1 {
-  margin: 15px -15px 5px 15px;
+  margin: 0;
   padding: 0;
-  font-size: 2.0em;
-  color: #1d0b78;
+  padding-top: 15px;
+  padding-left: 15px;
+  font-size: 1.9em;
   display: inline-block; }
 
 h2 {
   margin: 15px 15px;
   font-size: 1.3em;
-  color: #1d0b78;
   display: inline-block; }
 
 h3 {
   margin: 15px;
-  display: inline-block;
-  color: #1d0b78; }
+  display: inline-block; }
 
 p {
   margin: 0 15px;
-  color: #1d0b78;
-  text-decoration: none; }
+  text-decoration: none;
+  text-align: justify; }
 
 /*1ERE COLONNE*/
 #ateliers {
-  margin: 0 10px;
-  overflow: hidden; }
+  margin: 0 10px; }
 
 #ateliers:after {
   content: "";
@@ -67,23 +66,29 @@ p {
   margin-bottom: 15px;
   background-color: #2bc7cd; }
 
+#ateliers p {
+  margin: 15px 15px;
+  font-size: 1em;
+  -webkit-margin-before: 1em;
+  -webkit-margin-after: 1em;
+  -webkit-margin-start: 0px;
+  -webkit-margin-end: 0px;
+  font-weight: bold; }
+
 /*2EME COLONNE*/
 #news {
-  background-color: #a51616;
   margin: 0 10px 10px 10px;
   overflow: hidden; }
 
 #news img {
   height: 350px; }
 
-.article1,
-.article2,
-.article3,
-.article4 {
+.article {
   background-color: #ffaa7f; }
 
 .suite {
-  text-align: right; }
+  text-align: right;
+  padding-bottom: 20px; }
 
 /*3EME COLONNE*/
 .map {
@@ -92,9 +97,23 @@ p {
   margin: 0 0 15px 10px; }
 
 .agenda {
-  background-color: #ca52ae;
-  height: 300px;
-  margin: 0 0 0px 10px; }
+  background-color: #3ee88d;
+  height: 500px;
+  margin: 0 0 0px 10px;
+  padding-right: 10px; }
+
+.agenda p {
+  line-height: 120%; }
+
+.agenda ul {
+  list-style-type: none;
+  padding: 0;
+  margin: 0;
+  padding-top: 15px; }
+
+.date {
+  float: left;
+  font-size: 1.7em; }
 
 /*RESPONSIVE*/
 .col-2,
@@ -189,8 +208,6 @@ p {
 
   .col-m-12 {
     width: 100%; } }
-    
-    
 @media only screen and (min-width: 1024px) {
   .col-l-1 {
     width: 8.33333%; }
@@ -227,5 +244,31 @@ p {
 
   .col-l-12 {
     width: 100%; } }
+/*FOOTER*/
+footer {
+  clear: both;
+  height: 200px;
+  width: 100%;
+  background-color: #ffaa7f; }
+
+footer ul {
+  padding: 0;
+  margin: 0;
+  list-style-type: none;
+  padding-top: 70px;
+  margin-left: 100px; }
+
+footer li {
+  margin-left: 2px;
+  float: left;
+  /*pour IE*/ }
+
+footer ul li a {
+  display: block;
+  float: left;
+  text-decoration: none; }
+
+footer ul li a:hover {
+  border-bottom: solid #1d0b78; }
 
 /*# sourceMappingURL=habillage.css.map */

diff --git a/css/habillage.scss b/css/habillage.scss
index 74cf4f3..eb4d417 100644 (file)
--- a/css/habillage.scss
+++ b/css/habillage.scss
@@ -8,6 +8,7 @@ body{
        margin:0;
        padding:0;
        font-family: sans-serif;
+       color:#1a0583;
 }
 
 header{
@@ -29,40 +30,36 @@ a{
 }
 
 h1{
-       margin: 15px -15px 5px 15px;
+       margin: 0;
        padding:0;
-       font-size:2.0em;
-       color:#1d0b78;
+       padding-top:15px;
+       padding-left:15px;
+       font-size:1.9em;
        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;
+       text-align: justify;
 }
 
 /*1ERE COLONNE*/
 
 
 #ateliers{
-       margin:0 10px;
-       overflow: hidden;
-               
+       margin:0 10px;          
 }
 
 #ateliers:after {
@@ -75,14 +72,22 @@ p{
        padding:0;
        margin:0;
        list-style-type:none;
-       
 }
 
 #ateliers ul li{
        height: 300px;
        margin-bottom:15px;
        background-color: #2bc7cd;
-       
+}
+
+#ateliers p{
+       margin: 15px 15px;
+       font-size:1em;
+       -webkit-margin-before: 1em;
+       -webkit-margin-after: 1em;
+       -webkit-margin-start: 0px;
+       -webkit-margin-end: 0px;
+       font-weight: bold;      
 }
 
 
@@ -90,26 +95,22 @@ p{
 
 
 #news{
-       background-color:#a51616;
        margin:0 10px 10px 10px;
        overflow: hidden;
-
 }
 
 #news img{
        height:350px;
 }
 
-.article1,
-.article2,
-.article3,
-.article4{
+.article{
        background-color:#ffaa7f;
                
 }
 
 .suite{
        text-align:right;
+       padding-bottom: 20px;
 }
 
 
@@ -125,9 +126,27 @@ p{
 }
 
 .agenda{
-       background-color: #ca52ae;
-       height: 300px;
-       margin:0 0 0px 10px;    
+       background-color: #3ee88d;
+       height:500px;
+       margin:0 0 0px 10px;
+       padding-right: 10px;    
+}
+
+.agenda p{
+       line-height: 120%;      
+}
+
+.agenda ul{
+       list-style-type:none;
+       padding:0;
+       margin:0;
+       padding-top:15px;
+}
+
+.date{
+       float:left;
+       font-size: 1.7em;
+        
 }
 
 /*RESPONSIVE*/
@@ -323,3 +342,34 @@ p{
 }
 }
 
+/*FOOTER*/
+
+footer{
+       clear:both;
+       height:200px;
+       width:100%;
+       background-color: #ffaa7f;
+       
+}
+
+footer ul {
+       padding:0;
+       margin:0;
+       list-style-type:none;
+       padding-top:70px;
+       margin-left:100px;
+
+}
+footer li {
+       margin-left:2px;
+       float:left; /*pour IE*/
+}
+footer ul li a {
+       display:block;
+       float:left;   
+       text-decoration:none;
+}
+footer ul li a:hover {
+       border-bottom: solid #1d0b78;
+} 
+

diff --git a/front-page.html b/front-page.html
index 877b25a..7bd444c 100644 (file)
--- a/front-page.html
+++ b/front-page.html
@@ -3,186 +3,125 @@
 <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="../clavettes/images/logo_heureux-cyclage.jpg" alt="logo_heureux-cyclage" width="300" /></a>
-                       
-               </header>
-       
-               <section id="wrap">
-               
+<body>
+<header>
+       <a href="#"><img src="../clavettes/images/logo_heureux-cyclage.jpg" alt="logo_heureux-cyclage" width="300" /></a>
+</header>
+<section id="wrap">
 
 <!--1ERE COLONNE-->
-                       
-       
-                       
-                       
-                               <div class="col-12 col-m-6 col-l-3">
-                               
                                
-                                       <div id="ateliers">
-                                       
-                                       
-                                       
-                                               <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>
-                                                       
-                                                       </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 class="col-12 col-m-6 col-l-3">
+               <div id="ateliers">
+                       <ul>
+                               <li>
+                                       <a href="#"><h1>Atelier vélo d'Échirolles</h1></a>
+                                       <a href="#"><p>Halle du vieux village</p>
+                                       <p>Échirolles</p></a>
+                                       <a href="#"><p>horaires</p></a>
+                               </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>
-                               
-                       
-                       
-                       
-                       
+               
 <!--2EME COLONNE-->    
-                       
-                       
-                               
-                               
-                                       <div class="col-12 col-m-6 col-l-5">
-                                       
-                                               <div id="news">
-                                               
-                                                       <div class="article1">
-                                                       
-                                                               <a href="#"><img src="../clavettes/images/velo-nb.png" alt="logo_heureux-cyclage"/></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 class="col-12 col-m-6 col-l-5">
+               <div id="news">
+                       <div class="article">
+                               <a href="#"><img src="../clavettes/images/velo-nb.png" alt="logo_heureux-cyclage"/></a>
+                                               <h1><a href="#">Titre de l'article</a></h1><br>
+                                                       <h3><a href="#">Date — Auteur</a></h3>
+                                                               <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><br>
                                                                <a href="#"><p class="suite">Lire la suite...</p></a>
-                                                               
-                                                       
-                                                       </div>
-                                                       
-                                                       <div class="article2">
-                                                       
-                                                       </div>
-                                                       
-                                                       <div class="article3">
-                                                       
+                       </div>
+                       <div class="article">
+                       </div>
+                       <div class="article">
+                       </div>
+                       <div class="article">
+                       </div>
+               </div>
+       </div>
+
+<!--3EME COLONNE-->                    
+                       
+       <div class="col-12 col-m-12 col-l-4">
+               <div class="map">
+               </div>
+       </div>
+                               
+       <div class="col-12 col-m-12 col-l-4">
+               <div class="agenda">
+                       <h1>Agenda</h1>
+                               <ul>
+                                       <li>
+                                               <div class="event">
+                                                       <div class="date">
+                                                               <a href="#"><time datetime="2015-01-16">16 JAN</time datetime><br>
+                                                               <time>18:00</p></time>
                                                        </div>
-                                                       
-                                                       <div class="article4">
-                                                       
+                                                       <div class="nature">
+                                                               <a href="#"><p>blabla blablab bla bla bla bla blablabblablab blabla blabla blablab bl abla blabla</p></a>
                                                        </div>
-                                               
-                                               
                                                </div>
-                       
-                                       </div>
-                                       
-                               
-                       
-                       
-                       
-                       
-<!--3EME COLONNE-->                    
-                       
-                       
-                               <div class="col-12 col-m-12 col-l-4">
-                               
-                               
-                                       <div class="map">
-                                       
-                                               
-                                       
-                                       </div>
-                               
-                               </div>
-                               
-                               
-                               
-                               
-                               
-                                       <div class="col-12 col-m-12 col-l-4">
-                                       
-                                               <div class="agenda">
-                                               
-                                                       
-
+                                       </li> 
+                                       <li>
+                                       </li> 
+                                       <li>
+                                       </li> 
+                               </ul>
+               </div>
+       </div>
                                                
-                                               </div>                          
-                                       
-                                       
-                                       </div>
-                                               
-                               
-               
-               
-       
-       
-       
-       
-       
-               </section>
-       
-       </body>
-
+</section>
+       <footer>
+               <ul>
+                       <li>
+                               <h3><a href="#">Licence libre</a></h3>
+                       </li>
+                       <li>
+                               <h3><a href="#">À propos</a></h3>
+                       </li>
+                       <li>
+                               <h3><a href="#">L'Heureux Cyclage</a></h3>
+                       </li>
+               </ul>
+       </footer>
+</body>
 </html>
\ No newline at end of file