diff --git a/html/index.html b/html/index.html
index f142fb1991c8260d9fb9046b00eb69c32ea2d7a9..0ee0b5d7177f4a04d15b878bdc7f20351f645faa 100644
--- a/html/index.html
+++ b/html/index.html
@@ -1,15 +1,55 @@
<!DOCTYPE html>
<html lang="en">
<head>
+ <link rel="stylesheet" href="../css/styles.css">
<meta charset="UTF-8">
- <title>Title</title>
- <nav>
- <li>
- <p>Bonjour</p>
- </li>
- </nav>
+ <title>TEST</title>
</head>
<body>
+<!-- Tab links -->
+<div class="tab">
+ <button class="tablinks" onclick="openCity(event, 'London')">London</button>
+ <button class="tablinks" onclick="openCity(event, 'Paris')">Paris</button>
+ <button class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</button>
+</div>
+<!-- Tab content -->
+<div id="London" class="tabcontent">
+ <h3>London</h3>
+ <p>London is the capital city of England.</p>
+</div>
+
+<div id="Paris" class="tabcontent">
+ <h3>Paris</h3>
+ <p>Paris is the capital of France.</p>
+</div>
+
+<div id="Tokyo" class="tabcontent">
+ <h3>Tokyo</h3>
+ <p>Tokyo is the capital of Japan.</p>
+</div>
</body>
+
+<script>
+ function openCity(evt, cityName) {
+// Declare all variables
+ var i, tabcontent, tablinks;
+
+// Get all elements with class="tabcontent" and hide them
+ tabcontent = document.getElementsByClassName("tabcontent");
+ for (i = 0; i < tabcontent.length; i++) {
+ tabcontent[i].style.display = "none";
+ }
+
+// Get all elements with class="tablinks" and remove the class "active"
+ tablinks = document.getElementsByClassName("tablinks");
+ for (i = 0; i < tablinks.length; i++) {
+ tablinks[i].className = tablinks[i].className.replace(" active", "");
+ }
+
+// Show the current tab, and add an "active" class to the button that opened the tab
+ document.getElementById(cityName).style.display = "block";
+ evt.currentTarget.className += " active";
+ }
+</script>
</html>
\ No newline at end of file