hackerloop.github.io/index.html at master · HackerLoop/hackerloop.github.io · GitHub

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
<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="robots" content="index, follow">
        <title>Interactive Production &amp; Creative Technology | Hackerloop</title>
        <meta name="description" content="Hackerloop is a Paris creative technology studio. We build interactive live experiences, custom software and connected installations for brands and agencies." />
        <link rel="canonical" href="https://hackerloop.com/">
        <script type="application/ld+json">
        {
          "@context": "https://schema.org",
          "@graph": [
            {
              "@type": "Organization",
              "@id": "https://hackerloop.com/#organization",
              "name": "Hackerloop",
              "url": "https://hackerloop.com/",
              "logo": "https://hackerloop.com/img/logo-hackerloop-black.png",
              "description": "Interactive production, creative technology and custom software for brands, agencies and publishers.",
              "email": "hi@hackerloop.com",
              "address": {
                "@type": "PostalAddress",
                "addressLocality": "Paris",
                "addressCountry": "FR"
              }
            },
            {
              "@type": "WebSite",
              "@id": "https://hackerloop.com/#website",
              "url": "https://hackerloop.com/",
              "name": "Hackerloop",
              "inLanguage": "en",
              "publisher": { "@id": "https://hackerloop.com/#organization" }
            }
          ]
        }
        </script>
        <meta property="og:type" content="website">
        <meta property="og:site_name" content="Hackerloop">
        <meta property="og:title" content="Interactive production &amp; creative technology | Hackerloop">
        <meta property="og:description" content="Live experiences people can take part in. Creative concepts, custom software and connected installations from our Paris studio.">
        <meta property="og:url" content="https://hackerloop.com/">
        <meta property="og:image" content="https://hackerloop.com/img/logo-hackerloop-black.png">
        <meta property="og:image:alt" content="Hackerloop">
        <meta name="twitter:card" content="summary">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
        <link href="css/flickity.css" rel="stylesheet" type="text/css" media="all" />
        <link href="css/stack-interface.css" rel="stylesheet" type="text/css" media="all" />
        <link href="css/theme.css" rel="stylesheet" type="text/css" media="all" />
        <link href="css/custom.css" rel="stylesheet" type="text/css" media="all" />
        <link href="https://fonts.googleapis.com/css?family=Open+Sans:200,300,400,400i,500,600,700&amp;display=swap" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css?family=Raleway:300,400,500&amp;display=swap" rel="stylesheet" type="text/css">
        <link href="css/font-raleway.css" rel="stylesheet" type="text/css">

    </head>
    <body data-smooth-scroll-offset="77">
        <div class="nav-container"> </div>
        <div class="main-container">
            <section class="imagebg videobg text-center height-80" data-overlay="3">
                <video autoplay loop muted playsinline poster="img/video-bg.jpg">
              		<source src="video/video.mp4" type="video/mp4">
              		<!-- <source src="video/video.ogv" type="video/ogv">
                  <source src="video/video.webm" type="video/webm"> -->
              	</video>
                <div class="background-image-holder"> <img alt="image" src="img/video-bg.jpg"> </div>
                <div class="container pos-vertical-center">
                    <div class="row">
                        <div class="col-md-8 col-lg-7">
                          <img alt="Hackerloop" src="img/logo-hackerloop-black.png">

                              <div class="modal-instance">
                                  <div class="btn type--uppercase modal-trigger">
                                    <span class="btn__text">
                                        Watch our showreel
                                    </span>
                                  </div>
                                  <div class="modal-container">
                                      <div class="modal-content bg-dark" data-width="60%" data-height="60%"> <iframe data-src="https://www.youtube.com/embed/zA_PpqRsTJM?autoplay=1" allowfullscreen="allowfullscreen"></iframe> </div>
                                  </div>
                              </div>

                        </div>
                    </div>
                </div>
              </div>
            </section>
            <section class="text-center bg--secondary space--xs">
                <div class="container">
                    <div class="row">
                        <div class="col-md-10 col-lg-8">
                            <h2>INTERACTIVE LIVE PRODUCTION STUDIO BASED IN PARIS</h2>
                        </div>
                    </div>
                </div>
            </section>
            <section class="switchable switchable--switch space--xxs">
                <div class="container">
                    <div class="row justify-content-between">
                        <div class="col-md-8 col-lg-7">
                            <br>
                            <p class="lead">Thanks to our expertise and passion for gaming and esports, we create crazy content and unique interactive live experiences to reach the purest forms of engagement.&nbsp;<br><br>We make sure to create genuinely enjoyable experiences for both the streamer and his viewers, while keeping the brand image relevant, consistent and credible in the community.<br></p>
                            <p class="lead">By enhancing Twitch’s features to craft tools tailored to their editorial strategy, we craft innovative campaigns and solutions&nbsp;in partnership with agencies, publishers and brands.<br><br> </p>
                        </div>
                        <div class="col-md-4 col-lg-3">
                            <div class="text-block">
                                <h5>Twitch experts</h5>
                                <p>Extensions &amp; chatbots<br>Interactive overlays<br>Channels points<br>TwitchPlays&nbsp;<br></p>
                            </div>
                            <div class="text-block">
                                <h5>Strategy &amp; Storytelling</h5>
                                <p>Gaming &amp; Esport<br>Live content production<br>Interactive experiences</p>
                            </div>
                            <div class="text-block">
                                <h5>Productizing</h5>
                                <p>Hardware &amp; Electronics<br>Interactive scenography<br>Artificial Intelligence</p>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
            <section class="space--sm">
                <div class="container">
                    <div class="row">
                        <div class="col">
                            <div class="slider slider--inline-arrows slider--arrows-hover text-center" data-arrows="true">
                                <ul class="slides">
                                    <li class="col-md-3 col-6"> <img alt="Red Bull" class="image--xs" src="img/RedBull-logo.png"> </li>
                                    <li class="col-md-3 col-6"> <img alt="Fnatic" class="image--xs" src="img/Fnatic-logo.png"> </li>
                                    <li class="col-md-3 col-6"> <img alt="TikTok" class="image--xs" src="img/TikTok-logo.png"> </li>
                                    <li class="col-md-3 col-6"> <img alt="Buzzman" class="image--xs" src="img/Buzzman-logo.png"> </li>
                                    <li class="col-md-3 col-6"> <img alt="Ubisoft" class="image--xs" src="img/Ubisoft-logo.png"> </li>
                                    <li class="col-md-3 col-6"> <img alt="Une agence americaine" class="image--xs" src="img/UAA-logo.png"> </li>
                                    <li class="col-md-3 col-6"> <img alt="Brossard" class="image--xs" src="img/brossard-logo.png"> </li>
                                    <li class="col-md-3 col-6"> <img alt="WNP agency" class="image--xs" src="img/WNP-logo.png"> </li>
                                    <li class="col-md-3 col-6"> <img alt="League of Legends Worlds 2019" class="image--xs" src="img/Worlds2019-logo.png"> </li>
                                    <li class="col-md-3 col-6"> <img alt="Divimove" class="image--xs" src="img/Divimove-logo.png"> </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
            <section class="text-center imagebg space--sm" data-gradient-bg="#4876BD,#5448BD,#8F48BD,#BD48B1">
                <div class="container">
                    <div class="row">
                        <div class="col-md-8 col-lg-6">
                            <div class="cta">

                                <h2>Let's get in touch</h2>
                                <p class="lead">hi@hackerloop.com</p>

                            </div>
                        </div>
                    </div>
                </div>
            </section>
            <footer class="text-center space--xs footer-5">
                <div class="container">
                    <div class="row">
                        <div class="col-sm-12">

                            <div> <span class="type--fine-print">Hackerloop is a creative studio specialized in interactive live experiences<br> on Twitch, software development and productizing.</span></div>
                            <div> <span class="type--fine-print">© <span class="update-year"></span> Hackerloop</span> </div>
                        </div>
                    </div>
                </div>
            </footer>
        </div>
        <script src="js/jquery-3.1.1.min.js"></script>
        <script src="js/flickity.min.js"></script>
        <script src="js/parallax.js"></script>
        <script src="js/granim.min.js"></script>
        <script src="js/smooth-scroll.min.js"></script>
        <script src="js/scripts.js"></script>
        <script>
            (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','https://www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-41347670-1', 'auto'); ga('send', 'pageview');
        </script>

    </body>

</html>