Changement drastique du design + Ajout du footer

assets/css/main.css

@@ -1367,7 +1367,7 @@ input, select, textarea {
 						background-color: rgba(255, 255, 255, 0.175);
 					}
 
-		/*
+		
 		#header nav.use-middle:after {
 			content: '';
 			display: block;
@@ -1382,7 +1382,7 @@ input, select, textarea {
 		#header nav.use-middle ul li.is-middle {
 			border-left: 0;
 		}
-		*/
+		
 
 		body.is-article-visible #header {
 			-moz-transform: scale(0.95);

assets/css/perso.css

@@ -0,0 +1,103 @@
+/* Sous-menu */
+
+#header nav ul.left {
+	position: absolute;
+	right: 50%;
+	border-radius: 4px 0 0 4px;
+}
+
+#header nav ul.right {
+	position: absolute;
+	left: 50%;
+	border-left: 0;
+	border-radius: 0 4px 4px 0;
+}
+
+#header nav ul li {
+	display: block;
+	position: relative;
+	width: intrinsic;
+	width: -moz-max-content;
+	width: -webkit-max-content;
+}
+
+#header nav ul li ul {
+	display: none;
+	z-index: 1000;
+	position: absolute;
+	width: 100%;
+	border-radius: 0 0 4px 4px;
+}
+
+#header nav ul li ul li {
+	border-left: 0;
+	border-top: solid 1px #ffffff;
+	width: 100%;
+}
+
+#header nav ul li ul li:first-child {
+	border-top: 0;
+}
+
+#header nav ul li:hover ul {
+	display: block;
+}
+
+
+
+
+/* Couleur non transparentes */
+
+#header nav ul {
+	background-color: rgba(27, 31, 34, 0.85);
+}
+
+#header .content {
+	background-color: rgba(27, 31, 34, 0.85);
+}
+
+
+
+
+/* Footer */
+
+#footer::before {
+	content: '';
+	display: block;
+	position: absolute;
+	top: calc(40rem - 1px);
+	left: calc(50% - 1px);
+	width: 1px;
+	height: calc(7rem - 1px);
+	background: #ffffff;
+}
+
+#footer .soutien {
+	background-color: rgba(27, 31, 34, 0.85);
+	height: 100%;
+	border-top: solid 1px #ffffff;
+	border-bottom: solid 1px #ffffff;
+}
+
+#footer .soutien .left, #footer .soutien .right {
+	width: 50%;
+	margin-bottom: -1rem;
+}
+
+#footer .soutien span {
+	vertical-align: middle;
+}
+
+#footer .soutien img {
+	height: 130px;
+	vertical-align: middle;
+	padding: 10px;
+}
+
+.left {
+	float: left;
+}
+
+.right {
+	float: right;
+}

index.html

@@ -10,6 +10,7 @@
 		<meta charset="utf-8" />
 		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
 		<link rel="stylesheet" href="assets/css/main.css" />
+		<link rel="stylesheet" href="assets/css/perso.css" />
 		<noscript><link rel="stylesheet" href="assets/css/noscript.css" /></noscript>
 		
 		<!-- Favicons -->
@@ -54,13 +55,20 @@
 							</div>
 						</div>
 						<nav>
-							<ul>
+							<ul class="left">
 								<li><a href="#presentation">Présentation</a></li>
-								<li><a href="#inscription">Inscription & paiement</a></li>
-								<li><a href="#connexion">Connexion</a></li>
-								<li><a href="https://intranet.auro.re">Intranet</a></li>
-								<li><a href="#faq">FAQ</a></li>
-								<li><a href="#events">Evènements et foyers</a></li>
+								<li><a href="#services">Services de l'association</a></li>
+							</ul>
+							<ul class="right">
+								<li>
+									<a href="#">Accès Internet</a>
+									<ul>
+										<li><a href="#inscription">Inscription</a></li>
+										<li><a href="#connexion">Connexion</a></li>
+										<li><a href="#faq">FAQ</a></li>
+									</ul>
+								</li>
+								<li><a href="#events">Foyers et évènements</a></li>
 							</ul>
 						</nav>
 					</header>
@@ -71,7 +79,7 @@
 						<!-- Présentation -->
 							<article id="presentation">
 								<h2 class="major">Qui sommes-nous ?</h2>
-								<p>Aurore est une association gérée par des étudiants de l'universitée Paris-Saclay de manière bénévole. Nous nous efforçons de fournir une couverture internet filaire et Wi-Fi très haut débit aux étudiants pour 50€ par an. Tu auras en bonux accés à une boîte mail, la TV et une imprimante.</p>
+								<p>Aurore est une association gérée par des étudiants de l'universitée Paris-Saclay de manière bénévole. Nous nous efforçons de fournir une couverture internet filaire et Wi-Fi très haut débit aux étudiants pour 50€ par an. Tu auras en bonus accés à une boîte mail, la TV et plein d'autres <a href="#services">services</a>.</p>
 
 								<h2 class="major">Une question ? Un problème ?</h2>
 								<p>Que tu sois un nouvel arrivant ou un ancien adhérent, tu trouveras sûrement de l'aide à ton problème sur la <a href="#faq">FAQ</a>. Si tu ne trouves pas de solutions, tu peux toujours <a href="#contact">nous contacter</a>.</p>
@@ -550,6 +558,17 @@ print 'It took ' + i + ' iterations to sort the deck.';</code></pre>
 
 				<!-- Footer -->
 				<footer id="footer">
+					<div class="soutien">
+						<div class="left">
+							<span>Avec le soutien de</span>
+							<img src="images/crous.png" />
+							<img src="images/universite_ps.png" />
+						</div>
+						<div class="right">
+							<span>Membre de</span>
+							<img src="images/federez.png" />
+						</div>
+					</div>
 					<p class="copyright">&copy; Aurore. Design: <a href="https://html5up.net">HTML5 UP</a>.</p>
 				</footer>