-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
354 lines (347 loc) · 20 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
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
<!DOCTYPE html>
<html lang="zxx">
<head>
<!-- Google Optimize -->
<script src="https://www.googleoptimize.com/optimize.js?id=OPT-5D93MCF"></script>
<!-- Google Tag Manager -->
<script>
(function (w, d, s, l, i) {
w[l] = w[l] || [];
w[l].push({ "gtm.start": new Date().getTime(), event: "gtm.js" });
var f = d.getElementsByTagName(s)[0],
j = d.createElement(s),
dl = l != "dataLayer" ? "&l=" + l : "";
j.async = true;
j.src = "https://www.googletagmanager.com/gtm.js?id=" + i + dl;
f.parentNode.insertBefore(j, f);
})(window, document, "script", "dataLayer", "GTM-MF2V3WN");
</script>
<!-- End Google Tag Manager -->
<!-- Global site tag (gtag.js) - Google Analytics -->
<script
async
src="https://www.googletagmanager.com/gtag/js?id=G-C6X12DD5QT"
></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag("js", new Date());
gtag("config", "G-C6X12DD5QT");
</script>
<meta charset="UTF-8">
<meta
name="description"
content="Music nonprofit organization established in Ukraine. It's mainly based on the development of the Ukrainian underground scene."
>
<meta
name="keywords"
content="house, raw house, lo-fi house, ghetto house, detroit house, chicago house, techno, experimental, jmf, j-mf, jukrainian"
>
<meta name="author" content="j-mf">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta
property="og:image"
content="https://j-mf.com/img/j-mf_cover.png"
>
<meta property="og:title" content="Music nonprofit organization established in Ukraine.">
<meta property="og:type" content="website">
<meta property="og:site_name" content="j-mf">
<meta property="og:locale" content="en_US">
<meta
property="og:description"
content="J-MF is a music label that specializes in discovering and promoting talented musicians from around the world. The JMF team believes that diversity in musical genres and styles makes the world more vibrant and interesting. The label is focused on finding new stars who can impress with their originality and uniqueness, and helps them achieve maximum success in the industry. JMF is not only a production company, but also a community of like-minded individuals who appreciate creativity and strive to unlock the potential of each musician, to help them secure a worthy place on the global stage."
>
<meta property="og:url" content="http://j-mf.com">
<title>j-mf</title>
<!-- favicon -->
<link rel="icon" type="image/x-icon" href="/img/j-mf_favicon.ico">
<!-- animate css -->
<link rel="stylesheet" type="text/css" href="css/animate.css">
<link href="https://unpkg.com/[email protected]/dist/aos.css" rel="stylesheet">
<!-- OVL-carousel -->
<link rel="stylesheet" href="css/owl.carousel.min.css">
<link rel="stylesheet" href="css/owl.theme.default.min.css">
<!-- fontawesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer">
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/normalize.css">
<link rel="stylesheet" type="text/css" href="css/media.css">
</head>
<body>
<!-- preloader -->
<div id="preloader"></div>
<!-- Google Tag Manager (noscript) -->
<noscript
><iframe
src="https://www.googletagmanager.com/ns.html?id=GTM-MF2V3WN"
height="0"
width="0"
style="display: none; visibility: hidden"
></iframe
></noscript>
<!-- End Google Tag Manager (noscript) -->
<!-- Scroll Back To Top Button -->
<button
onclick="topFunction()"
id="myBtn"
title="Go to top"
aria-label="Top"
>
Top
</button>
<!-- gsap mouse follower start -->
<div class="ball"></div>
<!-- gsap mouse follower end -->
<!-- bg video animation -->
<!-- <div class="wrapper"></div> -->
<video autoplay muted loop id="myVideo">
<source src="vid/bg_animation.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
<header class="main-header" id="header">
<div class="container">
<nav class="main-nav" role="navigation">
<div id="menuToggle">
<input type="checkbox">
<span></span>
<span></span>
<span></span>
<ul class="menu nav-list" id="myLinks">
<li class="menu-header nav-item">
<a class="border nav-link" href="#label"> Label </a>
</li>
<li class="menu-header nav-item">
<a class="border nav-link" href="#studio"> Studio</a>
</li>
<li>
<a href="#home">
<img class="logo" src="img/j-mf_logo_white.png" alt="logo">
</a>
</li>
<li class="menu-header nav-item">
<a class="border nav-link" href="#blog"> Blog </a>
</li>
<li class="menu-header nav-item">
<a class="border nav-link" href="#contacts"> Contacts</a>
</li>
</ul>
</div>
</nav>
<!-- <div class="menu-icon">
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div> -->
<section class="header-name">
<h2 class="visually-hidden">JUKRAINIAN</h2>
<ul class="name">
<li class="name-letter animated fadeIn delay-1s">J</li>
<li class="name-letter animated fadeIn delay-2s">U</li>
<li class="name-letter animated fadeIn delay-3s">K</li>
<li class="name-letter animated fadeIn delay-4s">R</li>
<li class="name-letter animated fadeIn delay-5s">A</li>
<li class="name-letter animated fadeIn delay-1s">I</li>
<li class="name-letter animated fadeIn delay-2s">N</li>
<li class="name-letter animated fadeIn delay-3s">I</li>
<li class="name-letter animated fadeIn delay-4s">A</li>
<li class="name-letter animated fadeIn delay-5s">N</li>
</ul>
<a data-aos="zoom-in" class="btn-header" href="#label">Listen Buy Music</a>
</section>
</div>
</header>
<main>
<div class="container">
<section class="label" id="label">
<h1 data-aos="fade-right">Label</h1>
<hr class="line">
<h2 class="visually-hidden">description</h2>
<h3 data-aos="fade-zoom-in"
data-aos-easing="ease-in-back"
data-aos-delay="300"
data-aos-offset="0" class="m-1">
J-MF is a music label dedicated to promoting up-and-coming artists and diverse genres. We strive to foster a community of talented musicians and create a platform for their work to be shared with the world.
</h3>
<div class="owl-carousel owl-theme">
<div class="slider item">
<iframe style="border: 0; width: 350px; height: 350px;" src="https://bandcamp.com/EmbeddedPlayer/album=2757620583/size=large/bgcol=ffffff/linkcol=333333/minimal=true/transparent=true/" seamless><a href="https://jukrainianmaafakaa.bandcamp.com/album/cepasa-remixes">Cepasa - Remixes by Maa Fakaa</a></iframe>
</div>
<div class="slider item">
<iframe style="border: 0; width: 350px; height: 350px;" src="https://bandcamp.com/EmbeddedPlayer/album=2874016672/size=large/bgcol=ffffff/linkcol=333333/minimal=true/transparent=true/" seamless><a href="https://jukrainianmaafakaa.bandcamp.com/album/--2">Моя Українка by Maa Fakaa</a></iframe>
</div>
<div class="slider item">
<iframe style="border: 0; width: 350px; height: 350px;" src="https://bandcamp.com/EmbeddedPlayer/album=3649718664/size=large/bgcol=ffffff/linkcol=333333/minimal=true/transparent=true/" seamless><a href="https://jukrainianmaafakaa.bandcamp.com/album/nourma-remixes">NOURMA - Remixes by Nourma, Jukrainian, Maa Fakaa</a></iframe>
</div>
<div class="slider item">
<iframe style="border: 0; width: 350px; height: 350px;" src="https://bandcamp.com/EmbeddedPlayer/album=3861423105/size=large/bgcol=ffffff/linkcol=333333/minimal=true/transparent=true/" seamless><a href="https://jukrainianmaafakaa.bandcamp.com/album/ep">БОДЯ - Сэкс Машина (EP) by Maa Fakaa</a></iframe>
</div>
<div class="slider item">
<iframe style="border: 0; width: 350px; height: 350px;" src="https://bandcamp.com/EmbeddedPlayer/album=1998597907/size=large/bgcol=ffffff/linkcol=333333/minimal=true/transparent=true/" seamless><a href="https://jukrainianmaafakaa.bandcamp.com/album/friends">Friends by GTWY & Maa Fakaa</a></iframe>
</div>
<div class="slider item">
<iframe style="border: 0; width: 350px; height: 350px;" src="https://bandcamp.com/EmbeddedPlayer/album=2420248536/size=large/bgcol=ffffff/linkcol=333333/minimal=true/transparent=true/" seamless><a href="https://jukrainianmaafakaa.bandcamp.com/album/xxxx">XxxX by Jukrainian</a></iframe>
</div>
<!-- <div class="slider item">
<iframe
title="souncloud player"
width="500"
height="450"
src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/playlists/996141991&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true"
></iframe>
</div> -->
<!-- <div class="slider item coming-soon atwork-1"></div> -->
<!-- <div class="slider item coming-soon atwork-2"></div> -->
<!-- <div class="slider item coming-soon atwork-3"></div> -->
<!-- <div class="slider item coming-soon atwork-4"></div> -->
<!-- <div class="slider item coming-soon atwork-5"></div> -->
</div>
</section>
<section class="studio" id="studio">
<h1 data-aos="fade-right">Studio</h1>
<hr class="line">
<h2 class="visually-hidden">description</h2>
<h3 data-aos="fade-zoom-in"
data-aos-easing="ease-in-back"
data-aos-delay="300"
data-aos-offset="0" class="m-1">
At J-MF Studio, we provide a professional recording environment equipped with state-of-the-art technology. Our experienced team of sound engineers is committed to bringing out the best in every artist and producing high-quality music.
</h3>
<div data-aos="fade-up" class="art flex h-450 black">
<div class="col-left w-50 p-2">
<h2 class="crimson">Art</h2>
<p class="fs-m-1">
J-MF Art is a showcase of talented visual artists who create stunning artwork inspired by music. Browse our gallery and discover unique pieces that capture the essence of various genres and artists. Commissioned pieces are also available upon request.
</p>
<a class="grey" href="#">Read more...</a>
</div>
<div class="col-right w-50 p-2 img-bg-art"></div>
</div>
<hr class="line-yellow">
<div data-aos="fade-up" class="video flex black">
<div class="col-left w-50 p-2">
<!-- <video height="400" controls poster="img/jukrainian-logo.webp">
<source src="vid/video.mp4" type="video/mp4" />
</video> -->
<div style="padding:75% 0 0 0;position:relative;"><iframe src="https://player.vimeo.com/video/232070454?h=a9f5f615b7&badge=0&autopause=0&player_id=0&app_id=58479" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen style="position:absolute;top:0;left:0;width:100%;height:100%;" title="Dancers and Photographers Come Together for Incredible Spontaneous Photo Shoots"></iframe></div><script src="https://player.vimeo.com/api/player.js"></script>
</div>
<div data-aos="fade-up" class="col-right w-50 p-2">
<h2 class="crimson">Video</h2>
<p class="fs-m-1">
Experience music in a whole new way with J-MF Video. Our team of skilled videographers creates captivating music videos that complement the music and showcase the artists' unique styles. From concept to post-production, we handle it all.
</p>
<a class="grey" href="#">Read more...</a>
</div>
</div>
<hr class="line-yellow">
<div data-aos="fade-up" class="covers flex h-450 black">
<div class="col-left w-50 p-2">
<h2 class="crimson">Covers</h2>
<p class="fs-m-1">
J-MF Covers is a collection of talented musicians who put their own spin on popular songs. We provide a platform for emerging artists to showcase their creativity and unique interpretations. Discover new artists and rediscover your favorite songs.
</p>
<a class="grey" href="#">Read more...</a>
</div>
<div class="col-right w-50 p-2 img-bg-cover"></div>
</div>
<hr class="line-yellow">
<div data-aos="fade-up" class="posters flex h-450 black">
<div class="col-left w-50 p-2 img-bg-poster"></div>
<div class="col-right w-50 p-2">
<h2 class="crimson">Posters</h2>
<p class="fs-m-1">
J-MF Posters is a curated collection of unique posters designed by talented artists. Our posters capture the spirit of various genres and artists, making them the perfect addition to any music lover's collection. Shop our gallery or commission a custom design.
</p>
<a class="grey" href="#">Read more...</a>
</div>
</div>
<hr class="line-yellow">
<div class="toggle black">
<button class="btn" aria-label="prev">prev</button>
<button class="btn" aria-label="next">next</button>
</div>
</section>
<section class="blog" id="blog">
<h1 data-aos="fade-right">Blog</h1>
<h2 class="visually-hidden">description</h2>
<hr class="line">
<h3 data-aos="fade-zoom-in"
data-aos-easing="ease-in-back"
data-aos-delay="300"
data-aos-offset="0" class="m-1">
Stay up-to-date with the latest news, releases, and events in the world of music on J-MF Blog. Our blog features interviews with artists, behind-the-scenes looks at the music industry, and exclusive content you won't find anywhere else.
</h3>
<!-- <div class="left-top-data date"></div> -->
<!-- <div class="cs">+coming soon+</div> -->
<!-- <div class="right-bottom-data date"></div> -->
<!-- <video class="container" controls autoplay >
<source src="vid/Maa Fakaa & GTWY - telemost (expiremental session) 720p.mp4" type="video/mp4" />
</video> -->
<div class="blog-article-grig black">
<!-- <div class="blog-article-article">
<div style="padding:75% 0 0 0;position:relative;"><iframe src="https://player.vimeo.com/video/816028040?h=3645a6713a&badge=0&autopause=0&player_id=0&app_id=58479" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen style="position:absolute;top:0;left:0;width:100%;height:100%;" title="Maa Fakaa &amp; GTWY - telemost (expiremental session) 720p.mp4"></iframe></div><script src="https://player.vimeo.com/api/player.js"></script>
</div> -->
<div class="blog-article-article">
<script async src="https://static.medium.com/embed.js"></script><a class="m-story" href="https://medium.com/@alevoldon/ukrainian-folklore-in-electronic-music-7534b5ae68e9">Ukrainian folklore in electronic music</a>
</div>
<!-- <div class="blog-article-article">
<div style="padding:56.25% 0 0 0;position:relative;"><iframe src="https://player.vimeo.com/video/818019716?h=cf58e649e0&badge=0&autopause=0&player_id=0&app_id=58479" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen style="position:absolute;top:0;left:0;width:100%;height:100%;" title="J-MF is a music label - Days of the week"></iframe></div><script src="https://player.vimeo.com/api/player.js"></script>
</div> -->
<!-- <div class="blog-article-article">
<script async src="https://static.medium.com/embed.js"></script><a class="m-story" href="https://medium.com/@alevoldon/ukraine-and-its-debts-bedb13409ca2">Ukraine and its debts.</a>
</div> -->
<div class="blog-article-article">
<iframe width="100%" height="100%" src="https://www.youtube.com/embed/y1cUAKqpQLQ?si=2hG0OEdPjhq_O6tC&controls=0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</div>
</div>
</section>
</div>
</main>
<footer id="contacts">
<div class="container">
<section class="footer" id="footer">
<h2 class="visually-hidden">Footer</h2>
<p>
J-MF is a music label that specializes in discovering and promoting talented musicians from around the world. The JMF team believes that diversity in musical genres and styles makes the world more vibrant and interesting. The label is focused on finding new stars who can impress with their originality and uniqueness, and helps them achieve maximum success in the industry. JMF is not only a production company, but also a community of like-minded individuals who appreciate creativity and strive to unlock the potential of each musician, to help them secure a worthy place on the global stage.
</p>
<br>
<p>
We welcome any inquiries, feedback, or collaboration proposals from artists, labels, and industry professionals. Get in touch with J-MF by phone, email, or social media, and we'll be happy to connect with you. ©
2023
</p>
<ul class="social-media-list black">
<li class="social-media-item">
<a href="https://t.me/jukrainian_label">
<i class="fab fa-telegram"></i> Telegram
</a>
</li>
<li class="social-media-item">
<a href="https://github.com/ALEVOLDON">
<i class="fab fa-github"></i> GitHub
</a>
</li>
<li class="social-media-item">
<a href="https://soundcloud.com/g_t_w_y">
<i class="fab fa-soundcloud"></i> SoundCloud
</a>
</li>
</ul>
</section>
</div>
</footer>
<!-- jQuery CDN -->
<script src="js/jquery.min.js"></script>
<script src="js/owl.carousel.min.js"></script>
<!-- fontawesome -->
<!-- <script src="js/all.min.js"></script> -->
<!-- gsap js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js"></script>
<!-- animation aos -->
<script src="https://unpkg.com/[email protected]/dist/aos.js"></script>
<!-- main js -->
<script src="js/main.js"></script>
</body>
</html>