-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
executable file
·183 lines (175 loc) · 11.5 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
<!doctype html>
<html lang="da">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>1000FRYD</title>
<link rel="stylesheet" href="css/main.css" />
</head>
<body>
<svg display="none" width="0" height="0" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<symbol id="icon-clock" viewBox="0 0 1024 1024">
<title>clock</title>
<path class="path1" d="M512 20.48c-271.514 0-491.571 220.058-491.571 491.52 0 271.514 220.058 491.571 491.571 491.571 271.411 0 491.52-220.058 491.52-491.571 0-271.462-220.109-491.52-491.52-491.52zM511.949 901.12c-214.886 0-389.12-174.182-389.12-389.12 0-214.886 174.182-389.12 389.12-389.12 214.886 0 389.171 174.182 389.171 389.12 0 214.886-174.285 389.12-389.171 389.12zM563.2 477.696v-272.896h-102.4v319.744l-181.555 104.858 51.2 88.678 210.688-121.702c12.186-7.014 22.067-24.218 22.067-38.298v-8.602l217.088-213.299c-10.138-13.875-21.043-27.085-33.126-39.219l-183.962 180.736z"></path>
</symbol>
<symbol id="icon-credit-card" viewBox="0 0 1024 1024">
<title>credit-card</title>
<path class="path1" d="M921.6 153.6h-819.2c-56.371 0-102.4 46.080-102.4 102.4v512c0 56.32 46.029 102.4 102.4 102.4h819.2c56.32 0 102.4-46.080 102.4-102.4v-512c0-56.32-46.080-102.4-102.4-102.4zM921.6 768h-819.2v-307.2h819.2v307.2zM921.6 307.2h-819.2v-51.2h819.2v51.2zM204.8 568.32v30.72h30.72v-30.72h-30.72zM389.12 629.709v30.771h61.44v-30.771h30.72v-30.72h30.72v-30.72h-61.44v30.72h-30.771v30.72h-30.669zM512 660.48v-30.771h-30.771v30.771h30.771zM358.4 660.48v-30.771h-61.44v30.771h61.44zM389.12 598.989h30.72v-30.72h-61.44v61.389h30.72v-30.669zM266.189 629.709h30.771v-30.72h30.72v-30.72h-61.44v30.72h-30.72v30.72h-30.72v30.771h61.389v-30.771z"></path>
</symbol>
<symbol id="icon-magnifying-glass" viewBox="0 0 1024 1024">
<title>magnifying-glass</title>
<path class="path1" d="M898.304 791.91l-193.485-193.485c29.184-47.872 45.978-104.192 45.978-164.352 0-174.95-151.603-326.502-326.554-326.502-174.95-0.051-316.723 141.773-316.723 316.723 0 174.899 151.603 326.502 326.502 326.502 58.214 0 112.64-15.821 159.488-43.213l194.509 194.611c19.046 18.995 49.92 18.995 68.915 0l48.282-48.282c18.995-18.995 12.083-43.008-6.912-62.003zM205.005 424.294c0-121.139 98.15-219.29 219.238-219.29 121.139 0 229.069 107.878 229.069 229.069 0 121.088-98.202 219.29-219.29 219.29-121.139-0.051-229.018-107.981-229.018-229.069z"></path>
</symbol>
<symbol id="icon-mail" viewBox="0 0 1024 1024">
<title>mail</title>
<path class="path1" d="M80.589 270.643c24.986 13.414 371.098 199.373 384 206.285s29.594 10.189 46.387 10.189c16.794 0 33.485-3.277 46.387-10.189s359.014-192.87 384-206.285c25.037-13.466 48.691-65.843 2.765-65.843h-866.253c-45.926 0-22.272 52.378 2.714 65.843zM952.986 383.437c-28.416 14.797-378.214 197.069-395.622 206.182s-29.594 10.189-46.387 10.189-28.979-1.075-46.387-10.189-365.21-191.437-393.626-206.234c-19.968-10.445-19.763 1.792-19.763 11.213s0 373.402 0 373.402c0 21.504 28.979 51.2 51.2 51.2h819.2c22.221 0 51.2-29.696 51.2-51.2 0 0 0-363.93 0-373.35s0.205-21.658-19.814-11.213z"></path>
</symbol>
<symbol id="icon-ticket" viewBox="0 0 1024 1024">
<title>ticket</title>
<path class="path1" d="M251.187 590.899l181.811 181.914 333.722-333.722-181.914-181.811-333.619 333.619zM978.125 341.197l-77.363-77.414c-14.797 7.987-31.642 12.595-49.613 12.595-57.242 0-103.629-46.387-103.629-103.578 0-18.022 4.557-34.918 12.595-49.613l-77.363-77.414c-20.173-20.122-53.146-20.122-73.318 0l-563.712 563.712c-20.122 20.070-20.122 53.094 0 73.318l77.414 77.312c14.797-7.987 31.642-12.595 49.664-12.595 57.19 0 103.578 46.387 103.578 103.68 0 17.92-4.557 34.816-12.595 49.613l77.414 77.312c20.173 20.173 53.094 20.173 73.318 0l563.61-563.61c20.173-20.224 20.173-53.197 0-73.318zM432.998 856.013l-265.011-265.114 416.87-416.819 265.011 265.011-416.87 416.922z"></path>
</symbol>
<symbol id="icon-facebook" viewBox="0 0 1024 1024">
<title>facebook</title>
<path class="path1" d="M870.4 51.2h-716.8c-56.32 0-102.4 46.080-102.4 102.4v716.8c0 56.371 46.080 102.4 102.4 102.4h358.4v-358.4h-102.4v-126.72h102.4v-104.96c0-110.797 62.054-188.621 192.819-188.621l92.314 0.102v133.376h-61.286c-50.893 0-70.246 38.195-70.246 73.626v86.528h131.482l-29.082 126.669h-102.4v358.4h204.8c56.32 0 102.4-46.029 102.4-102.4v-716.8c0-56.32-46.080-102.4-102.4-102.4z"></path>
</symbol>
<symbol id="icon-twitter" viewBox="0 0 1024 1024">
<title>twitter</title>
<path class="path1" d="M886.579 319.795c0.41 8.294 0.563 16.691 0.563 24.986 0 255.488-194.406 549.99-549.888 549.99-109.21 0-210.739-32-296.294-86.886 15.155 1.792 30.515 2.714 46.080 2.714 90.624 0 173.926-30.925 240.026-82.688-84.531-1.587-155.955-57.395-180.531-134.195 11.776 2.202 23.91 3.379 36.352 3.379 17.664 0 34.765-2.304 50.944-6.707-88.422-17.818-155.034-95.898-155.034-189.594 0-0.819 0-1.587 0-2.406 26.061 14.49 55.91 23.194 87.552 24.218-51.866-34.714-86.016-93.798-86.016-160.922 0-35.379 9.523-68.608 26.214-97.178 95.283 116.992 237.773 193.894 398.387 201.984-3.277-14.182-4.966-28.877-4.966-44.083 0-106.701 86.477-193.178 193.229-193.178 55.603 0 105.83 23.398 141.107 60.979 43.981-8.704 85.35-24.781 122.726-46.899-14.438 45.107-45.107 82.995-84.992 106.906 39.117-4.71 76.288-15.002 111.002-30.413-25.907 38.81-58.675 72.806-96.461 99.994z"></path>
</symbol>
<symbol id="icon-chevron-thin-down" viewBox="0 0 1024 1024">
<title>chevron-thin-down</title>
<path class="path1" d="M891.802 312.781c13.926-13.722 36.301-13.722 50.125 0s13.875 35.891 0 49.613l-404.89 400.896c-13.824 13.722-36.198 13.722-50.125 0l-404.89-400.896c-13.824-13.722-13.824-35.891 0-49.613 13.875-13.722 36.301-13.722 50.125 0l379.853 365.619 379.802-365.619z"></path>
</symbol>
</defs>
</svg>
<h1 class="site-name">1000FRYD</h1>
<img src="img/1000fryd-logo-alt.png" class="site-logo">
<nav>
<ul class="nav-top">
<li>
<a href="">Kalender</a>
</li>
<li>
<a href="">Cafe</a>
</li>
<li>
<a href="">Om fryd</a>
</li>
<li>
<a href="">Kontakt</a>
</li>
<li>
<a href="">In english</a>
</li>
</ul>
</nav>
<div class="page">
<div class="col-main upcoming">
<article class="container-event">
<div class="img-event">
<img src="http://placehold.it/800x250">
<div class="type-event">Koncert</div>
</div>
<div class="date-event">Fredag 13. april 2016</div>
<h1 class="title-event">
Blah blah (us)<br>
Blah blah (us)<br>
Blah blah (us)</h1>
<div class="action-bar">
<div class="wrapper-action">
<div class="time-event btn btn-time">
<svg class="icon icon-clock"><use xlink:href="#icon-clock"></use></svg> 21:30</div>
</div>
<div class="wrapper-action">
<div class="entre-event btn btn-entre">
<svg class="icon icon-clock"><use xlink:href="#icon-ticket"></use></svg>
50 DKK</div>
</div>
<div class="wrapper-action">
<div class="presell-event btn btn-presale">
<svg class="icon icon-clock"><use xlink:href="#icon-credit-card"></use></svg>
Forsalg</div>
</div>
</div>
<div id="content-event-1" class="content-event">
<p>The Mind Flowers are good news for all freaks and mutineers of the old world order. This psychedelic rock trio from Copenhagen excels at combining garage and psychedelia with an underlying love of melancholic blues.</p>
<p>A wise woman once said: “If I can’t dance, it’s not my revolution.” Fortunately there is plenty of dancing, lust and love in The Mind Flowers’ universe. You are hereby invited to shake everything you got!</p>
<p>Their contribution to the coming insurrection is delivered as a mix of psychedelic rock, beat and garage in the classic trio format. The sound is heavily inspired by the exploratory rock music of the 60s (such as 13th Floor Elevators, Hendrix and The West Coast Pop Art Experimental Band). However, The Mind Flowers mainly sound like themselves.</p>
<div class="action-bar">
<div class="wrapper-action">
<div class="time-event btn btn-facebook">
<a href="http://facebook.com">
<svg class="icon icon-clock"><use xlink:href="#icon-facebook"></use></svg>
Facebook</div>
</a>
</div>
<div class="wrapper-action">
<div class="entre-event btn btn-twitter">
<svg class="icon icon-clock"><use xlink:href="#icon-twitter"></use></svg>
Twitter</div>
</div>
<div class="wrapper-action">
<div class="presell-event btn btn-mail">
<svg class="icon icon-clock"><use xlink:href="#icon-mail"></use></svg>
<span class="icon-test">E-mail</span></div>
</div>
</div>
<div class="content-event-btn js-expandable">
<button class="btn-more-event">
<svg class="icon icon-chevron-thin-down"><use xlink:href="#icon-chevron-thin-down"></use></svg>
</button>
</div>
</div>
</div>
</article>
<aside class="col-second calendar">
<h1>Koncerter & clubs</h1>
<h1>Film</h1>
<h1>Andet</h1>
</aside>
</div>
<footer>
<h1>Åbningstider</h1>
<svg class="icon icon-mail"><use xlink:href="#icon-mail"></use></svg>
</footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
function setTransition(element, value) {
element.style.webkitTransition = element.style.mozTransition = element.style.transition = value;
}
$( ".js-expandable" ).click(function() {
var elementId = $(this).closest(".content-event").attr("id");
var element = document.getElementById(elementId);
var prevHeight = element.style.height;
if ($(this).hasClass( 'js-expanded' )) {
var element = document.getElementById(elementId);
element.style.height = getComputedStyle(element).height;
element.offsetHeight; // force repaint
setTransition(element, 'height .3s ease-in-out')
element.style.height = '160px';
setTimeout(function() {
setTransition(element, '')
}, 500);
$(this).removeClass('js-expanded');
}
else {
element.style.height = 'auto';
var endHeight = getComputedStyle(element).height;
element.style.height = prevHeight;
element.offsetHeight; // force repaint
setTransition(element, 'height .3s ease-in-out')
element.style.height = endHeight;
element.addEventListener('transitionend', function transitionEnd(event) {
if (event.propertyName == 'height') {
setTransition(element, '')
element.style.height = 'auto'
element.removeEventListener('transitionend', transitionEnd, false)
}
}, false)
$(this).addClass('js-expanded');
}
});
</script>
</body>
</html>