footer

agenda/evenement.html

@@ -91,6 +91,8 @@
 
 	<footer class="site-footer grid" style="--grid-min-item-size: max(30%, 16rem)">
 		<div class="region">
+			<img class="logo-compact" src="/assets/media/logos/ebabx-logo-nom-complet-inline.svg" alt="ebabx école supérieure des beaux-arts de Bordeaux">
+
 			<address>
 				EBABX<br>
 				École supérieure des Beaux-Arts de Bordeaux<br>
@@ -103,12 +105,34 @@
 		</div>
 		<div class="region">
 			<p>L'ebabx reçoit le soutien de Bordeaux Métropole, du Ministère de la Culture, de la Région Nouvelle-Aquitaine et de la Commission européenne.</p>
+
+			<div class="newsletter">
+				<p>S’inscrire à notre newsletter</p>
+				<form>
+				<input 
+					type="email" 
+					name="email" 
+					placeholder="Votre adresse email" 
+					required
+				>
+
+				<button type="submit">
+					S’inscrire
+				</button>
+				</form>
+			</div>
 		</div>
 		<div class="region">
 			<nav aria-label="Footer">
-				<a href="#">Informations pratiques</a><br>
+				<a href="#">Accueil</a>
-				<a href="#">Contact</a><br>
+				<a href="#">Informations pratiques</a>
+				<a href="#">Contact</a>
+				<ul class="socials"> 
+				<li><img src="/assets/media/icons/instagram.svg" alt="instagram"></li>
+				<li><img src="/assets/media/icons/facebook.svg" alt="facebook"></li>
+			</ul>
 			</nav>
+				
 		</div>
 	</footer>
 

assets/css/05.blocks.css

@@ -326,6 +326,12 @@ text-decoration: underline;
 	content: "→"; 
 	position: absolute;
 	right: -2ch;
+	top: 2px;
+	font-weight: normal;
+	/* opacity: 0.5; */
+}
+.submenu .submenu-level-1 a:hover::after{
+top: -1px;
 }
 
 
@@ -338,7 +344,7 @@ text-decoration: underline;
 	font-size: var(--text-size-heading-4);
 	line-height: 1.2;
 	max-width: 46ch;
-	min-height: 10rem;
+	min-height: 14rem;
 }
 
 #ecole header{
@@ -348,7 +354,7 @@ text-decoration: underline;
 
 #ecole header .tag{
 	padding: 10px 2ch;
-	margin-bottom: 20px;
+	margin-bottom: 4rem;
 	margin-left: 20px;
 	transform: rotate(-4deg);
 	white-space: nowrap;
@@ -362,18 +368,42 @@ text-decoration: underline;
 	column-gap: var(--space-gutter);
 	/* margin-top: calc(-1 * var(--border-width)); */
 	/* margin-top: 10vh; */
-	font-size: var(--size-step--2);
+	font-size: 0.75rem;
+	line-height: 1.2;
 	font-weight: 500;
 	margin-inline: var(--space-regions);
+	margin-bottom: 6em;
 }
 .site-footer > * {
 	border-top: var(--border);
 }
 .site-footer nav {
 	text-transform: uppercase;
+	font-weight: 500;
+}
+
+.site-footer nav a{
+	display: block;
+	margin-bottom: 0.5rem;
 }
 
 .site-footer .region{
 	margin-inline: 0;
+	display: flex;
+	flex-direction: column;
+	justify-content: space-between;
+
 
 }
+
+.site-footer .logo-compact{
+	max-width: 150px;
+	margin-bottom: 2rem;
+}
+
+.site-footer p{
+	max-width: 40ch;
+	margin-bottom: 0.5rem;
+}
+
+

assets/css/06.utilities.css

@@ -48,3 +48,36 @@
 	padding: 0!important;
 	margin: 0!important;
 }
+
+
+.newsletter form input{
+	border: var(--border);
+	font-family: var(--font-base);
+	font-weight: normal;
+	color: black;
+	padding: 4px 1ch;
+	margin-right: -7px;
+
+}
+
+.newsletter form input::placeholder {
+ font-family: var(--font-base);
+}
+
+.newsletter button{
+	border-radius: var(--border-radius);
+	border: var(--border);
+	background-color: white;
+	/* background-color: black;
+	color: white; */
+	text-transform: uppercase;
+	padding: 4px 1ch;
+	position: relative;
+}
+
+.newsletter button:hover{
+	background-color: black;
+	color: white;
+	cursor: pointer;
+	border-color: black;
+}

index.html

@@ -45,7 +45,6 @@
 			</button>
 		</div>
 		<nav id="menu" aria-label="Menu">
-			<!-- TODO: submenu -->
 			<ul role="list">
 				<li><a href="#">École</a></li>
 				<li><a href="#">Enseignement</a></li>
@@ -59,7 +58,7 @@
 	<div class="submenu">
 		<div class="inner">
 		<div class="group">
-			<p class="submenu-level-1"><a href="#">L’école</a></p>
+			<p class="submenu-level-1">L’école</p>
 			<ul>
 				<li><a href="#">Historique de la formation</a></li>
 				<li><a href="#">Historique du bâtiment</a></li>
@@ -67,7 +66,7 @@
 			</ul>
 		</div>
 		<div class="group">
-			<p class="submenu-level-1"><a href="#">Équipe et instances</a></p>
+			<p class="submenu-level-1">Équipe et instances</p>
 			<ul>
 				<li><a href="#">Equipe administrative et&nbsp;maintenance</a></li>
 				<li><a href="#">Enseignant·e·s</a></li>
@@ -76,7 +75,7 @@
 			</ul>
 		</div>
 		<div class="group">
-			<p class="submenu-level-1"><a href="#">Ressources</a></p>
+			<p class="submenu-level-1">Ressources</p>
 			<ul>
 				<li><a href="#">Ateliers techniques</a></li>
 				<li><a href="#"> Magasin de prêt</a></li>
@@ -340,6 +339,8 @@
 
 	<footer class="site-footer grid" style="--grid-min-item-size: max(30%, 16rem)">
 		<div class="region">
+			<img class="logo-compact" src="/assets/media/logos/ebabx-logo-nom-complet-inline.svg" alt="ebabx école supérieure des beaux-arts de Bordeaux">
+
 			<address>
 				EBABX<br>
 				École supérieure des Beaux-Arts de Bordeaux<br>
@@ -352,12 +353,34 @@
 		</div>
 		<div class="region">
 			<p>L'ebabx reçoit le soutien de Bordeaux Métropole, du Ministère de la Culture, de la Région Nouvelle-Aquitaine et de la Commission européenne.</p>
+
+			<div class="newsletter">
+				<p>S’inscrire à notre newsletter</p>
+				<form>
+				<input 
+					type="email" 
+					name="email" 
+					placeholder="Votre adresse email" 
+					required
+				>
+
+				<button type="submit">
+					S’inscrire
+				</button>
+				</form>
+			</div>
 		</div>
 		<div class="region">
 			<nav aria-label="Footer">
-				<a href="#">Informations pratiques</a><br>
+				<a href="#">Accueil</a>
-				<a href="#">Contact</a><br>
+				<a href="#">Informations pratiques</a>
+				<a href="#">Contact</a>
+				<ul class="socials"> 
+				<li><img src="/ssets/media/icons/instagram.svg" alt="instagram"></li>
+				<li><img src="/assets/media/icons/facebook.svg" alt="facebook"></li>
+			</ul>
 			</nav>
+				
 		</div>
 	</footer>