diff --git a/Hiking/TrameforRenderstyle.html b/Hiking/TrameforRenderstyle.html
index e69de29..037e7db 100644
--- a/Hiking/TrameforRenderstyle.html
+++ b/Hiking/TrameforRenderstyle.html
@@ -0,0 +1,155 @@
+<!DOCTYPE html>
+<html lang="fr-FR">
+
+<head>
+  <meta charset="utf-8">
+  <!-- HTML Meta Tags -->
+  <title>TrameforRenderstyle</title>
+  <meta name="description" content="Notre équipe indépendante du projet OsmAnd, a créé des styles de cartes. Essayez-les et venez en discuter!">
+
+  <!-- Facebook Meta Tags -->
+  <meta property="og:url" content="https://osmand-rendering.github.io/Hiking/accueil.html">
+  <meta property="og:type" content="website">
+  <meta property="og:title" content="OsmAnd Rendering">
+  <meta property="og:description" content="Notre équipe indépendante du projet OsmAnd, a créé des styles de cartes. Essayez-les et venez en discuter!">
+  <meta property="og:image" content="https://osmand-rendering.github.io/image/logo_OsmAnd-Rendering-OG.png">
+
+  <!-- Twitter Meta Tags -->
+  <meta name="twitter:card" content="summary_large_image">
+  <meta property="twitter:domain" content="osmand-rendering.github.io">
+  <meta property="twitter:url" content="https://osmand-rendering.github.io/Hiking/accueil.html">
+  <meta name="twitter:title" content="OsmAnd Rendering">
+  <meta name="twitter:description" content="Notre équipe indépendante du projet OsmAnd, a créé des styles de cartes. Essayez-les et venez en discuter!">
+  <meta name="twitter:image" content="https://osmand-rendering.github.io/image/logo_OsmAnd-Rendering-OG.png">
+
+  <!-- Meta Tags Generated via https://www.opengraph.xyz -->
+
+  <link data-rh="true" rel="icon" href="/icon/logo_OsmAnd-Rendering.svg">
+  <link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300%7CSonsie+One" rel="stylesheet" type="text/css">
+  <link rel="stylesheet" href="/Hiking/Style.css">
+  <meta name="viewport" content="width=device-width,initial-scale=0.85" />
+  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+  <meta name="color-scheme" content="dark light">
+
+</head>
+<span style="float:left;"><img src="/icon/logo_OsmAnd-Rendering.svg" width="30" /></span>
+<span style="float:left;"><a href="/index.html">Accueil</a>&emsp;</span>
+
+  
+<span style="float:right;"><a href="index_EN.html">English</a>&emsp;</span>
+<span style="float:right;"><a href="index_ES.html">Español</a>&emsp;</span>
+<span style="float:right;"><code>Français</code>&emsp;</span>
+<span style="float:right;"><img src="/icon/translate.svg" width="20" />&emsp;</span>
+<br>
+
+<p style="text-align:center;"> <img src="/icon/logo_OsmAnd-Rendering.svg" width="250" class="center"> </p>
+
+<body>
+  <!-- Here is our main header that is used across all the pages of our website -->
+
+  <header>
+  </header>
+
+  <!--<nav>
+      <ul>
+        <li><a href="#">Home</a></li>
+        <li><a href="#">Our team</a></li>
+        <li><a href="#">Projects</a></li>
+        <li><a href="#">Contact</a></li>
+      </ul>-->
+
+  <!-- A Search form is another common non-linear way to navigate through a website. -->
+
+  <!--<form>
+        <input type="search" name="q" placeholder="Search query">
+        <input type="submit" value="Go!">
+      </form>
+    </nav>-->
+
+  <!-- Here is our page's main content -->
+  <main>
+
+    <!-- It contains an article -->
+    <article>
+
+      <h3>Randonnée</h3>
+
+      <p>Pour la randonnée nous avons fait le constat qu&#39;il fallait jongler entre plusieurs styles de carte pour avoir certaines informations.
+        Ce style est basé sur le style Topo d&#39;OsmAnd, il améliore entre autres la lisibilité de la carte et une représentation du terrain plus réaliste.<br><br></p>
+      <h3><img src="/Icons/point_labels%403x.png" width="30"> Caractéristiques notables par rapport au style de carte topo standard :</h3>
+      <ul>
+        <li>Sentiers et pistes plus épais. </li>
+        <li>Difficulté et visibilité des sentiers </li>
+        <li>POI utiles/intéressant mis en valeur</li>
+        <li>Couleur des occupations du sol et de l’eau</li>
+        <li>Réserves naturelles </li>
+        <li>Couleur opaque pour les itinéraires basés sur les symboles OSMC</li>
+        <li>Réglages supplémentaires<br><br></li>
+      </ul>
+      <hr>
+      <h3><img src="/Icons/ic_navbar_image_outlined%403x.png" width="30"> Screenshots<br></h3>
+      <table>
+        <thead>
+          <tr>
+            <th align="center"><img src="Screenshots/Hiking1.png" width="250" /></th>
+            <th align="center"><img src="Screenshots/Hiking2.png" width="250" /></th>
+            <th align="center"><img src="Screenshots/Hiking3.png" width="250" /></th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td align="center"><img src="Screenshots/Hiking4.png" width="250" /></td>
+            <td align="center"><img src="Screenshots/Hiking5.png" width="250" /></td>
+            <td align="center"><img src="Screenshots/Hiking6.png" width="250" /></td>
+          </tr>
+        </tbody>
+      </table>
+      <hr>
+      <h2><img src="Icons/" width="30"> Instructions d&#39;installation</h2>
+      <br>
+
+      <ul>
+        <li><a href="https://github.com/OsmAnd-Rendering/.github/wiki/FR%E2%80%94T%C3%A9l%C3%A9chargement-et-Installation">Instructions d&#39;installation pour tous les profils, rendus et routages</a>
+          <br><br>
+        </li>
+      </ul>
+      <hr>
+      <h2 id="-documentation"><img src="https://github.com/osmandapp/OsmAnd-iOS/blob/master/Resources/Icons/ic_custom_info%403x.png" width="30"> Documentation</h2>
+      <br>
+
+      <ul>
+        <li><a href="https://github.com/OsmAnd-Rendering/Hiking/wiki/FR%E2%80%94Fran%C3%A7ais-Am%C3%A9liorations-du-style-par-rapport-%C3%A0-Topo-d%E2%80%99OsmAnd">Améliorations du style</a><br></li>
+        <li><a href="https://github.com/OsmAnd-Rendering/Hiking/wiki/FR%E2%80%94Fran%C3%A7ais-L%C3%A9gende">Légende</a><br></li>
+      </ul>
+
+    </article>
+
+    <!-- the aside content can also be nested within the main content -->
+    <aside>
+
+      <h3 style="text-align:center">Nos Styles</h3>
+
+      <p style="text-align:center"><a href="https://github.com/OsmAnd-Rendering/Motorcycle"><img src="/icon/enduro.svg" width="40"></a><br><a href="https://github.com/OsmAnd-Rendering/Motorcycle">Motorcycle</a></p>
+      <p style="text-align:center"><a href="https://github.com/OsmAnd-Rendering/Cycling"><img src="/icon/bicycle.svg" width="40"></a><br><a href="https://github.com/OsmAnd-Rendering/Cycling">Cycling</a></p>
+      <p style="text-align:center"><a href="https://github.com/OsmAnd-Rendering/Hiking"><img src="/icon/hiking.svg" width="40"></a><br><a href="https://github.com/OsmAnd-Rendering/Hiking">Hiking</a></p>
+      <p style="text-align:center"><a href="https://github.com/OsmAnd-Rendering/Online-Maps"><img src="/icon/online_map.svg" width="40"></a><br><a href="https://github.com/OsmAnd-Rendering/Online-Maps">Online-Maps</a></p>
+      <p style="text-align:center"><a href="https://github.com/OsmAnd-Rendering/How-to-create-a-rendering"><img src="/icon/draw.svg" width="30"></a><br><a href="https://github.com/OsmAnd-Rendering/How-to-create-a-rendering">Create a<br> rendering</a></p>
+
+    </aside>
+
+  </main>
+
+  <!-- And here is our main footer that is used across all the pages of our website -->
+
+  <footer>
+
+    <h3 style="text-align:center">Contactez-nous</h3>
+
+    <p style="text-align:center"><img src="/icon/logo_telegram.svg" width="17"> <a href="https://t.me/OsmandRendering">Telegram</a>&emsp;<img src="/icon/logo_matrix.svg" width="17"> <a href="https://matrix.to/#/#render-osmand:tedomum.net">Matrix</a>&emsp;</a><img src="/icon/logo_github.svg" width="17" /> <a href="https://github.com/OsmAnd-Rendering">Github</a></p><br><br>
+
+    <p style="text-align:center">Content available under GPL-3.0 license</p>
+  </footer>
+
+</body>
+
+</html>
\ No newline at end of file
diff --git a/icon/download.svg b/icon/download.svg
new file mode 100644
index 0000000..2fa9b08
--- /dev/null
+++ b/icon/download.svg
@@ -0,0 +1,4 @@
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16 6C16 5.44772 15.5523 5 15 5C14.4477 5 14 5.44772 14 6V17.5858L11.7071 15.2929C11.3166 14.9024 10.6834 14.9024 10.2929 15.2929C9.90237 15.6834 9.90237 16.3166 10.2929 16.7071L14.2929 20.7071C14.6834 21.0976 15.3166 21.0976 15.7071 20.7071L19.7071 16.7071C20.0976 16.3166 20.0976 15.6834 19.7071 15.2929C19.3166 14.9024 18.6834 14.9024 18.2929 15.2929L16 17.5858V6Z" fill="#FF8800"/>
+<path d="M8 19C8 18.4477 7.55228 18 7 18C6.44772 18 6 18.4477 6 19V22C6 23.6569 7.34315 25 9 25H21C22.6569 25 24 23.6569 24 22V19C24 18.4477 23.5523 18 23 18C22.4477 18 22 18.4477 22 19V22C22 22.5523 21.5523 23 21 23H9C8.44772 23 8 22.5523 8 22V19Z" fill="#FF8800"/>
+</svg>
diff --git a/icon/screenshot.svg b/icon/screenshot.svg
new file mode 100644
index 0000000..fcc6ea9
--- /dev/null
+++ b/icon/screenshot.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#FF8800"><path d="M360-400h400L622-580l-92 120-62-80-108 140Zm-40 160q-33 0-56.5-23.5T240-320v-480q0-33 23.5-56.5T320-880h480q33 0 56.5 23.5T880-800v480q0 33-23.5 56.5T800-240H320Zm0-80h480v-480H320v480ZM160-80q-33 0-56.5-23.5T80-160v-560h80v560h560v80H160Zm160-720v480-480Z"/></svg>
\ No newline at end of file
