Trame principale, à remplir et affiner

source/_navigation.erb

@@ -4,9 +4,9 @@
 	</div>
 	<div class="txtright">
 		<ul>
-		<% data.navigation.each do |item| %>
-		  <li><a href="#<%= item.goto %>"><%= item.name %></a></li>
-		<% end %>
+			<li><a href="#festival">Le festival</a></li>
+			<li><a href="#infos">Infos pratiques</a></li>
+			<li><a href="#association">L’association</a></li>
 		</ul>
 	</div>
 </nav>

source/index.html.erb

@@ -2,6 +2,95 @@
 title: Pas Sage En Seine
 ---
 
-<h1>Bienvenue sur le site du festival</h1>
+<section id="festival" class="ml">
+	<h1 class="txtcenter">Bienvenue sur le site du festival</h1>
 
-<p>Mais au fait, c’est quoi Pas Sage En Seine ?</p>
+	<div class="grid-3 has-gutter descriptions">
+		<div class="center">
+			<h2>Bloc 1</h2>
+			<p>Présentation du bloc</p>
+		</div>
+		<div class="center">
+			<h2>Bloc 2</h2>
+			<p>Présentation du bloc</p>
+		</div>
+		<div class="center">
+			<h2>Bloc 3</h2>
+			<p>Présentation du bloc</p>
+		</div>
+		<div class="center">
+			<h2>Bloc 4</h2>
+			<p>Présentation du bloc</p>
+		</div>
+		<div class="center">
+			<h2>Bloc 5</h2>
+			<p>Présentation du bloc</p>
+		</div>
+		<div class="center">
+			<h2>Bloc 6</h2>
+			<p>Présentation du bloc</p>
+		</div>
+	</div>
+</section>
+
+<section id="infos" class="ml">
+	<h1 class="txtcenter">Infos pratiques</h1>
+
+	<div class="grid-3 has-gutter descriptions">
+		<div class="center">
+			<h2>Bloc 1</h2>
+			<p>Présentation du bloc</p>
+		</div>
+		<div class="center">
+			<h2>Bloc 2</h2>
+			<p>Présentation du bloc</p>
+		</div>
+		<div class="center">
+			<h2>Bloc 3</h2>
+			<p>Présentation du bloc</p>
+		</div>
+		<div class="center">
+			<h2>Bloc 4</h2>
+			<p>Présentation du bloc</p>
+		</div>
+		<div class="center">
+			<h2>Bloc 5</h2>
+			<p>Présentation du bloc</p>
+		</div>
+		<div class="center">
+			<h2>Bloc 6</h2>
+			<p>Présentation du bloc</p>
+		</div>
+	</div>
+</section>
+
+<section id="association" class="ml">
+	<h1 class="txtcenter">L’association</h1>
+
+	<div class="grid-3 has-gutter descriptions">
+		<div class="center">
+			<h2>Bloc 1</h2>
+			<p>Présentation du bloc</p>
+		</div>
+		<div class="center">
+			<h2>Bloc 2</h2>
+			<p>Présentation du bloc</p>
+		</div>
+		<div class="center">
+			<h2>Bloc 3</h2>
+			<p>Présentation du bloc</p>
+		</div>
+		<div class="center">
+			<h2>Bloc 4</h2>
+			<p>Présentation du bloc</p>
+		</div>
+		<div class="center">
+			<h2>Bloc 5</h2>
+			<p>Présentation du bloc</p>
+		</div>
+		<div class="center">
+			<h2>Bloc 6</h2>
+			<p>Présentation du bloc</p>
+		</div>
+	</div>
+</section>

source/stylesheets/site.css.scss

@@ -35,3 +35,12 @@ header {
 		padding: 1rem;
 	}
 }
+
+section h1 {
+	color: #E58100;
+}
+
+section div.descriptions {
+	border-radius: 2rem;
+	border: 3px solid #222;
+}