add initial webpage
parent
0f925d0fb1
commit
7aeeab3a20
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 133 KiB |
@ -1,4 +1,39 @@
|
|||||||
<pre>
|
<!DOCTYPE html>
|
||||||
test special issue
|
<html lang="en">
|
||||||
</pre>
|
<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>
|
||||||
@ -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;
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue