diff --git a/web/fonts/Montserrat-Italic-VariableFont_wght.ttf b/web/fonts/Montserrat-Italic-VariableFont_wght.ttf
new file mode 100644
index 0000000..81cc326
Binary files /dev/null and b/web/fonts/Montserrat-Italic-VariableFont_wght.ttf differ
diff --git a/web/fonts/Montserrat-VariableFont_wght.ttf b/web/fonts/Montserrat-VariableFont_wght.ttf
new file mode 100644
index 0000000..797c4a5
Binary files /dev/null and b/web/fonts/Montserrat-VariableFont_wght.ttf differ
diff --git a/web/fonts/VG5000-Regular.otf b/web/fonts/VG5000-Regular.otf
new file mode 100644
index 0000000..da7966f
Binary files /dev/null and b/web/fonts/VG5000-Regular.otf differ
diff --git a/web/images/breda.JPG b/web/images/breda.JPG
new file mode 100644
index 0000000..bb7ac96
Binary files /dev/null and b/web/images/breda.JPG differ
diff --git a/web/index.html b/web/index.html
index 6352996..457c8a1 100644
--- a/web/index.html
+++ b/web/index.html
@@ -1,4 +1,39 @@
-<pre>
-test special issue
-</pre>
-
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Counter Tourist Tnformation</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+<div class="nav">
+    <h3>Counter <br> Tourist <br> Information</h3>
+    <h4>The surroundings</h4>
+    <h4>Events</h4>
+    <h4>Visitors disinfo</h4>
+    <h4>Sutainability</h4>
+</div>
+<div class="landingimage">
+    <div class="imagedescription">Beautiful Breda | photo Victor Utne Stiebrg</div>
+</div>
+<div class="index">
+    <h1>Counter Tourist Information</h1>
+    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus ipsa labore quod enim et pariatur praesentium ratione tempore voluptate mollitia nesciunt quos sit natus, assumenda ut laboriosam quia porro facere laborum accusantium. Aliquam, enim in aperiam quod sapiente repellendus quisquam recusandae libero doloribus laboriosam quo praesentium optio, esse expedita omnis sint aut deserunt excepturi odio quasi officiis! Delectus, nulla ex!</p>
+</div>
+<div class="tours">
+    <div class="tour1">
+        <h2>Experience somethign</h2>
+        <img src="images/breda.JPG" alt="" width="300px">
+    </div>
+    <div class="tour2">
+        <h2>Experience somethign else</h2>
+        <img src="images/breda.JPG" alt=""width="300px">
+    </div>
+    <div class="tour3">
+        <h2>Experience somethign more</h2>
+        <img src="images/breda.JPG" alt=""width="300px">
+    </div>
+</div>
+</body>
+</html>
\ No newline at end of file
diff --git a/web/style.css b/web/style.css
new file mode 100644
index 0000000..95f2913
--- /dev/null
+++ b/web/style.css
@@ -0,0 +1,81 @@
+@font-face {
+    font-family: Montserrat;
+    src: url(fonts/Montserrat-VariableFont_wght.ttf);
+}
+
+@font-face {
+    font-family: Montserrat-italic;
+    src: url(fonts/Montserrat-Italic-VariableFont_wght.ttf);
+}
+
+
+@font-face {
+    font-family: VG5000;
+    src: url(fonts/VG5000-Regular.otf);
+}
+
+
+body{
+    font-family: Montserrat;
+
+}
+
+.nav{
+
+    width: 80vw;
+    display: flex;
+    background-color: #212529;
+    justify-content: space-around;
+    align-items: center;
+    position: fixed;
+    left: 10vw;
+   
+}
+
+.nav>h3{
+    color: #81d742;
+    padding: .5em;
+    font-family: VG5000;
+}
+
+.nav>h4{
+    color: white;
+    font-weight: lighter;
+}
+
+.landingimage{
+    background: url("images/breda.JPG");
+    background-size: contain;
+    width: 100vw;
+    height: 600px;
+}
+
+.imagedescription{
+    background: rgba(5, 5, 5, 0.3);
+    position: relative;
+    top: 93%;
+    left: 2%;
+    padding: 4px;
+    width: fit-content;
+    color: white;
+}
+ h1{
+    font-family: VG5000;
+ }
+.index{
+    background: #81d742;
+}
+
+.index>*{
+
+padding: 10px;
+    max-width: 70ch;
+    text-align: center;
+    margin: auto;
+    
+}
+
+.tours{
+    display: flex;
+    justify-content: space-around;
+}
