-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
192 lines (187 loc) · 11.3 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
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
<!DOCTYPE html>
<html lang="en">
<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">
<title>Ida & Jon Fredrik</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="topbar">
<nav class="hovedmeny flex">
<div class="logo"><a href="#"><img src="assets/Horizontal-Line.svg"></a></div>
<ul>
<li><a href="#program">Program</a></li>
<li><a href="#informasjon">Info</a></li>
<li><a href="#svar" class="knapp">Svar Utbedes</a></li>
</ul>
</nav>
</div>
<section id="invitation">
<div class="container">
<p class="topheader">Ida & Jon Fredrik </p>
<h3>Kleivstua</h3>
<h2>24-26/9</h2>
<div class="ornament"><img src="assets/Ornament-center.svg"/> </div>
</div>
</section>
<div id="bilder1">
<div class="cornergraphic1"><img src="assets/Ornament-corner.svg" alt=""></div>
<div class="blomster1"><img src="assets/Blomster1.jpg" alt="Ida gir blomster til Jon Fredrik"></div>
<div class="blomster2"><img src="assets/Blomster2.jpg" alt="Jon holder blomstene foran kamera"></div>
<div class="blomster3"><img src="assets/Blomster3.jpg" alt="Jon er glad for blomstene, Ida pakker sekken"></div>
</div>
<section id="program">
<div class="container">
<h1 id="programtitle">Helgens Program</h1>
<div class="daggrid">
<div class="dag">
<h2>Fredag</h2>
<ul>
<li class="programpost"><span>18:00</span><br> Mulighet for innsjekk</li>
<li class="programpost"><span>19:00 - 21:00</span><br> Grilling på Villa Utsikten</li>
<li class="programpost"><span>21:00</span><br>Aktivitet</li>
<li class="programpost"><span>00:00</span><br> Lokalet stenger</li>
</ul>
</div>
<div class="dag">
<h2>Lørdag</h2>
<ul>
<li class="programpost"><span>08:00 - 10:00</span><br> Frokost</li>
<li class="programpost"><span>12:00</span><br> Lunsj</li>
<li class="programpost"><span>14:00</span><br> Vielse</li>
<li class="programpost"><span>16:00</span><br> Brudeparet ankommer hovedhuset</li>
<li class="programpost"><span>16:30</span><br> Til bords -
Bryllupsmiddag</li>
<li class="programpost"><span>02:00</span><br> Baren stenger</li>
<li class="programpost"><span>02:30</span><br> Lokalene stenger</li>
</ul>
</div>
<ul class="dag">
<h2>Søndag</h2>
<ul>
<li class="programpost"><span>09:00 - 11:00</span><br> Frokost</li>
<li class="programpost"><span>11:00</span><br> Senest utsjekk</li>
</ul>
</div>
</div>
</section>
<div id="bilder2">
<div class="smokin1"><img src="assets/smokin1.JPG" alt="Jon og Ida har på seg pent tøy"></div>
<div class="smokin2"><img src="assets/smokin2.JPG" alt="Jon og Ida er glade"></div>
<div class="cornergraphic2"><img src="assets/Ornament-full.svg" alt=""></div>
</div>
<section id="informasjon">
<div class="container">
<h1 id="infotitle">Informasjon</h1>
<ul>
<li class="infobox">
<img src="assets/Bed.svg" class="icon">
<h2>Overnatting</h2>
<p>Når dere svarer på invitasjon blir overnatting booket for dere. Pris 720 kr per pers/natt
Inkluderer frokost. (ved overnatting fredag-søndag inkl lunsj lørdag).
</p>
<p>Adressen til Kleivstua er: <br>
Dronningveien 500<br>
3531 Krokkleiva </p>
</li>
<li class="infobox">
<img src="assets/Smukk.svg" class="icon">
<h2>Barn</h2>
<p>Bryllupet er i seg selv ikke et barnevennlig arrangement. Likevel har vi forståelse for at enkelte ikke har mulighet til å være borte fra sine små en hel helg, og kan ha behov for å ha med en barnevakt for å kunne delta på festlighetene. Dersom det er aktuelt, ta gjerne kontakt med brudeparet så finner vi en løsning!</p>
</li>
<li class="infobox">
<img src="assets/Paper.svg" class="icon">
<h2>Taler</h2>
<p>Dejan er vår toastmaster, så hvis du ønsker å si noen ord, lese et dikt, synge en sang eller annet bidrag ta kontakt med ham på epost <SCRIPT LANGUAGE="JavaScript">user = 'doder.dejan';site = 'gmail.com';document.write('<a href=\"mailto:' + user + '@' + site + '\">');document.write(user + '@' + site + '</a>');</SCRIPT></p>
</li>
<li class="infobox">
<img src="assets/Kleshenger.svg" class="icon">
<h2>Kleskode</h2>
<h3>Fredag:</h3>
<p>Uformelt. Det blir grilling utover kvelden, med mulighet for mingling både ute og inne. Så er du en som nyter å trekke inn den friske høstlufta anbefaler vi at du kler deg etter været.</p>
<h3>Lørdag:</h3>
<p>Dette er dagen for å ta frem finstasen! Det være seg din mørke dress, smoking eller festfine kjole! Bunad er alltid vellkomment!</p>
</li>
<li class="infobox">
<img src="assets/Activities.svg" class="icon">
<h2>Aktiviteter i området</h2>
<p>Lørdag formiddag vil det være litt tid til egen disposisjon før vielsen. Her er noen forslag til aktiviteter i nærmiljøet man kan sjekke ut enten lørdag, eller søndag etter utsjekk.</p>
<h3>Turområde:</h3>
<ul>
<li><a href="https://www.godtur.no/tur/turmal/6112" target="_blank">Gå til kongens utsikt</a></li>
<li><a href="https://www.kistefosmuseum.no/" target="_blank">Kistefoss</a></li>
<li><a href="https://tyrifjord-golfklubb.no/" target="_blank">Tyrifjorden golfklubb</a></li>
<li><a href="https://www.hadeland.com/besok-hadeland-glassverk/" target="_blank">Hadeland glassblåseri</a></li>
</ul>
</li>
<li class="infobox">
<img src="assets/Corona.svg" class="icon">
<h2>Smittevern</h2>
<p>Arrangementet vil følge de smittevernregler som til enhver tid gjør seg gjeldende. Per i dag innebærer dette følgende:
Som vi har blitt vant til i løpet av det siste året, ber vi alle prøve å ta hensyn til en meters avstand til andre man ikke omgås med til vanlig.</p>
<p>Vi blir sittende i kohorter under bryllupsmiddagen. Ved andre bordtilsetninger i løpet av helgen (middag på fredag, frokost, lunsj, etter bryllupsmiddag) skal det være god nok plass til at man kan sitte der man selv finner det godt med avstand til de rundt.</p>
<p>Det blir et avgrenset dansegulv hvor max 10 personer får danse av gangen.</p>
<p>All alkohol serveres ved bordet og må kun nytes sittende til bords. </p>
<p>Vi håper disse restriksjoner ikke legger for stor demper på kvelden, men at vi får til en god fest både i danserommet og rundt bordene utover kvelden.</p>
</li>
<li class="infobox">
<img src="assets/Paper.svg" class="icon">
<h2>Ønskelister</h2>
<ul>
<li><h3>Illums bolighus</h3><a href="https://www.illumsbolighus.no/on/demandware.store/Sites-illums_bolighus_no-Site/nb_NO/GiftRegistry-ShowOthers?id=0eaac97f535cb4cdb37a37a342" target="_blank">Åpne liste</a></li>
<li><h3>Christiania Glassmagasin</h3><a href="https://bryllupsliste.cg.no/weddinglist/view/index/id/aTtWbgLAGmifDokHWuzolpi4tbsD0Mg5/?___store=cgweddingguest" target="_blank">Åpne liste</a></li>
<li><h3>Hansen & Co</h3><p>Ønskeliste ligger i butikken</p></li>
<li><h3>Gavekort på galleri BZ</h3><p>Dronningens gate 3, 4610 Kristiansand</p></li>
<li><h3>Gavekort på Bildegalleriet</h3><p>Prinsens gate 16, 0152 Oslo</p></li>
</ul>
</li>
</ul>
</div>
</section>
<div id="bilder3">
<div class="cornergraphic3"><img src="assets/Ornament-corner.svg" alt=""></div>
<div class="smilende"><img src="assets/smilende.jpg" alt="Ida og Jon smiler i gresset"></div>
</div>
<section id="svar">
<div class="container">
<h1>Svar Utbedes</h1>
<p>(Ett svar per person)</p>
<form action="https://docs.google.com/forms/u/0/d/e/1FAIpQLSeRh9cfECN8L02X67cSAGRz6HZN4oD-aKjGlXux_b-AOZ-j1g/formResponse" target="my-response-iframe" id="svarForm">
<label for="navn">Navn: <input type="text" id="navn" name="entry.1343183518" required></input></label><br>
<label for="email">Email: <input type="email" name="entry.478766383" id="email" required></input></label><br>
<h2>Kommer du?</h2>
<label for="ikke"><input class="radio" type="radio" id="ikke" name="entry.1834789959" value="Nei, jeg har dessverre ikke mulighet til å komme" required>
Nei, jeg har dessverre ikke anledning.</label><br>
<label for="fredagsondag"><input type="radio" id="fredagsondag" name="entry.1834789959" value="Ja, jeg kommer fredag til søndag">
Ja, jeg kommer fredag til søndag</label><br>
<label for="lordagsondag"><input type="radio" id="lordagsondag" name="entry.1834789959" value="Ja, jeg kommer lørdag til søndag">
Ja, jeg kommer lørdag til søndag</label><br>
<h2>Allergier / Matpreferanser</h2>
<label for="gluten"><input type="checkbox" id="gluten" name="entry.13483093" value="Gluten">
Gluten</label>
<label for="laktose">
<input type="checkbox" id="laktose" name="entry.13483093" value="Laktose">
Laktose</label>
<label for="notter"><input type="checkbox" id="notter" name="entry.13483093" value="Nøtter">
Nøtter</label>
<label for="vegetar"><input type="checkbox" id="vegetar" name="entry.13483093" value="Vegetar">
Vegetar</label><br>
<label for="annet">Annet: </label><input type="text" id="annet" name="entry.1069929090"></input><br>
<button type="submit" class="btn">Send inn</button>
</form>
<div class="alert">Takk for ditt svar!</div>
<div id="iframewrapper"><iframe id="my-response-iframe" name="my-response-iframe"></iframe></div>
<div class="ornament"><img src="assets/Ornament-center.svg"/> </div>
</div>
</section>
<footer id="footer">
</footer>
<!-- <script src="https://www.gstatic.com/firebasejs/8.3.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.3.0/firebase-database.js"></script>-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.0/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.0/ScrollTrigger.min.js"></script>
<script src="main.js"></script>
</body>
</html>