add initial webpage

2 months ago · 7aeeab3a20
parent 0f925d0fb1
commit 7aeeab3a20
6 changed files with 120 additions and 4 deletions
--- a/web/fonts/Montserrat-Italic-VariableFont_wght.ttf
+++ b/web/fonts/Montserrat-Italic-VariableFont_wght.ttf
--- a/web/fonts/Montserrat-VariableFont_wght.ttf
+++ b/web/fonts/Montserrat-VariableFont_wght.ttf
--- a/web/fonts/VG5000-Regular.otf
+++ b/web/fonts/VG5000-Regular.otf
--- a/web/images/breda.JPG
+++ b/web/images/breda.JPG
--- 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>
--- a/web/style.css
+++ 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;
+}