-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
154 lines (143 loc) · 7.13 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
<!DOCTYPE html>
<html lang="no">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="assets/styles/global.css">
<link rel="stylesheet" href="assets/styles/index.css">
<title>Velkomstside</title>
<!-- Importerer skrifttyper fra google. -->
<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:wght@100&display=swap" rel="stylesheet">
</head>
<body>
<header>
<!--
Pakker øverste del av nettsiden inn i en div.
Bilde hentet fra: "https://www.pexels.com/photo/restaurant-interior-776538/", Fotograf: Lisa Fotios
-->
<div class ="hovedbilde">
<!-- Navigasjonsbar -->
<nav class="navbar">
<div class="container">
<a href="index.html">
<!--Logo er selvlaget-->
<img class="logo" src="assets/images/logo.png" alt="Mario's Italian"></img>
</a>
<!-- Linker til de ulike sidene. -->
<ul class="nav">
<li>
<a href="booking.html">BOOKING</a>
</li>
<li>
<a href="menu.html">MENY</a>
</li>
<li>
<a href="accessibility.html">ACCESSIBILITY</a>
</li>
<li>
<a href="topical.html">TOPICAL</a>
</li>
</ul>
<div class="bilde-tekst en">
Bilde: Lisa Fotios/Pexels</div>
</div>
</nav>
<!-- Tekst sentrert på forsiden -->
<h1 class="midt-tekst">Tradisjonelle italienske <br> verdier </h1>
<p class="undertekst">- Midt i hjertet av Oslo -</p>
<!-- Pil man kan trykke på for å bli tatt lenger ned på siden. -->
<a class="pil-ned-a" href="#seksjon1"><i class="pil ned"></i></a>
</div>
</header>
<main>
<!-- Seksjon med hoved-delene til siden. Har tilegnet den en .id som pilen kan scrolle ned til.-->
<section class="hoved-deler" id="seksjon1">
<!-- Div med innholdet til del 1 av 3.-->
<div class="container-del-1">
<div class="del-1">
<!-- Innholdet til venstre i boks1. -->
<div class="del-1-venstre">
<div class="del-1-tekstboks">
<!-- Overskrift -->
<h1 class="del-1-overskrift">En opplevelse. </h1>
<h2 class="del-1-tekst"> Velkommen til en kulinarisk opplevelse etablert i 1952. <br> Et tredje generasjons familiedrevet lokale med fokus på kvalitet i alle ledd. <br></h2>
<!-- Strek for å pakke inn innholdet stilmessig. -->
<hr class="strek-1">
</div>
</div>
<!-- Høyre del av del-1. -->
<div class="del-1-høyre">
<!-- Bilde hentet fra: "https://unsplash.com/photos/yjQDnOhGE34", Fotograf: Klara Kulikova -->
<img src="assets/images/index-main-1.jpg" alt="bilde fra resturanten"></img>
<!-- Bildekreditering -->
<div class="bilde-tekst to">
Bilde: Klara Kulikova/Unsplash
</div>
</div>
</div>
</div>
<!-- Div med innholdet til del 2 av 3. -->
<div class="container-del-2">
<div class="del-2">
<div class="del-2-tekstboks">
<h1 class="del-2-overskrift">Arrangere noe?</h1>
<h2 class="del-2-tekst">
<!-- Strek for å løfte designet -->
<hr class="strek-2">
<br>Book vårt flotte lokale til årets julebord, eller vår autentiske og hjemmekoselige restaurant for mindre arrangementer<br>
</h2>
<!-- Knapp som sender bruker til booking-siden. -->
<div class="knapp"><a href="booking.html"><button class="til-booking-knapp">Book nå </button></a></div>
</div>
</div>
</div>
<!-- Div med innholdet til del 3 av 3. -->
<div class="container-del-3">
<div class="del-3">
<div class="del-3-høyre">
<div class="del-3-tekstboks">
<h1 class="del-3-overskrift">Tradisjoner. </h1>
<hr class="strek-3">
<h2 class="del-3-tekst"> I resturanten får du servert mat fra vår tradisjonelle italienske meny som er basert på originale oppskrifter fra Mario´s bestemor Mariossa. <br></h2>
<!-- Knapp som sender bruker til meny-siden. -->
<div class="knapp"><a href="menu.html"><button class="til-meny-knapp">Til menyen </button></a></div>
</div>
</div>
<div class="del-3-venstre">
<!-- Bilde hentet fra: "https://unsplash.com/photos/y-XZf_TNRms", Fotograf: Pylyp Sukhenko -->
<img src="assets/images/index-main-2.jpg" alt="bilde av kokk">
<!-- Bildekreditering -->
<div class="bilde-tekst tre">
Bilde: Pylyp Sukhenko/Unsplash
</div>
</div>
</div>
</div>
</section>
</main>
<!-- Global footer -->
<footer>
<!-- Div som pakker inn innholdet og deler det inn i to seksjoner med flex. -->
<div class="footer-innhold">
<!-- Footer seksjon 1 -->
<div class="kontakt">
<h2 class="footer-overskrift"><b>KONTAKT OSS</b></h2>
<br>
<p class="footer-tekst"><b>Epost:</b> [email protected] </p>
<p class="footer-tekst"><b>Telefon:</b> 81549300 </p>
<p class="footer-tekst"><b>Adresse:</b> Romagata 13, 1337 Oslo </p>
</div>
<!-- Footer seksjon 2 -->
<div class="aapningstider">
<h2 class="footer-overskrift"><b>ÅPNINGSTIDER</b></h2>
<br>
<p class="footer-tekst">Søndag - Torsdag: <i class="klokkeslett">09 - 22</i> </p>
<p class="footer-tekst">Fredag - Lørdag: <i class="klokkeslett">10 - 23</i> </p>
</div>
</div>
</footer>
</body>
</html>