diff --git a/index.html b/index.html
index fc7760d..c595afc 100644
--- a/index.html
+++ b/index.html
@@ -7,13 +7,62 @@
 		<meta name="description" content="description du site web">
 		<meta name="keywords" content="truc, bidule, chouette">
 		<link href="./styles/style.css" type="text/css" rel="stylesheet">
-		<link href="./styles/index.css" type="text/css" rel="stylesheet">
 		<style>
+			main {
+				display: flex;
+				flex-direction: column;
+				width: auto;
+			}
+			#all_container {
+				width: 550px;
+				margin: 20px auto;
+			}
+			#for_txt {
+				height: 110px;
+				overflow: hidden;
+			}
+			#for_img {
+			}
+			#for_links {
+				display: flex;
+				flex-direction: row;
+				padding: 10px;
+			}
+			#for_links > * {
+				margin: auto;
+			}
+			#for_links > :first-child {
+				margin-left: 0px;
+			}
+			#for_links > :last-child {
+				margin-right: 0px;
+			}
+			#for_links #kosmopolit a {
+				color: #ee1998;
+			}
+			#for_links #litterall a {
+				color: #8fce3c;
+			}
+			#for_links #lea a {
+				color: #0c9cb5;
+			}
 		</style>
 	</head>
 	<body>
 		<main class="index">
-			<img src="./docs/kosmopolit_logo.png">
+			<div id="all_container">
+				<div id="for_txt">
+					<img src="./docs/kosmopolit_logo.png" alt="logo kosmopolit">
+				</div>
+				<div id="for_img">
+					<img src="./docs/kosmopolit_fond.png" alt="logo kosmopolit">
+				</div>
+				<div id="for_links">
+					<h3 id="kosmopolit"><a href="./pages/kosmopolit.html">KOSMOPOLIT l'association</a></h3>
+					<h3 id="litterall"><a href="./pages/litterall.html">LITTER<i>all</i></a></h3>
+					<h3 id="lea"><a href="./pages/lettredeeda.html">Lettres d'Europe et d'Ailleurs</a></h3>
+				</div>
+			</div>
 		</main>
 	</body>
 </html>
diff --git a/pages/kosmopolit.html b/pages/kosmopolit.html
new file mode 100644
index 0000000..759b334
--- /dev/null
+++ b/pages/kosmopolit.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+	<head>
+		<meta charset="UTF-8">
+		<meta name="viewport" content="width=device-width, initial-scale=1.0">
+		<title>kosmopolit</title>
+		<base href="../"/>
+		<meta name="description" content="description du site web">
+		<meta name="keywords" content="truc, bidule, chouette">
+		<link href="./styles/style.css" type="text/css" rel="stylesheet">
+	</head>
+	<body>
+		<nav class="sticky">
+			<div class="nav_left">
+				<a class="nav_logo" href="index.html"><img src="./docs/kosmopolit_fond.png" alt="logo kosmopolit"></a>
+				<a href="./pages/kosmopolit.html"><p>kosmopolit</p></a>
+				<a href="./pages/litterall.html"><p>litterall</p></a>
+				<a href="./pages/lettredeeda.html"><p>l.e.a</p></a>
+			</div>
+			<div class="nav_right">
+			</div>
+		</nav>
+		<div class="container_main">
+			<aside class="page_content sticky">
+				<div class="table_box"> <!-- container use to adjust padding -->
+					<h2>sommaire</h2>
+					<a href="./pages/kosmopolit.html#kosmopolit"><p>kosmopolit</p></a>
+				</div>
+			</aside>
+
+			<main>
+				<div class="page_title">
+					<h1 id="anchor_kosmopolit">KOSMOPOLIT</i></h1>
+					<p class="date"><i><small>mis à jour le 01/03/2020</small></i></p>
+				</div>
+			</main>
+
+			<aside class="relative_content">
+			</aside>
+		</div>
+		<footer class="page_footer">
+		</footer>
+	</body>
+</html>
diff --git a/pages/lettredeeda.html b/pages/lettredeeda.html
index e69de29..fab50ff 100644
--- a/pages/lettredeeda.html
+++ b/pages/lettredeeda.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+	<head>
+		<meta charset="UTF-8">
+		<meta name="viewport" content="width=device-width, initial-scale=1.0">
+		<title>kosmopolit</title>
+		<base href="../"/>
+		<meta name="description" content="description du site web">
+		<meta name="keywords" content="truc, bidule, chouette">
+		<link href="./styles/style.css" type="text/css" rel="stylesheet">
+	</head>
+	<body>
+		<nav class="sticky">
+			<div class="nav_left">
+				<a class="nav_logo" href="index.html"><img src="./docs/kosmopolit_fond.png" alt="logo kosmopolit"></a>
+				<a href="./pages/kosmopolit.html"><p>kosmopolit</p></a>
+				<a href="./pages/litterall.html"><p>litterall</p></a>
+				<a href="./pages/lettredeeda.html"><p>l.e.a</p></a>
+			</div>
+			<div class="nav_right">
+			</div>
+		</nav>
+		<div class="container_main">
+			<aside class="page_content sticky">
+				<div class="table_box"> <!-- container use to adjust padding -->
+					<h2>sommaire</h2>
+					<a href="./pages/kosmopolit.html#lettredeeda"><p>l.e.a</p></a>
+				</div>
+			</aside>
+
+			<main>
+				<div class="page_title">
+					<h1 id="anchor_lettredeeda">lettres d'europe et d'ailleurs</i></h1>
+					<p class="date"><i><small>mis à jour le 01/03/2020</small></i></p>
+				</div>
+			</main>
+
+			<aside class="relative_content">
+			</aside>
+		</div>
+		<footer class="page_footer">
+		</footer>
+	</body>
+</html>
diff --git a/pages/litterall.html b/pages/litterall.html
index dff0106..5ff997e 100644
--- a/pages/litterall.html
+++ b/pages/litterall.html
@@ -13,10 +13,10 @@
 	<body>
 		<nav class="sticky">
 			<div class="nav_left">
-				<a class="nav_logo" href=""><img src="./docs/kosmopolit_fond.png" alt="logo kosmopolit"></a>
-				<a href=""><p>kosmopolit</p></a>
-				<a href=""><p>litterall</p></a>
-				<a href=""><p>l.e.a</p></a>
+				<a class="nav_logo" href="index.html"><img src="./docs/kosmopolit_fond.png" alt="logo kosmopolit"></a>
+				<a href="./pages/kosmopolit.html"><p>kosmopolit</p></a>
+				<a href="./pages/litterall.html"><p>litterall</p></a>
+				<a href="./pages/lettredeeda.html"><p>l.e.a</p></a>
 			</div>
 			<div class="nav_right">
 			</div>
@@ -30,10 +30,7 @@
 					<a href="./pages/litterall.html#anchor_previous"><p>anciens numeros</p></a>
 				</div>
 			</aside>
-			<!-- main
-			ne doit pas contenir : sidebars <aside> - navbar <nav> - search form
-			ne doit pas etre contenu par : <article> - <aside> - <footer> - <header> - <nav>
-			-->
+
 			<main>
 				<div class="page_title">
 					<h1 id="anchor_litterall">LITTER<i>all</i></h1>
@@ -48,52 +45,121 @@
 					<img src="./docs/revues/bibliotheque_litterall.jpg" alt="bibliotheque litterall">
 					<p class="right"><small>credit: Jeffrey Trehudic</small></p>
 				</div>
-				<h2 id="anchor_last">dernier numero</h2>
-				<div class="image">
+				<h2 id="anchor_last">dernier numero de la revue</h2>
+				<div class="image horizontal">
 					<img src="./docs/revues/litt23.jpg" alt="revue litterall">
+					<div class="vertical">
+						<p><small><i>paru le XX/XX/XXXX</i></small></p>
+						<p>infos sur le dernier numero de litterall</p>
+						<p>sommaire ...</p>
+					</div>
 				</div>
 	
 				<h2 id="anchor_previous">anciens numeros</h2>
 				<div class="gallery">
 					<div class="card">
 						<img src="./docs/revues/litt22.jpg" alt="revue litterall">
-						<p>tesxt dedz alijd alid eelifjlizijd zadzdlijea adedn deoa</p>
+						<p>litterall numero 26</p>
 					</div>
 					<div class="card">
 						<img src="./docs/revues/litt22.jpg" alt="revue litterall">
-						<p>tesxt dedz alijd alid eelifjlizijd zadzdlijea adedn deoa</p>
+						<p>litterall numero 25</p>
 					</div>
 					<div class="card">
 						<img src="./docs/revues/litt22.jpg" alt="revue litterall">
-						<p>tesxt dedz alijd alid eelifjlizijd zadzdlijea adedn deoa</p>
+						<p>litterall numero 24</p>
 					</div>
 					<div class="card">
 						<img src="./docs/revues/litt22.jpg" alt="revue litterall">
-						<p>tesxt dedz alijd alid eelifjlizijd zadzdlijea adedn deoa</p>
+						<p>litterall numero 23</p>
 					</div>
 					<div class="card">
 						<img src="./docs/revues/litt22.jpg" alt="revue litterall">
-						<p>tesxt dedz alijd alid eelifjlizijd zadzdlijea adedn deoa</p>
+						<p>litterall numero 22</p>
 					</div>
 					<div class="card">
 						<img src="./docs/revues/litt22.jpg" alt="revue litterall">
-						<p>tesxt dedz alijd alid eelifjlizijd zadzdlijea adedn deoa</p>
+						<p>litterall numero 21</p>
 					</div>
 					<div class="card">
 						<img src="./docs/revues/litt22.jpg" alt="revue litterall">
-						<p>tesxt dedz alijd alid eelifjlizijd zadzdlijea adedn deoa</p>
+						<p>litterall numero 20</p>
 					</div>
 					<div class="card">
 						<img src="./docs/revues/litt22.jpg" alt="revue litterall">
-						<p>tesxt dedz alijd alid eelifjlizijd zadzdlijea adedn deoa</p>
+						<p>litterall numero 19</p>
 					</div>
 					<div class="card">
 						<img src="./docs/revues/litt22.jpg" alt="revue litterall">
-						<p>tesxt dedz alijd alid eelifjlizijd zadzdlijea adedn deoa</p>
+						<p>litterall numero 18</p>
 					</div>
 					<div class="card">
 						<img src="./docs/revues/litt22.jpg" alt="revue litterall">
-						<p>tesxt dedz alijd alid eelifjlizijd zadzdlijea adedn deoa</p>
+						<p>litterall numero 17</p>
+					</div>
+					<div class="card">
+						<img src="./docs/revues/litt22.jpg" alt="revue litterall">
+						<p>litterall numero 16</p>
+					</div>
+					<div class="card">
+						<img src="./docs/revues/litt22.jpg" alt="revue litterall">
+						<p>litterall numero 15</p>
+					</div>
+					<div class="card">
+						<img src="./docs/revues/litt22.jpg" alt="revue litterall">
+						<p>litterall numero 14</p>
+					</div>
+					<div class="card">
+						<img src="./docs/revues/litt22.jpg" alt="revue litterall">
+						<p>litterall numero 13</p>
+					</div>
+					<div class="card">
+						<img src="./docs/revues/litt22.jpg" alt="revue litterall">
+						<p>litterall numero 12</p>
+					</div>
+					<div class="card">
+						<img src="./docs/revues/litt22.jpg" alt="revue litterall">
+						<p>litterall numero 11</p>
+					</div>
+					<div class="card">
+						<img src="./docs/revues/litt22.jpg" alt="revue litterall">
+						<p>litterall numero 10</p>
+					</div>
+					<div class="card">
+						<img src="./docs/revues/litt22.jpg" alt="revue litterall">
+						<p>litterall numero 09</p>
+					</div>
+					<div class="card">
+						<img src="./docs/revues/litt22.jpg" alt="revue litterall">
+						<p>litterall numero 08</p>
+					</div>
+					<div class="card">
+						<img src="./docs/revues/litt22.jpg" alt="revue litterall">
+						<p>litterall numero 07</p>
+					</div>
+					<div class="card">
+						<img src="./docs/revues/litt22.jpg" alt="revue litterall">
+						<p>litterall numero 06</p>
+					</div>
+					<div class="card">
+						<img src="./docs/revues/litt22.jpg" alt="revue litterall">
+						<p>litterall numero 05</p>
+					</div>
+					<div class="card">
+						<img src="./docs/revues/litt22.jpg" alt="revue litterall">
+						<p>litterall numero 04</p>
+					</div>
+					<div class="card">
+						<img src="./docs/revues/litt22.jpg" alt="revue litterall">
+						<p>litterall numero 03</p>
+					</div>
+					<div class="card">
+						<img src="./docs/revues/litt22.jpg" alt="revue litterall">
+						<p>litterall numero 02</p>
+					</div>
+					<div class="card">
+						<img src="./docs/revues/litt22.jpg" alt="revue litterall">
+						<p>litterall numero 01</p>
 					</div>
 				</div>
 			</main>
diff --git a/styles/global.css b/styles/global.css
index e46a34d..ab0d49a 100644
--- a/styles/global.css
+++ b/styles/global.css
@@ -136,9 +136,6 @@ body aside.page_content {
 	top: calc(var(--nav-height) + 1px);
 	height: calc(100vh - var(--nav-height));
 	margin-right: var(--aside-margin);
-	/*
-	border-right: 1px solid lightgrey;
-	*/
 }
 /* asides elements only have width if they have a child*/
 body aside.page_content .table_box {
@@ -148,8 +145,6 @@ body aside.page_content .table_box {
 	box-sizing: border-box;
 	padding: var(--gap-unit);
 	/*for style*/
-	/*
-	*/
 	border-left: 1px solid lightgrey;
 }
 /*to put space between elements*/
diff --git a/styles/images.css b/styles/images.css
index 0048488..48b96c1 100644
--- a/styles/images.css
+++ b/styles/images.css
@@ -23,11 +23,13 @@
 
 /*design*/
 .gallery {
+	font-size: 100%;
 	display: flex;
 	flex-direction: row;
 	flex-wrap: wrap;
 }
 .gallery .card {
+	font-size: 100%;
 	display: flex;
 	flex: 0 1 0;
 	padding: 0px;
@@ -50,6 +52,10 @@
 	border-width: var(--gallery-img-border-width);
 	border-color: var(--gallery-img-border-color);
 }
+.gallery .card p {
+	font-size: 12px;
+	line-height: 1.5em;
+}
 
 /*----------------------------------------------------*/
 /*IMAGE single*/
@@ -64,7 +70,10 @@
 .image img {
 	height: 400px;
 	width: auto;
-	margin-right: auto;
+	margin-right: 0px;
+}
+.image p {
+	margin-left: calc(var(--gap-unit) * 2 );
 }
 /*images in full page*/
 .image.full img {
diff --git a/styles/text.css b/styles/text.css
index 4e27bda..a3405e0 100644
--- a/styles/text.css
+++ b/styles/text.css
@@ -59,8 +59,13 @@ h2 {
 	font-size: 2em;
 	line-height: 1.5em;
 }
+h3 {
+	font-size: 1.8em;
+	line-height: 1.5em;
+}
 small {
 	font-size: 0.8em;
+	line-height: 1.5em;
 }
 /*specials settings*/
 body p, body p *, body h1, body h1 *, body h2, body h2 * {
