Change layout to a tilemap

web/custom.css

@@ -2,42 +2,21 @@ body {
 	background-color: #f4fff4;
 	font-family: verdana;
 	font-size: 2em;
-}
-
-h1 {
-	text-align: center;
-}
-
-p {
 	text-align: center;
 }
 
-.feature {
+.tile-map {
 	display: flex;
-	margin: 16px 0;
-}
-
-.feature p {
-	text-align: left;
-}
-
-.is-reverse {
-	flex-direction: row-reverse;
-}
-
-.is-reverse p {
-	text-align: right;
-}
-
-.is-reverse h2 {
-	text-align: right;
-}
-
-.feature-img {
-	width: 128px;
+	margin-left: 8px;
+	margin-right: 8px;
+	flex-wrap: wrap;
+	justify-content: center;
 }
 
-.feature-content {
-	flex: 1;
+.tile {
+	flex-basis: 10em;
+	padding-left: 8px;
+	padding-right: 8px;
+	background-color: lightgray;
 }
 

web/index.html

@@ -19,23 +19,16 @@
 		<p>Welcome to the Jovian Platform Center.</p>
 		<p>Here you can find several links to tools hosted by Jovian.</p>
 		<p>Website in progress ...</p>
-		<div class="feature">
-			<div class="feature-img">
-				<img src="img/city.png" alt="Folio website logo" width=128>
-			</div>
-			<div class="feature-content">
-				<h2>Jovian personal website</h2>
-				<p>My own website containing my resume and coding achievements. Website in French.</p>
-			</div>
-		</div>
-		<div class="feature is-reverse">
-			<div class="feature-img">
-				<img src="img/gogs.png" alt="Folio website logo" width=128>
-			</div>
-			<div class="feature-content">
-				<h2>Gogs</h2>
-				<p>Self hosted Git service.</p>
-			</div>
+		<div class="tile-map">
+			<div class="tile"><h2>Hello !</h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></div>
+			<div class="tile"><h2>Hello !</h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></div>
+			<div class="tile"><h2>Hello !</h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></div>
+			<div class="tile"><h2>Hello !</h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></div>
+			<div class="tile"><h2>Hello !</h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></div>
+			<div class="tile"><h2>Hello !</h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></div>
+			<div class="tile"><h2>Hello !</h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></div>
+			<div class="tile"><h2>Hello !</h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></div>
+			<div class="tile"><h2>Hello !</h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></div>
 		</div>
 	</body>
 </html>