diff --git a/index.html b/index.html
index f161b6f..dd2b221 100644
--- a/index.html
+++ b/index.html
@@ -1,14 +1,20 @@
-<!DOCTYPE html> <html> <head> <meta charset="utf-8">
+<!DOCTYPE html> 
+<html> 
+<head> 
+<meta charset="utf-8">
  <!--     -->
 <meta http-equiv="Content-Security-Policy" content="default-src * 'self' 'unsafe-inline' 'unsafe-eval' data: gap: content:"> 
 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui, viewport-fit=cover"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="default"> <meta name="format-detection" content="telephone=no"> <meta name="msapplication-tap-highlight" content="no"> 
 <title>Trans Hackmeeting</title> 
-    <style>
-.logo{float:right;} body { max-width: 800px; left: 50%; position: relative; transform: translate(-50%,0%); } </style> </head> <body> <img src="logo_hm_bologna.png" class="logo">    
-    
+<link rel="stylesheet" type="text/css" href="style.css">
+</head> 
+<body>
+<header> 
+<img src="logo_hm_bologna.png" class="logo">    
     <h1>Trans Hackmeeting</h1>
-    <h2 align="center">August 9-12 2018</h2>
-    
+		<h2>9-12th August 2018 @ Le Goutailloux, Tarnac (FR)</h2>
+</header>
+<section>
 <p>
 Since many years in several European countries the mix of hacking
 and politics has produced several gatherings and local spaces to
@@ -25,24 +31,25 @@ non-institutional grassroots approach to subscribe to the
 THK mailing-list to make an attempt to create an European gathering on hacking and politics in
 order to share experiences and ideas without being forced within political
 or linguistic borders.</p> 
-
-<h3>
-<p align="right">trans.hackmeeting.org</p> 
-</h3>
-
-<hr>
-<h4>
-    <li> collaborate: <a href="https://trans.hackmeeting.org/fiki/"> trans hack wiki</a>
-    <li> coordinate: <a href="https://www.autistici.org/mailman/listinfo/thk"> THK Mailing List</a>
-</h4>
-<hr>
+</section>
+<section>
+<h3><p align="right">Hackmeeting.org</p></h3>
+<ul>
+<li><strong>Wiki:</strong><a href="https://trans.hackmeeting.org/fiki/"> FIKI the cybersexy trans hack wiki!</a>
+<li><strong>List:</strong><a href="https://www.autistici.org/mailman/listinfo/thk"> THK mailinglist</a>
+</ul>
+</section>
+<section>
 A big thanks to those who inspire us
-<h5>
+<ul>
     <li> <a href="https://femhack.noblogs.org/"> Femhack </a>  - The blog of femhackmeeting
     <li> <a href="https://www.hackon.nl"> Hackon </a>  - Amsterdam volunteer hacker event
     <li> <a href="https://es.hackmeeting.org/"> Hackmeeting España </a>  Spanish hackmeeting
     <li> <a href="https://it.hackmeeting.org/"> Hackmeeting Italy</a>  Italian hackmeeting
     <li> <a href="https://calafou.org/"> Calafou </a> post-industrial revolutionary utopian reality
-</h5>
-
+</ul>
+</section>
+<footer>
+<a href="https://trans.hackmeeting.org">trans.hackmeeting.org</a> | <span class="copyleft">&copy;</span> transhackmeeting 2018 | <a href="https://www.autistici.org/mailman/thk">Mailing list</a>
+</footer>
 
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..48967ca
--- /dev/null
+++ b/style.css
@@ -0,0 +1,9 @@
+body { font-family:sans-serif;font-size:12pt;}
+p {font-family:serif;}
+a { text-decoration:none; color:#e12323;}
+a:hover { text-decoration:line-through; }
+ul { list-style:none;}
+hr { border:0; border-top:1px dotted #000;}
+.logo{float:right;} body { max-width: 800px; left: 50%; position: relative; transform: translate(-50%,0%); } 
+footer {text-align:center; font-size:0.7em; padding-top:30px;}
+.copyleft {transform:rotate(180deg); display:inline-block;}
