https://stortorget.bar/

1<!DOCTYPE html>
2<html>
3<head>
4  <meta charset="utf-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1">
6  <title>Stortorget Bar</title>
7
8  <link rel="preload" href="/assets/images/bar.jpg" as="image">
9  <link rel="preload" href="/assets/images/info.jpg" as="image">
10  <link rel="preload" href="/assets/images/meny.jpg" as="image">
11  <link rel="preload" href="/assets/images/takeaway.jpg" as="image">
12  <link rel="preload" href="/assets/images/boka.jpg" as="image">
13
14  <style>
15    @import url('https://fonts.googleapis.com/css2?family=Special+Elite&display=swap');
16  </style>
17
18  <style type="text/css">
19  /*reset*/
20  html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}
21  div,span,a,p{box-sizing:content-box;}
22
23  @font-face {
24    font-family: stortorget;
25    src: url("/assets/fonts/Trixie-Plain.woff2"), url("/assets/fonts/Trixie-Plain.ttf");
26  }
27
28  body{
29    background-color: #000000;
30    color: #FFFFFF;
31  }
32
33  p.center {
34    text-align: center;
35  }
36
37  div.bg-info {
38    background-color: tomato;
39  }
40
41  div.bg-xmas {
42    background-color: #b11c1c;
43  }
44
45  a:link.tel,
46  a:link.mailto {
47    color: #cdd0dd;
48  }
49
50  @media (max-width: 60rem){
51    /*16px X 60 = 960px*/
52    div.main-container {
53      color: #FFFFFF;
54      width: 100%;
55      min-height: 100vh;
56      margin: 0;
57    }
58
59    div.link{
60      padding: 1rem;
61    }
62
63    a.link {
64      display: block;
65      border: 0.1rem solid #FFFFFF;
66      border-radius: 2px;
67      color: #FFFFFF;
68      text-decoration: none;
69      cursor: pointer;
70      width: 100%;
71      height: 4rem;
72      font-size: 1.5rem;
73      line-height: 4rem;
74      text-align: center;
75      font-family: stortorget;
76    }
77
78    a.link:hover {
79      background-color: rgb(255 255 255 / 10%);
80    }
81
82    a.link:active {
83      background-color: rgb(255 255 255 / 10%);
84    }
85
86    a.media {
87      display: block;
88      background-color: rgb(0 0 0 / 70%);
89      color: #FFFFFF;
90      border: 0.1rem solid #FFFFFF;
91      border-radius: 10rem;
92      text-decoration: none;
93      cursor: pointer;
94      width: 10rem;
95      height: 10rem;
96      font-size: 1rem;
97      line-height: 10rem;
98      text-align: center;
99      font-family: stortorget;
100      margin: 1rem auto 1rem auto;
101    }
102
103    a.media:hover {
104      background-color: rgb(0 0 0 / 90%);
105      border: 0.2rem solid rgb(255 255 255 / 50%);
106    }
107
108    p.stortorget {
109      display: block;
110      text-align: center;
111      font-family: "Special Elite", stortorget;
112      font-size: 3.5rem;
113      color: #FFFFFF;
114      width: 100%;
115      padding-top: 2rem;
116    }
117
118    div.hero-image {
119      background-image: url("/assets/images/bar.jpg");
120      background-color: #000000;
121      height: 47rem; /* must set a specified height */
122      background-position: center;
123      background-repeat: no-repeat;
124      background-size: cover;
125    }
126
127    div.hero-image-2 {
128      background-image: url("/assets/images/boka.jpg");
129      background-color: #000000;
130      height: 40rem; /* must set a specified height */
131      background-position: center;
132      background-repeat: no-repeat;
133      background-size: cover;
134      display: flex;
135      flex-direction: column;
136      justify-content: center;
137    }
138
139    div.hero-image-2 a.media {
140      margin: 1rem auto 1rem auto;
141    }
142
143    div.splash-text {
144      font-size: 1rem;
145      font-family: stortorget;
146      padding: 1rem;
147    }
148
149    span.splash-text {
150      display: inline-block;
151      margin-bottom: 0.5rem;
152    }
153
154    div.text {
155      font-size: 1rem;
156      font-family: stortorget;
157      padding: 2rem;
158    }
159
160    div.media {
161      justify-content: center;
162      padding-top: 3rem;
163    }
164
165    p.black {
166      background: #000000e8;
167      padding: 1rem;
168      width: fit-content;
169      border-radius: 4px;
170    }
171
172    p.text-1 {
173      font-size: 1rem;
174      margin-bottom: 2rem;
175    }
176
177    div.x-info {
178      border: 2px solid white;
179      border-radius: 5px;
180      margin: 10px;
181      padding: 10px;
182      font-family: "Special Elite", stortorget;
183      font-size: 1rem;
184    }
185
186  }
187
188  @media (min-width: 60rem){
189
190    /*16px X 60 = 960px*/
191    div.main-container {
192      background-color: #65797fbd;
193      color: #FFFFFF;
194      max-width: 90rem;

194 /*16px X 90 = 1440px*/
195      min-height: 100vh;
196      margin: 1rem auto 1rem auto;
197      padding-bottom: 2rem;
198      border-radius: 4px;
199    }
200
201    div.link{
202      padding: 1rem;
203    }
204
205    a.link {
206      display: block;
207      color: #FFFFFF;
208      border: 0.1rem solid #FFFFFF;
209      border-radius: 4px;
210      text-decoration: none;
211      cursor: pointer;
212      width: 100%;
213      height: 4rem; /*16px X 3 = 48pxpx*/
214      font-size: 1.5rem;
215      line-height: 4rem;
216      text-align: center;
217      font-family: stortorget;
218      background-color: rgb(0 0 0 / 90%);
219    }
220
221    a.link:hover {
222      background-color: rgb(0 0 0 / 50%);
223    }
224
225    a.media {
226      display: block;
227      background-color: rgb(0 0 0 / 70%);
228      color: #FFFFFF;
229      border: 0.1rem solid #FFFFFF;
230      border-radius: 10rem;
231      text-decoration: none;
232      cursor: pointer;
233      width: 10rem;
234      height: 10rem;
235      font-size: 1rem;
236      line-height: 10rem;
237      text-align: center;
238      font-family: stortorget;
239    }
240
241    a.media:hover {
242      background-color: rgb(0 0 0 / 90%);
243      border: 0.2rem solid rgb(255 255 255 / 50%);
244    }
245
246    p.stortorget {
247      display: block;
248      text-align: center;
249      font-family: "Special Elite", stortorget;
250      font-size: 7rem;
251      color: #FFFFFF;
252      width: 100%;
253      padding-top: 1rem;
254    }
255
256    div.hero-image {
257      background-image: url("/assets/images/bar.jpg");
258      background-color: #000000;
259      height: 30rem; /* must set a specified height */
260      background-position: center;
261      background-repeat: no-repeat;
262      background-size: cover;
263      border: 2px solid #FFFFFF;
264      border-radius: 4px;
265      display: flex;
266      justify-content: center;
267      margin-right: 1rem;
268    }
269
270    div.hero-image-2 {
271      background-image: url("/assets/images/boka.jpg");
272      background-color: #000000;
273      height: 32rem; /* must set a specified height */
274      background-position: center;
275      background-repeat: no-repeat;
276      background-size: cover;
277      border: 2px solid #FFFFFF;
278      border-radius: 4px;
279      margin-left: 1rem;
280      margin-right: 1rem;
281      display: flex;
282      flex-direction: row;
283      justify-content: center;
284    }
285
286    div.hero-image-2 a.media {
287      margin: 9rem 3rem auto 3rem;
288    }
289
290    div.grid-container {
291      display: grid;
292      grid:
293      'menu hero hero hero hero'
294    }
295
296    div.grid-area-menu{
297      grid-area: menu;
298      min-width: 18rem;
299    }
300
301    div.splash-text {
302      font-size: 1rem;
303      font-family: stortorget;
304      padding: 2rem;
305    }
306
307    span.splash-text {
308      display: inline-block;
309      margin-bottom: 0.5rem;
310    }
311
312    div.text {
313      font-size: 2rem;
314      font-family: stortorget;
315      padding: 5rem;
316    }
317
318    div.media {
319      display: flex;
320      justify-content: center;
321      padding-top: 20%;
322    }
323
324    p.black {
325      background: #000000e8;
326      padding: 1rem;
327      width: fit-content;
328      border-radius: 4px;
329    }
330
331    div.middle {
332      display: flex;
333    }
334
335    p.text-1 {
336      font-size: 2rem;
337      margin-bottom: 3rem;
338      -webkit-text-size-adjust: none;
339      text-size-adjust: none;
340    }
341
342    div.take-away {
343      max-width: 24rem;
344    }
345
346    div.x-info {
347      border: 2px solid white;
348      border-radius: 5px;
349      margin: 10px;
350      padding: 10px;
351      font-family: "Special Elite", stortorget;
352      font-size: 1.5rem;
353    }
354  }
355
356  </style>
357</head>
358<body>
359  <div class="main-container">
360    <p class="stortorget">STORTORGET BAR</p>
361    <div class="grid-container">
362      <div class="grid-area-menu">
363        <div class="link">
364          <a class="link" href="/meny/">MENY</a>
365        </div>
366        <div class="link">
367          <a class="link" href="/boka/">BOKA</a>
368        </div>
369        <div class="link">
370          <a class="link" href="/info/">INFO</a>
371        </div>
372        <div class="link">
373          <a class="link" href="/oppettider/">ÖPPETTIDER</a>
374        </div>
375      </div>
376      <div class=hero-image style="grid-area: hero;">
377        <div class="splash-text">
378          <p class="black">

379            <span class="splash-text">Stortorget är en mötesplats mitt i centrala Lund.</span>
380            <span class="splash-text">Vi har funnits här sedan 1992 och tanken har varit redan från starten att vara ett välkomnande ställe där människor kan träffas på ett avslappnat sätt, spontant eller planerat och så är det fortfarande.</span>
381            <span class="splash-text">Hos oss hittar du en avslappnad miljö och stämning skapad av vår entusiastiska personal.</span>
382            <span class="splash-text">Maten vi serverar hämtar vi inspiration till från hela världen. Det kan göra att menyn upplevs som lite spretig av vissa men det är rustika rätter, lätta att äta som vi själva älskar att äta, lagade med hantverksmässig omsorg.</span>
383            <span class="splash-text">I baren finns det något för alla och vi gillar att ta ut svängarna, här skruvar vi gärna upp musikvolymen på fredagar och lördagar så att vi kan komma i riktigt god stämning.</span>
384          </p>
385          <p class="black" style="margin-top:0.5rem;">Varmt Välkomna!</p>
386        </div>
387      </div>
388    </div>
389    <!--
390    <div class="x-info bg-info">
391      <p style="margin-top: 1rem;" class="center">Midsommarstängt fredag och lördag.</p>
392      <p style="margin-top: 4rem;" class="center">Fredag (2026-06-19): Stängt</p>
393      <p style="margin-top: 2rem;" class="center">Lördag (2026-06-20): Stängt</p>
394      <p style="margin-top: 4rem;" class="center">Övriga dagar har vi öppet som vanligt.</p>
395    </div>
396    -->
397    <!--
398    <div class="xmas bg-xmas">
399      <p style="margin-top: 1rem; font-size: 1.8rem" class="center">God Jul och gott nytt år och massa kärlek från oss alla på Stortorget.</p>
400      <p style="margin-top: 3rem;" class="center">Första advent (2025-11-30): 12:00 - 21:00</p>
401      <p style="margin-top: 2rem;" class="center">Andra advent (2025-12-07): 12:00 - 21:00</p>
402      <p style="margin-top: 2rem;" class="center">Tredje advent (2025-12-14): 12:00 - 21:00</p>
403      <p style="margin-top: 2rem;" class="center">Fjärde advent (2025-12-21): 12:00 - 21:00</p>
404      <p style="margin-top: 2rem;" class="center">Lille julafton (2025-12-23): 11:30 - 23:00</p>
405      <p style="margin-top: 2rem;" class="center">Julafton (2025-12-24): Stängt</p>
406      <p style="margin-top: 3rem;" class="center">Juldagen (2025-12-25): 12:00 - 03:00</p>
407      <p style="margin-top: 3rem;" class="center">Nyårsafton (2025-12-31): Stängt</p>
408      <p style="margin-top: 2rem; margin-bottom: 2rem" class="center">Nyårsdagen (2026-01-01): Stängt</p>
409      <p style="margin-top: 2rem; margin-bottom: 2rem; font-size: 1rem" class="center">Övriga dagar har vi öppet som vanligt.</p>
410    </div>
411    -->
412    <div class="middle">
413      <div class="text">
414        <p class="text-1">Stortorget 1, 222 23 Lund</p>
415        <p class="text-1"><a class="tel" href="tel:+4646139290">046-139290</a></p>
416        <p class="text-1"><a class="mailto" href="mailto:[email protected]">[email protected]</a></p>
417        <p class="text-1">Öppettider: Mån - Lör 11:30 - stängning</p>
418      </div>
419      <div class="text take-away">
420        <p class="text-1">Takeaway!</p>
421        <p class="text-1">Naturligtvis kan du beställa vår meny som takeaway för små eller stora sällskap.</p>
422      </div>
423    </div>
424    <div class="hero-image-2">
425        <a class="media" target="facebook" href="https://www.facebook.com/stortorgetrestaurang/">FACEBOOK</a>
426        <a class="media" target="instagram" href="https://www.instagram.com/lanastortorget/">INSTAGRAM</a>
427        <a class="media" target="google-map" href="https://goo.gl/maps/RHkz9qqnaizH1wqB9">GOOGLE MAPS</a>
428    </div>
429  </div>
430
431  

431<script type="text/javascript">
432    window.addEventListener('DOMContentLoaded', (event) => {
433      var hero = document.getElementsByClassName("hero-image")[0];
434      hero.style.transition = "background-image 1s ease-in-out";
435      var current = -1,
436      /*Check that images has been preload in the header.*/
437      urls = [
438        "url(/assets/images/info.jpg)",
439        "url(/assets/images/meny.jpg)",
440        "url(/assets/images/takeaway.jpg)",
441        "url(/assets/images/bar.jpg)",
442      ];
443      var myInterval = setInterval(function() {
444        hero.style.backgroundImage = urls[(++current) % urls.length];
445      }, 3000);
446    });
447  </script>

447
448</body>
449</html>