/
index.html
324 lines (286 loc) · 13.6 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
<!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">
<link rel="stylesheet" href="style.css">
<!-- font awesome CDN -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous">
<title>Document</title>
</head>
<body>
<nav>
<div class="nav-content">
<ul class="nav-links1">
<div class="burgers-container">
<div class="burger1">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
<div class="line4"></div>
</div>
<div class="burger2">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
<div class="line4"></div>
</div>
</div>
<li><a href="#">Live</a></li>
<li><a href="#">Push</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Shop</a></li>
<li><a href="#">Packs</a></li>
<li><a href="#">Help</a></li>
<li><a href="#"><span>More +</span></a></li>
</ul>
<ul class="nav-links2">
<li><a href="#"><span>Try Live for free</span></a></li>
<li><a href="#">Account</a></li>
<li><a href="#">Log out</a></li>
</ul>
</div>
</nav>
<div class="nav2">
<ul>
<li><a href="#"><span>About</span></a></li>
<li><a href="#">Jobs</a></li>
<li><a href="#">Apprenticeship</a></li>
</ul>
</div>
<header>
<img src="./images/ableton-headerphoto.jpg" alt="">
<div>
<h1>Ableton</h1>
</div>
</header>
<div class="text-section">
<h3>We make <span>Live, Push</span> and <span>Link</span> --
unique software and hardware for music creation and performance. With these products,
our community of users creates amazing things.</h3>
<p>Ableton was founded in 1999 and released the first version of Live in 2001.
Our products are used by a community of dedicated musicians, sound designers, and
artists from across the world.
</p>
</div>
<div class="yellow-photo-section">
<div class="yellow-box"></div>
<div class="yellow-imgs-container">
<div class="yellow-photo1">
<img src="./images/ableton-yellowSection-photo1.jpg" alt="">
</div>
<div class="yellow-photo2">
<img class="yellow-photo2" src="./images/ableton-yellowSection-photo2.jpg" alt="">
</div>
</div>
</div>
<div class="text-section">
<h3>Making music isn't easy. It takes time, effort, and learning.
But when you're in the flow, it's incredibly rewarding.
</h3>
<p>We feel the same way about making Ableton products. The driving force
behind Ableton is our passion for what we make, and the people we make it for.
</p>
</div>
<div class="video">
<center><video autoplay muted loop>
<source src="https://storage.coverr.co/videos/iPIHIgRNMtOrjigrnRZJzFyhh9chvGTa?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhcHBJZCI6Ijg3NjdFMzIzRjlGQzEzN0E4QTAyIiwiaWF0IjoxNjQwNjQyNDU4fQ.yqYRrxXuI0VZKHflLa8V8Q6Sw0qUxEVfViPt4IucDN8" type="video/mp4">
<source src="https://storage.coverr.co/videos/iPIHIgRNMtOrjigrnRZJzFyhh9chvGTa?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhcHBJZCI6Ijg3NjdFMzIzRjlGQzEzN0E4QTAyIiwiaWF0IjoxNjQwNjQyNDU4fQ.yqYRrxXuI0VZKHflLa8V8Q6Sw0qUxEVfViPt4IucDN8" type="video/ogg">
Your browser does not support the video tag.
</video></center>
</div>
<div class="vid-description">
<p>Why Ableton - Juanpe Bolivar</p>
</div>
<div class="text-section">
<h3>We are more than 350 people from 30 different countries
divided between our headquarters in Berlin and our offices in
Los Angeles and Tokyo.
</h3>
<p>
Most of us are active musicians, producers, and DJs, and many of
us Live and Push every day. We come from a wide range of cultural
and professional backgrounds. Some of us have PhDs, some are self-taught,
and most of us are somewhere in between. What connects us is the shared belief
that each of us has the skills and knowledge to contribute to something big:
helping to shape the future of music culture.
</p>
</div>
<div class="green-photo-section">
<div class="green-box"></div>
<div class="greenbox-photos">
<div class="stacked-photos">
<img src="./images/green-photoSection (2).jpg" alt="" id="greenimg1">
<img src="./images/green-photoSection2.jpg" alt="" id="greenimg2">
</div>
<div class="green-rightPhoto">
<img src="./images/green-photoSection.jpg" alt="" id="greenimg3">
</div>
</div>
</div>
<div class="text-section">
<h3>We believe it takes focus to create truly understanding instruments.
We only work on a few products and we strive to make them great.
</h3>
<p>
Rather than having a one-size-fits-all process, we try to give
our people what they need to work their magic and grow. We've learned
that acheiving the best results comes from building
teams that are richly diverse, and thus able to explore problems from a wider
set of perspectives. We don't always agree with each other, but opion and
debate are valued and opnely encouraged.
</p>
</div>
<div class="second-big-photo">
<img src="./images/second-big photo.jpg" alt="">
</div>
<div class="text-section">
<h3>We're passionate about what we do, but we're equally passionate about improving who we are.</h3>
<p>
We work hard to foster an environment where people can grow both personally and professionally,
and we strive to create a wealth of opportunities to learn from and with each other. Alongside
an internal training program, employees are actively supported in acquiring new knowledge and
skills, and coached on applying these in their daily work. In addition, staff-organized development
and music salons are a chance to discuss new technologies, production techniques and best practices.
</p>
</div>
<div class="purple-photo-section">
<div class="purple-box"></div>
<div class="purple-photo-container">
<div class="purple-photo1">
<img src="./images/classroomPic1.jpg" alt="">
</div>
<div class="purple-photo2">
<img src="./images/classroomPic2.jpg" alt="">
</div>
</div>
</div>
<div class="text-section">
<h3>We want our employees to love it here. Since we're looking for exceptional talent from around the
world, we will do everything we can to make your transition as easy as possible.</h3>
<p>
If you're joining us in Berlin, we'll help with relocation and paperwork. We'll even provide
you with free German or English lessons. Plus, working in Germany means you can expect comprehensive
health insurance for you and your family, as well as generous maternity and paternity leave. Office
hours are flexible, but it's not all work; we have several company and team outings throughout the
year as well as a variety of fun, informal small-group activities.
</p>
</div>
<div class="blue-photo-section">
<img src="./images/blue-sectionPhoto.jpg" alt="">
<div class="blue-box">
<h2>
We're really proud of the work we've done so far. But there's so much more to come. If you'd like to
be a part of it, please join us. <br>
<br>
<a href="#"><span>See latest jobs ></span></a>
</h2>
</div>
</div>
<footer>
<h1>Ableton</h1>
<div class="grid-container">
<div class="gridbox1">
<ul>
<li><a href="#">Register Live or Push ></a></li>
<li><a href="#">About Ableton ></a></li>
<li><a href="#">Jobs ></a></li>
</ul>
<div class="socials-container">
<div class="facebook"><i class="fab fa-facebook"></i></div>
<div class="twitter"><i class="fab fa-twitter"></i></div>
<div class="youtube"><i class="fab fa-youtube"></i></div>
<div class="instagram"><i class="fab fa-instagram"></i></div>
</div>
</div>
<div class="gridbox2">
<ul>
<li><h3>Education</h3></li>
<li><a href="#">Offers for students and teachers ></a></li>
<li><a href="#">Ableton for the Classroom ></a></li>
<li><a href="#">Ableton for Colleges and Universities ></a></li>
</ul>
</div>
<div class="gridbox3">
<ul>
<li><h3>Sign up to our newsletter</h3></li>
<li class="enter-email">Enter your email address to stay up to date with the latest offers,
tutorials, downloads, surveys and more.
</li>
<br>
<div class="email-signup-flex">
<input type="text" placeholder="Email Address" autocomplete="off">
<div class="signup-btn">
<button type="submit">Sign up</button>
</div>
</div>
</ul>
</div>
<div class="gridbox4">
<ul>
<li><h3>Community</h3></li>
<li><a href="#">Find Ableton User Groups ></a></li>
<li><a href="#">Find Certified Training ></a></li>
<li><a href="#">Become a Certified Trainer ></a></li>
</ul>
</div>
<div class="gridbox5">
<ul>
<li><h3>Distributors</h3></li>
<li><a href="#">Find Distributors ></a></li>
<li><a href="#">Try Push in-store ></a></li>
</ul>
</div>
<div class="gridbox6">
<ul>
<li><h3>Language and Location</h3></li>
<br>
<select name="" id="language-select">
<option value="English">English</option>
<option value="Deutsch">Deutsch</option>
<option value="Francais">Francais</option>
</select>
<select name="" id="location-select">
<option value="United States">United States</option>
<option value="United Kingdom">United Kingdom</option>
<option value="France">France</option>
<option value="Germany">Germany</option>
<option value="Canada">Canada</option>
<option value="Japan">Japan</option>
<option value="China">China</option>
</select>
</ul>
</div>
</div>
<div class="bottom-flex">
<ul class="links">
<li><a href="#">Contact Us</a></li>
<li><a href="#">Press Resources</a></li>
<li><a href="#">Legal Info</a></li>
<li><a href="#">Privacy Policy</a></li>
<li><a href="#">Cookie Settings</a></li>
<li><a href="#">Imprint</a></li>
</ul>
<ul class="berlin">
<li>Made in Berlin</li>
<div class="burgers-container">
<div class="burger1">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
<div class="line4"></div>
</div>
<div class="burger2">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
<div class="line4"></div>
</div>
</div>
</ul>
</div>
</footer>
<script src="app.js"></script>
</body>
</html>