diff --git a/assets/css/hightlightjs-dark.css b/assets/css/hightlightjs-dark.css
new file mode 100644
index 0000000..dbd406a
--- /dev/null
+++ b/assets/css/hightlightjs-dark.css
@@ -0,0 +1,36 @@
+.hljs {
+	display:block;
+	overflow-x:auto;
+	padding:0.5em;
+	background:#323F4C;
+}
+.hljs {
+	color:#fff;
+}
+.hljs-strong,.hljs-emphasis {
+	color:#a8a8a2
+}
+.hljs-bullet,.hljs-quote,.hljs-link,.hljs-number,.hljs-regexp,.hljs-literal {
+	color:#6896ba
+}
+.hljs-code,.hljs-selector-class {
+	color:#a6e22e
+}
+.hljs-emphasis {
+	font-style:italic
+}
+.hljs-keyword,.hljs-selector-tag,.hljs-section,.hljs-attribute,.hljs-name,.hljs-variable {
+	color:#cb7832
+}
+.hljs-params {
+	color:#b9b9b9
+}
+.hljs-string {
+	color:#6a8759
+}
+.hljs-subst,.hljs-type,.hljs-built_in,.hljs-builtin-name,.hljs-symbol,.hljs-selector-id,.hljs-selector-attr,.hljs-selector-pseudo,.hljs-template-tag,.hljs-template-variable,.hljs-addition {
+	color:#e0c46c
+}
+.hljs-comment,.hljs-deletion,.hljs-meta {
+	color:#7f7f7f
+}
diff --git a/assets/css/style.css b/assets/css/style.css
new file mode 100644
index 0000000..8cb7ecb
--- /dev/null
+++ b/assets/css/style.css
@@ -0,0 +1,526 @@
+@charset "utf-8";
+
+/* RESET
+----------------------------------------------------------------------------------------*/
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, hgroup,
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    font-size:100%;
+    font: inherit;
+    vertical-align: baseline;
+}
+article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
+    display: block;
+}
+img, embed, object, video { max-width: 100%; }
+.ie6 img.full, .ie6 object.full, .ie6 embed, .ie6 video { width: 100%; }
+
+/* BASE
+----------------------------------------------------------------------------------------*/
+
+*{
+    -webkit-transition: all 0.3s ease;
+    -moz-transition: all 0.3s ease;
+    -o-transition: all 0.3s ease;
+    -ms-transition: all 0.3s ease;
+    transition: all 0.3s ease;
+}
+html,
+body{
+    position:relative;
+    min-height: 100%;
+    height: 100%;
+    -webkit-backface-visibility: hidden;
+    font-family: 'Roboto', sans-serif;
+}
+strong{
+    font-weight: 500;
+}
+i{
+    font-style: italic;
+}
+.overflow-hidden{
+    position: relative;
+    overflow: hidden;
+}
+.content a{
+    color: #00a8e3;
+    text-decoration: none;
+}
+.content a:hover{
+    text-decoration: underline;
+}
+.scroll-to-link{
+    cursor: pointer;
+}
+p, .content ul, .content ol{
+    font-size: 14px;
+    color: #777A7A;
+    margin-bottom: 16px;
+    line-height: 1.6;
+    font-weight: 300;
+}
+.content h1:first-child{
+    font-size: 1.333em;
+    color: #034c8f;
+    padding-top: 2.5em;
+    text-transform: uppercase;
+    border-top: 1px solid rgba(255,255,255,0.3);
+    border-top-width: 0;
+    margin-top: 0;
+    margin-bottom: 1.3em;
+    clear: both;
+}
+
+code,
+pre{
+    font-family: 'Source Code Pro', monospace;
+}
+.higlighted{
+    background-color: rgba(0,0,0,0.05);
+    padding: 3px;
+    border-radius: 3px;
+}
+
+/* LEFT-MENU
+----------------------------------------------------------------------------------------*/
+
+.left-menu{
+    position: fixed;
+    z-index: 3;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    width: 300px;
+    box-sizing: border-box;
+    background-color: #f4f5f8;
+    overflow-x: hidden;
+    font-size: 18px;
+}
+.left-menu .content-infos {
+    position: relative;
+    padding: 12px 13.25%;
+    margin-bottom: 20px;
+}
+.left-menu .info {
+    position: relative;
+    font-size: 14px;
+    margin-top: 5px;
+    color: #777A7A;
+}
+.left-menu .info b {
+    font-weight: 500;
+    color: #034c8f;
+}
+.content-logo{
+    position: relative;
+    display: block;
+    width: 100%;
+    box-sizing: border-box;
+    padding: 1.425em 11.5%;
+    padding-right: 0;
+}
+.content-logo img{
+    display: inline-block;
+    max-width: 70%;
+    vertical-align: middle;
+}
+.content-logo span{
+    display: inline-block;
+    margin-left: 10px;
+    vertical-align: middle;
+    color: #323F4C;
+    font-size: 1.1em;
+}
+.content-menu{
+    margin: 2em auto 2em;
+    padding: 0 0 100px;
+}
+.content-menu ul{
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    line-height: 28px;
+}
+.content-menu ul li{
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    line-height: 0;
+}
+.content-menu ul li:hover,
+.content-menu ul li.active{
+    background-color:#DCDEE9;
+}
+.content-menu ul li:hover a,
+.content-menu ul li.active a{
+    color: #00a8e3;
+}
+@media (hover: none) {
+    .content-menu ul li:not(.active):hover {
+        background-color: inherit;
+    }
+    .content-menu ul li:not(.active):hover a {
+        color: #777A7A;
+    }
+}
+.content-menu ul li a{
+    padding: 12px 13.25%;
+    color: #777A7A;
+    letter-spacing: 0.025em;
+    line-height: 1.1;
+    display: block;
+    text-transform: capitalize;
+}
+
+/* CONTENT-PAGE
+----------------------------------------------------------------------------------------*/
+
+.content-page {
+    position: relative;
+    box-sizing: border-box;
+    margin-left: 300px;
+    z-index: 2;
+    background-color: #fff;
+    min-height: 100%;
+    padding-bottom: 1px;
+}
+.content-code{
+    width: 50%;
+    position: absolute;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    background-color: #323f4c;
+    border-color: #323f4c;
+}
+.content {
+    position: relative;
+    z-index: 30;
+}
+.content h1,
+.content h2,
+.content h3,
+.content h4,
+.content h5,
+.content h6,
+.content p,
+.content table,
+.content aside,
+.content dl,
+.content ul,
+.content ol,
+.content .central-overflow-x {
+    margin-right: 50%;
+    padding: 0 28px;
+    box-sizing: border-box;
+    display: block;
+    max-width: 680px;
+}
+.content .central-overflow-x {
+    margin-right: calc(50% + 28px);
+    margin-left: 28px;
+    padding: 0;
+    overflow-y: hidden;
+    max-width: 100%;
+    display: block;
+}
+.content p .central-overflow-x {
+    margin-right: 0;
+    margin-left: 0;
+}
+.break-word {
+    word-break: break-word;
+    overflow-wrap: break-word;
+    word-wrap: break-word;
+}
+.content ul,
+.content ol {
+    padding: 0 44px;
+}
+.content h2,
+.content h3,
+.content h4,
+.content h5,
+.content h6 {
+    font-size: 15px;
+    margin-top: 2.5em;
+    margin-bottom: 0.8em;
+    color: #034c8f;
+    text-transform: uppercase;
+}
+.content h2{
+    font-size: 1.333em;
+}
+.content h4{
+    color: #00a8e3;
+    margin-top: 0;
+    text-transform: none;
+    font-size: 14px;
+    margin-bottom: 0.2em;
+}
+.content-page .content p,
+.content-page .content pre {
+    max-width: 680px;
+}
+.content pre,
+.content blockquote {
+    background-color: #323f4c;
+    border-color: #323f4c;
+    color: #fff;
+    padding: 0 28px 2em;
+    margin: 0;
+    width: 50%;
+    float: right;
+    clear: right;
+    box-sizing: border-box;
+}
+.content pre code, .content pre {
+    font-size: 12px;
+    line-height: 1.5;
+}
+.content blockquote,
+.content pre,
+.content pre code{
+    padding-top: 0;
+    margin-top: 0;
+}
+.content pre code{
+    margin-top: -2em;
+}
+.content table {
+    font-size: 0.825em;
+    margin-bottom: 1.5em;
+    border-collapse: collapse;
+    border-spacing: 0;
+}
+.content table tr:last-child {
+    border-bottom: 1px solid #ccc;
+}
+.content table th {
+    font-size: 0.925em;
+    padding: 5px 18px 5px 0;
+    border-bottom: 1px solid #ccc;
+    vertical-align: bottom;
+    text-align: left;
+    line-height: 1.6;
+}
+.content table td {
+    padding: 5px 18px 5px 0;
+    text-align: left;
+    vertical-align: top;
+    line-height: 1.6;
+    font-family: 'Roboto', sans-serif;
+    font-weight: 300;
+    color: #777A7A;
+}
+
+
+/* burger-menu-icon
+----------------------------------------------------------------------------------------*/
+.burger-menu-icon {
+    background-color: transparent;
+    border: none;
+    cursor: pointer;
+    display: inline-block;
+    vertical-align: middle;
+    padding: 0;
+    position: absolute;
+    right: 26px;
+    top: 26px;
+    display: none;
+}
+.burger-menu-icon .line {
+    fill: none;
+    stroke: #000;
+    stroke-width: 6;
+    transition: stroke-dasharray 600ms cubic-bezier(0.4, 0, 0.2, 1),
+        stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+.burger-menu-icon .line1 {
+    stroke-dasharray: 60 207;
+    stroke-width: 6;
+}
+.burger-menu-icon .line2 {
+    stroke-dasharray: 60 60;
+    stroke-width: 6;
+}
+.burger-menu-icon .line3 {
+    stroke-dasharray: 60 207;
+    stroke-width: 6;
+}
+html.menu-opened .burger-menu-icon .line1 {
+    stroke-dasharray: 90 207;
+    stroke-dashoffset: -134;
+    stroke-width: 6;
+}
+html.menu-opened .burger-menu-icon  .line2 {
+    stroke-dasharray: 1 60;
+    stroke-dashoffset: -30;
+    stroke-width: 6;
+}
+html.menu-opened .burger-menu-icon  .line3 {
+    stroke-dasharray: 90 207;
+    stroke-dashoffset: -134;
+    stroke-width: 6;
+}
+
+
+/* ONE CONTENT COLUMN VERSION
+----------------------------------------------------------------------------------------*/
+
+body.one-content-column-version .content h1,
+body.one-content-column-version .content h2,
+body.one-content-column-version .content h3,
+body.one-content-column-version .content h4,
+body.one-content-column-version .content h5,
+body.one-content-column-version .content h6,
+body.one-content-column-version .content p,
+body.one-content-column-version .content table,
+body.one-content-column-version .content ul,
+body.one-content-column-version .content ol,
+body.one-content-column-version .content aside,
+body.one-content-column-version .content dl,
+body.one-content-column-version .content ul,
+body.one-content-column-version .content ol {
+    margin-right: 0;
+    max-width: 100%;
+}
+body.one-content-column-version .content-page .content p,
+body.one-content-column-version .content-page .content pre {
+    max-width: 100%;
+}
+body.one-content-column-version .content-page {
+    background-color: #323f4c;
+}
+body.one-content-column-version .content h1:first-child,
+body.one-content-column-version .content h2,
+body.one-content-column-version .content h3,
+body.one-content-column-version .content h4,
+body.one-content-column-version .content h5,
+body.one-content-column-version .content h6 {
+    color: #59C3C3;
+}
+body.one-content-column-version p {
+    color: #D6F0F0;
+}
+body.one-content-column-version .content table td {
+    color: #D6F0F0;
+}
+body.one-content-column-version .content thead {
+    color: #417179;
+}
+
+/* RESPONSIVE
+----------------------------------------------------------------------------------------*/
+
+@media only screen and (max-width:980px){
+    .content h1, .content h2, .content h3, .content h4, .content h5, .content h6, .content p, .content table, .content ul, .content ol, .content aside, .content dl, .content ul, .content ol {
+        margin-right: 0;
+    }
+    .content .central-overflow-x {
+        margin: 0;
+        padding: 0 28px;
+    }
+    .content-code{
+        display: none;
+    }
+    .content pre, .content blockquote {
+        margin: 20px 0;
+        padding: 28px;
+        display: block;
+        width: auto;
+        float: none;
+    }
+    .content pre code {
+        margin-top: 0;
+    }
+}
+
+@media only screen and (max-width:680px){
+    html {
+        scroll-padding-top: 83px;
+    }
+    html.menu-opened {
+        overflow: hidden;
+    }
+    .left-menu {
+        position: relative;
+        width: auto;
+    }
+    .left-menu .content-menu {
+        position: fixed;
+        width: 400px;
+        max-width: 90vw;
+        z-index: 3;
+        top: 0;
+        bottom: 0;
+        right: -405px;
+        left: auto;
+        background-color: #fff;
+        margin: 0;
+        overflow-x: hidden;
+        padding-top: 83px;
+        padding-bottom: 20px;
+    }
+    .left-menu .content-menu ul {
+        position: relative;
+    }
+    .left-menu .mobile-menu-closer {
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        z-index: 2;
+        background-color: rgba(50, 63, 76, .5);
+        opacity: 0;
+        visibility: hidden;
+    }
+    html.menu-opened .left-menu .mobile-menu-closer {
+        opacity: 1;
+        visibility: visible;
+    }
+    html.menu-opened .left-menu .content-menu {
+        right: 0;
+    }
+    .left-menu .content-logo {
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        z-index: 4;
+        background-color: #f4f5f8;
+    }
+    .content-logo .logo {
+        margin-right: 65px;
+    }
+    .content-page{
+        margin-left: 0;
+        padding-top: 83px;
+    }
+    .burger-menu-icon {
+        display: block;
+    }
+}
+
+/* BROWSER AND NON-SEMANTIC STYLING
+----------------------------------------------------------------------------------------*/
+
+.cf:before, .cf:after { content: ""; display: block; }
+.cf:after { clear: both; }
+.ie6 .cf { zoom: 1 }
\ No newline at end of file
diff --git a/assets/index.html b/assets/index.html
new file mode 100644
index 0000000..bfe2d0d
--- /dev/null
+++ b/assets/index.html
@@ -0,0 +1,177 @@
+<!DOCTYPE html>
+<html class="no-js" lang="en">
+
+<head>
+    <meta charset="utf-8">
+    <title>elevation-api.eu - Free elevation API</title>
+    <meta name="description" content="Free elevation api using the Copernicus dataset">
+
+    <meta http-equiv="cleartype" content="on">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+    <link rel="stylesheet" href="css/hightlightjs-dark.css">
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.8.0/highlight.min.js"></script>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;1,300&family=Source+Code+Pro:wght@300&display=swap" rel="stylesheet"> 
+    <link rel="stylesheet" href="css/style.css" media="all">
+</head>
+
+<body class="one-content-column-version">
+<div class="left-menu">
+    <div class="content-logo">
+        <div class="logo">
+            <img src="images/logo.png" height="32" />
+            <span>API Documentation</span>
+        </div>
+        <button class="burger-menu-icon" id="button-menu-mobile">
+            <svg width="34" height="34" viewBox="0 0 100 100"><path class="line line1" d="M 20,29.000046 H 80.000231 C 80.000231,29.000046 94.498839,28.817352 94.532987,66.711331 94.543142,77.980673 90.966081,81.670246 85.259173,81.668997 79.552261,81.667751 75.000211,74.999942 75.000211,74.999942 L 25.000021,25.000058"></path><path class="line line2" d="M 20,50 H 80"></path><path class="line line3" d="M 20,70.999954 H 80.000231 C 80.000231,70.999954 94.498839,71.182648 94.532987,33.288669 94.543142,22.019327 90.966081,18.329754 85.259173,18.331003 79.552261,18.332249 75.000211,25.000058 75.000211,25.000058 L 25.000021,74.999942"></path></svg>
+        </button>
+    </div>
+    <div class="mobile-menu-closer"></div>
+    <div class="content-menu">
+        <div class="content-infos">
+            <div class="info"><b>Version:</b> 0.8.5</div>
+            <div class="info"><b>Last Updated:</b> Apr. 2024</div>
+        </div>
+        <ul>
+            <li class="scroll-to-link active" data-target="content-get-started">
+                <a>GET STARTED</a>
+            </li>
+            <li class="scroll-to-link" data-target="content-get-elevation">
+                <a>Get Elevation</a>
+            </li>
+            <li class="scroll-to-link" data-target="content-errors">
+                <a>Errors</a>
+            </li>
+        </ul>
+    </div>
+</div>
+
+
+<div class="content-page">
+    <div class="content">
+        <div class="overflow-hidden content-section" id="content-get-started">
+            <h1>Get started</h1>
+            <p>
+                elevation-api.eu provides a free elevation service aronud the Earth's globe. Under the scenes, it uses the Copernicus DEM dataset from the European Space Agency.
+            </p>
+        </div>
+        <div class="overflow-hidden content-section" id="content-get-elevation">
+            <h2>get elevation</h2>
+            <p>
+                To get elevation (in meters, of course) of a point on earth, you need to do a GET request to the following url:<br>
+                <code class="higlighted break-word">https://www.elevation-api.eu/elevation/:lat/:lon</code>
+                <br>
+                Latitude and Longitude should be on the WGS-84 datum. For example, the elevation of lake Leman is:
+                <br>
+                <code>
+                    curl https://www.elevation-api.eu/elevation/46.24566/6.17081<br>
+                    368
+                </code>
+            </p>
+            <!--
+            <h4>QUERY PARAMETERS</h4>
+            <table>
+                <thead>
+                <tr>
+                    <th>Field</th>
+                    <th>Type</th>
+                    <th>Description</th>
+                </tr>
+                </thead>
+                <tbody>
+                <tr>
+                    <td>secret_key</td>
+                    <td>String</td>
+                    <td>Your API key.</td>
+                </tr>
+                <tr>
+                    <td>search</td>
+                    <td>String</td>
+                    <td>(optional) A search word to find character by name.</td>
+                </tr>
+                <tr>
+                    <td>house</td>
+                    <td>String</td>
+                    <td>
+                        (optional) a string array of houses:
+                    </td>
+                </tr>
+                <tr>
+                    <td>alive</td>
+                    <td>Boolean</td>
+                    <td>
+                        (optional) a boolean to filter alived characters
+                    </td>
+                </tr>
+                <tr>
+                    <td>gender</td>
+                    <td>String</td>
+                    <td>
+                        (optional) a string to filter character by gender:<br> m: male<br> f: female
+                    </td>
+                </tr>
+                <tr>
+                    <td>offset</td>
+                    <td>Integer</td>
+                    <td>(optional - default: 0) A cursor for use in pagination. Pagination starts offset the specified offset.</td>
+                </tr>
+                <tr>
+                    <td>limit</td>
+                    <td>Integer</td>
+                    <td>(optional - default: 10) A limit on the number of objects to be returned, between 1 and 100.</td>
+                </tr>
+                </tbody>
+            </table>
+            -->
+        </div>
+        <div class="overflow-hidden content-section" id="content-errors">
+            <h2>Errors</h2>
+            <p>
+                The elevation api uses the following error codes:
+            </p>
+            <table>
+                <thead>
+                <tr>
+                    <th>Error Code</th>
+                    <th>Meaning</th>
+                </tr>
+                </thead>
+                <tbody>
+                <tr>
+                    <td>HTTP 501</td>
+                    <td>
+                        The requested elevation is outside the DEM's bound. Usually this happens if you try to request a point on Sea.
+                        You can assume the elevation to be around 0m.
+                    </td>
+                </tr>
+                <!--
+                <tr>
+                    <td>X001</td>
+                    <td>
+                        Unknown or unvalid <code class="higlighted">secret_key</code>. This error appears if you use an unknow API key or if your API key expired.
+                    </td>
+                </tr>
+                <tr>
+                    <td>X002</td>
+                    <td>
+                        Unvalid <code class="higlighted">secret_key</code> for this domain. This error appears if you use an API key non specified for your domain. Developper or Universal API keys doesn't have domain checker.
+                    </td>
+                </tr>
+                <tr>
+                    <td>X003</td>
+                    <td>
+                        Unknown or unvalid user <code class="higlighted">token</code>. This error appears if you use an unknow user <code class="higlighted">token</code> or if the user <code class="higlighted">token</code> expired.
+                    </td>
+                </tr>
+                -->
+                </tbody>
+            </table>
+        </div>
+    </div>
+</div>
+</body>
+
+</html>