css, index, images

event.html

@@ -15,15 +15,15 @@
         </header>
         
         <div id="descEvent">
-          <h1>Titre de l'évènement</h1>
+          <h1>Évènement exemple</h1>
           
           <h2>Date et lieu</h2>
-          <div id="dateheure">Le mercredi 1 avril 2015 de 19h00 à 21h00.</div>
+          <div id="dateheure">Le mercredi 1 avril 2015 de 19h00 à 0h00.</div>
           <div id="lieu">ESIR, Rennes</div>
           <div id="map"><img src="map.png" width="100%"></div>
           
           <h2>Description</h2>
-          <div id="image"><img src="https://upload.wikimedia.org/wikipedia/fr/thumb/0/0e/LogosESIR_noir.svg/langfr-1280px-LogosESIR_noir.svg.png" width="100%">
+          <div id="image"><img src="http://isati.istic.univ-rennes1.fr/assets/images/isati.png" width="100%">
           </div>
           <div id="description">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
           </div>

index.css

@@ -57,6 +57,7 @@ nav .onglet:hover
 #hamburgerMenu
 {
 	background-color:#fff;
+	height:100%;
 }
 
 #hamburgerMenu h2
@@ -92,9 +93,8 @@ input[type="checkbox"]:checked + label span {
 
 #AddEvent
 {
-	bottom:70;
 	margin:0;
-	margin-top:20px;
+	margin-top:45px;
 	text-align:center;
 	font-size: 20px;
 	padding-top:15px;
@@ -105,6 +105,11 @@ input[type="checkbox"]:checked + label span {
 	background-color: #2b2b2b;
 }
 
+#container
+{
+	margin-top:120px;
+}
+
 #AddEvent:hover
 {
 	color: #2b2b2b;

index.html

@@ -27,6 +27,9 @@
                 Rennes
             </div>
          </a>
+            <a id="ancherEvent" href="#addEvent" onclick="alert('Ajoute un evenement');"><div class="Button" id="AddEvent">
+                + Ajouter un Évènement
+            </div></a>
             <div id="container">
                 <h2>Conférences, Évènements</h2>
                 	<form name="confs" action="" method="POST">
@@ -65,97 +68,85 @@
 									</div>
 									</form>
             </div>
-            <a id="ancherEvent" href="#addEvent" onclick="alert('Ajoute un evenement');"><div class="Button" id="AddEvent">
-                + Ajouter un Évènement
-            </div></a>
         </nav>
 
 
 
 
         <div id="calendar">
-        <table border="1">
-					<tr>
-						<td><div id="event"><div id="date">6</div>
-						<div id="link">Conférence - Sécurité</div></td>
-						<td><div id="event"><div id="date">7</div>
-						</td>
-						<td><div id="event"><div id="date">8</div>
-						</td>
-						<td><div id="event"><div id="date">9</div>
-						<div id="link">Club tricot</div></td>
-						<td><div id="event"><div id="date">10</div>
-						<div id="link">Grosse soirée</div></td>
-						<td><div id="event"><div id="date">11</div>
-						</td>
-						<td><div id="event"><div id="date">12</div>
-						<div id="link">Invasion de kakapos</div></td>
-					</tr>
-					<tr>
-						<td><div id="event"><div id="date">6</div>
-						<div id="link">Conférence - Sécurité</div></td>
-						<td><div id="event"><div id="date">7</div>
-						</td>
-						<td><div id="event"><div id="date">8</div>
-						</td>
-						<td><div id="event"><div id="date">9</div>
-						<div id="link">Club tricot</div></td>
-						<td><div id="event"><div id="date">10</div>
-						<div id="link">Grosse soirée</div></td>
-						<td><div id="event"><div id="date">11</div>
-						</td>
-						<td><div id="event"><div id="date">12</div>
-						<div id="link">Invasion de kakapos</div></td>
-					</tr>
-					<tr>
-						<td><div id="event"><div id="date">6</div>
-						<div id="link">Conférence - Sécurité</div></td>
-						<td><div id="event"><div id="date">7</div>
-						</td>
-						<td><div id="event"><div id="date">8</div>
-						</td>
-						<td><div id="event"><div id="date">9</div>
-						<div id="link">Club tricot</div></td>
-						<td><div id="event"><div id="date">10</div>
-						<div id="link">Grosse soirée</div></td>
-						<td><div id="event"><div id="date">11</div>
-						</td>
-						<td><div id="event"><div id="date">12</div>
-						<div id="link">Invasion de kakapos</div></td>
-					</tr>
-					<tr>
-						<td><div id="event"><div id="date">6</div>
-						<div id="link">Conférence - Sécurité</div></td>
-						<td><div id="event"><div id="date">7</div>
-						</td>
-						<td><div id="event"><div id="date">8</div>
-						</td>
-						<td><div id="event"><div id="date">9</div>
-						<div id="link">Club tricot</div></td>
-						<td><div id="event"><div id="date">10</div>
-						<div id="link">Grosse soirée</div></td>
-						<td><div id="event"><div id="date">11</div>
-						</td>
-						<td><div id="event"><div id="date">12</div>
-						<div id="link">Invasion de kakapos</div></td>
-					</tr>
-					<tr>
-						<td><div id="event"><div id="date">6</div>
-						<div id="link">Conférence - Sécurité</div></td>
-						<td><div id="event"><div id="date">7</div>
-						</td>
-						<td><div id="event"><div id="date">8</div>
-						</td>
-						<td><div id="event"><div id="date">9</div>
-						<div id="link">Club tricot</div></td>
-						<td><div id="event"><div id="date">10</div>
-						<div id="link">Grosse soirée</div></td>
-						<td><div id="event"><div id="date">11</div>
-						</td>
-						<td><div id="event"><div id="date">12</div>
-						<div id="link">Invasion de kakapos</div></td>
-					</tr>
-				</table>
+        <ul class="flex-container">
+						<li class="flex-item"><div id="event"><div id="date">6</div>
+						<div id="link">10h : Conférence - Domotique</div></li>
+						<li class="flex-item"><div id="event"><div id="date">7</div>
+						</li>
+						<li class="flex-item"><div id="event"><div id="date">8</div>
+						</li>
+						<li class="flex-item"><div id="event"><div id="date">9</div>
+						<div id="link">20h : Club tricot</div></li>
+						<li class="flex-item"><div id="event"><div id="date">10</div>
+						<div id="link">21h : Soirée ISATI</div></li>
+						<li class="flex-item"><div id="event"><div id="date">11</div>
+						</li>
+						<li class="flex-item"><div id="event"><div id="date">12</div>
+						<div id="link">8h : Invasion de kakapos</div></li>
+						<li class="flex-item"><div id="event"><div id="date">6</div>
+						<div id="link">10h : Conférence - Sécurité</div>
+						<div id="link">14h : Conférence - Cryptographie</div></li>
+						<li class="flex-item"><div id="event"><div id="date">7</div>
+						</li>
+						<li class="flex-item"><div id="event"><div id="date">8</div>
+						</li>
+						<li class="flex-item"><div id="event"><div id="date">9</div>
+						<div id="link">20h : Club Jeux</div></li>
+						<li class="flex-item"><div id="event"><div id="date">10</div>
+						<div id="link">21h : Soirée ISATI</div></li>
+						<li class="flex-item"><div id="event"><div id="date">11</div>
+						</li>
+						<li class="flex-item"><div id="event"><div id="date">12</div>
+						<div id="link">8h : Invasion de zombies</div></li>
+						<li class="flex-item"><div id="event"><div id="date">6</div>
+						<div id="link">10h : Conférence - Compilation</div></li>
+						<li class="flex-item"><div id="event"><div id="date">7</div>
+						</li>
+						<li class="flex-item"><div id="event"><div id="date">8</div>
+						</li>
+						<li class="flex-item"><div id="event"><div id="date">9</div>
+						<div id="link">20h : Club robotique</div></li>
+						<li class="flex-item"><div id="event"><div id="date">10</div>
+						<div id="link">21h : Soirée ISATI</div></li>
+						<li class="flex-item"><div id="event"><div id="date">11</div>
+						</li>
+						<li class="flex-item"><div id="event"><div id="date">12</div>
+						<div id="link">8h : Invasion de bananes</div></li>
+						<li class="flex-item"><div id="event"><div id="date">6</div>
+						<div id="link">10h : Conférence - Imagerie numérique</div></li>
+						<li class="flex-item"><div id="event"><div id="date">7</div>
+						</li>
+						<li class="flex-item"><div id="event"><div id="date">8</div>
+						</li>
+						<li class="flex-item"><div id="event"><div id="date">9</div>
+						<div id="link">20h : Club tarot</div></li>
+						<li class="flex-item"><div id="event"><div id="date">10</div>
+						<div id="link">21h : Soirée ISATI</div></li>
+						<li class="flex-item"><div id="event"><div id="date">11</div>
+						</li>
+						<li class="flex-item"><div id="event"><div id="date">12</div>
+						<div id="link">8h : Invasion de kakapos</div></li>
+						<li class="flex-item"><div id="event"><div id="date">6</div>
+						<div id="link">10h : Conférence - Communication</div></li>
+						<li class="flex-item"><div id="event"><div id="date">7</div>
+						</li>
+						<li class="flex-item"><div id="event"><div id="date">8</div>
+						</li>
+						<li class="flex-item"><div id="event"><div id="date">9</div>
+						<div id="link">20h : Club Saucisson</div></li>
+						<li class="flex-item"><div id="event"><div id="date">10</div>
+						<div id="link">21h : Soirée ISATI</div></li>
+						<li class="flex-item"><div id="event"><div id="date">11</div>
+						</li>
+						<li class="flex-item"><div id="event"><div id="date">12</div>
+						<div id="link">8h : Invasion de nuages</div></li>
+				</ul>
 
 
 		      <div id="footer">

main.css

@@ -1,3 +1,10 @@
+@import "compass/css3";
+
+body, html {
+    overflow:hidden;
+    background-color:#f1f1f1;
+}
+
 #title
 {
     position: fixed;
@@ -28,6 +35,50 @@ a
 	margin-right:25px;
 }
 
+.flex-container {
+  padding: 0;
+  margin: 0;
+  list-style: none;
+  
+  display: -webkit-box;
+  display: -moz-box;
+  display: -ms-flexbox;
+  display: -webkit-flex;
+  display: flex;
+  
+  -webkit-flex-flow: row wrap;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+
+.flex-item {
+  padding: 5px;
+  width: 200px;
+  height: 200px;
+  margin:0;
+  padding:0;
+}
+
+#date {
+    font-size: 30px;
+    margin: 20px;
+    color: #2B2B2B;
+}
+
+#link {
+    margin-left: 10px;
+    font-size: 12px;
+}
+
+#calendar #event:hover {
+    background-color: #65ccea;
+}
+
+#calendar {
+    margin-top:60px;
+}
+
+
 
 @media only screen and (max-width: 1000px) and (max-height: 500px){